zoukankan      html  css  js  c++  java
  • 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>
    

      

      

  • 相关阅读:
    谈谈软件的开发及成长历程
    Winform开发框架之简易工作流设计
    如何快速开发树形列表和分页查询整合的WInform程序界面
    邮件代收代发功能模块的操作界面设计和阶段性总结
    基于Lumisoft.NET组件的SMTP账号登陆检测
    Winform开发的界面处理优化
    基于DevExpress开发的GridView如何实现一列显示不同的控件类型
    Winform里面的缓存使用
    分享一个Winform里面的HTML编辑控件Zeta HTML Edit Control,汉化附源码
    算法 dfs —— 将二叉树 先序遍历 转为 链表
  • 原文地址:https://www.cnblogs.com/kongzhagen/p/6196641.html
Copyright © 2011-2022 走看看