一、jQuery 使用：

1.本地引入

1
<script src="js/jquery-1.10.1.js" type="text/javascript"></script>

2.CDN 远程引入

1
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>

3.使用 jQuery

方式一：

1
2
3
4
5
6
7
8
9
10
<head>
  <meta charset="UTF-8">
  <title>jQuery</title>
  <script src="../JS/jquery-3.5.1.js"></script>
  <script type="text/javascript">
      $(function () {

      });
  </script>
</head>

方式二：

1
2
3
4
5
6
<body>
  <script src="../JS/jquery-3.5.1.js"></script>
  <script type="text/javascript">

  </script>
</body>

二、jQuery 对象和 dom 对象区分

1.jQuery 对象与 dom 对象

① DOM 对象：

  1. 通过 getElementById()查询出来的标签对象时 Dom 对象
  2. 通过 getElementName()查询出来的标签对象时 Dom 对象
  3. 通过 getElementByTagName()查询出来的标签对象是 Dom 对象
  4. 通过 createElemnet()方法创建的对象,是 Dom 对象

DOM 对象 Alert 出来的效果是:[object HTML 标签名 Element]

② jQuery 对象：

  1. 通过 jQuery 提供的 API 创建的对象，是 jQuery 对象
  2. 通过 jquery 包装的 Dom 对象,也是 jQuery 对象
  3. 通过 jquery 提供的 API 查询到的对象,是 jQuery 对象

2.jQuery 对象的本质

JQuery 对象时 dom 对象的数组 + JQuery 提供的一系列功能函数。

3.jQuery 对象和 Dom 对象使用的区别

  1. JQuery 对象不能使用 DOM 对象的属性和方法
  2. DOM 对象也不能使用 JQuery 对象的属性和方法

4.DOM 对象 和 jQuery 对象互转

  • dom 对象转为 JQuery 对象
    • 先有 Dom 对象
    • $(DOM 对象) 就可以转换为 jQuery 对象
  • jQuery 对象转为 dom 对象
    • 先有 jQuery 对象
    • jQuery 对象(下标)取出相对应的 DOM 对象

image-20200719165711650

三、jQuery 的 2 把利器

1.jQuery 函数; $/jQuery

  • jQuery 向外暴露的就是 jQuery 函数，可以直接使用
  • 当成一般函数使用：$(param)
    • param 是 function: 相当于 windown.onload = function(文档加载完成的监听)
    • param 是选择器字符串：查找所有的匹配 Dom 元素，返回包含所有的 DOM 元素的 jQuery 对象
    • param 是 DOM 元素：将 DOM 元素对象包装成 jQuery 对象返回$(this)
    • param 是标签字符串： 创建标签 DOM 元素对象并包装为 jQuery 对象返回
  • 当成对象使用：$.xxx
    • each(obj/arr, function(key, value){})
    • trim(str)

2.jQuery 对象

  • 包含所有匹配的 n 个 DOM 元素的伪数组对象
  • 执行$()返回的就是 jQuery 对象
  • 基本行为：
    • length/size(): 得到 dom 元素的个数
    • [index] : 得到指定下标对应的 dom 元素
    • each(function(index, domEle){}): 遍历所有的 dom 元素
    • index(): 得到当前 dom 元素在所在兄弟中的下标

四、jQuery 选择器

  • 有特定语法规则（CSS 选择器）的字符串
  • 用来查找某个/些 DOM 元素：$(selector)

1.基本选择器

方法描述
#id根据给定的 ID 匹配一个元素。
tagName/*根据匹配标签元素/所有元素。
.class根据给定的类匹配元素。
selector1,selector2,selector3将每一个选择器匹配到的元素合并后一起返回。
selector1selector2selector3将每一个选择器匹配到的元素交集部分一起返回。

2.层次选择器

找子孙后代，兄弟元素

方法描述
selector1>selector2子元素
selector1 selector2后代元素

3.过滤选择器

方法描述
:first获取第一个元素
:last获取最后个元素
:eq(index)匹配一个给定索引值的元素
:lt匹配所有小于给定索引值的元素
:gt匹配所有大于给定索引值的元素
:odd匹配所有索引值为奇数的元素，从 0 开始计数
:even匹配所有索引值为偶数的元素，从 0 开始计数
:not(selector)去除所有与给定选择器匹配的元素
:hidden匹配所有不可见元素，或者 type 为 hidden 的元素
:visible匹配所有的可见元素
[attrName]匹配包含给定属性的元素。
[attrName=value]匹配给定的属性是某个特定值的元素

代码示例 [attrName]：

1
2
3
4
<div>
  <p>Hello!</p>
</div>
<div id="test2"></div>

jQuery 代码：

1
$("div[id]")

运行结果：

1
<div id="test2"></div>

代码示例 [attrName=value]：

1
2
3
<input type="checkbox" name="newsletter" value="Hot Fuzz" />
<input type="checkbox" name="newsletter" value="Cold Fusion" />
<input type="checkbox" name="accept" value="Evil Plans" />

jQuery 代码：

1
$("input[name='newsletter']").attr("checked", true);

运行结果：

1
2
<input type="checkbox" name="newsletter" value="Hot Fuzz" checked="true" />
<input type="checkbox" name="newsletter" value="Cold Fusion" checked="true" />

4.表单选择器

方法描述
:input匹配所有 input, textarea, select 和 button 元素
:text匹配所有的单行文本框
:checkbox匹配所有复选框
:radio匹配所有单选按钮
:checked匹配所有选中的被选中元素(复选框、单选框等，不包括 select 中的 option)

代码示例 【:input】：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<form>
  <input type="button" value="Input Button" />
  <input type="checkbox" />

  <input type="file" />
  <input type="hidden" />
  <input type="image" />

  <input type="password" />
  <input type="radio" />
  <input type="reset" />

  <input type="submit" />
  <input type="text" />
  <select>
    <option>Option</option>
  </select>

  <textarea></textarea>
  <button>Button</button>
</form>

jQuery 代码：

1
$(":input")

运行结果：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<input type="button" value="Input Button" />
<input type="checkbox" />
<input type="file" />
<input type="hidden" />
<input type="image" />

<input type="password" />
<input type="radio" />
<input type="reset" />

<input type="submit" />
<input type="text" />
<select>
  <option>Option</option>
</select>

<textarea></textarea>
<button>Button</button>

代码示例 【:checked】：

1
2
3
4
5
<form>
  <input type="checkbox" name="newsletter" checked="checked" value="Daily" />
  <input type="checkbox" name="newsletter" value="Weekly" />
  <input type="checkbox" name="newsletter" checked="checked" value="Monthly" />
</form>

jQuery 代码：

1
$("input:checked")

运行结果：

1
2
<input type="checkbox" name="newsletter" checked="checked" value="Daily" />
<input type="checkbox" name="newsletter" checked="checked" value="Monthly" />

五、属性/文本

  • 操作标签的属性, 标签体文本
方法描述
attr(name) / attr(name, value)读写非布尔值的标签属性
prop(name) / prop(name, value)读写布尔值的标签属性
removeAttr(name)/removeProp(name)删除属性
addClass(classValue)添加 class
removeClass(classValue)移除指定 class
val() / val(value)读写标签的 value
html() / html(htmlString)读写标签体文本

六、CSS 模块

1. style 样式

方法描述
css(styleName)根据样式名得到对应的值
css(styleName, value)设置一个样式
css(多个样式对)设置多个样式

代码示例：

  1. 取得第一个段落的 color 样式属性的值。
1
$("p").css("color");
  1. 将所有段落的字体颜色设为红色并且背景为蓝色。
1
$("p").css({ color: "#ff0011", background: "blue" });
3. 将所有段落字体设为红色

1
$("p").css("color","red");

2.位置坐标

方法描述
offset()读/写当前坐标（原点是页面左上角）
position()读写当前元素的坐标的（原点是父元素左上角）
scrollTop()/scrollLeft()读/写元素/页面的滚动坐标

代码示例：

  1. offset()
1
2
<p>Hello</p>
<p>2nd Paragraph</p>
1
2
// jQuery代码 var p = $("p:last"); var offset = p.offset(); p.html( "left: " +
offset.left + ", top: " + offset.top );

运行结果

1
2
<p>Hello</p>
<p>left: 0, top: 35</p>
  1. position()
1
2
<p>Hello</p>
<p>2nd Paragraph</p>
1
2
// jQuery代码 var p = $("p:first"); var position = p.position();
$("p:last").html( "left: " + position.left + ", top: " + position.top );

运行结果：

1
2
<p>Hello</p>
<p>left: 15, top: 15</p>
  1. scrollTop()
1
2
<p>Hello</p>
<p>2nd Paragraph</p>
1
2
// jQuery代码 var p = $("p:first"); $("p:last").text( "scrollTop:" +
p.scrollTop() );

运行结果：

1
2
<p>Hello</p>
<p>scrollTop: 0</p>
  1. scrollLeft()
1
2
<p>Hello</p>
<p>2nd Paragraph</p>
1
2
3
// jQuery代码
var p = $("p:first");
$("p:last").text( "scrollLeft:" + p.scrollLeft() );

运行结果：

1
2
<p>Hello</p>
<p>scrollLeft: 0</p>

3.尺寸

方法描述
width()/height()width/height
innerWidth()/innerHeight()width + padding
outerWidth()/outerHeight()width + padding + border
outerWidth(true)/outerHeight(true)width + padding + border+margin

代码示例：

  1. width() 获取第一段的高
1
$("p").height();
  1. innerWidth() 获取第一段落内部区域高度。
1
2
<p>Hello</p>
<p>2nd Paragraph</p>
1
2
3
// jQuery
var p = $("p:first");
$("p:last").text("innerHeight:" + p.innerHeight());

结果示例：

1
2
<p>Hello</p>
<p>innerHeight: 16</p>
  1. outerWidth()
1
2
<p>Hello</p>
<p>2nd Paragraph</p>
1
2
3
4
5
6
7
8
// jQuery
var p = $("p:first");
$("p:last").text(
  "outerHeight:" +
    p.outerHeight() +
    " , outerHeight(true):" +
    p.outerHeight(true)
);

运行结果：

1
2
<p>Hello</p>
<p>outerHeight: 35 , outerHeight(true):55</p>

七、筛选模块

1.过滤

在 jQuery 对象内部的元素中找出部分匹配的元素, 并封装成新的 jQuery 对象返回

方法描述
first()获取第一个元素
last()获取最后个元素
eq(index)获取第 N 个元素
filter(selector)筛选出与指定表达式匹配的元素集合。
not(selector)删除与指定表达式匹配的元素
has(selector)保留包含特定后代的元素，去掉那些不含有指定后代的元素。

代码示例：

  1. filter(selector)
1
2
3
<p>Hello</p>
<p>Hello Again</p>
<p class="selected">And Again</p>
1
2
// jQuery
$("p").filter(".selected");
1
2
// 运行结果
<p class="selected">And Again</p>
  1. not(selector)
1
2
<p>Hello</p>
<p id="selected">Hello Again</p>
1
2
// jQuery
$("p").not($("#selected")[0]);
1
2
// 运行结果
<p>Hello</p>
3. **has(selector)**

1
2
3
4
5
6
7
8
9
10
11
12
<ul>
  <li>list item 1</li>
  <li>
    list item 2
    <ul>
      <li>list item 2-a</li>
      <li>list item 2-b</li>
    </ul>
  </li>
  <li>list item 3</li>
  <li>list item 4</li>
</ul>
1
2
// jQuery
$("li").has("ul").css("background-color", "red");

2.查找

查找 jQuery 对象内部的元素的子孙/兄弟/父母元素, 并封装成新的 jQuery 对象返回

方法描述
children(selector)取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合。（子元素）
find(selector)搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的方法。（后代元素）
preAll(selector)查找当前元素之前所有的同辈元素（前的所有兄弟）
siblings(selector)取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合。（所有兄弟）
parent()取得一个包含着所有匹配元素的唯一父元素的元素集合。（父元素）

代码示例：

  1. preAll(selector)
1
2
3
4
<div></div>
<div></div>
<div></div>
<div></div>
1
2
// jQuery
$("div:last").prevAll().addClass("before");
1
2
3
4
// 运行结果
<div class="before"></div>
<div class="before"></div>
<div class="before"></div>

八、文档处理(CUD)模块

1.增加

方法描述
append() / appendTo()插入后部
preppend() / preppendTo()插入前部
before()插到前面
after()插到后面

2.删除

方法描述
remove()从 DOM 中删除所有匹配的元素。(将自己及内部的孩子都删除)
empty()删除匹配的元素集合中所有的子节点。(掏空(自己还在))

代码示例：

  1. remove()
1
2
3
<p>Hello</p>
how are
<p>you?</p>
1
2
// jQuery
$("p").remove();
1
// 运行结果 how are

3.更新

方法描述
replaceWith()将所有匹配的元素替换成指定的 HTML 或 DOM 元素。

代码示例：

1
2
3
<p>Hello</p>
<p>cruel</p>
<p>World</p>
1
2
// jQuery
$("p").replaceWith("<b>Paragraph. </b>");
1
2
3
4
// 运行结果
<b>Paragraph. </b>
<b>Paragraph. </b>
<b>Paragraph. </b>

九、事件模块

1.绑定事件

  • eventName(function(){})
  • on(‘eventName’, function(){})
    • 常用: click,mouseenter /mouseleave , mouseover /mouseout,focus/blur
  • hover(function(){}, function(){})

2.解绑事件

  • off(‘eventName’)

3.事件委托

理解: 将子元素的事件委托给父辈元素处理

  • 事件监听绑定在父元素上, 但事件发生在子元素上
  • 事件会冒泡到父元素
  • 但最终调用的事件回调函数的是子元素: event.target

好处:

  • 新增的元素没有事件监听
  • 减少监听的数量(n==>1)

jQuery 的事件委托 API

  • 设置事件委托: $(parentSelector).delegate(childrenSelector, eventName, callback)
  • 移除事件委托: $(parentSelector).undelegate(eventName)

代码示例：

1
2
3
4
5
6
7
8
9
10
11
<ul>
  <li>11111</li>
  <li>1111111</li>
  <li>111111111</li>
  <li>11111111111</li>
</ul>

<li>22222</li>
<br />
<button id="btn">添加新的li</button>
<br />
1
2
3
4
5
6
7
// jQuery
$("ul>li").click(function () {
  this.style.background = "red";
});
$("#btn").click(function () {
  $("ul").append("<li>新增的li....</li>");
});
1
2
3
4
5
6
7
8
// 运行结果
<ul>
  <li>11111</li>
  <li>1111111</li>
  <li>111111111</li>
  <li>11111111111</li>
  <li>新增的li....</li>
</ul>

4.事件坐标

方法描述
event.offsetX原点是当前元素左上角
event.clientX原点是窗口左上角
event.pageX原点是页面左上角

代码示例：

1
2
3
4
5
6
7
8
<div class="out">
  外部DIV
  <div class="inner">内部div</div>
</div>

<div class="divBtn">
  <button id="btn1">测试事件坐标</button>
</div>
1
2
3
4
5
6
$("#btn1").click(function (event) {
  // event 事件
  console.log(event.offsetX, event.offsetY); // 原点为事件元素的左上角
  console.log(event.clientX, event.clientY); // 原点为窗口的左上角
  console.log(event.pageX, event.pageY); // 原点为页面的左上角
});

5.事件相关

  • 停止事件冒泡: event.stopPropagation()
  • 阻止事件的默认行为: event.preventDefault()

代码示例：

1
2
3
4
5
6
7
8
9
10
11
<ul>
  <li>1111</li>
  <li>2222</li>
  <li>3333</li>
  <li>4444</li>
</ul>

<li>22222</li>
<br />
<button id="btn1">添加新的li</button>
<button id="btn2">删除ul上的事件委托的监听器</button>
1
2
3
4
5
6
7
8
9
10
11
12
// jQuery
// 设置事件委托
$("ul").delegate("li", "click", function () {
  this.style.background = "red";
});
$("#btn1").click(function () {
  $("ul").append("<li>新增的li....</li>");
});
// 移除事件委托
$("#btn2").click(function () {
  $("ul").undelegate("click");
});

十、JQuery 动画

1.基本动画

方法描述
show()将隐藏的元素显示
hide()将可见的元素隐藏
toggle()可见就隐藏，不可见就显示

以上的动画都可以添加参数：

① 第一个参数就是显示 执行的时间，以毫秒为单位

② 第二个参数就是动画的回调函数（动画完成以后调用的函数）

代码示例：

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
43
44
45
<style type="text/css">
  * {
    margin: 0px;
  }

  .div1 {
    position: absolute;
    width: 200px;
    height: 200px;
    top: 50px;
    left: 10px;
    background: red;
    display: none;
  }
</style>
<body>
  <button id="btn1">瞬间显示</button>
  <button id="btn2">慢慢显示</button>
  <button id="btn3">慢慢隐藏</button>
  <button id="btn4">显示隐藏切换</button>

  <div class="div1"></div>

  <script src="../JS/jquery-3.5.1.js" type="text/javascript"></script>
  <script type="text/javascript">
    var $div1 = $(".div1");
    // 1. 点击btn1, 立即显示
    $("#btn1").click(function () {
      $div1.show();
    });
    // 2. 点击btn2，慢慢显示
    $("#btn2").click(function () {
      $div1.show(1000);
    });

    // 3. 点击btn3, 慢慢隐藏
    $("#btn3").click(function () {
      $div1.hide(1000);
    });
    // 4.点击btn4, 切换显示/隐藏
    $("#btn4").click(function () {
      $div1.toggle(1000);
    });
  </script>
</body>

2.淡入淡出动画

动画描述
fadeln()淡入
fadeOut()淡出
fade To()在指导时长内慢慢将透明度修改指定的值。0 透明 1 完成可见 0.5 透明
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
43
44
45
46
47
48
49
50
51
<style type="text/css">
  * {
    margin: 0px;
  }

  .div1 {
    position: absolute;
    width: 200px;
    height: 200px;
    top: 50px;
    left: 10px;
    background: red;
  }
</style>

<body>
  <button id="btn1">慢慢淡出</button>
  <button id="btn2">慢慢淡入</button>
  <button id="btn3">淡出/淡入切换</button>

  <div class="div1"></div>

  <script src="../JS/jquery-3.5.1.js" type="text/javascript"></script>
  <script type="text/javascript">
    /*
   需求：
   1. 点击btn1, 慢慢淡出
     * 无参
     * 有参
       * 字符串参数
       * 数字参数
   2. 点击btn3, 慢慢淡入
   3. 点击btn3, 淡出/淡入切换，动画结束时提示“动画结束了”
   */
    var $div1 = $(".div1");

    $("#btn1").click(function () {
      $div1.fadeOut(1000, function () {
        alert("动画完成了！！！！");
      });
    });

    $("#btn2").click(function () {
      $div1.fadeIn();
    });

    $("btn3").click(function () {
      $div1.fadeToggle();
    });
  </script>
</body>