JQuery操作与遍历元素并设置其属性、样式和内容的方法

2023-06-30 10:06:29 721人浏览薄情痞子

摘要

本文小编为大家详细介绍“Jquery操作与遍历元素并设置其属性、样式和内容的方法”，内容详细，步骤清晰，细节处理妥当，希望这篇“JQuery操作与遍历元素并设置其属性、样式和内容的方法”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一

本文小编为大家详细介绍“Jquery操作与遍历元素并设置其属性、样式和内容的方法”，内容详细，步骤清晰，细节处理妥当，希望这篇“JQuery操作与遍历元素并设置其属性、样式和内容的方法”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。

一、操作属性

属性分类

固有属性
href、src.....
共有属性
id,class,name......
自定义属性
abc= '1234'

操作属性的方法

区别
prop不能操作自定义属性
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="ch2" name="ch2" abc='123' checked="checked"/>aa<input type="checkbox" id="ch3" name="ch3" abc='456'/>bb</form><script type="text/javascript">var ch2 =  $("#ch2");var ch3 =  $("#ch3");//获取固有属性console.log(ch2.attr('type'));console.log(ch2.prop('type'));//获取共有属性console.log(ch2.attr('name'));console.log(ch3.prop('name'));//获取自定义属性   prop不能操作自定义属性console.log(ch2.attr('abc'));console.log(ch3.prop('abc'));//undefined//获取boolean类型的属性console.log(ch2.attr('checked'));//checkedconsole.log(ch2.prop('checked'));//true//设置boolean类型属性ch2.attr("checked",0);ch3.attr("checked","checked");//效果相同ch2.prop("checked",false);ch3.prop("checked",true);//设置自定义属性ch2.attr("abc",'999');//prop不能操作自定义属性ch3.prop("abc",'999'); //---设置无效//设置共有属性ch2.attr("name",'ab1');ch3.prop("name",'ab1'); //移除属性ch2.removeAttr("checked");//boolen类型ch2.removeAttr("abc");//自定义属性ch2.removeAttr("name");//共有属性ch2.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><h4>css()方法设置元素样式</h4><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><h4><span>html()和text()方法设置元素内容</span></h4><div id="html"></div><div id="text"></div><input type="text" name="uname" value="oop" /><script type="text/javascript">//获取元素的内容var ht = $("h4").html();var te = $("h4").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><h4>删除元素</h4><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><h4>遍历元素 each()</h4><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操作与遍历元素并设置其属性、样式和内容的方法”文章已经介绍完毕，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注编程网精选频道。

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: JQuery操作与遍历元素并设置其属性、样式和内容的方法

本文链接: https://www.lsjlt.com/news/328265.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341