开发工程师必备————【Day22】前端开发之jQuery更多操作

今日内容概要

• jQuery更多操作(属性、样式、数据值)
• jQuery绑定事件
• jQuery简易动画效果
• Bootstrap页面框架

筛选器方法

1.下一个元素：

$("#id").next()
$("#id").nextAll()
$("#id").nextUntil("#i2")
1
2
3

2.上一个元素：

$("#id").prev()
$("#id").prevAll()
$("#id").prevUntil("#i2")
1
2
3

3.父亲元素：

$("#id").parent()
$("#id").parents()    //查找当前元素的所有父辈元素
$("#id").parentsUntil()      //查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止。
1
2
3

4.儿子和兄弟元素：

$("#id").children();       //儿子们
$("#id").siblings();        //兄弟们
1
2

• 查找
  搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。

$("div").find("p")
等价于$("div p")
1
2

• 筛选
  筛选出与指定表达式匹配的元素集合。这个方法用于缩小匹配的范围。用逗号分隔多个表达式。

$("div").filter(".c1")               //从结果集中过滤出有c1样式类的
等价于$("div.c1")
补充：
.first()             //获取匹配的第一个元素
.last()              //获取匹配的最后一个元素
.not()               //从匹配元素的集合中删除与指定表达式匹配的元素
.has()               //保留包含特定后代的元素，去掉那些不含有指定后代的元素
.eq()                //索引值等于指定值的元素
1
2
3
4
5
6
7
8

链式操作的底层原理
对象调用方法之后还会返回一个对象 从而实现链式操作的效果

class MyClass(object):
   def func1(self):
       print('from func1')
       return self
   def func2(self):
       print('from func2')
       return self
   def func3(self):
       print('from func3')
       return self
obj = MyClass()
obj.func1().func2().func3()
1
2
3
4
5
6
7
8
9
10
11
12

操作标签

1.样式类

addClass();       //添加指定的css类名
removeClass();     //移除指定的css类名
hasClass();        //判断样式不存在
toggleClass();     //切换css类名，如果有就移除，如果没有就添加。
1
2
3
4

jQuery操作	原生JS操作
addClass()	classList.add()
removeClass()	classList.remove()
hasClass()	classList.contains()
toggleClass()	classList.toggle()

2.CSS

css("color","red")      //DOM操作：tag.style.color="red"
1

jQuery操作	原生JS操作
.css(‘样式名’,‘样式值’)	style.样式名 = ‘样式值’

3.位置操作

offset()     //获取匹配元素在当前窗口的相对偏移或设置元素位置
position()    //获取匹配元素相对父元素的偏移
scrollTop()    //获取匹配元素相对滚动条顶部的偏移
scrollLeft()    //获取匹配元素相对滚动条左侧的偏移
1
2
3
4

4.文本操作

HTML代码：
html()// 取得第一个匹配元素的html内容
html(val)// 设置所有匹配元素的html内容

文本值：
text()// 取得所有匹配元素的内容
text(val)// 设置所有匹配元素的内容

值：
val()// 取得第一个匹配元素的当前值
val(val)// 设置所有匹配元素的值
val([val1, val2])// 设置多选的checkbox、多选select的值

设置值：
$("[name='hobby']").val(['basketball', 'football']);
$("#s1").val(["1", "2"])
举个栗子：获取被选中的checkbox或radio的值：
<label for="c1">女</label>
<input name="gender" id="c1" type="radio" value="0">
<label for="c2">男</label>
<input name="gender" id="c2" type="radio" value="1">
可以使用：
$("input[name='gender']:checked").val()
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

jQuery操作	原生JS操作
text()	innerText()
html()	innerHTML()
val()	value
[0].files	files

5.属性操作

用于ID等或自定义属性：
attr(attrName)      //返回第一个匹配元素的属性值
attr(attrName,attrValue)        //为所有匹配元素设置一个属性值
attr({k1:v1,k2:v2})              //为所有匹配元素设置多个属性值
removeAttr()                 //从每一个匹配的元素中删除一个属性

用于checkbox和radio
prop()     //获取属性
removeProp()        //移除属性
1
2
3
4
5
6
7
8
9

jQuery操作	原生JS操作
attr() 静态属性 ;prop() 动态变换(checked)	setAttribute() getAttribute()

注意：
在1.x及2.x版本的jQuery中使用attr对checkbox进行赋值操作时会出bug，在3.x版本的jQuery中则没有这个问题。为了兼容性，我们在处理checkbox和radio的时候尽量使用特定的prop()，不要使用attr(“checked”, “checked”)。

<input type="checkbox" value="1">
<input type="radio" value="2">
<script>
 $(":checkbox[value='1']").prop("checked", true);
 $(":radio[value='2']").prop("checked", true);
script>
1
2
3
4
5
6

prop和attr的区别：
attr全称attribute(属性)
prop全称property(属性)

虽然都是属性，但他们所指的属性并不相同，attr所指的属性是HTML标签属性，而prop所指的是DOM对象属性，可以认为attr是显式的，而prop是隐式的。

举个例子：

<input type="checkbox" id="i1" value="1">
针对上面的代码，

$("#i1").attr("checked")  // undefined
$("#i1").prop("checked")  // false
可以看到attr获取一个标签内没有的东西会得到undefined，而prop获取的是这个DOM对象的属性，因此checked为false。

如果换成下面的代码：

<input type="checkbox" checked id="i1" value="1">
再执行：

$("#i1").attr("checked")   // checked
$("#i1").prop("checked")  // true
这已经可以证明attr的局限性，它的作用范围只限于HTML标签内的属性，而prop获取的是这个DOM对象的属性，选中返回true，没选中返回false。

接下来再看一下针对自定义属性，attr和prop又有什么区别：

<input type="checkbox" checked id="i1" value="1" me="自定义属性">
执行以下代码：

$("#i1").attr("me")   // "自定义属性"
$("#i1").prop("me")  // undefined
可以看到prop不支持获取标签的自定义属性。

总结一下：

对于标签上有的能看到的属性和自定义属性都用attr
对于返回布尔值的比如checkbox、radio和option的是否被选中都用prop。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

6.文档处理

添加到指定元素内部的后面
$(A).append(B)     //把B追加到A
$(A).appendTo(B)       //把A追加到B

添加到指定元素内部的前面
$(A).prepend(B)// 把B前置到A
$(A).prependTo(B)// 把A前置到B

添加到指定元素外部的后面
$(A).after(B)// 把B放到A的后面
$(A).insertAfter(B)// 把A放到B的后面

添加到指定元素外部的前面
$(A).before(B)// 把B放到A的前面
$(A).insertBefore(B)// 把A放到B的前面

移除和清空元素
remove()// 从DOM中删除所有匹配的元素。
empty()// 删除匹配的元素集合中所有的子节点。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

jQuery操作	原生JS操作
append()	append()
prepend()
after()
before()
remove() 移除标签
empty() 清空标签

jQuery绑定事件

1.JS绑定事件

标签对象.on事件名 = function(){事件代码}
  	btnEle.onclick = function(){alert(123)}
1
2

2.jQuery绑定事件

方式1
   jQuery对象.事件名(function(){事件代码})
        $btnEle.click(function(){alter(123)})
方式2
   jQuery对象.on('事件名',function(){事件代码})
       	$btnEle.on('click',function(){alter(123)})
1
2
3
4
5
6

注意：有时候使用jQuery的方式1绑定事件如果无法触发 可以切换为方式2

DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Titletitle>
   <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js">script>
head>
<body>
<button id="d1">哈哈哈button>
<script>
   let $btnEle = $('#d1')
   //方法一：
   $btnEle.click(function (){
       alert('我就不信了')
   })
   //方法二
   $btnEle.on('click',function (){
       alert('你怎么这么好看')
   })

script>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

3.常用事件
click(function(){…})
hover(function(){…})
blur(function(){…})
focus(function(){…})
change(function(){…})
keyup(function(){…})

• 克隆事件：

DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Titletitle>
   <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js">script>
   <style>
       .c1{
           border: 3px solid black;
           background-color: orange;
       }
   style>
head>
<body>
<button id="d1" class="c1">大家好，我是ikunbutton>
<script>
   let $btnEle = $('#d1');
   $btnEle.click(function (){
       //this指代的是当前被操作的标签对象，如果想调用jQuery的方法，需要转换  $()
       $('body').append($(this).clone(true))
   })
script>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

• hover事件示例：

DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Titletitle>
head>
<body>
<p>苍茫的天涯是我的哎，绵绵的青山脚下一片海！p>

<script src="jQuery-3.3.1.js">
script>
<script>
   $('p').hover(
       function () {
           alert('来啦，老弟')
       },
       function () {
           alert('慢走哦～')
       }
   )
script>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

• 实时监听input输入值变化示例：

DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta http-equiv="x-ua-compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>实时监听input输入值变化title>
head>
<body>
<input type="text" id="i1">

<script src="jquery-3.2.1.min.js">script>
<script>
 /*
 * oninput是HTML5的标准事件
 * 能够检测textarea,input:text,input:password和input:search这几个元素的内容变化，
 * 在内容修改后立即被触发，不像onchange事件需要失去焦点才触发
 * oninput事件在IE9以下版本不支持，需要使用IE特有的onpropertychange事件替代
 * 使用jQuery库的话直接使用on同时绑定这两个事件即可。
 * */
 $("#i1").on("input propertychange", function () {
   alert($(this).val());
 })
script>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

阻止后续事件

1.能够触发form表单提交数据动作的标签有两个

方法一：<input type="submit">
方法二：<button></button>
button标签只有在form里面才能触发，其他情况下就是普通的按钮。
1
2
3

2.概念
给已经有事件的标签绑定事件 会先执行绑定的 再去执行默认的
我们也可以让标签之前的事件不执行
return false

$(':submit').click(function (e){
  alert('一定要细心 千万不要慌!!!')
   // return false  方式1
   e.preventDefault()方式2
})
1
2
3
4
5

事件冒泡

涉及到标签嵌套并且有相同事件的时候 那么会逐级往上反馈并执行

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>阻止默认事件</title>
</head>
<body>

<form action="">
   <button id="b1">点我</button>
</form>

<script src="jquery-3.3.1.min.js"></script>
<script>
   $("#b1").click(function (e) {
       alert(123);
       //return false;       //方式一
       e.preventDefault();      //方式二
   });
</script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

3.阻止事件冒泡
涉及到标签嵌套并且有相同事件的时候，name会逐渐往上反馈并执行。

DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>阻止事件冒泡title>
head>
<body>
<div>
   <p>
       <span>点我span>
   p>
div>
<script src="jquery-3.3.1.min.js">script>
<script>
   $("span").click(function (e) {
       alert("span");
       e.stopPropagation();             //方式一
   });

   $("p").click(function () {
       alert("p");
       return false;                  //方式二
   });
   $("div").click(function () {
       alert("div");
   })
script>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

事件委托

1.创建标签的两种方式

方法一：JS
		document.createElement()
方法二：jQuery
		$('<标签名>')
1
2
3
4

事件绑定默认情况下是不会对动态创建的标签生效的，如果想生效需要事件委托。

$('div').on('click','button',function () {
   alert('你犯困的样子萌萌哒')
})
1
2
3

上述方式就可以解决动态标签事件的执行问题(注意委托指得是标签内部的标签)

动画效果（了解）

// 基本
show([s,[e],[fn]])
hide([s,[e],[fn]])
toggle([s],[e],[fn])
// 滑动
slideDown([s],[e],[fn])
slideUp([s,[e],[fn]])
slideToggle([s],[e],[fn])
// 淡入淡出
fadeIn([s],[e],[fn])
fadeOut([s],[e],[fn])
fadeTo([[s],o,[e],[fn]])
fadeToggle([s,[e],[fn]])
// 自定义（了解即可）
animate(p,[s],[e],[fn])
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

举个栗子：

DOCTYPE html>
<html lang="zh-CN">
<head>
 <meta charset="UTF-8">
 <meta http-equiv="x-ua-compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>点赞动画示例title>
 <style>
   div {
     position: relative;
     display: inline-block;
   }
   div>i {
     display: inline-block;
     color: red;
     position: absolute;
     right: -16px;
     top: -5px;
     opacity: 1;
   }
 style>
head>
<body>

<div id="d1">点赞div>
<script src="jquery-3.2.1.min.js">script>
<script>
 $("#d1").on("click", function () {
   var newI = document.createElement("i");
   newI.innerText = "+1";
   $(this).append(newI);
   $(this).children("i").animate({
     opacity: 0
   }, 1000)
 })
script>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

Bootstrap框架

提前写好了所有的标签样式 直接拷贝使用即可
网站地址：https://v3.bootcss.com/
1.前提：
使用之前需要先导入 bootstrap涉及到js的部分需要使用jQuery

   
   <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
   
   <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous">script>
1
2
3
4

2.布局容器
Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器。我们提供了两个作此用处的类。注意，由于 padding 等属性的原因，这两种 容器类不能互相嵌套。
.container 类用于固定宽度并支持响应式布局的容器。

<div class="container">
 ...
div>
1
2
3

.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。

<div class="container-fluid">
 ...
div>
1
2
3

3.栅格系统
Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类，还有强大的mixin 用于生成更具语义的布局。
栅格参数

超小屏幕 手机 (<768px)======>.col-xs-
小屏幕 平板 (≥768px)========>.col-sm-
中等屏幕 桌面显示器 (≥992px)====>.col-md-
大屏幕 大桌面显示器 (≥1200px)=====>.col-lg-
1
2
3
4

使用单一的一组 .col-md-* 栅格类，就可以创建一个基本的栅格系统，在手机和平板设备上一开始是堆叠在一起的（超小屏幕到小屏幕这一范围），在桌面（中等）屏幕设备上变为水平排列。所有“列（column）必须放在 ” .row 内。

<div class="row">
 <div class="col-md-1">.col-md-1div>
 <div class="col-md-1">.col-md-1div>
 <div class="col-md-1">.col-md-1div>
 <div class="col-md-1">.col-md-1div>
 <div class="col-md-1">.col-md-1div>
 <div class="col-md-1">.col-md-1div>
 <div class="col-md-1">.col-md-1div>
 <div class="col-md-1">.col-md-1div>
 <div class="col-md-1">.col-md-1div>
 <div class="col-md-1">.col-md-1div>
 <div class="col-md-1">.col-md-1div>
 <div class="col-md-1">.col-md-1div>
div>
<div class="row">
 <div class="col-md-8">.col-md-8div>
 <div class="col-md-4">.col-md-4div>
div>
<div class="row">
 <div class="col-md-4">.col-md-4div>
 <div class="col-md-4">.col-md-4div>
 <div class="col-md-4">.col-md-4div>
div>
<div class="row">
 <div class="col-md-6">.col-md-6div>
 <div class="col-md-6">.col-md-6div>
div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

4.全局css样式
具体自行查看网站上所讲！

• 表格样式：

DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Titletitle>
   <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js">script>
   <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
   <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js">script>
head>
<body>
<div class="row">
   <h1 class="text-center">h1>
   <table class="table table-bordered table-striped">
       <thead>
       <tr>
           <th>学号th>
           <th>姓名th>
           <th>年龄th>
       tr>
       thead>
       <tbody>
       <tr>
           <td>1td>
           <td>jasontd>
           <td>18td>
       tr>
       <tr>
           <td>2td>
           <td>jasontd>
           <td>38td>
       tr>
       <tr>
           <td>3td>
           <td>jasontd>
           <td>38td>
       tr>

       tbody>
   table>
div>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

5.组件
图标库：http://www.fontawesome.com.cn/
需要先下载源码或者文件。
直接cv即可。

6.js插件
https://v3.bootcss.com/javascript/
直接cv即可。