主要内容：
1、jQuery属性操作
2、jQuery文档操作
一、jQuery属性操作
1、什么是jQuery的属性操作？
jQuery的属性操作模块包括四个部分：html属性操作，dom属性操作，类样式操作和值操作。
（1）html 属性操作
对html文档中的属性进行读取，设置和移除操作。例如：attr(),removeAttr().
(2) DOM属性操作
对DOM元素的属性进行读取，设置和移除操作。例如：prop(),removeProp().
(3) 类样式操作
对DOM属性className进行添加，移除操作。例如：addClass()，removeClass(),toggleClass().
(4) 值操作
对DOM属性value进行读取和设置操作。例如：html(),text(),val().
2、html属性操作实例解析
所谓html属性操作，更直白地说就是获取页面标签,l例如：attr()、removeAttr()等。
实例一：attr() --- 设置属性值或者被选中元素的属性值
$(document).ready(function(){ ????// attr() 设置一个属性值的时，只是获取值 ???var id = $("div").attr("id"); ???console.log(id); ???????$("button").click(function(){ ???????$("#box p").text($("#box").attr("id")); ??// attr()如果设置两个值，表示设置属性 ???????// 1、设置一个值，比如设置div的class为box2 ???????$("#box").attr("class","box2"); ???????// 2、设置多个值时，使用对象存储，参数为对象，键值对存储（如果设置多个类名，不能使用attr()） ???????$("#box").attr({"class":“cc”,name:"匆匆"});})}) ???完整代码：
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>jQuery的属性操作</title></head><body> ???<div id="box" class="foo"> ???????<p>hello，暮光微凉...</p> ???</div> ???<span>我是一个span标签</span> ???<button class="btn">点我</button> ???<div id="box2"> ???????<p>hello，everyone</p> ???????<button id="btn2">Get</button> ???</div></body><script src="../jquery-3.2.1.js"></script><script type="text/javascript"> ???$(document).ready(function () { ????//HTML属性操作(即获取页面标签) ???????// attr()：设置属性值或者被选元素的属性值 ???????// 获取值：attr() 设置一个属性值的时候，只是获取值 ???????var id = $(‘div‘).attr(‘id‘); ???????console.log(id); ???????$(‘button‘).click(function () { ????????????$(‘#box p‘).text($(‘#box‘).attr(‘id‘)); ???????}); ???????// attr()如果设置两个值，表示设置属性 ???????????// 1、设置一个值，设置div的class为box2 ???????$(‘div‘).attr(‘class‘,‘box2‘); ???????????// 2、设置多个值时，使用对象存储，参数为对象，键值对存储；如果设置多个类名，不能使用attr() ???????$(‘#box‘).attr({‘class‘:‘foo2‘,name:‘匆匆‘}); ???})</script></html>实例二：removeAttr() --- 从匹配的元素中删除一个属性
$(document).ready(function(){ ???// 删除一个属性 ???$("#box").removeAttr("class"); ???????// 同时删除多个属性时，中间以空格隔开 ???$("#box").removeAttr("class name"); ??// 查看是否删除 ???console.log($("#box").attr("class")); // underfined}) ???完整代码：
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>jQuery的属性操作</title></head><body> ???<div id="box" class="foo"> ???????<p>hello，暮光微凉...</p> ???</div></body><script src="../jquery-3.2.1.js"></script><script type="text/javascript"> ???$(document).ready(function () { ???????$(‘#box‘).removeAttr(‘class‘); ???????$(‘#box‘).removeAttr(‘class name‘); ??// 同时删除 class和name ???????console.log($(‘#box‘).attr(‘class‘)); // undefined ???})</script></html>3、DOM属性操作
对DOM元素的属性进行读取，设置和移除操作。例如：prop()、removeProp()等。
实例一：porp() --- 获取匹配的元素集中的第一个元素的属性值，它是对当前匹配到的DOM对象设置属性。
$(document).ready(function(){ ???// 获取属性值 ???console.log($("li").prop("class")); // one ???????// 设置值 ???$("li:eq(0)").prop({"user":"cc","name2":"cc2"}); // li:eq(0)表示获取到第一个li标签 ???//$("li").first().prop({"user":"cc","name2":"cc2"}); // .first()作用同上 ??// 查看设置的属性值 ???console.log($("li:eq(0)"))// console.log($(‘li‘).first()); // 同上}) ???完整代码：
<!DOCYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>jQuery的属性操作</title></head><body> ???<div id="box" class="foo"> ???????<p>hello，暮光微凉...</p> ???</div> ???????<ul> ???????<li class="one">暮光微凉1号</li> ???????<li class="two">暮光微凉2号</li> ???????<li class="three">暮光微凉3号</li> ???????<li class="four">暮光微凉4号</li> ???</ul></body><script src="../jquery-3.2.1.js"></script><script type="text/javascript"> ???$(document).ready(function () { ????// DOM属性操作 ???????// prop()：获取在匹配的元素集中的第一个元素的属性值.它是对当前匹配到的dom对象设置属性。 ???????console.log($(‘li‘).prop(‘class‘)); // one ???????//设置值 ??????$(‘li:eq(0)‘).prop({‘user‘:‘cc‘,‘name2‘:‘cc2‘}); ???????console.log($("li:eq(0)")); ???????$(‘li‘).first().prop({‘user‘:‘cc‘,‘name2‘:‘cc2‘}); ???????console.log($(‘li‘).first()); ???})</script></html>实例二：removeProp() --- 删除由.Prop() 方法设置的属性值
$(document).ready(function(){ ???// removeProp() 删除.prop()方法设置的属性集 ???// 先查看一下 ??console.log($("li:eq(0)").prop("user")) ; // cc ??$("li:eq(0)").removeProp("user"); ??console.log($("li").first().prop("user")); // underfined})完整代码：
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>jQuery的属性操作</title></head><body> ???<div id="box" class="foo"> ???????<p>hello，暮光微凉...</p> ???</div> ???????<ul> ???????<li class="one">暮光微凉1号</li> ???????<li class="two">暮光微凉2号</li> ???????<li class="three">暮光微凉3号</li> ???????<li class="four">暮光微凉4号</li> ???</ul></body><script src="../jquery-3.2.1.js"></script><script type="text/javascript"> ???$(document).ready(function () { ???????// removeAttr():从每一个匹配的元素中删除一个属性 ???????$(‘#box‘).removeAttr(‘class‘); ???????$(‘#box‘).removeAttr(‘class name‘); ??// 同时删除 class和name</script></html>4、类样式操作
类样式操作是对DOM属性className进行添加，移除操作。例如：addClasss()、removeClass()、toggleClass()。
实例：
?// 类样式操作： ???????// addClass() removeClass() ???????$(‘span‘).addClass(‘span2 span3‘); // 可同时添加多个或删除多个类标签 ???????$(‘span‘).removeClass(‘span3‘); ???????var isBig = true; ???????$(‘span‘).click(function(){ ???????????if(isBig){ ???????????????$(this).addClass(‘active‘); ?// 点击放大 ???????????????isBig = false; ???????????} ???????????else{ ???????????????$(this).removeClass(‘active‘); // 变回最初的样式 ???????????????isBig = true; ???????????} ???????});完整代码：
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>jQuery的属性操作</title> ???<style type="text/css"> ???????span.active{ ???????????font-size: 30px; ???????} ???</style></head><body> ???<div id="box" class="foo"> ???????<p>hello，暮光微凉...</p> ???</div> ???????<ul> ???????<li class="one">暮光微凉1号</li> ???????<li class="two">暮光微凉2号</li> ???????<li class="three">暮光微凉3号</li> ???????<li class="four">暮光微凉4号</li> ???</ul> ???<span>我是一个span标签</span> ???<button class="btn">点我</button> ???<div id="box2"> ???????<p>hello，everyone</p> ???????<a href="#">百度一下</a> ???????<input type="text" value="嘿嘿哈" name=""/> ???????<button id="btn2">Get</button> ???</div></body><script src="../jquery-3.2.1.js"></script><script type="text/javascript"> ???$(document).ready(function () { ??// 类样式操作： ???????// addClass() removeClass() ???????$(‘span‘).addClass(‘span2 span3‘); // 可同时添加多个或删除多个类标签 ???????$(‘span‘).removeClass(‘span3‘); ???????var isBig = true; ???????$(‘span‘).click(function(){ ???????????if(isBig){ ???????????????$(this).addClass(‘active‘); ?// 点击放大 ???????????????isBig = false; ???????????} ???????????else{ ???????????????$(this).removeClass(‘active‘); // 变回最初的样式 ???????????????isBig = true; ???????????} ???????}); ???})</script></html>5、值属性的操作
值属性是对DOM属性value进行读取和设置操作。例如：text()、html()、val()。
// 值属性的操作 text() html() val() ???????// text() 仅仅获取文本 ???????console.log($(‘#box2‘).text()); // ?hello，everyone ???????// html() 获取所有 ???????console.log($(‘#box2‘).html()); // <p>hello，everyone</p>// 设置值 ??????$(‘#box2‘).text(‘<a>百度一下</a>‘); ??????$(‘#box2‘).html(‘<a href="https://home.cnblogs.com/">暮光微凉</a>‘);//获取值 ???????console.log($(‘input‘).val()); ???????$(‘input‘).val(‘嘿嘿哈个毛线。。。‘); ???????$(‘#btn2‘).click(function(){ ???????????var val = $(‘input‘).val(); ???????????$(‘.box2‘).text(val); ???????});表单控件使用的一个方法，监听Input的输入：
???????$(‘input‘).change(function(){ ???????????console.log($(this).val()); ???????});完整代码：
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>jQuery的属性操作</title> ???<style type="text/css"> ???????span.active{ ???????????font-size: 30px; ???????} ???</style></head><body> ???<div id="box" class="foo"> ???????<p>hello，暮光微凉...</p> ???</div> ???????<ul> ???????<li class="one">暮光微凉1号</li> ???????<li class="two">暮光微凉2号</li> ???????<li class="three">暮光微凉3号</li> ???????<li class="four">暮光微凉4号</li> ???</ul> ???<span>我是一个span标签</span> ???<button class="btn">点我</button> ???<div id="box2"> ???????<p>hello，everyone</p> ???????<a href="#">百度一下</a> ???????<input type="text" value="嘿嘿哈" name=""/> ???????<button id="btn2">Get</button> ???</div></body><script src="../jquery-3.2.1.js"></script><script type="text/javascript"> ???$(document).ready(function () { ???// 值属性的操作 text() html() val() ???????// text() 仅仅获取文本 ???????console.log($(‘#box2‘).text()); // ?hello，everyone ???????// html() 获取所有 ???????console.log($(‘#box2‘).html()); // <p>hello，everyone</p> ???????// 设置值 ??????$(‘#box2‘).text(‘<a>百度一下</a>‘); ??????$(‘#box2‘).html(‘<a href="https://home.cnblogs.com/">暮光微凉</a>‘); ???????//获取值 ???????console.log($(‘input‘).val()); ???????$(‘input‘).val(‘嘿嘿哈个毛线。。。‘); ???????$(‘#btn2‘).click(function(){ ???????????var val = $(‘input‘).val(); ???????????$(‘.box2‘).text(val); ???????}); ???????// 表单控件使用的一个方法,监听input的输入 ???????$(‘input‘).change(function(){ ???????????console.log($(this).val()); ???????}); ???})</script></html>6、操作input的value值
HTML部分
???<form action=""> ???????<!--单选按钮--> ???????<input type="radio" name="sex" value="1"/>男 ???????<input type="radio" name="sex" value="2" checked=""/>女 <!--默认选项--> ???????<input type="radio" name="sex" value="3" />gay ???????<hr> ???????<!--多选框，设置checked表示默认--> ???????<input type="checkbox" value="a" checked=""/>散步 ???????<input type="checkbox" value="b" checked=""/>美食 ???????<input type="checkbox" value="c" checked=""/>阅读 ???????<input type="checkbox" value="d" checked=""/>喝茶 ???????<hr> ???????<!--下拉框--> ???????<select name="timespan" id="timespan" class="Wdate"> ???????????<option value="1">8:00--9:00</option> ???????????<option value="2">9:00--10:00</option> ???????????<option value="3">11:00--12:00</option> ???????</select> ???????<hr> ???????<input type="text" name="" id="" value="666"/> ???????<button>提交</button> ???</form>
jQuery部分
<script type="text/javascript"> ???$(document).ready(function () { ???????console.log($(‘:radio‘)); ???????console.log($(‘:checkbox‘)); ???????// 1、获取单选框中的value值 ???????console.log($(‘input[type=radio]:checked‘).val()); // 2 ???????// 2、对于复选框中的value值，仅仅获取第一个值 ???????console.log($(‘input[type=checkbox]:checked‘).val()); // a ???????// 3、下拉列表被选中的值 ???????var obj = $(‘#timespan option:selected‘); ???????console.log(obj.val()); // 1 ???????// 设置单选的值 ???????$(‘input[type=radio]‘).val([‘1‘]); //将默认值改为1（初始时是2） ???????$(‘input[type=checkbox]‘).val([‘b‘,‘c‘]); // 将默认选中的值改为‘b’和‘c‘(初始时是‘a‘,‘b‘,‘c‘) ???????// 文本框 设置值和获取值 ???????$(‘input[type=text]‘).val([‘在此输入额！‘]); ???????console.log($(‘input[type=text]‘).val()); ???})</script>二、jQuery文档操作
HTML部分
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>jquery文档操作-插入节点</title></head><body> ???<a href="#">我是一个超链接</a> ???<a href="#">我是又一个超链接</a> ???<ul> ???</ul> ???<button>按钮</button> ???<h2>我是一个二级标题</h2></body><script src="../jquery-3.2.1.js"></script><script type="text/javascript">// jQuery代码部分</script></html>
jQuery代码部分
1、插入操作
$(document).ready(function(){ ???//------------ 方法一：append() ------------------------------ ???/* ????????父元素.append(子元素)，即在父元素下追加某新元素 ???*/ ???????// 插入节点方法1：append("字符串") ????????$("ul").append("<li>我是一个新的li标签</li>") ???????// 插入节点方法2：先创建子元素，再将其添加到父元素上 ????????var dom_li = document.createElement("li"); ????????dom_li.innerHTML = "我是添加的第二个标签"; ????????$("ul").append(dom_li); ?????????????// 插入节点方法3:通过jQuery元素添加（即移动当前页面中已存在的元素到父元素下，则被移动元素将从原位置上消失，等同于移动操作） ????????$("ul").append(a); ???// ------------- 方法二：appendTo() ---------------------------- ???????// 子元素.appendTo(父元素)，即子元素主动添加到父元素上 ???????$("<li>我是第三个li标签</li>").appendTo($("ul").addClass("oli-3")); ???// ------------- 方法三：prepend() 前置添加，即添加到父元素的第一个位置---------------------------- ???????$("ul").prepend("<li>我是最开始的li标签</li>"); ???????// prependTo() 后置添加，即将元素添加到父元素下第一个位置 ????????$("<a>我是最开始的超链接</a>").prepend("ul"); ???// ------------- 方法四：父.after(子) 在匹配的元素之后插入内容，与之相对还有 ---> 子.insertAfter(父) ---------------- ????????$("ul").after("<h4>我是一个四级标题</h4>"); ????????$("<h5>我是一个5级标题</h5>").insertAfter("h4");}) ?2、复制操作 --- clone()
$("button").click(function(){ ???// clone() 括号内内容不写时，默认克隆匹配的DOM元素并且选中这些克隆的副本(不包括事件) ??????$(this) .clone().insertAfter($(this)); ??// clone(true) 元素以及所有的事件处理并且选中这些克隆的副本（即副本和本体一样，无区别） ??????$(this).clone(true).insertAfter($(this));})3、替换操作
// replaceWith() ---- 将所有匹配的元素替换成指定的HTML或DOM元素$("h2").replaceWith($("<h5>我是一个5级标题</h5>"))// replaceAll() ---- 用指定的元素替换所有selector匹配到的元素$("<button>替换</button>").replaceAll("a");4、删除操作
// remove() 删除节点后，事件也会随之删除（即删除了整个标签） ???$("ul").remove();// detach() 删除节点后，事件会保留 ???var $btn = $("button").detach(); ???$("ul").append($btn); // 此时按钮添加到了ul中 ???console.log($btn); ???// empty() 清空元素中所有后代节点 ???$("ul").empty();回到顶部↑
前端开发之jQuery属性和文档操作
原文地址：https://www.cnblogs.com/schut/p/9554281.html