jQuery的属性操作模块分为四分部分：
1，html属性操作：是对HTML文档中的属性进行读取，设置和移除操作。如：attr()，removeattr()
2，DOM属性操作：对DOM元素的属性进行读取，设置和移除操作。如：prop()，removeProp()
3，类样式操作：是指对DOM属性className进行添加，移除操作。如：addClass()，removeClass()，toggleClass()
4，值操作：是对DOM属性value进行读取和设置操作。如：html()，text()，val()
attr():
设置属性值或者返回被选元素的属性值：
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Document</title> ???<script type="text/javascript" src="../../jquery-3.3.1.js"></script> ???<script type="text/javascript"> ???????$(function(){ ???????????var id = $(‘div‘).attr(‘id‘); ???????????console.log(id); //box ???????????var cla = $(‘div‘).attr(‘class‘); ???????????console.log(cla);//clas ???????????$(‘div‘).attr(‘id‘,‘box1‘); ???????????$(‘div‘).attr(‘class‘,‘clas1‘); ???????????console.log($(‘div‘)[0]); //<div id="box1" class="clas1"></div> ???????}) ???</script></head><body> ???<div id="box" class="clas"></div></body></html>removeAttr()：
移除属性：
$(‘div‘).removeAttr(‘id‘);//移除单个属性$(‘div‘).removeAttr(‘id class‘);//移除多个属性。
prop():
prop()方法设置或返回被选元素的属性和值。
当该方法用于返回属性值时，则返回第一个匹配的元素的值。
当该方法用于设置属性时，则为匹配元素集合设置一个或多个属性/值对/
返回属性的值：
$(selector).prop(property)
设置属性和值：
$(selector).prop(property,value)
设置多个属性和值：
$(selector).prop({property:value, property:value,...})关于attr()和prop()的区别：
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Document</title> ???<script type="text/javascript" src="../../jquery-3.3.1.js"></script> ???<script type="text/javascript"> ???????$(function(){ ???????????//获取第一个input ???????????var el = $(‘input‘).first(); ???????????console.log(el.attr(‘style‘)); ???????????//因为attr是获取这个对象属性节点的值，若是没有就输出undefiend; ???????????console.log(el.prop(‘style‘)); ???????????// 输出CSSStyleDeclaration对象，对于一个DOM对象，是具有原生的style对象属性的，所以输出了style对象 ???????????console.log(document.getElementById(‘test‘).style); ???????????$(‘button‘).click(function(){ ???????????????alert(el.prop(‘checked‘) ? ‘男‘:‘女‘); ???????????}); ???????}); ???</script></head><body> ???男<input type="radio" id="test" name="sex" checked /> ???女<input type="radio" id="test2" name="sex"/> ???<button>提交</button></body></html>什么时候使用attr()，什么时候使用prop()：
在遇到要获取或设置checked,selected,readonly和disabled等属性时，用prop方法显然更好。
其他则使用attr()；
addClass（添加多个类名），removeClass()删除类名:
为每个匹配的元素添加指定的类名：
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Document</title> ???<script type="text/javascript" src="../../jquery-3.3.1.js"></script> ???<script type="text/javascript"> ???????$(function(){ ???????????$(‘div‘).addClass(‘box‘); ???????????console.log($(‘div‘)[0]); //<div class="box"></div> ???????????//添加多个类名 ???????????$(‘div‘).addClass(‘box1 box2‘); ???????????//<div class="box box1 box2"></div> ???????????$(‘div‘).removeClass(‘box‘); //<div class="box1 box2"></div> ???????????//移除全部的类名 ???????????$(‘div‘).removeClass(); //<div class=""></div> ???????}) ???</script></head><body> ???<div></div></body></html>可以通过添加删除类名，来实现元素的显示隐藏：
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Document</title> ???<style type="text/css"> ???????.active{ ???????????color:red; ???????} ???</style> ???<script type="text/javascript" src="../../jquery-3.3.1.js"></script> ???<script type="text/javascript"> ???????$(function(){ ???????????var tag = true; ???????????$(‘span‘).click(function(){ ???????????????if(tag){ ???????????????????$(‘span‘).removeClass(‘active‘); ???????????????????tag = false; ???????????????}else{ ???????????????????$(‘span‘).addClass(‘active‘); ???????????????????tag = true; ???????????????} ???????????}) ???????}) ???</script></head><body> ???<span class = ‘active‘>你好</span></body></html>案例：
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Document</title> ???<style type="text/css"> ???????.active{ ???????????color:red; ???????} ???</style> ???<script type="text/javascript" src="../../jquery-3.3.1.js"></script> ???<script type="text/javascript"> ???????$(function(){ ???????????$(‘ul li‘).click(function(){ ???????????????$(this).addClass(‘active‘).siblings(‘li‘).removeClass("active"); ???????????}) ???????}) ???</script></head><body> ???<ul> ???????<li class="item">张三</li> ???????<li class="item">李四</li> ???????<li class="item">王五</li> ???</ul></body></html>toggleClass:
如果存在就删除一个类，若是不存在就添加一个类。
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Document</title> ???????????????<style type="text/css"> ???????.active{ ???????color:red; ???????} ???</style> ???<script type="text/javascript" src="../../jquery-3.3.1.js"></script> ???<script type="text/javascript"> ???????$(function(){ ???????????$(‘ul li‘).click(function(){ ???????????????//动态的切换class类名 ???????????????$(this).toggleClass(‘active‘).siblings(‘li‘).removeClass("active"); ???????????}) ???????}) ???</script></head><body> ???<ul> ???????<li class="item">张三</li> ???????<li class="item">李四</li> ???????<li class="item">王五</li> ???</ul></body></html>html:
html()是获取选中标签元素中的所有内容：
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Document</title> ???<script type="text/javascript" src="../../jquery-3.3.1.js"></script> ???<script type="text/javascript"> ???????$(function(){ ???????????console.log($(‘body‘).html()); ???????}) ???</script></head><body> ???<ul> ???????<li class="item">张三</li> ???????<li class="item">李四</li> ???????<li class="item">王五</li> ???</ul></body></html>设置值：设置该元素的所有内容会替换掉标签中原来的内容。
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Document</title> ???<script type="text/javascript" src="../../jquery-3.3.1.js"></script> ???<script type="text/javascript"> ???????$(function(){ ???????????// console.log($(‘body‘).html()); ???????????$(‘div‘).html(‘<a href="http://www.baidu.com">百度一下</a>‘); ???????}) ???</script></head><body> ???<div> ???????<p>你好</p> ???????<p>你好</p> ???????<a href=""></a> ???</div></body></html>效果图：
text:
获取值：
text() 获取匹配元素包含的文本内容：
语法：
$(‘#box‘).text();
设置值：
$(‘#box‘).text(‘<a href="https://www.baidu.com">百度一下</a>‘);
注意：值为标签的时候，不会被渲染为标签元素，只会被当成值渲染到浏览器中。
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Document</title> ???<script type="text/javascript" src = "../../jquery-3.3.1.js"></script> ???<script type="text/javascript"> ???????$(function(){ ???????????console.log($(‘ul‘).text()); ???????????$(‘p‘).text(‘<a href="https://www.baidu.com">百度一下</a>‘); ???????}) ???</script></head><body> ???<div> ???????<ul> ???????????<li>111</li> ???????????<li>222</li> ???????????<li>333</li> ???????</ul> ???????<p>你好</p> ???????<p>你好</p> ???</div></body></html>效果图：
val:
获取值：
val() 用于表单控件中获取值，比如input textarea select等。
设置值：
$(‘input‘).val(‘设置了表单控件中的值‘)；
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Document</title> ???<script type="text/javascript" src="../../jquery-3.3.1.js"></script> ???<script type="text/javascript"> ???????$(function(){ ???????????//获取单选框中被选中的value值。 ???????????console.log($(‘input[type=radio]:checked‘).val()); // 11 ???????????//复选框被选中的value，获取的是第一个被选中的值 ???????????console.log($(‘input[type=checkbox]:checked‘).val()); ???????????//下拉列表被选中的值 ???????????var obj = $(‘#timespan option:selected‘); ???????????var time = obj.val(); ???????????console.log(time); ???????????var time_text = obj.text(); ???????????console.log("val:"+time +"text"+time_text); ???????????//获取文本框中的值 ???????????console.log($(‘input[type=text]‘).val()); ???????????//设置单选按钮和多选按钮被选中项,后面的等级高过前面的。 ???????????$(‘input[type=radio]‘).val([‘11‘]); ???????????$(‘input[type=radio]‘).val([‘22‘]); ???????????$(‘input[type=checkbox]‘).val([‘a‘,‘b‘]); ???????????$(‘select‘).val([‘1‘,‘2‘,‘3‘]); ???????}) ???</script></head><body> ???<div> ???<form> ???????<input type="radio" name="sex" value="11" ?/>男 ???????<input type="radio" name="sex" value="22"/>女 ???????<input type="radio" name="sex" value="33" checked=" ???"/>gay ???????<input type="checkbox" value="a" checked=""/ >吃饭 ???????<input type="checkbox" value="b" checked="" />睡觉 ???????<input type="checkbox" value="c" checked="" />打豆豆 ???????<!-- 下拉列表 option标签内设置selected属性，表示选中 --> ???????<select name="timespan" id="timespan" class="wdate" size="2" multiple=""> ???????????<option value="1">8:00-8:30</option> ?????????????<option value="2">8:30-9:00</option> ?????????????<option value="3" selected="">9:00-9:30</option> ???????</select> ???????<input type="text" name="" id="" value="111"/> ???????<input type="submit" name=""> ???</form> ???</div></body></html>jQuery的文档操作：
插入操作：
父元素.append(子元素)
追加某元素，在父元素中添加新的子元素。子元素可以为：stirng | element（js对象） | jquery元素
var oli = document.createElement(‘li‘);oli.innerHTML = ‘哈哈哈‘;$(‘ul‘).append(‘<li>1233</li>‘);$(‘ul‘).append(oli);$(‘ul‘).append($(‘#app‘));
如果追加的是jquery对象那么这些元素将从原位置上消失。简言之，就是一个移动操作。
子元素.appendTo(父元素)：
追加到某元素 子元素添加到父元素
$(‘<li>天王盖地虎</li>‘).appendTo($(‘ul‘)).addClass(‘active‘)
要添加的元素同样既可以是stirng 、element(js对象) 、 jquery元素
父元素.prepend(子元素)：前置添加， 添加到父元素的第一个位置
$(‘ul‘).prepend(‘<li>我是第一个</li>‘)
子元素.prependTo(父元素)：子元素添加到父元素的第一个位置
$(‘<a href="http//:www.baidu.com">百度一下</a>‘).prependTo(‘ul‘)
父元素.after(子元素)；
子元素.inserAfter(父元素)
在匹配元素后插入内容：
$(‘.box‘).after(‘<p>段落1</p>‘);$(‘<p>段落2</p>‘).insertAfter(‘ul‘);
父元素.before(子元素)；
子元素.inserBefore(父元素）：
在匹配元素前插入内容。
$(‘ul‘).before(‘<h1>第一第一</h1>‘);$(‘<h2>第二第二</h2>‘).insertBefore(‘.box‘);
克隆操作：
$(选择器).clone()；
$(‘button‘).click(function() { ?// 1.clone()：克隆匹配的DOM元素 // 2.clone(true)：元素以及其所有的事件处理并且选中这些克隆的副本(简言之，副本具有与真身一样的事件处理能力) ?$(this).clone(true).insertAfter(this);})修改操作：
$(selector).replaceWith(content);
将所有匹配的元素替换成指定的string，js对象,jquery对象。
//将所有的h5标题替换为a标签$(‘h5‘).replaceWith(‘<a href="#">hello world</a>‘)//将所有h5标题标签替换成id为app的dom元素$(‘h5‘).replaceWith($(‘#app‘));
替换所有。将所有的h2标签替换成p标签
$(‘<br/><hr/><button>按钮</button>‘).replaceAll(‘h4‘)
删除操作：
$(selector).remove();
删除节点后，事件也会删除（简言之，删除了整个标签）
$(‘ul‘).remove();
删除节点后，事件会保留：
$(selector).detach();
var $btn = $(‘button‘).detach() //此时按钮能追加到ul中 $(‘ul‘).append($btn)
清空选中元素中的所有后代节点：
$(selector).empty();
//清空掉ul中的子元素，保留ul$(‘ul‘).empty()
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Document</title> ???<script type="text/javascript" src="../../jquery-3.3.1.js"></script> ???<script type="text/javascript"> ???????$(function(){ ???????????var oli = document.createElement(‘li‘); ???????????oli.innerHTML = ‘lv‘; ???????????//添加字符串 ???????????$(‘ul‘).append(‘<li>顾清秋</li>‘); ???????????//添加js对象 ???????????$(‘ul‘).append(oli); ???????????//添加jquery对象 ???????????$(‘ul‘).append($(‘.li1‘)); ???????????//父元素在第一个位置添加子元素 ???????????$(‘ul‘).prepend(‘<li>我成为了第一个</li>‘) ???????????//子元素添加到父元素的第一个位置 ???????????$(‘<a href="http//:www.baidu.com">百度一下</a>‘).prependTo(‘ul‘) ???????????$(‘.box‘).after(‘<p>段落1</p>‘); ???????????$(‘<p>段落2</p>‘).insertAfter(‘ul‘); ???????????$(‘ul‘).before(‘<h1>第一第一</h1>‘); ???????????$(‘<h2>第二第二</h2>‘).insertBefore(‘.box‘); ???????????$(‘button:eq(0)‘).click(function(){ ???????????????$(this).clone(true).insertAfter(this); ???????????}); ???????????$(‘h2‘).replaceWith(‘<a href="#">hello world</a>‘); ???????????$(‘<p>顾清秋</p>‘).replaceAll(‘h1‘); ???????????//移除所有button.也有返回值，也可追加到一个位置，但是不具有功能。 ???????????//$(‘button‘).remove(); ???????????//也是移除button，但是保留信息，有返回值可以追加到一个位置。依然具有功能。 ???????????// var $btn = $(‘button‘).detach(); ???????????// $(‘ul‘).append($btn); ???????????$(‘#clear‘).click(function(){ ???????????????$(‘ul‘).empty(); ???????????}) ???????}) ???</script></head><body> ???<ul> ???????????</ul> ???<div class="box">box</div> ???<ol> ???????<li class="li1">顾小白</li> ???????<li>111</li> ???????<li>222</li> ???????<li>333</li> ???</ol> ???<button>操作</button> ???<button id="clear">清屏</button></body></html>jQuery的属性操作
原文地址：https://www.cnblogs.com/stfei/p/9123540.html