属性操作主要分为四个部分：html属性操作，dom属性操作，类样式操作和值操作
HTML属性操作：属性的读取，设置，以及移除，如attr()、removeAttr()
DOM属性操作：属性的读取，设置，以及移除，如prop()、removeProp()
类样式操作：指对DOM属性className进行添加，移除操作。比如addClass()、removeClass()、toggleClass()
值操作：对DOM属性value进行读取和设置操作。比如html()、text()、val()
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()
当该方法用于返回属性值时，则返回第一个匹配元素的值。
当该方法用于设置属性值时，则为匹配元素集合设置一个或多个属性/值对。
返回属性值：
$(selector).prop(property)
设置属性和值（可以以键值对的形式设置多个）：
$(selector).prop(property,value)
注意：
attr(),prop()两个区别很小，一般常用attr()，只有在含有true，false的情况下使用prop()
addClass()
添加多个类，追加一个类名
removeClass()
移除指定类名，括号里面不填默认移除全部
例
鼠标点击名称，改变颜色
<!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
如果存在就删除一个类
不存在就添加一个类
html获取值
获取选中标签元素中所有的内容
$(‘#box‘).html();
设置值：设置该元素的所有内容 会替换掉 标签中原来的内容
$(‘#box‘).html(‘<a href="https://www.baidu.com">百度一下</a>‘);
text获取值
和thml用法一样
val（和数据发生交互，这个在后期学习中很重要）
$(selector).val()//设置值和获取值
val()用于表单控件中获取值，如input，select中
例
<!DOCTYPE html><html lang="zh-cn"><head> ???<meta charset="UTF-8"> ???<title></title></head><body> ???<form action=""> ???????????<input type="radio" name="sex" value="1"/>男 ???????????<!-- 设置cheked属性表示选中当前选项 --> ???????????<input type="radio" name="sex" value="2" checked=""/>女 ???????????<input type="radio" name="sex" value="3"/>gay ???????????<input type="checkbox" value="a" checked=""/>吃饭 ???????????<input type="checkbox" value="b" checked=""/>睡觉 ???????????<input type="checkbox" value="c" />打豆豆 ???????<!-- 下拉列表 option标签内设置selected属性 表示选中当前 --> ???????????<select name="timespan" id="timespan" class="Wdate" ??> ?????????????????<option value="1">8:00-8:30</option> ?????????????????<option value="2" selected="">8:30-9:00</option> ?????????????????<option value="3">9:00-9:30</option> ?????????????</select> ?????????????<input type="text" name="" id="" value="111" /> ???</form></body> ???<script src="jquery-3.3.1.js"></script> ???<script type="text/javascript"> ???????$(function(){ ???????????// 1.获取值 ???????????// 获取选框中被选中的value值,得到结果2 ???????????console.log($(‘input[type=radio]:checked‘).val()); ???????????// checked值有多个，只获取第一个被选中的值，val()中可以赋值，从伪数组中查看checked值有几个 ???????????console.log($(‘input[type=checkbox]:checked‘).val()); ???????????// 查看下拉列表被选中的值 ???????????var obj = $("#timespan option:selected"); ???????????// 获取选中的值，即2 ???????????var time = obj.val(); ???????????console.log(time); ???????????// 获取文本,得到val:2 text:8:30-9:00 ???????????var time_text = obj.text(); ???????????console.log(‘val:‘+time,‘text:‘+time_text); ???????????// 获取文本框中的value值,得到下面输入的‘试试就试试’ ???????????console.log($(‘input[type=text]‘).val()); ???????????// 2.设置值 ???????????// 可以设置单选框和多选框被选中项 ???????????$(‘input[type=radio]‘).val([‘666‘]); ???????????$(‘input[type=checkbox]‘).val([‘a‘,‘b‘]); ???????}) ???????????// 通过使用select设置下拉列表框中的选中值，select可以设置单个，也能设置多个 ???????????$(‘select‘).val([‘3‘,‘2‘]) ????????????// 设置文本框中的value值 ???????????$(‘input[type=text]‘).val(‘试试就试试‘) ???</script></html>界面显示
37.前端jQuery之属性操作
原文地址：https://www.cnblogs.com/LearningOnline/p/9127497.html