JQuery操作与遍历元素并设置其属性、样式和内容
作者:農碼一生
一、操作属性
属性分类
固有属性
href、src.....
共有属性
id,class,name......
自定义属性
abc= '1234'
操作属性的方法
区别
1.prop不能操作自定义属性
2.prop获取Boolean类型的属性是 true/false
获取属性值
attr(属性名称) 操作 checkbox 时, 获取指定的属性值,选中返回 checked,没有选中返回 undefined
op(属性名称) 获取具有true和false两个属性的属性值
设置属性值
attr(属性名称,属性值);
prop(属性名称,属性值);
移除属性
removeAttr("属性")
<html> <head> <meta charset="utf-8"> <title></title> <script src="js/jquery-3.5.1.min.js" type="text/javascript" charset="utf-8"></script> </head> <body> <form action="" id="myform"> <input type="checkbox" id="ch1" name="ch1" abc='123' checked="checked"/> aa <input type="checkbox" id="ch2" name="ch2" abc='456'/> bb </form> <script type="text/javascript"> var ch1 = $("#ch1"); var ch2 = $("#ch2"); //获取固有属性 console.log(ch1.attr('type')); console.log(ch1.prop('type')); //获取共有属性 console.log(ch1.attr('name')); console.log(ch2.prop('name')); //获取自定义属性 prop不能操作自定义属性 console.log(ch1.attr('abc')); console.log(ch2.prop('abc'));//undefined //获取boolean类型的属性 console.log(ch1.attr('checked'));//checked console.log(ch1.prop('checked'));//true //设置boolean类型属性 ch1.attr("checked",0); ch2.attr("checked","checked"); //效果相同 ch1.prop("checked",false); ch2.prop("checked",true); //设置自定义属性 ch1.attr("abc",'999'); //prop不能操作自定义属性 ch2.prop("abc",'999'); //---设置无效 //设置共有属性 ch1.attr("name",'ab1'); ch2.prop("name",'ab1'); //移除属性 ch1.removeAttr("checked");//boolen类型 ch1.removeAttr("abc");//自定义属性 ch1.removeAttr("name");//共有属性 ch1.removeAttr("type");//独有属性 </script> </body> </html>
二、操作样式
- attr(“class”) 获取class属性的值,即样式名称
- attr(“class”,”样式名”) 修改class属性的值,修改样式
- addClass(“样式名”) 添加样式名称
- css() 添加具体的样式 相当于直接设置行内style
- removeClass(class) 移除样式名称
<html> <head> <meta charset="utf-8"> <title></title> <script src="js/jquery-3.5.1.min.js" type="text/javascript" charset="utf-8"></script> <style type="text/css"> div{ padding: 8px; width: 180px; } .blue{ background: blue; } .larger{ font-size: 30px; } .green { background : green; } </style> </head> <body> <h3>css()方法设置元素样式</h3> <div id="conBlue" class="blue larger">天蓝色</div> <div id="conRed">大红色</div> <div id="remove" class="blue larger">天蓝色</div> <script type="text/javascript"> //获取class属性的值,即样式名称 var clas = $("#conBlue").attr("class"); console.log(clas); //修改class属性的值,修改样式 $("#conBlue").attr("class","green");//把字体的大小样式和颜色均覆盖 //addClass(“样式名”) 添加样式名称 $("#conRed").addClass("larger"); //css() $("#conRed").css("color","red"); //removeClass(class) 移除样式名称 $("#remove").removeClass("larger"); </script> </body> </html>
三、操作元素内容
html()
获取或设置元素的内容,包含html内容 可以识别纯文本内容
取值:html()
赋值:html("html,内容")
text()
获取或设置元素的内容,不包含html内容 只能识别纯文本内容
取值:text()
赋值:text("html,内容")
val()
获取或设置元素的值
取值:val()
赋值:val(‘值’)
<html> <head> <meta charset="utf-8"> <title></title> <script src="js/jquery-3.5.1.min.js" type="text/javascript" charset="utf-8"></script> </head> <body> <h3><span>html()和text()方法设置元素内容</span></h3> <div id="html"></div> <div id="text"></div> <input type="text" name="uname" value="oop" /> <script type="text/javascript"> //获取元素的内容 var ht = $("h3").html(); var te = $("h3").text(); console.log(ht); console.log(te); //设置元素内容 $("#html").html("<b>加粗效果</b>"); $("#text").text("<b>text加粗效果</b>"); //val() 获取元素值 var input = $('[type="text"]').val(); console.log(input); //val() 设置元素值 $('[type="text"]').val("jquery"); </script> </body> </html>
四、创建和添加元素
prepend(content)
在被选元素内部的开头插入元素或内容,被追加的 content 参数,可以是字符、HTML 元素标记。
$(content).prependTo(selector)
把 content 元素或内容加入 selector 元素开头
append(content)
在被选元素内部的结尾插入元素或内容,被追加的 content 参数,可以是字符、HTML 元素标记。
$(content).appendTo(selector)
把 content元素或内容插入selector 元素内,默认是在尾部
before()
在元素前插入指定的元素或内容:$(selector).before(content)
after()
在元素后插入指定的元素或内容:$(selector).after(content)
<html> <head> <meta charset="utf-8"> <title></title> <script src="js/jquery-3.5.1.min.js" type="text/javascript" charset="utf-8"></script> <style type="text/css"> div { margin: 10px 0px; } span{ color: white; padding: 8px } .red{ background-color: red; } .blue{ background-color: blue; } .green{ background-color: green; } </style> </head> <body> <span class="red">男神</span> <span class="blue">偶像</span> <div class="green"> <span >小鲜肉</span> </div> <script type="text/javascript"> //创建元素 var newP = $("<span>段落标签</span>"); console.log(newP); //添加元素 prepend(content) 内部前追加 //获取参考位置的元素 var str = "<span>PDD</span>"; $('.green').prepend(newP); $('.green').prepend(str); //prependTo(); 被内部前追加 var str2 = "<span>麻辣香锅</span>"; $(str2).prependTo($(".green")); //append() 内部后追加 $('.green').append("<span >周杰伦</span>"); //appendTo(); 被内部后追加 $("<span >林俊杰</span>").appendTo($('.green')); //before 同级前追加 $(".red").before("<span style='color:black'>薛之谦</span>"); //after 同级后追加 $(".blue").after("<span style='color:black'>李荣浩</span>"); </script> </body> </html>
五、删除元素
remove()
删除所选元素或指定的子元素,包括整个标签和内容一起删
empty()
清空所选元素的内容
<html> <head> <meta charset="utf-8"> <title></title> <script src="js/jquery-3.5.1.min.js" type="text/javascript" charset="utf-8"></script> <style type="text/css"> span{ color: white; padding: 8px; margin: 5px; float: left; } .green{ background-color: green; } .blue{ background-color: blue; } </style> </head> <body> <h3>删除元素</h3> <span class="green">jquery<a>删除</a></span> <span class="blue">javase</span> <span class="green">http协议</span> <span class="blue">servlet</span> <script type="text/javascript"> //删除 //$(".green").remove(); //清空 $(".green").empty(); </script> </body> </html>
六、遍历元素
格式:
$("值").each(function(index,element){
});
<html> <head> <meta charset="utf-8"> <title></title> </head> <body> <style type="text/css"> span{ color: white; padding: 8px; margin: 5px; float: left; } .green{ background-color: green; } .blue{ background-color: blue; } </style> <script src="js/jquery-3.5.1.min.js" type="text/javascript" charset="utf-8"></script> <h3>遍历元素 each()</h3> <span class="green">jquery</span> <span class="green">javase</span> <span class="green">http协议</span> <span class="green">servlet</span> <script type="text/javascript"> $(".green").each(function(index,ele){ //当前元素的索引位置 console.log(index); //获取当前 dom 对象 console.log(ele); console.log(this); //统一设置样式需要用jquery对象 $(ele).attr("class","blue"); }); </script> </body> </html>
到此这篇关于JQuery操作和遍历元素的文章就介绍到这了。希望对大家的学习有所帮助,也希望大家多多支持脚本之家。