Web前端基础(17):jQuery基础(四)
1. jquery的属性操作
jquery的属性操作模块分为四个部分：html属性操作，dom属性操作，类样式操作和值操作
html属性操作：是对html文档中的属性进行读取，设置和移除操作。比如attr()、removeattr()
dom属性操作：对dom元素的属性进行读取，设置和移除操作。比如prop()、removeprop()
类样式操作：是指对dom属性classname进行添加，移除操作。比如addclass()、removeclass()、toggleclass()
值操作：是对dom属性value进行读取和设置操作。比如html()、text()、val()
1.1 html属性操作
1.1.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'})
1.1.2 removeattr()
移除属性
//删除单个属性
$('#box').removeattr('name');
$('#box').removeattr('class');
//删除多个属性
$('#box').removeattr('name class');
1.2 dom属性操作
1.2.1 prop()
prop() 方法设置或返回被选元素的属性和值。
当该方法用于返回属性值时，则返回第一个匹配元素的值。
当该方法用于设置属性值时，则为匹配元素集合设置一个或多个属性/值对。
返回属性的值：
$(selector).prop(property)
设置属性和值：
$(selector).prop(property,value)
设置多个属性和值：
$(selector).prop({property:value, property:value,...})
1.2.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>
什么时候使用attr()，什么时候使用prop()？
1.是有true,false两个属性使用prop()。
2.其他则使用attr()。
1.3 类样式操作
1.3.1 addclass
为每个匹配的元素添加指定的类名。
$('div').addclass("box");//追加一个类名到原有的类名
还可以为匹配的元素添加多个类名。
$('div').addclass("box box2");//追加多个类名
1.3.2 removeclass
从所有匹配的元素中删除全部或者指定的类。
移除指定的类（一个或多个）
$('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>
1.3.3 toggleclass
如果存在（不存在）就删除（添加）一个类。
语法：toggleclass('box')
$('span').click(function(){
//动态的切换class类名为active
$(this).toggleclass('active')
})
1.4 值操作
1.4.1 html
html()：是获取选中标签元素中所有的内容
$('#box').html();
设置值：设置该元素的所有内容会替换掉标签中原来的内容
$('#box').html('<a href="https://www.baidu.com">百度一下</a>');
1.4.2 text
text()：获取匹配元素包含的文本内容
$('#box').text();
设置该所有的文本内容
$('#box').text('<a href="https://www.baidu.com">百度一下</a>');
值为标签的时候，不会被渲染为标签元素，只会被当做值渲染到浏览器中。
1.4.3 val
val()用于表单控件中获取值，比如input textarea select等等
$('input').val();
val()用于表单控件中获取值，比如input textarea select等等
$('input').val('设置了表单控件中的值')；
2. 操作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>
3. 文档操作
之前js中咱们学习了js的dom操作,也就是所谓的增删改查dom操作。通过js的dom的操作，大家也能发现，大量的繁琐代码实现我们想要的效果。那么jquery的文档操作的api提供了便利的方法供我们操作我们的文档。
看一个之前我们js操作dom的例子：
var oul = document.getelementsbytagname('ul')[0];
var oli = document.createelement('li');
oli.innerhtml = '赵云';
oul.appendchild(oli);
3.1 插入操作
(1) append
语法：
父元素.append(子元素)
追加某元素，在父元素中添加新的子元素。子元素可以为：stirng | element（js对象） | jquery元素。
代码如下：
var oli = document.createelement('li');
oli.innerhtml = '哈哈哈';
$('ul').append('<li>1233</li>');
$('ul').append(oli);
$('ul').append($('#app'));
如果追加的是jquery对象，那么这些元素将从原位置上消失。简言之，就是一个移动操作。
(2) appendto
语法：
父元素.prepend(子元素)；
追加到某元素，子元素添加到父元素
$('<li>天王盖地虎</li>').appendto($('ul')).addclass('active')
要添加的元素同样既可以是stirng 、element(js对象) 、 jquery元素。
(3) prepend
语法：
父元素.prepend(子元素)；
前置添加， 添加到父元素的第一个位置。
$('ul').prepend('<li>我是第一个</li>')
(4) prependto
语法：
子元素.prependto(父元素)；
前置添加， 添加到父元素的第一个位置
$('<a href="#">小灰灰</a>').prependto('ul')
(5) after和insertafter
语法：
兄弟元素.after(要插入的兄弟元素)； 要插入的兄弟元素.insertafter(兄弟元素)；
在匹配的元素之后插入内容
$('ul').after('<h4>我是一个h3标题</h4>')
$('<h5>我是一个h2标题</h5>').insertafter('ul')
(6) before和insertbefore
语法：
兄弟元素.before(要插入的兄弟元素)； 要插入的兄弟元素.insertbefore(兄弟元素)；
在匹配的元素之后插入内容
$('ul').before('<h3>我是一个h3标题</h3>')
$('<h2>我是一个h2标题</h2>').insertbefore('ul')
3.2 克隆操作
语法：
$(选择器).clone();
克隆匹配的dom元素
$('button').click(function() {
// 1.clone()：克隆匹配的dom元素
// 2.clone(true)：元素以及其所有的事件处理并且选中这些克隆的副本(简言之，副本具有与真身一样的事件处理能力)
$(this).clone(true).insertafter(this);
})
3.3 修改操作
(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标签。
$('<br/><hr/><button>按钮</button>').replaceall('h4')
3.4 删除操作
(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()
上一篇： 笔记-JavaWeb学习之旅9