属性操作主要分为四个部分：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>
界面显示
原文地址：https://www.cnblogs.com/LearningOnline/p/9127497.html
时间： 2024-10-14 07:28:57