JavaScript 之jQuery(二)

最新推荐文章于 2024-05-14 07:00:00 发布

Thousandhsz

最新推荐文章于 2024-05-14 07:00:00 发布

阅读量294

点赞数 1

分类专栏：前端

本文链接：https://blog.csdn.net/qq_24036403/article/details/99170522

版权

前端专栏收录该内容

14 篇文章 0 订阅

订阅专栏

四. 操作元素与文档处理(属性，css)

--------------------------属性

$("").attr();

$("").removeAttr();

$("").prop();

$("").removeProp();

--------------------------CSS类

$("").addClass(class|fn)

$("").removeClass([class|fn])

--------------------------HTML代码/文本/值

$("").html([val|fn])

$("").text([val|fn])

$("").val([val|fn|arr])

---------------------------

$("").css("color","red")

1.操作元素

(1)attr()

设置属性值或者返回被选元素的属性值

例：

</div>

//获取值：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');

console.log($('div').attr('class'));

//2.设置多个值，参数为对象，键值对存储

$('div').attr({name: 'hahaha', class: 'happy'})

console.log($('div').attr('name'));

console.log($('div').attr('class'));

</script>

(2)removeAttr()

移除属性

例：

</div>

//删除单个属性

$('#box').removeAttr('name');

$('#box').removeAttr('class');

//删除多个属性

$('#box').removeAttr('name class');

</script>

效果图只显示了id:

没有删除属性之前是：

(3)prop()

prop() 方法设置或返回被选元素的属性和值。

当该方法用于返回属性值时，则返回第一个匹配元素的值。

当该方法用于设置属性值时，则为匹配元素集合设置一个或多个属性/值对。

语法：

返回属性的值：

$(selector).prop(property)

设置属性和值：

$(selector).prop(property,value)

设置多个属性和值：

$(selector).prop({property:value, property:value,...})

例：(只能加或修改固有属性的值)

console.log($("div").prop("class"));

$("div").prop('id','dd1');

$("div").prop({'class':"db", id:"dd2"});

效果图为：

注意：

//对于HTML元素本身就带有的固有属性，在处理时，使用prop方法。

//对于HTML元素我们自己自定义的DOM属性，在处理时，使用attr方法。

//像checkbox，radio和select这样的元素，选中属性对应“checked”和“selected”，这些也属于固有属性，因此

//需要使用prop方法去操作才能获得正确的结果。

(4)addClass()

例：

$('div').addClass("box");

$('div').addClass("box1 box2");

</script>

效果图为：

(5)removeClass()

从所有匹配的元素中删除全部或者指定的类。

移除指定的类（一个或多个）

$('div').removeClass('box')；

移除全部的类

$('div').removeClass();

(6)toggleClass()

如果存在（不存在）就删除（添加）一个类。

语法：toggleClass('box')

css样式:

<style>

.n {

color: red;

}

.active {

color: #00BFFF;

}

</style>

html与jquery内容为：

<div>

</div>

$('p').click(function(){

//动态的切换class类名为active

$(this).toggleClass('active')

});

</script>

效果图：

点击之前：

点击之后：

(7)html()

获取值：

语法;

html() 是获取选中标签元素中所有的内容

$('#box').html();

设置值：设置该元素的所有内容会替换掉标签中原来的内容

$('#box').html('<a href="https://www.baidu.com">百度一下</a>');

(8)text()

获取值：

text() 获取匹配元素包含的文本内容

语法：

$('#box').text();

设置值：

设置该所有的文本内容

$('#box').text('<a href="https://www.baidu.com">百度一下</a>');

注意：值为标签的时候不会被渲染为标签元素只会被当做值渲染到浏览器中

例：

$('div').html("<a href=''>aaaaa</a>");

$('div').text("<a href=''>bbbbbb</a>");

console.log($('div').text());

</script>

效果图：

(9)val()

获取值：

val()用于表单控件中获取值，比如input textarea select等等

设置值：

$('input').val('设置了表单控件中的值')；

例：

$("#i1").val("hsz"); // document.getElementById("i1)

console.log($("#i1").val())

</script>

效果图为：

(10)使用jQuery操作input的value值

表单控件是我们的重中之重，因为一旦牵扯到数据交互，离不开form表单的使用，比如用户的注册登录功能等

那么通过上节知识点我们了解到，我们在使用jquery方法操作表单控件的方法：

$(selector).val()//设置值和获取值

看如下HTML结构：

<!DOCTYPE html>

<head>

</head>

<body>

<form>

<input type="radio" name="sex" value="112"/>男

<input type="radio" name="sex" value="11" checked=""/>女

<input type="checkbox" value="a" checked=""/>吃饭

<input type="checkbox" value="b"/>睡觉

<input type="checkbox" value="c" checked=""/>打豆豆

</select>

</form>

</body>

</html>

效果图为：

操作表单控件代码如下：

<!DOCTYPE html>

<head>

<title>Title</title>

</head>

<body>

<form>

<input type="radio" name="sex" value="112"/>男

<input type="radio" name="sex" value="11" checked=""/>女

<input type="checkbox" value="a" checked=""/>吃饭

<input type="checkbox" value="b"/>睡觉

<input type="checkbox" value="c" checked=""/>打豆豆

</select>

</form>

$(function () {

// 一、获取值

//1.获取单选框被选中的value值,就是11

console.log($('input[type=radio]:checked').val());

//2.复选框被选中的value,获取的是第一个被选中的值,就是11

console.log($('input[type=checkbox]:checked').val());

//3.下拉列表被选中的值

var obj = $("#timespan option:selected");

// 获取被选中的值输出2

var time = obj.val();

console.log(time);

// 获取文本

var time_text = obj.text();

//输出 8:30-9:00

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(['1', '2']);

//3.设置文本框的value值

$('input[type=text]').val('试试就试试')

})

</script>

</body>

</html>

示例：全反选

<!DOCTYPE html>

<head>

<title>Title</title>

</head>

<body>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

function selectall() {

$("table :checkbox").prop("checked", true)

}

function cancel() {

$("table :checkbox").prop("checked", false)

}

//反选

function reverse() {

var idlist = $("table :checkbox");

for (var i = 0; i < idlist.length; i++) {

var element = idlist[i];

var ischecked = $(element).prop("checked");

if (ischecked) {

$(element).prop("checked", false)

} else {

$(element).prop("checked", true)

}

</script>

</body>

</html>

2. 文档操作

　　之前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);

(1)插入操作

2.1.1 append()

语法：

父元素.append(子元素)

解释：追加某元素，在父元素中添加新的子元素。子元素可以为：stirng | element（js对象） | jquery元素

代码如下：

<ul>

</ul>

var oli = document.createElement('li');

oli.innerHTML = '哈哈哈';

$('ul').append('<li>1233</li>');

$('ul').append(oli);

效果图为：

在运行后，自动添加了两个li标签和相应的内容。

2.1.2. appendTo()

语法：

子元素.appendTo(父元素)

解释：追加到某元素, 子元素添加到父元素

在2.1.1的基础后面加一条代码：

$('<li>太好笑了</li>').appendTo($('ul')).addClass('active');

效果为：

2.1.3. prepend()

语法：

父元素.prepend(子元素)；

解释：前置添加，添加到父元素的第一个位置

在2.1.2的基础后面加一条代码：

$('ul').prepend('<li>我是第一个</li>');

效果图为：

2.1.5. after()

语法：

兄弟元素.after(要插入的兄弟元素)；

要插入的兄弟元素.inserAfter(兄弟元素)；

解释：在匹配的元素之后插入内容

在2.1.3的基础后面加一条代码：

$('ul').after('<h4>我是一个h3标题</h4>');

$('<h5>我是一个h2标题</h5>').insertAfter('ul');

效果图为：

从下图可以看到h4和h5是ul的兄弟元素。插入的两个兄弟元素在ul之后的位置。

2.1.6. before()

语法：

兄弟元素.before(要插入的兄弟元素)；

要插入的兄弟元素.inserBefore(兄弟元素)；

解释：在匹配的元素之前插入内容

$('ul').before('<h3>我是一个h3标题</h3>')

$('<h2>我是一个h2标题</h2>').insertBefore('ul')

效果图为：

从下图可以看到h3和h2是ul的兄弟元素。插入的两个兄弟元素在ul之前的位置。

(2)克隆操作

语法：

$(选择器).clone();

解释：克隆匹配的DOM元素

$('button').click(function() {

// 1.clone()：克隆匹配的DOM元素

// 2.clone(true)：元素以及其所有的事件处理并且选中这些克隆的副本(简言之，副本具有与真身一样的事件处理能力)

$(this).clone(true).insertAfter(this);

})

例：

<ul>

</ul>

</div>

$('button').click(function() {

// 1.clone()：克隆匹配的DOM元素

// 2.clone(true)：元素以及其所有的事件处理并且选中这些克隆的副本(简言之，副本具有与真身一样的事件处理能力)

$('div .li1').clone(true).insertAfter('div');

})

运行效果图：

效果图分析为：每点一次克隆就在div下克隆出一个类名为li1的li标签。

(3)修改操作

2.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.3.2 replaceAll

语法：

$(selector).replaceAll(content);

$('<p>哈哈哈</p>')replaceAll('h2');

解释：替换所有。将所有的h2标签替换成p标签。

例：(此例子包含2.3.1和2.3.2的内容)

//(1)将所有的h5标题替换为a标签

$('h5').replaceWith('<a href="#">hello world</a>')

//(2)将所有h5标题标签替换成id为app的dom元素

// $('h5').replaceWith($('#app'));

//(3)将所有的h2标签替换成p标签。

// $('<p>哈哈哈</p>').replaceAll('h2');

</script>

将script的内容中的(1),(2),(3)后打代码的内容去掉注释运行后的结果分别为：

(1)原本的h5标题全部被改为a标签

h5的标题被改为只剩id为app的

(3)原来的h2标题的标签被改为p标签

(4)删除操作

2.4.1 remove()

语法：

$(selector).remove();

解释：删除节点后，事件也会删除（简言之，删除了整个标签）

$('ul').remove();

2.4.2 empty()

语法：

$(selector).empty();

解释：清空选中元素中的所有后代节点

//清空掉ul中的子元素，保留ul

$('ul').empty()

例：

<ul>

</ul>

<ul>

这是ul

</ul>

</div>

//(1)清空ul ，不保留ul标签

$('ul').remove();

//(2)清空掉ul中的子元素，保留ul

// $('ul').empty()

</script>

将script的内容中的(1),(2)后打代码的内容去掉注释运行后的结果分别为：

(1)清空ul ，不保留ul标签

运行结果分析：从图中所得，div里已经没有ul标签。

(2)清空掉ul中的子元素，保留ul

五.动画效果

1. 显示动画（show()）

$("div").show();

表示让指定的元素直接显示出来。其实这个方法的底层就是通过display: block;实现的。

2. 隐藏动画（hide()）

$("div").hide();

表示让指定的元素直接显示出来。其实这个方法的底层就是通过display: none;实现的。

案例一：

要求：点击button，实现盒子的显示和隐藏。

方式一：

<!DOCTYPE html>

<html>

<head>

#box {

width: 200px;

height: 200px;

background-color: green;

border: 1px solid red;

display: none;

}

</style>

</head>

<body>

</div>

</body>

//jquery 提供了一些方法 show() hide() 控制元素显示隐藏

var isShow = true;

$('#btn').click(function () {

if (isShow) {

$('#box').show(function () {

$(this).text('盒子出来了');

$('#btn').text('隐藏');

isShow = false;

})

} else {

$('#box').hide(function () {

$(this).text('');

$('#btn').text('显示');

isShow = true;

})

}

})

</script>

</html>

方式二：

显示和隐藏的来回切换采用的是toggle()方法：就是先执行show()，再执行hide()。

代码如下：

$('#btn').click(function(){

$('#box').toggle(function(){

$(this).text('盒子出来了');

if ($('#btn').text()=='隐藏') {

$('#btn').text('显示');

}else{

$('#btn').text('隐藏');

}

});

})

3. 滑入动画（slideDown()）

类似于生活中的卷帘门

$(selector).slideDown(speed, 回调函数);

解释：下拉动画，显示元素。

　　注意：省略参数或者传入不合法的字符串，那么则使用默认值：400毫秒（同样适用于fadeIn/slideDown/slideUp）

4. 滑出动画效果（slideUp()）：

$(selector).slideUp(speed, 回调函数);

解释：上拉动画，隐藏元素。

5. 滑入滑出切换动画效果（slideToggle）

$(selector).slideToggle(speed, 回调函数);

关于滑入滑出效果：

<!DOCTYPE html>

<html>

<style>

div {

width: 300px;

height: 300px;

display: none;

background-color: green;

}

</style>

</head>

<body>

$(function () {

//点击按钮后产生动画

$("button:eq(0)").click(function () {

//滑入动画： slideDown(毫秒值，回调函数[显示完毕执行什么]);

$("div").slideDown(function () {

alert("动画执行完毕！");

});

//滑出动画

$("button:eq(1)").click(function () {

//滑出动画：slideUp(毫秒值，回调函数[显示完毕后执行什么]);

$("div").slideUp(function () {

alert("动画执行完毕！");

});

$("button:eq(2)").click(function () {

//滑入滑出切换（同样有四种用法）

$("div").slideToggle();

})

</script>

</body>

</html>

6. 淡入动画效果（fadeIn()）

$(selector).fadeIn(speed, callback);

作用：让元素以淡淡的进入视线的方式展示出来。

7. 淡出动画效果（fadeOut()）

$(selector).fadeOut(speed,callback);

作用：让元素以渐渐消失的方式隐藏起来

8. 淡入淡出切换动画效果（fadeToggle()）

$(selector).fadeToggle(speed,callback);

作用：通过改变透明度，切换匹配元素的显示或隐藏状态。

参数的含义同show()方法。

<!DOCTYPE html>

<html>

<style>

div {

width: 300px;

height: 300px;

display: none;

background-color: green;

}

</style>

</head>

<body>

$(function () {

//点击按钮后产生动画

$("button:eq(0)").click(function () {

//淡入动画： fadeIn;

$("div").fadeIn(function () {

});

//淡出动画

$("button:eq(1)").click(function () {

//淡出动画：fadeOut;

$("div").fadeOut(function () {

});

$("button:eq(2)").click(function () {

//淡入淡出切换

$("div").fadeToggle();

})

</script>

</body>

</html>

Thousandhsz

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript 之jQuery(二)

四. 操作元素与文档处理(属性，css)--------------------------属性$("").attr();$("").removeAttr();$("").prop();$("").removeProp();--------------------------CSS类$("").addClass(class|fn)$("").removeClass(...
复制链接

扫一扫

专栏目录