当前位置:

首页 > temp > JavaScript教程 >

Web前端基础(17):jQuery基础(四)

作者：@小灰灰
本文为作者原创，转载请注明出处：https://www.cnblogs.com/liuhui0308/p/11887648.html

阅读目录(Content)

1. jQuery的属性操作
- 1.1 html属性操作
  - 1.1.1 attr()
  - 1.1.2 removeAttr()
- 1.2 DOM属性操作
  - 1.2.1 prop()
  - 1.2.2 attr()和prop()的区别
- 1.3 类样式操作
  - 1.3.1 addClass
  - 1.3.2 removeClass
  - 1.3.3 toggleClass
- 1.4 值操作
  - 1.4.1 html
  - 1.4.2 text
  - 1.4.3 val
2. 操作input的value值
3. 文档操作
- 3.1 插入操作
- 3.2 克隆操作
- 3.3 修改操作
- 3.4 删除操作

回到顶部(go to top)

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('设置了表单控件中的值')；

回到顶部(go to top)

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" />男
<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=""/>打豆豆
<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>

回到顶部(go to top)

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()

出处：https://www.cnblogs.com/liuhui0308/p/11887648.html

栏目列表

首页 > temp > JavaScript教程 >

Web前端基础(17):jQuery基础(四)

1. jQuery的属性操作

1.1 html属性操作

1.1.1 attr()

1.1.2 removeAttr()

1.2 DOM属性操作

1.2.1 prop()

1.2.2 attr()和prop()的区别

1.3 类样式操作

1.3.1 addClass

1.3.2 removeClass

1.3.3 toggleClass

1.4 值操作

1.4.1 html

1.4.2 text

1.4.3 val

2. 操作input的value值

3. 文档操作

3.1 插入操作

(1) append

(2) appendTo

(3) prepend

(4) prependTo

(5) after和insertAfter

(6) before和insertBefore

3.2 克隆操作

3.3 修改操作

(1) replaceWith

(2) replaceAll

3.4 删除操作

(1) remove

(2) detach

(3) empty