04-jQuery的属性操作
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() 方法是 设置或返回被选元素的属性和值。
当该方法用于返回属性值时，则返回第一个匹配元素的值。
当该方法用于设置属性值时，则为匹配元素集合设置一个或多个属性/值对。
语法：
返回属性的值：
$(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</title> </head> <body> 男<input type="radio" id = "test" name="sex" checked/> 女<input type="radio" id = "test2" name="sex"/> <button>提交</button> <script src="jquery.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"); // 追加多个类名
remveClass
从所有匹配的元素中删除全部或者指定的类
移除指定的类(一个或多个)
$("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("设置了表单控件中的值")
