jQuery中的属性操作 + jQuery的文档操作(DOM节点)
jQuery中的属性操作
jquery的属性操作模块分为四个部分：html属性操作、dom属性操作、类样式操作和值操作
- html属性操作：是对html文档中的属性进行读取，设置和移除的操作，比如attr()、removeAttr()
- DOM属性操作：对DOM元素的属性进行读取、设置和移除的操作，比如prop()、removeProp()
- 类样式操作：是指对DOM属性className进行添加，移除操作，比如addClass()、removeClass()、toggleClass()
- 值得操作：是对DOM属性value进行读取和设置操作，比如html()、text()、val()
- 样式属性的操作：.css()
一、对标签属性的操作
1、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'})
2、removeAttr()
移除属性
//删除单个属性 $('#box').removeAttr('name'); $('#box').removeAttr('class'); //删除多个属性 $('#box').removeAttr('name class');
二、对标签jsDOM对象属性的操作
1、prop()
设置或返回被选元素的属性和值
a、当该方法用于返回属性值时，则返回第一个匹配元素的值
b、当该方法用于设置属性值时，则为匹配元素集合设置一个或多个属性/值对
语法：
返回属性值
$(selector).prop(property)
设置属性和值
$(selector).prop(property,value)
设置多个属性和值
$(selector).prop({property:value, property:value,...})
2、attr()和prop()的区别？
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> 男<input type="radio" id='test' name="sex" checked/> 女<input type="radio" id='test2' name="sex" /> <button>提交</button> <script type="text/javascript" src="jquery-3.3.1.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>
3、什么时候使用attr(),什么时候使用prop()?
a、单选框的应用 checked属性的获取 是true或false
具有true，false两个属性值的使用prop(),例如在input中的radio中，使用prop添加
b、其他的都是用attr()
三、对类名的操作
1、addClass() 添加多个类名
为每个匹配的元素添加指定的类名。
$('div').addClass("box");//追加一个类名到原有的类名
还可以为匹配的元素添加多个类名
$('div').addClass("box box2");//追加多个类名
2、removeClass()
从所有匹配的元素中删除全部或者指定的类。
移除指定的类（一个或多个）
$('div').removeClass('box')；
移除全部的类
$('div').removeClass();
3、toggleClass()
如果存在（不存在）就删除（添加）一个类。
语法：toggleClass('box')
$('span').click(function(){
//动态的切换class类名为active
$(this).toggleClass('active')
})
四、对值得操作
1、html()
获取值：获取选中标签元素中所有的内容
$('#box').html();
设置值：设置该元素的所有内容，会替换掉，标签中原来的内容
$('#box').html('<a href="https://www.baidu.com">百度一下</a>');
2、text()
获取值：获取匹配元素包含的文本内容
$('#box').text();
设置值：设置该元素所有的文本内容
$('#box').text('<a href="https://www.baidu.com">百度一下</a>');
注意：值为标签的时候 不会被渲染为标签元素，只会被当做值渲染到浏览器中
3、val()
获取值：用于form表单控件，比如input、textarea、select等等
设置值：
$('input').val('设置了表单控件中的值')；
4、清空值得操作
.text("") .html("") .val("")
重点补充：使用jquery操作input的value值
表单控件是我们的重中之重，因为一旦牵扯到数据交互，离不开form表单的使用，比如用户的注册登录功能等
那么通过上节知识点我们了解到，我们在使用jquery方法操作表单控件的方法：
$(selector).val()//设置值和获取值
html结构：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <form action=""> <input type="radio" name="sex" value="112" />男 <!-- 设置cheked属性表示选中当前选项 --> <input type="radio" name="sex" value="11" checked="" />女 <input type="radio" name="sex" value="11" />gay <input type="checkbox" value="a" checked=""/>吃饭 <input type="checkbox" value="b" />睡觉 <input type="checkbox" value="c" checked=""/>打豆豆 <!-- 下拉列表 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> </html>
页面展示效果：
操作表单控件的代码如下：
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<script type="text/javascript">
$(function(){
// 一、获取值
//1.获取单选框被选中的value值
console.log($('input[type=radio]:checked').val())
//2.复选框被选中的value,获取的是第一个被选中的值
console.log($('input[type=checkbox]:checked').val())
//3.下拉列表被选中的值
var obj = $("#timespan option:selected");
// 获取被选中的值
var time = obj.val();
console.log(time);
// 获取文本
var time_text = obj.text();
console.log("val:"+time+" text"+ time_text );
//4.获取文本框的value值
console.log($("input[type=text]").val())//获取文本框中的值
// 二.设置值
//1.设置单选按钮和多选按钮被选中项
$('input[type=radio]').val(['112']);
$('input[type=checkbox]').val(['a','b']);
//2.设置下拉列表框的选中值，必须使用select
/*因为option只能设置单个值，当给select标签设置multiple。
那么我们设置多个值,就没有办法了，但是使用select设置单个值和多个值都可以
*/
$('select').val(['3','2'])
//3.设置文本框的value值
$('input[type=text]').val('试试就试试')
})
</script>
jquery的文档操作(DOM节点)
一、插入操作
1、父子之间
（1）父.append(子)
如果子 为获取的 jsDOM对象，相当于是移动操作，（用的不多）
如果子 为创建的新元素，相当于就是添加操作，（常用）
进行事件操作时需要分开进行。
解释：追加某元素，在父元素中添加新的子元素。子元素可以为：stirng | element（js对象） | jquery元素
var oli = document.createElement('li'); oli.innerHTML = '哈哈哈'; $('ul').append('<li>1233</li>'); $('ul').append(oli); $('ul').append($('#app'));
（2）子.appendTo(父)
进行事件操作时可以利用链式编程。
解释：追加到某元素，子元素添加到父元素，要添加的元素同样既可以是stirng 、element(js对象) 、 jquery元素
$('<li>天王盖地虎</li>').appendTo($('ul')).addClass('active')
（3）父元素.prepend(子元素)
解释：前置添加，添加到父元素的第一个位置
$('ul').prepend('<li>我是第一个</li>')
（4）子元素.prependTo(父元素)
解释：前置添加，子元素添加到父元素的第一个位置
$('<a href="#">路飞学诚</a>').prependTo('ul')
2、兄弟之间
在匹配的元素之后插入内容：
（1）兄弟元素.after(要插入的兄弟元素)
$('ul').after('<h4>我是一个h3标题</h4>')
（2）要插入的兄弟元素.insertAfter(兄弟元素)
$('<h5>我是一个h2标题</h5>').insertAfter('ul')
（3）兄弟元素.before(要插入的兄弟元素)
$('ul').before('<h3>我是一个h3标题</h3>')
（4）要插入的兄弟元素.insertBefore(兄弟元素)
$('<h2>我是一个h2标题</h2>').insertBefore('ul')
二、修改操作
1、.replaceWith()
$(selector).replaceWith(content);
解释：将所有匹配的元素替换成指定的string、js对象、jquery对象。
//将所有的h5标题替换为a标签 $('h5').replaceWith('<a href="#">hello world</a>') //将所有h5标题标签替换成id为app的dom元素 $('h5').replaceWith($('#app'));
2、.replaceAll()
$('<p>哈哈哈</p>')replaceAll('h2');
解释：替换所有的，将所有的h2标签替换成P标签
三、删除操作
1、.remove()
语法：
$(selector).remove();
删除整个节点 它自己的事件也删除（绑定的事件也删除）
$('ul').remove();
2、.detach()
语法：
$(selector).detach();
删除整个节点，保留事件
var $btn = $('button').detach() //此时按钮能追加到ul中 $('ul').append($btn)
3、.empty()
语法：
$(selector).empty();
清空选中元素中的所有后代节点
//清空掉ul中的子元素，保留ul $('ul').empty()
4、.html("")
也是清空
5、下拉菜单 select 中删除 option
$("select")[0].options.length = 1 # 保留option的第一个，删掉其余的 option，由于options是js的方法，所以需要用[0]来转成 JS对象
浙公网安备 33010602011771号