jquery属性的操作

时间：2024-12-27 11:03:20

　　HTML示例代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

</head>

<body>

    <!--HTML区域-->

    <h1>第一个标题</h1>

    <img src="57eb.jpg">

    <div class="nav-2014">

        <div class="w">

            <div class="w-spacer"></div>

            <div class="categorys">

                <div class="dt">家用电器分类</div>

                <div class="dp">家用电器价格</div>

                <img src="rB3.jpg">

            </div>

            <span class="hr">11</span>

            <div class="navitems-2014 chr1 chr2">

                <div id="treasure"></div>

                <span class="clr clr1"></span>

                <span class="chr"></span>

                男：<input type="checkbox" value="nan">

                女:<input type="checkbox"  value="nv">

                <input type="text" value="2">

                <input type="text" value="3">

            </div>

            <ul>

                <li>第一行</li>

                <li>第二行</li>

                <li>第三行</li>

                <li>第四行</li>

            </ul>

        </div>

    </div>

    <h2>第二个标题</h2>

    <p>第一段</p>

    <p>第二段</p>

</body>

</html>

　　

　　属性：

　　attr(n|k,v|p|f):设置或返回被选属性的值

　　　　name:返回所有所选属性的值

　　　　key,value:以键值对的方式设置所有所选属性的值

　　　　properties:以多个键值对的方式同时设置多个所选属性的值

　　　　key,func:以函数返回的方式设置属性名，属性值

    <script src="jquery-3.1.0.js"></script>

    <script>

//        name:返回查找的属性的所有值

        $("img").attr('src')

//        key,value:设置查找的所有属性的值

        $("img").attr('src','kong.jpg')

//        properties:同时设置多个属性的值

        $("img").attr({'src':'test.jpg','alt':'Test_img'})

//        使用函数的方法设置属性的值

        $("img").attr("filepath",function(){return this.src})

    </script>

　　removeAttr(name):删除所选的属性名

    <script src="jquery-3.1.0.js"></script>

    <script>

        $("img").removeAttr("src")

    </script>

　　prop(n|k,v|p|f):获取匹配的元素集中的第一个属性值

　　name:获取匹配的元素集中第一个属性值

　　k,v:以键值对的方式设置所有属性的值

　　properties:以多个键值对的方式设置所有属性的值

    <script src="jquery-3.1.0.js"></script>

    <script>

//        name:选中返回true,未选中返回false

        $("input[type=checkbox]").prop("checked")
//        properties 禁用所有

        $("input[type=checkbox]").prop({"disabled":true})
//        k,v 取消禁用

        $("input[type=checkbox]").prop("disabled",false)
//     选中所有

        $("input[type=checkbox]").prop("checked",true)
//     取消所有

        $("input[type=checkbox]").prop("checked",fasle)
</script>

　　removePrope(name) 删除由prope方法设置的属性集，别的方法设置的属性集它删除不了

    <script src="jquery-3.1.0.js"></script>

    <script>

        var $para = $("p");

        $para.prop("luggageCode",1234);

        $para.append("The secret luggage code is: ",String($para.prop("luggageCode")), ". ")

        $para.removeProp("luggageCode")

        $para.append("now secret luggage code is: ",String($para.prop("luggageCode")), ". ")

    </script>

　　class类

　　addClass(class|fn):为每个匹配的元素添加指定的类名，多个类名以空格隔开

    <script src="jquery-3.1.0.js"></script>

    <script>

//        addClass:

        $("p").addClass("selected select2")

        $("ul li:last").addClass(function(){

            return 'item-'+$(this).index()

        })

    </script>

　　removeClass(class|fn):从所匹配的元素中删除所有或指定的类

    <script src="jquery-3.1.0.js"></script>

    <script>

//        从匹配的元素中删除指定的类

        $("span").removeClass("clr")

//        从匹配的元素中删除所有的类

        $("span").removeClass()

//        删除最后一个元素上与前一个重复的类

        $("li:last").removeClass(function(){

            return $(this).prev().attr('class')

        })

    </script>

　　HTML：代码/文本/值

　　html(val|fn):取得第一个匹配元素的html内容

    <script src="jquery-3.1.0.js"></script>

    <script>

//        取得第一个匹配元素的html内容

        $("p").html()

//        设置所有p元素的html内容

        $("p").html("hellow <b>world</b>!")

    </script>

　　text(val|fn):取得所有匹配元素的内容，结果是由所有匹配元素内容组合起来的文本，对html和xml都有效。

    <script src="jquery-3.1.0.js"></script>

    <script>

//        取得所有元素的文本内容

        $("p").text()

//        设置所有p元素的文本内容

        $("p").text("Hellow World..")

    </script>

　　val(val|fn|arr)：获得匹配元素的当前值，当为slelect或多选框时，传入数组数据

    <script src="jquery-3.1.0.js"></script>

    <script>

//        取得了第一个input的当前值

        $("input").val()

//        设置所有input元素的当前值为hello

        $("input").val("hello")

    </script>

　　

　　

相关文章