jQuery-对标签元素 文本操作-属性操作-文档的操作
一、对标签元素文本操作
1.1 对标签中内容的操作
// js var div1 = document.getElementById("div1"); div1.innerText div1.innerHTML //jQuery var $div1 = $("#div1"); $div1.text() $div1.html()
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html> <head> <title>文本操作</title> </head> <body> <div id="div1"> <p> 我是div1下的p段落 </p> </div> <script src="../jquery-3.3.1.js"></script> <script type="text/javascript"> // 1.文本的获取 var div1 = document.getElementById("div1"); console.log(div1.innerText); console.log(div1.innerHTML); var $div1 = $("#div1"); console.log($div1.text()); console.log($div1.html()); // 2.给元素赋值一个文本 会覆盖原来的标签和内容 div1.innerText = "哈哈"; console.log(div1.innerText); div1.innerHTML="<span>哈哈</span>" console.log(div1.innerHTML); $div1.text("呵呵") console.log(div1.innerText); $div1.html("<span>呵呵</span>") console.log(div1.innerHTML); </script> </body> </html>
1.2 对表单文本值的操作
val()// 取得第一个匹配元素的当前值 val(val)// 设置所有匹配元素的值 val([val1, val2])// 设置checkbox、select的值
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html> <head> <title>表单文本值的操作</title> </head> <body> <form> 用户名:<input type="text" name="" id="i1" value="hah "> 密码:<input type="password" name=""> <input type="radio" name="gender" value="male" checked="checked">男 <input type="radio" name="gender" value="female">女 <input type="checkbox" name="hobby" value="basket" checked="checked">篮球 <input type="checkbox" name="hobby" value="foot" checked="checked">足球 <input type="checkbox" name="hobby" value="doublecolorball">双色球 <select multiple id="#s1"> <option>1</option> <option selected="selected">2</option> <option selected="selected">3</option> <option>4</option> </select> </form> <script src="../jquery-3.3.1.js"></script> <script type="text/javascript"> console.log($("input[name='gender']")); console.log($("input[name='gender']").val()); console.log($("#i1").val()); // 获取多选的值 只会返回第一个选中的元素 console.log($("input[name='hobby']:checked").val()); // 获取多个select值 console.log($("#s1").val()); </script> </body> </html>
二、对标签元素属性操作
用于id和自定义属性:
attr(attrName)// 返回第一个匹配元素的属性值 attr(attrName, attrValue)// 为所有匹配元素设置一个属性值 attr({k1: v1, k2:v2})// 为所有匹配元素设置多个属性值 removeAttr()// 从每一个匹配的元素中删除一个属性
代码示例:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html> <head> <title>标签属性的操作</title> <style type="text/css"> </style> </head> <body> <div class="div1"> </div> <script src="../jquery-3.3.1.js"></script> <script type="text/javascript"> // 1.获取元素的属性值 console.log($(".div1").attr("class")); //div1 // 2.为元素设置一个属性值 $(".div1").attr("name","div1Style") console.log($(".div1").attr("name")); // div1Style // 3.设置多个属性值 $(".div1").attr({"k1":"v1","k2":"v2"}) console.log($(".div1").attr("k1")); console.log($(".div1").attr("k2")); // 4.删除一个属性 $(".div1").removeAttr("k2"); console.log($(".div1").attr("k2")); // undefined </script> </body> </html>
用于radio和checkbox:
prop() // 获取属性 removeProp() // 移除属性
示例:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html> <head> <title>标签属性的操作</title> <style type="text/css"> </style> </head> <body> <div class="div1"> </div> <form> <input type="radio" name="gender" value="male">男 <input type="radio" name="gender" value="female">女 <input type="checkbox" name="hobby" value="basket">篮球 <input type="checkbox" name="hobby" value="foot">足球 </form> <script src="../jquery-3.3.1.js"></script> <script type="text/javascript"> // 1.获取元素的属性值 console.log($(".div1").attr("class")); //div1 // 2.为元素设置一个属性值 $(".div1").attr("name","div1Style") console.log($(".div1").attr("name")); // div1Style // 3.设置多个属性值 $(".div1").attr({"k1":"v1","k2":"v2"}) console.log($(".div1").attr("k1")); console.log($(".div1").attr("k2")); // 4.删除一个属性 $(".div1").removeAttr("k2"); console.log($(".div1").attr("k2")); // undefined // 对于radio 和 checkbox //1.获取一个属性 console.log($("input[name='gender']").prop("value")); console.log($("input[name='hobby']").prop("value")); console.log($("input[name='gender']").prop("k1","v1")); console.log($("input[name='hobby']").prop("k2","v2")); console.log($("input[name='gender']").prop("k1")); console.log($("input[name='hobby']").prop("k2")); $("input[name='gender']").removeProp("k1") $("input[name='hobby']").removeProp("k2") console.log($("input[name='gender']").prop("k1"));// undefined console.log($("input[name='hobby']").prop("k2"));// undefined </script> </body> </html>
三、对文档的操作
由于jQuery没有创建标签的方式,只能通过DOM对象进行创建
var div = document.createElement("div") // $(div) 的方式,将DOM对象转化为jQuery对象
添加到指定元素内部的后面
$(A).append(B)// 把B追加到A $(A).appendTo(B)// 把A追加到B
添加到指定元素内部的前面
$(A).prepend(B)// 把B前置到A $(A).prependTo(B)// 把A前置到B
添加到指定元素外部的后面
$(A).after(B)// 把B放到A的后面 $(A).insertAfter(B)// 把A放到B的后面
添加到指定元素外部的前面
$(A).before(B)// 把B放到A的前面 $(A).insertBefore(B)// 把A放到B的前面
移除和清空节点
remove()// 从DOM中删除所有匹配的元素。 empty()// 删除匹配的元素集合中所有的子节点。
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html> <head> <title>文档的操作</title> </head> <body> <div class="div1"> <ul class="ul1"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> </div> <script src="../jquery-3.3.1.js"></script> <script type="text/javascript"> // 1.添加到指定元素内部的后面 // 1.首先创建一个元素,jQuery没有创建元素的方法,只能通过DOM对象 var p = document.createElement("p"); p.innerText="我是一个段落,要添加到div1的内部所有元素的后面";// $(p).text("xxxx"); $(".div1").append(p); $(".div1").append($(p)); // 2.添加到指定元素的内部的前面 var span = document.createElement("span"); $(span).text("我是一个span,要添加到div1的内部所有元素的前面"); $(".div1").prepend($(span)); // 3.添加到指定元素外部的后面 var div2 = document.createElement("div"); $(div2).text("我是div2,我放在div1的后面"); $(div2).attr("class","div2"); $(".div1").after($(div2)); // div.after 是 div2 $(div2).insertAfter($(".div1")) // 把div2 插入到 div1的后面 // 4.添加到指定元素的外部的前面 var div3 = document.createElement("div"); $(div3).text("我是div3,我放在div1的前面"); $(div3).insertBefore($(".div1")); // div3 插入到 div1 的前面 $(".div1").before($(div3));// div1的前面是div3 // 5.移除和清空元素 $(".div2").remove(); // 从DOM中删除所有匹配的元素。 删除div2 $(".div1").empty($(".ul1")); // 移除div1中的ul // 替换 // replaceWith() var a = document.createElement("a"); a.innerText="百度一下"; $(".ul1").replaceWith($(a)) // 所有的 类名为 ul1的标签都会被a替换 //replaceAll() $(a).replaceAll($(".ul1")); // 使用a 替换所有的 类名为ul1 的标签 </script> </body> </html>
克隆(clone)
<!DOCTYPE html> <html> <head> <title>克隆</title> </head> <body> <input type="button" name="" id="btn" value="克隆"/> <script src="../jquery-3.3.1.js"></script> <script type="text/javascript"> $("#btn").on("click",function() { // body... $(this).clone(true).insertAfter(this); }) </script> </body> </html>