• jquery属性的操作


      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>
    

      

      

  • 相关阅读:
    Java实现 LeetCode 69 x的平方根
    Java实现 LeetCode 68 文本左右对齐
    Java实现 LeetCode 68 文本左右对齐
    Java实现 LeetCode 68 文本左右对齐
    Java实现 LeetCode 67 二进制求和
    Java实现 LeetCode 67 二进制求和
    Java实现 LeetCode 67 二进制求和
    Java实现 LeetCode 66 加一
    Java实现 LeetCode 66 加一
    CxSkinButton按钮皮肤类
  • 原文地址:https://www.cnblogs.com/kongzhagen/p/6196641.html
Copyright © 2020-2023  润新知