JQuery属性操作

    科技2022-08-12  96

    属性操作

    JQ中不能单独创建属性节点,而只能在元素节点中进行属性操作

    html标记中的属性操作: 查、增、改:jQuery(obj.attr(属性名,[属性值])) 删:jQuery(obj.removeAttr(属性名))

    元素节点的属性操作: 查、增、改:jQuery(obj.prop(属性名,[属性值])) 删:jQuery(obj.removeProp(属性名))

    因为JQ节点是一组包含多个节点的数组,所以在增、改时可以同时对多个html元素进行操作,但是查询时只会查询第一个节点的属性。

    实例

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="jquery-3.4.1.min.js"></script> </head> <style> ul{ list-style: none; } .red{ color: red; } .blue{ color: blue; } li{ padding: 5px; border:red solid; background: burlywood; } form{ line-height: 40px; } </style> <body> <h1>dom节点初识</h1> <ul id="myUl"> <li class="red">1</li> <li class="blue">2</li> <li class="red" id="Li3">3</li> <li class="blue"><a href="" title="我是链接头" id="A1">我是链接</a></li> </ul> <form action=""> 用户名:<input name="username" type="text"><br> 密码:<input name="pwd" type="password"><br> 爱好:<input name="ins" type="checkbox" value="sing">唱歌 <input name="ins" type="checkbox" value="code">编程<br> <select name="sl" id=""> <option value="">北京</option> <option value="">上海</option> <option value="">南京</option> </select><br> <p><button type="submit">提交</button></p> </form> <script> $(document).ready(function(){ //1、修改或添加标准属性和html标记中的属性值 // $("#A1").attr("href", "http://www.baidu.com"); //2、修改或添加标准属性和js标记中的属性值 // $("#A1").prop("href", "http://www.163.com"); //获取标准属性和HTML标记中属性的方法 // alert($("#A1").attr("title")); //获取标准属性和js标记中属性的方法 // alert($("#A1").prop("title")); //原生写法 // alert(document.getElementById("A1").title); //删除属性 // $("#A1").removeAttr("title"); /*$("#A1").removeProp("title"); alert(document.getElementById("A1").title);*/ //查看属性节点 alert($("li").attr("class")); }); </script> </body> </html>
    Processed: 0.014, SQL: 8