jQuery的属性操作
jQuery的属性操作模块分为四分部分：
1，html属性操作：是对HTML文档中的属性进行读取，设置和移除操作。如：attr()，removeattr()
2，DOM属性操作：对DOM元素的属性进行读取，设置和移除操作。如：prop()，removeProp()
3，类样式操作：是指对DOM属性className进行添加，移除操作。如：addClass()，removeClass()，toggleClass()
4，值操作：是对DOM属性value进行读取和设置操作。如：html()，text()，val()
attr():
设置属性值或者返回被选元素的属性值：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript" src="../../jquery-3.3.1.js"></script> <script type="text/javascript"> $(function(){ var id = $('div').attr('id'); console.log(id); //box var cla = $('div').attr('class'); console.log(cla);//clas $('div').attr('id','box1'); $('div').attr('class','clas1'); console.log($('div')[0]); //<div id="box1" class="clas1"></div> }) </script> </head> <body> <div id="box" class="clas"></div> </body> </html>
removeAttr()：
移除属性：
$('div').removeAttr('id');
//移除单个属性
$('div').removeAttr('id 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>Document</title> <script type="text/javascript" src="../../jquery-3.3.1.js"></script> <script type="text/javascript"> $(function(){ //获取第一个input var el = $('input').first(); console.log(el.attr('style')); //因为attr是获取这个对象属性节点的值，若是没有就输出undefiend; console.log(el.prop('style')); // 输出CSSStyleDeclaration对象，对于一个DOM对象，是具有原生的style对象属性的，所以输出了style对象 console.log(document.getElementById('test').style); $('button').click(function(){ alert(el.prop('checked') ? '男':'女'); }); }); </script> </head> <body> 男<input type="radio" id="test" name="sex" checked /> 女<input type="radio" id="test2" name="sex"/> <button>提交</button> </body> </html>
什么时候使用attr()，什么时候使用prop()：
在遇到要获取或设置checked,selected,readonly和disabled等属性时，用prop方法显然更好。
其他则使用attr()；
addClass（添加多个类名），removeClass()删除类名:
为每个匹配的元素添加指定的类名：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript" src="../../jquery-3.3.1.js"></script> <script type="text/javascript"> $(function(){ $('div').addClass('box'); console.log($('div')[0]); //<div class="box"></div> //添加多个类名 $('div').addClass('box1 box2'); //<div class="box box1 box2"></div> $('div').removeClass('box'); //<div class="box1 box2"></div> //移除全部的类名 $('div').removeClass(); //<div class=""></div> }) </script> </head> <body> <div></div> </body> </html>
可以通过添加删除类名，来实现元素的显示隐藏：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .active{ color:red; } </style> <script type="text/javascript" src="../../jquery-3.3.1.js"></script> <script type="text/javascript"> $(function(){ var tag = true; $('span').click(function(){ if(tag){ $('span').removeClass('active'); tag = false; }else{ $('span').addClass('active'); tag = true; } }) }) </script> </head> <body> <span class = 'active'>你好</span> </body> </html>
案例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .active{ color:red; } </style> <script type="text/javascript" src="../../jquery-3.3.1.js"></script> <script type="text/javascript"> $(function(){ $('ul li').click(function(){ $(this).addClass('active').siblings('li').removeClass("active"); }) }) </script> </head> <body> <ul> <li class="item">张三</li> <li class="item">李四</li> <li class="item">王五</li> </ul> </body> </html>
toggleClass:
如果存在就删除一个类，若是不存在就添加一个类。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .active{ color:red; } </style> <script type="text/javascript" src="../../jquery-3.3.1.js"></script> <script type="text/javascript"> $(function(){ $('ul li').click(function(){ //动态的切换class类名 $(this).toggleClass('active').siblings('li').removeClass("active"); }) }) </script> </head> <body> <ul> <li class="item">张三</li> <li class="item">李四</li> <li class="item">王五</li> </ul> </body> </html>
html:
html()是获取选中标签元素中的所有内容：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript" src="../../jquery-3.3.1.js"></script> <script type="text/javascript"> $(function(){ console.log($('body').html()); }) </script> </head> <body> <ul> <li class="item">张三</li> <li class="item">李四</li> <li class="item">王五</li> </ul> </body> </html>
设置值：设置该元素的所有内容会替换掉标签中原来的内容。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript" src="../../jquery-3.3.1.js"></script> <script type="text/javascript"> $(function(){ // console.log($('body').html()); $('div').html('<a href="http://www.baidu.com">百度一下</a>'); }) </script> </head> <body> <div> <p>你好</p> <p>你好</p> <a href=""></a> </div> </body> </html>
效果图：
text:
获取值：
text() 获取匹配元素包含的文本内容：
语法：
$('#box').text();
设置值：
$('#box').text('<a href="https://www.baidu.com">百度一下</a>');
注意：值为标签的时候，不会被渲染为标签元素，只会被当成值渲染到浏览器中。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript" src = "../../jquery-3.3.1.js"></script> <script type="text/javascript"> $(function(){ console.log($('ul').text()); $('p').text('<a href="https://www.baidu.com">百度一下</a>'); }) </script> </head> <body> <div> <ul> <li>111</li> <li>222</li> <li>333</li> </ul> <p>你好</p> <p>你好</p> </div> </body> </html>
效果图：
val:
获取值：
val() 用于表单控件中获取值，比如input textarea select等。
设置值：
$('input').val('设置了表单控件中的值')；
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript" src="../../jquery-3.3.1.js"></script> <script type="text/javascript"> $(function(){ //获取单选框中被选中的value值。 console.log($('input[type=radio]:checked').val()); // 11 //复选框被选中的value，获取的是第一个被选中的值 console.log($('input[type=checkbox]:checked').val()); //下拉列表被选中的值 var obj = $('#timespan option:selected'); var time = obj.val(); console.log(time); var time_text = obj.text(); console.log("val:"+time +"text"+time_text); //获取文本框中的值 console.log($('input[type=text]').val()); //设置单选按钮和多选按钮被选中项,后面的等级高过前面的。 $('input[type=radio]').val(['11']); $('input[type=radio]').val(['22']); $('input[type=checkbox]').val(['a','b']); $('select').val(['1','2','3']); }) </script> </head> <body> <div> <form> <input type="radio" name="sex" value="11" />男 <input type="radio" name="sex" value="22"/>女 <input type="radio" name="sex" value="33" checked=" "/>gay <input type="checkbox" value="a" checked=""/ >吃饭 <input type="checkbox" value="b" checked="" />睡觉 <input type="checkbox" value="c" checked="" />打豆豆 <!-- 下拉列表 option标签内设置selected属性，表示选中 --> <select name="timespan" id="timespan" class="wdate" size="2" multiple=""> <option value="1">8:00-8:30</option> <option value="2">8:30-9:00</option> <option value="3" selected="">9:00-9:30</option> </select> <input type="text" name="" id="" value="111"/> <input type="submit" name=""> </form> </div> </body> </html>
jQuery的文档操作：
插入操作：
父元素.append(子元素)
追加某元素，在父元素中添加新的子元素。子元素可以为：stirng | element（js对象） | jquery元素
var oli = document.createElement('li'); oli.innerHTML = '哈哈哈'; $('ul').append('<li>1233</li>'); $('ul').append(oli); $('ul').append($('#app'));
如果追加的是jquery对象那么这些元素将从原位置上消失。简言之，就是一个移动操作。
子元素.appendTo(父元素)：
追加到某元素 子元素添加到父元素
$('<li>天王盖地虎</li>').appendTo($('ul')).addClass('active')
要添加的元素同样既可以是stirng 、element(js对象) 、 jquery元素
父元素.prepend(子元素)：前置添加， 添加到父元素的第一个位置
$('ul').prepend('<li>我是第一个</li>')
子元素.prependTo(父元素)：子元素添加到父元素的第一个位置
$('<a href="http//:www.baidu.com">百度一下</a>').prependTo('ul')
父元素.after(子元素)；
子元素.inserAfter(父元素)
在匹配元素后插入内容：
$('.box').after('<p>段落1</p>');
$('<p>段落2</p>').insertAfter('ul');
父元素.before(子元素)；
子元素.inserBefore(父元素）：
在匹配元素前插入内容。
$('ul').before('<h1>第一第一</h1>');
$('<h2>第二第二</h2>').insertBefore('.box');
克隆操作：
$(选择器).clone()；
$('button').click(function() {
// 1.clone()：克隆匹配的DOM元素
// 2.clone(true)：元素以及其所有的事件处理并且选中这些克隆的副本(简言之，副本具有与真身一样的事件处理能力)
$(this).clone(true).insertAfter(this);
})
修改操作：
$(selector).replaceWith(content);
将所有匹配的元素替换成指定的string，js对象,jquery对象。
//将所有的h5标题替换为a标签 $('h5').replaceWith('<a href="#">hello world</a>') //将所有h5标题标签替换成id为app的dom元素 $('h5').replaceWith($('#app'));
替换所有。将所有的h2标签替换成p标签
$('<br/><hr/><button>按钮</button>').replaceAll('h4')
删除操作：
$(selector).remove();
删除节点后，事件也会删除（简言之，删除了整个标签）
$('ul').remove();
删除节点后，事件会保留：
$(selector).detach();
var $btn = $('button').detach()
//此时按钮能追加到ul中
$('ul').append($btn)
清空选中元素中的所有后代节点：
$(selector).empty();
//清空掉ul中的子元素，保留ul
$('ul').empty()
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript" src="../../jquery-3.3.1.js"></script> <script type="text/javascript"> $(function(){ var oli = document.createElement('li'); oli.innerHTML = 'lv'; //添加字符串 $('ul').append('<li>顾清秋</li>'); //添加js对象 $('ul').append(oli); //添加jquery对象 $('ul').append($('.li1')); //父元素在第一个位置添加子元素 $('ul').prepend('<li>我成为了第一个</li>') //子元素添加到父元素的第一个位置 $('<a href="http//:www.baidu.com">百度一下</a>').prependTo('ul') $('.box').after('<p>段落1</p>'); $('<p>段落2</p>').insertAfter('ul'); $('ul').before('<h1>第一第一</h1>'); $('<h2>第二第二</h2>').insertBefore('.box'); $('button:eq(0)').click(function(){ $(this).clone(true).insertAfter(this); }); $('h2').replaceWith('<a href="#">hello world</a>'); $('<p>顾清秋</p>').replaceAll('h1'); //移除所有button.也有返回值，也可追加到一个位置，但是不具有功能。 //$('button').remove(); //也是移除button，但是保留信息，有返回值可以追加到一个位置。依然具有功能。 // var $btn = $('button').detach(); // $('ul').append($btn); $('#clear').click(function(){ $('ul').empty(); }) }) </script> </head> <body> <ul> </ul> <div class="box">box</div> <ol> <li class="li1">顾小白</li> <li>111</li> <li>222</li> <li>333</li> </ol> <button>操作</button> <button id="clear">清屏</button> </body> </html>
