首页 > 代码库 > Jquery属性练习

Jquery属性练习

2024-07-02 01:09:21   226人阅读

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <script type="text/javascript" src="http://www.w3school.com.cn/jquery/jquery.js"></script>
    <script type="text/javascript">
        //设置(增加)name值为none5的input元素的属性id值为none5
        //展示id值为none5元素的属性name值
        var Init1 = function () {
            $("input[name=‘none5‘]").attr("id", "none5");
            alert($("#none5").attr("name"));
        }
        //移除id为none6元素的class属性
        var Init2 = function () {
            $("#none6").removeAttr("class");
        }
        //prop测试
        var Init3 = function () {
            //alert($("#none6").prop("class"));//获取属性class值
            //$("input[name=‘none5‘]").prop("id", "none5");//设置(新增)属性id值为none5
            //$("input[name=‘none5‘]").prop({ "id": "none5", "value": "none5Value" });//设置属性id为none5，value为none5Value
            $("input[name=‘none5‘]").prop("value", function () { if (1) return "kktest" });//设置属性value值为function返回的kktest
        }
        //关于attr与prop的区别参考http://blog.sina.com.cn/s/blog_655388ed01017cnc.html
        //                    参考http://www.cnblogs.com/lujiahong/articles/2289867.html
        //.prop()方法应该被用来处理boolean attributes/properties以及在html(比如：window.location)中不存在的properties。
        //其他所有的attributes(在html中你看到的那些)可以而且应该继续使用.attr()方法来进行操作。

        //prop及removeProp测试
        var Init4 = function () {
            //$("input[name=‘none3‘]").prop({ "id": "none3", "value": "testValue" });
            //$("#none3").removeProp("value");
            //以上测试属性均是html中存在的，如果适用removeProp方法，则值变为undefined.应使用removeAttr方法
            $("input[name=‘none3‘]").prop({ "test": "test1", "test3": "test3" });
            alert($("input[name=‘none3‘]").prop("test"));
            alert($("input[name=‘none3‘]").prop("test3"));
            $("input[name=‘none3‘]").removeProp("test").removeProp("test3");
        }
        //addClass与removeClass
        var Init5 = function () {
            $("#none4").addClass("cls1 cls3");
            alert($("#none4").attr("class"));
            $("#none4").removeClass("cls1");
            //$("#none4").removeClass("cls1 cls3");
            //$("#none4").removeClass();//只移除属性class的值，要移除属性使用removeAttr
            //$("#none4").removeAttr("class");
        }
        var count = 0;
        var Init6 = function () {
            $("#none4").toggleClass("cls1");
            $("#none4").click(function () {
                $(this).toggleClass("highlight", count++ % 3 == 0);
            });//根据count++ % 3 == 0值toggle类highlight
        }

        //html()设置或获取html内容
        //text()设置或获取内容
        //val()设置或获取值  注意arrayArray<String>V1.0用于 check/select 的值
        $(Init6);
    </script>
</head>
<body>
    <input name="none2" />
    <form>
        <label>Name:</label> 
        <input name="name" />
        <fieldset>
            <label>Newsletter:</label> 
            <input name="newsletter" />
        </fieldset>
    </form>
    <input class="cls1" name="none" />
    <input class="cls1" name="none5" />
    <input id="none6" class="cls1" name="none6" />
    <input name="none3" />
    <input id="none4" />
</body>
</html>

 


联系
我们