jquery的属性操作模块分为四个部分：html属性操作，dom属性操作，类样式操作和值操作
html属性操作：是对html文档中的属性进行读取，设置和移除操作。比如attr()、removeAttr()DOM属性操作：对DOM元素的属性进行读取，设置和移除操作。比如prop()、removeProp()类样式操作：是指对DOM属性className进行添加，移除操作。比如addClass()、removeClass()、toggleClass()值操作：是对DOM属性value进行读取和设置操作。比如html()、text()、val()
attr()
设置属性值或者 返回被选元素的属性值
??????//获取值：attr()设置一个属性值的时候 只是获取值 ???????var id = $(‘div‘).attr(‘id‘) ???????console.log(id) ???????var cla = $(‘div‘).attr(‘class‘) ???????console.log(cla) ???????//设置值 ???????//1.设置一个值 设置div的class为box ???????$(‘div‘).attr(‘class‘,‘box‘) ???????//2.设置多个值，参数为对象，键值对存储 ???????$(‘div‘).attr({name:‘hahaha‘,class:‘happy‘})removeAttr()
移除属性
//删除单个属性$(‘#box‘).removeAttr(‘name‘);$(‘#box‘).removeAttr(‘class‘);//删除多个属性$(‘#box‘).removeAttr(‘name 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></title></head><body> ???男<input type="radio" id=‘test‘ name="sex" ?checked/> ???女<input type="radio" id=‘test2‘ name="sex" /> ???<button>提交</button> ???<script type="text/javascript" src="jquery-3.3.1.js"></script> ???<script type="text/javascript"> ???????$(function(){ ???????????//获取第一个input ???????????var el = $(‘input‘).first(); ???????????//undefined ?因为attr是获取的这个对象属性节点的值，很显然此时没有这个属性节点，自然输出undefined ???????????console.log(el.attr(‘style‘)); ???????????// 输出CSSStyleDeclaration对象，对于一个DOM对象，是具有原生的style对象属性的，所以输出了style对象 ???????????console.log(el.prop(‘style‘)); ???????????console.log(document.getElementById(‘test‘).style); ???????????$(‘button‘).click(function(){ ???????????????alert(el.prop("checked") ? "男":"女"); ???????????}) ???????????????????}) ???</script> ???</body></html>什么时候使用attr()，什么时候使用prop()？
1.是有true,false两个属性使用prop();
2.其他则使用attr();
addClass（添加多个类名）
为每个匹配的元素添加指定的类名。
$(‘div‘).addClass("box");//追加一个类名到原有的类名还可以为匹配的元素添加多个类名
$(‘div‘).addClass("box box2");//追加多个类名removeClass
从所有匹配的元素中删除全部或者指定的类。
移除指定的类（一个或多个）
$(‘div‘).removeClass(‘box‘)；
移除全部的类
$(‘div‘).removeClass();
可以通过添加删除类名，来实现元素的显示隐藏
代码如下：
var tag ?= false; ???????$(‘span‘).click(function(){ ???????????if(tag){ ???????????????$(‘span‘).removeClass(‘active‘) ???????????????tag=false; ???????????}else{ ???????????????$(‘span‘).addClass(‘active‘) ???????????????tag=true; ???????????} ???})案例：
代码如下：
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title></title> ???<style type="text/css"> ???????.active{ ???????????color: red; ???????} ???</style></head><body> ????<ul> ????????<li class="item">张三</li> ????????<li class="item">李四</li> ????????<li class="item">王五</li> ????</ul> ????<script type="text/javascript" src="jquery-3.3.1.js"></script> ????<script type="text/javascript"> ????????$(function(){ ????????????$(‘ul li‘).click(function(){ ????????????????// this指的是当前点击的DOM对象 ,使用$(this)转化jquery对象 ????????????????$(this).addClass(‘active‘).siblings(‘li‘).removeClass(‘active‘); ????????????}) ????????}) ????</script> ???</body></html>toggleClass
如果存在（不存在）就删除（添加）一个类。
语法：toggleClass(‘box‘)
$(‘span‘).click(function(){ ???//动态的切换class类名为active ???$(this).toggleClass(‘active‘)})html
获取值：
语法;
html() 是获取选中标签元素中所有的内容
$(‘#box‘).html();
设置值：设置该元素的所有内容 会替换掉 标签中原来的内容
$(‘#box‘).html(‘<a href="https://www.baidu.com">百度一下</a>‘);
text
获取值：
text() 获取匹配元素包含的文本内容
语法：
$(‘#box‘).text();
设置值：
设置该所有的文本内容
$(‘#box‘).text(‘<a href="https://www.baidu.com">百度一下</a>‘);
注意：值为标签的时候 不会被渲染为标签元素 只会被当做值渲染到浏览器中
val
获取值：
val()用于表单控件中获取值，比如input textarea select等等
设置值：
$(‘input‘).val(‘设置了表单控件中的值‘)；
04-jQuery的属性操作
原文地址：https://www.cnblogs.com/bai-max/p/9135712.html