jquery的属性操作模块分为四个部分:html属性操作,dom属性操作,类样式操作和值操作
html属性操作:是对html文档中的属性进行读取,设置和移除操作。比如attr()、removeAttr()
DOM属性操作:对DOM元素的属性进行读取,设置和移除操作。比如prop()、removeProp()
类样式操作:是指对DOM属性className进行添加,移除操作。比如addClass()、removeClass()、toggleClass()
值操作:是对DOM属性value进行读取和设置操作。比如html()、text()、val()
attr()
设置属性值或者 返回被选元素的属性值
获取: $('div').attr('id') 设置 $('div').attr('class','box') 设置多个值,键值对存储 $('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的运用场景
在使用单双选框的时候 //使用attr获取checked的值 console.log($('input').eq(0).attr('checked')); -----》返回 checked //使用prop获取checked的值 console.log($('input').eq(0).prop('checked')); -----》返回true 可以根据不同结果去运用
addClass(添加多个类名)
removeClass从所有匹配的元素中删除全部或者指定的类。
$('div').addClass("box");//追加一个类名到原有的类名 $('div').addClass("box box2");//追加多个类名 $('div').removeClass('box');移除指定的类(一个或多个) $('div').removeClass(); 移除全部的类
toggleClass如果存在(不存在)就删除(添加)一个类。
$(this).toggleClass('active')
html()
设置值:设置该元素的所有内容 会替换掉 标签中原来的内容
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> /*.box{*/ /*color: red;*/ /*}*/ </style> </head> <body> <div class="box"> 1111 </div> <div class=".box1">123</div> <script type="text/javascript" src="jquery-3.3.1.js"></script> <script type="text/javascript"> $(function(){ //设置值 var name = '张韶涵'; // 模板字符串 tab键上面的反引号 插入变量使用${变量名} $('.box').html(`<p style="color: red;">${name}</p>`); //使用加号比较麻烦 // $('.box').html('<p style="color: red;">'+name+'</p>'); //获取值 console.log($('.box').html()); }) </script> </body> </html>
text
text() 获取匹配元素包含的文本内容,一般配合trim使用
console.log($('.box').text().trim()); //去除左右空格
val
val()用于表单控件中获取值,比如input textarea select等等
$('input').val('设置了表单控件中的值');
jquery的文档操作
1插入
父元素.append(子元素)
$('ul').append('<li class="item1">苏东坡</li>');
如果追加的是jquery对象那么这些元素将从原位置上消失。简言之,就是一个移动操作
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<body> <ul></ul> <ol> <li class="li1">张碧晨</li> <li></li> </ol> <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script> <script type="text/javascript"> $(function(){ //将.li1元素移动到ul里面 $('ul').append($('.li1')); }) </script> </body>
子元素.appendTo(父元素)
父元素.prepend(子元素);前置添加, 添加到父元素的第一个位置
$('ul').prepend('<li>我是第一个</li>')
子元素.prependTo(父元素);前置添加, 添加到父元素的第一个位置
$('<li>我是第一个</li>').prependTo(‘ul’)
父元素.before(子元素);
子元素.inserBefore(父元素);在匹配的元素之前插入内容
2修改
replaceWith():替换
replaceAll() :替换所有
$('<p>哈哈哈</p>').replaceAll('h2');
3删除
remove() 删除节点后,事件也会删除(简言之,删除了整个标签)
detach() 删除节点后,事件会保留
$('ul').remove(); $('button').detach();
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <button>操作</button> <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script> <script type="text/javascript"> $(function(){ $('button').click(function () { var btn = $('button').eq(0).detach(); //删除节点后,事件会保留 $('body').append(btn); //将删除的标签添加到body中 //克隆匹配的DOM元素 $(this).clone(true).insertAfter(this); //true表示克隆自己,副本具有与真身一样的事件处理能力 }) }) </script> </body> </html>
empty() 清空选中元素中的所有后代节点
//清空掉ul中的子元素,保留ul $('ul').empty();