jQuery框架 - 爱码网

jQuery

jQuery是一个快速，小巧，功能丰富的JavaScript库。它通过易于使用的API在大量浏览器中运行，使得HTML文档遍历和操作，事件处理，动画和Ajax更加简单。通过多功能性和可扩展性的结合，jQuery改变了数百万人编写JavaScript的方式。另外它只是封装了js的dom的操作和ajax，其它的未封装。所以js是包含jquery的。由此可见，jquery的出现，使我们更加容易操作DOM。

jQuery宗旨

Write Less，Do more！

jQuery优势

一款轻量级的JS框架。jQuery核心js文件才几十kb，不会影响页面加载速度。
丰富的DOM选择器,jQuery的选择器用起来很方便，比如要找到某个DOM对象的相邻元素，JS可能要写好几行代码，而jQuery一行代码就搞定了，再比如要将一个表格的隔行变色，jQuery也是一行代码搞定。
链式表达式。jQuery的链式操作可以把多个操作写在一行代码里，更加简洁。
事件、样式、动画支持。jQuery还简化了js操作css的代码，并且代码的可读性也比js要强。
Ajax操作支持。jQuery简化了AJAX操作，后端只需返回一个JSON格式的字符串就能完成与前端的通信。
跨浏览器兼容。jQuery基本兼容了现在主流的浏览器，不用再为浏览器的兼容问题而伤透脑筋。
插件扩展开发。jQuery有着丰富的第三方的插件，例如：树形菜单、日期控件、图片切换插件、弹出窗口等等基本前端页面上的组件都有对应插件，并且用jQuery插件做出来的效果很炫，并且可以根据自己需要去改写和封装插件，简单实用。

jQuery相关链接

下载地址

https://jquery.com/

官方文档（中文版）

https://jquery.cuishifeng.cn/

jQuery基本使用

本地文件引入jQuery

<script src="jquery-3.6.0.min.js"></script>

利用jQuery提供的CDN服务引入

CDN：内容分发网络

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

jQuery基本语法

"""
jQuery(选择器).action()

- 简写
	- jQuery(选择器)  === $(选择器)
	
	- 把p标签的颜色设置为blue
		- $(\'p\').css(\'color\',\'blue\')
"""

$(selector).action()

标签查找

基本选择器

// id选择器
$(\'#id号\')

// 标签选择器
$(\'Tagname\')     // tagname标签名

// 类选择器
$(\'.classname\')  // classname类名

// 所有元素选择器
$(\'*\')

// 组合选择器
$("#id, .className, tagName")

// 结合使用
$(\'div.c1\')  // 找到有类名为c1的div标签
$(\'p#d1\')	// 找到id为d1的p标签

// jQuery对象如何变成标签对象
$(\'#d1\')[0]
>>> <div id="d1">…</div>

document.getElementById(\'d1\')
>>> <div id="d1">…</div>

// 标签对象如何转jQuery对象
$(document.getElementById(\'d1\'))
>>> w.fn.init [div#d1]

案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<span>span</span>
<span>span</span>
<div id="d1">div
    <span>div>span</span>
    <p id="d2">div>p
        <span>
        div>p>span
        </span>
    </p>
    <span>
    div>span
    </span>
</div>
<div class="c1"></div>
<span>span</span>
<span>span</span>
</body>
</html>

$(\'div\')
k.fn.init(2) [div#d1, div.c1, prevObject: k.fn.init(1)]0: div#d11: div.c1length: 2prevObject: k.fn.init [document]__proto__: Object(0)
$(\'div.c1\')
k.fn.init [div.c1, prevObject: k.fn.init(1)]
$(\'div#d1\')
k.fn.init [div#d1, prevObject: k.fn.init(1)]0: div#d1length: 1prevObject: k.fn.init [document]__proto__: Object(0)
$(\'*\')
k.fn.init(19) [html, head, meta, title, meta, script, style, meta, body, span, span, div#d1, span, p#d2, span, span, div.c1, span, span, prevObject: k.fn.init(1)]0: html1: head2: meta3: title4: meta5: script6: style7: meta8: body9: span10: span11: div#d112: span13: p#d214: span15: span16: div.c117: span18: spanlength: 19prevObject: k.fn.init [document]__proto__: Object(0)
$(\'#d1,.c1,p\')   // 并列混用
k.fn.init(3) [div#d1, p#d2, div.c1, prevObject: k.fn.init(1)]0: div#d11: p#d22: div.c1length: 3prevObject: k.fn.init [document]__proto__: Object(0)
$(\'div span\')	// 后代
k.fn.init(3) [span, span, span, prevObject: k.fn.init(1)]
$(\'div>span\')	// 儿子
k.fn.init(2) [span, span, prevObject: k.fn.init(1)]
$(\'div+span\')	// 毗邻
k.fn.init [span, prevObject: k.fn.init(1)]
$(\'div~span\')	// 兄弟
k.fn.init(2) [span, span, prevObject: k.fn.init(1)]0: span1: spanlength: 2prevObject: k.fn.init [document]__proto__: Object(0)
$(\'div~span\')[0]
<span>span</span>
$(\'div span\')[0]
<span>div>span</span>

层级选择器

$("x y");		// x的所有后代y（子子孙孙）
$("x > y");		// x的所有儿子y（儿子）
$("x + y");		// 找到所有紧挨在x后面的y
$("x ~ y");		// x之后所有的兄弟y

基本筛选器

:first		 // 第一个
:last 		// 最后一个
:eq(index)		// 索引等于index的那个元素
:even 		// 匹配所有索引值为偶数的元素，从 0 开始计数
:odd 		// 匹配所有索引值为奇数的元素，从 0 开始计数
:gt(index)		// 匹配所有大于给定索引值的元素
:lt(index)			// 匹配所有小于给定索引值的元素
:not(元素选择器)			// 移除所有满足not条件的标签
:has(元素选择器)			// 选取所有包含一个或多个标签在其内的标签(指的是从后代元素找)

案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<ul>
    <li>101</li>
    <li>102</li>
    <li>103</li>
    <li>104</li>
    <li>105</li>
    <li>106</li>
    <li class="c1">107</li>
    <li>108</li>
    <li id="d1">109</li>
    <li>110</li>
</ul>
<div>div
        <p></p>
        <span></span>
    </div>
    <div>div
        <a href=""></a>
    </div>
</body>
</html>

$(\'ul li\')  # ul标签下的全部后代标签li
w.fn.init(10) [li, li, li, li, li, li, li.c1, li, li#d1, li, prevObject: w.fn.init(1)]
               
$(\'ul li:first\')  # 大儿子 
w.fn.init [li, prevObject: w.fn.init(1)]0: lilength: 1prevObject: w.fn.init [document]__proto__: Object(0)
               
$(\'ul li:last\')  # 小儿子
w.fn.init [li, prevObject: w.fn.init(1)]0: lilength: 1prevObject: w.fn.init [document]__proto__: Object(0)
               
$(\'ul li:eq(2)\')		# 放索引
w.fn.init [li, prevObject: w.fn.init(1)]0: lilength: 1prevObject: w.fn.init [document]__proto__: Object(0)
               
$(\'ul li:even\')  # 偶数索引 0包含在内
w.fn.init(5) [li, li, li, li.c1, li#d1, prevObject: w.fn.init(1)]0: li1: li2: li3: li.c14: li#d1length: 5prevObject: w.fn.init [document]__proto__: Object(0)
              
$(\'ul li:odd\')  # 奇数索引
w.fn.init(5) [li, li, li, li, li, prevObject: w.fn.init(1)]0: li1: li2: li3: li4: lilength: 5prevObject: w.fn.init [document]__proto__: Object(0)
              
$(\'ul li:gt(2)\')  # 大于索引
w.fn.init(7) [li, li, li, li.c1, li, li#d1, li, prevObject: w.fn.init(1)]0: li1: li2: li3: li.c14: li5: li#d16: lilength: 7prevObject: w.fn.init [document]__proto__: Object(0)
              
$(\'ul li:lt(2)\')  # 小于索引
w.fn.init(2) [li, li, prevObject: w.fn.init(1)]0: li1: lilength: 2prevObject: w.fn.init [document]__proto__: Object(0)
              
$(\'ul li:not("#d1")\')  # 移除满足条件的标签
w.fn.init(9) [li, li, li, li, li, li, li.c1, li, li, prevObject: w.fn.init(1)]
         
$(\'div\')
w.fn.init(2) [div, div, prevObject: w.fn.init(1)]
$(\'div:has("p")\')  # 选取出包含一个或多个标签在内的标签
w.fn.init [div, prevObject: w.fn.init(1)]

属性选择器

[attribute]
[attribute=value]		// 属性等于
[attribute!=value]		// 属性不等于

<input type="text">
<input type="password">
<input type="checkbox">
    
$("input[type=\'checkbox\']");	// 获取类型checkbox的input标签
$("input[type!=\'text\']");		// 获取类型不是text的input标签

表单筛选器

:text
:password
:file
:radio
:checkbox
:submit
:reset
:button

// 例子
$(":checkbox")  // 找到所有的checkbox

// 表单对象的属性
:enabled
:disabled
:checked   // 会将checked 和selected都拿到
// 使用checked格式   $(\'input:checked\')  加一个限制条件
:selected

// 找到可用的input标签
<form>
  <input name="email" disabled="disabled" />
  <input name="id" />
</form>

$("input:enabled")  // 找到可用的input标签

// 找到已被选中的option标签
<select id="d1">
  <option value="beijing">北京市</option>
  <option value="shanghai">上海市</option>
  <option selected value="guangzhou">广州市</option>
  <option value="shenzhen">深圳市</option>
</select>

$(":selected")  // 找到所有被选中的option

筛选器方法

// 上一个元素
$("#id").prev()
$("#id").prevAll()
$("#id").prevUntil("#i2")

// 下一个元素
$("#id").next()
$("#id").nextAll()
$("#id").nextUntil("#i2")   // 直到i2的id且不包含id为i2的标签

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

// 儿子元素
$("#id").children();// 儿子们

// 兄弟元素
$("#id").siblings();// 兄弟们

// 查找元素   搜索所有与指定表达式匹配的元素
$("div").find("p")   // 查找div下的全部p标签  及后代p标签
// 等价于
$("div p")

// 筛选 筛选出与指定表达式匹配的元素集合
$("div").filter(".c1")  // 从结果集中过滤出有c1样式类的
// 等价于
$(\'div.c1\')  // 获取class为c1的全部div标签

.first() // 获取匹配的第一个元素
.last() // 获取匹配的最后一个元素
.not() // 从匹配元素的集合中删除与指定表达式匹配的元素
.has() // 保留包含特定后代的元素，去掉那些不含有指定后代的元素。
.eq() // 索引值等于指定值的元素

案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<span id="d1">span</span>
<span>span</span>
<div id="d2">div
    <span>div>span</span>
    <p>div>p
    <span id="d3">div>p>span</span>
    </p>
    <span>div>span</span>
</div>
<span>span</span>
<span>span</span>
<span class="c1">span</span>
</body>
</html>

$(\'#d1\').next()  # 同级别下一个
w.fn.init [span, prevObject: w.fn.init(1)]0: spanlength: 1prevObject: w.fn.init [span#d1]__proto__: Object(0)
$(\'#d1\').nextAll()
w.fn.init(5) [span, div#d2, span, span, span.c1, prevObject: w.fn.init(1)]0: span1: div#d22: span3: span4: span.c1length: 5prevObject: w.fn.init [span#d1]__proto__: Object(0)
$(\'#d1\').nextUntil(\'.c1\')  # 不包括最后一个
w.fn.init(4) [span, div#d2, span, span, prevObject: w.fn.init(1)]0: span1: div#d22: span3: spanlength: 4prevObject: w.fn.init [span#d1]__proto__: Object(0)
              
              
$(\'.c1\').prev()  # 上一个
w.fn.init [span, prevObject: w.fn.init(1)]0: spanlength: 1prevObject: w.fn.init [span.c1, prevObject: w.fn.init(1)]__proto__: Object(0)
$(\'.c1\').prevAll()
w.fn.init(5) [span, span, div#d2, span, span#d1, prevObject: w.fn.init(1)]
$(\'.c1\').prevUntil(\'#d2\')
w.fn.init(2) [span, span, prevObject: w.fn.init(1)]
              
$(\'#d3\').parent()  # 第一级父标签
w.fn.init [p, prevObject: w.fn.init(1)]0: plength: 1prevObject: w.fn.init [span#d3]__proto__: Object(0)
$(\'#d3\').parent().parent()
w.fn.init [div#d2, prevObject: w.fn.init(1)]
$(\'#d3\').parent().parent().parent()
w.fn.init [body, prevObject: w.fn.init(1)]
$(\'#d3\').parent().parent().parent().parent()
w.fn.init [html, prevObject: w.fn.init(1)]
$(\'#d3\').parent().parent().parent().parent().parent()
w.fn.init [document, prevObject: w.fn.init(1)]
$(\'#d3\').parent().parent().parent().parent().parent().parent()
w.fn.init [prevObject: w.fn.init(1)]
$(\'#d3\').parents()
w.fn.init(4) [p, div#d2, body, html, prevObject: w.fn.init(1)]
$(\'#d3\').parentsUntil(\'body\')
w.fn.init(2) [p, div#d2, prevObject: w.fn.init(1)]
              
              
$(\'#d2\').children()  # 儿子
              
$(\'#d2\').siblings()  # 同级别上下所有  兄弟
              
              
              
$(\'div p\')
# 等价           
$(\'div\').find(\'p\')  # find从某个区域内筛选出想要的标签 
              
              
"""下述两两等价"""
$(\'div span:first\')
w.fn.init [span, prevObject: w.fn.init(1)]
$(\'div span\').first()
w.fn.init [span, prevObject: w.fn.init(3)]0: spanlength: 1prevObject: w.fn.init(3) [span, span #d3, span, prevObject: w.fn.init(1)]__proto__: Object(0)
                                                                                    
$(\'div span:last\')
w.fn.init [span, prevObject: w.fn.init(1)]
$(\'div span\').last()
                                                                                    
w.fn.init [span, prevObject: w.fn.init(3)]
$(\'div span:not("#d3")\')
w.fn.init(2) [span, span, prevObject: w.fn.init(1)]
$(\'div span\').not(\'#d3\')
w.fn.init(2) [span, span, prevObject: w.fn.init(3)]

操作标签

"""
原生js					jQuery
classList.add()      	addClass()
classList.remove()		removeClass()
classList.contains()	hasClass()
classList.toggle()		toggleClass()
"""

案例1添加修改标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<div class="c1 c2 c3"></div>
</body>
</html>

$(\'div\').hasClass(\'c1\')
true
$(\'div\').hasClass(\'c444\')
false
$(\'div\').removeClass(\'c1\')
k.fn.init [div.c2.c3, prevObject: k.fn.init(1)]
$(\'div\').addClass(\'c1\')
k.fn.init [div.c2.c3.c1, prevObject: k.fn.init(1)]
$(\'div\').toggleClass(\'c1\')
k.fn.init [div.c2.c3, prevObject: k.fn.init(1)]

链式操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<p>111</p>
<p>222</p>
</body>
</html>

// 一行代码将第一个p改为红色 第二个p改为绿色
$(\'p\').first().css(\'color\', \'red\').next().css(\'color\', \'green\')



**jQuery对象调用完成后返回的还是当前jQuery对象**

```python
# -*- coding: utf-8 -*-

class MyClass(object):
    def func1(self):
        print(\'func1\')
        return self

    def func2(self):
        print(\'func2\')
        return self

位置操作

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

.offset()方法允许我们检索一个元素相对于文档（document）的当前位置。

和 .position()的差别在于： .position()是相对于相对于父级元素的位移。

$(\'p\').offset()   // 相对于浏览器窗口
{top: 116.00000762939453, left: 100.00000762939453}left: 100.00000762939453top: 116.00000762939453__proto__: Object

$(\'p\').position()		// 相对于父标签
{top: 100.00000762939453, left: 100.00000762939453}

scrollTop()		// 滚动条相对于顶部
$(window).scrollTop()
  0
$(window).scrollTop()
  969
$(window).scrollTop()  # 括号内不加参数就是获取
  1733
$(window).scrollTop(0)  # 加了参数就是设置
  n.fn.init [Window]
$(window).scrollTop(500)
  n.fn.init [Window]
scrollLeft()

尺寸

height()
width()
innerHeight()
innerWidth()
outerHeight()
outerWidth()

$(\'p\').height()  # 文本
20
$(\'p\').width()
1670
$(\'p\').innerHeight()  # 文本+padding
26
$(\'p\').innerWidth()
1674
$(\'p\').outerHeight()  # 文本+padding+border
26
$(\'p\').outerWidth()
1674

文本操作

"""
JS代码				jQuery
innerText			text()	   括号内不加参数就是获取内容，加了参数就是修改内容
innerHTML			html()
"""

案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<div>
    <p>大河向东流啊，天上的星星参北斗啊！！！</p>
</div>
</body>
</html>

$(\'div\').text()
"\n    大河向东流啊，天上的星星参北斗啊！！！\n"
$(\'div\').html()
"\n    <p>大河向东流啊，天上的星星参北斗啊！！！</p>\n"
$(\'div\').text(\'这是在修改内容哟！\')
k.fn.init [div, prevObject: k.fn.init(1)]

获取值操作

"""
JS 					jQuery
.value				val()
"""

案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<input type="text" id="d1">
<input type="file" id="d2">
</body>
</html>

$(\'#d1\').val()   // 括号内不加参数就是获取内容
"你好！"
$(\'#d1\').val(\'其实我是你哥哥\')		// 括号内加参数就是赋值
k.fn.init [input#d1]
           
$(\'#d2\').val()
"C:\\fakepath\\微信运动修改助手.exe"

$(\'#d2\')[0].files[0]	// 对象之间的转换
File {name: "微信运动修改助手.exe", lastModified: 1619866514897, lastModifiedDate: Sat May 01 2021 18:55:14 GMT+0800 (中国标准时间), webkitRelativePath: "", size: 8928518, …}

属性操作

"""
js代码				jQuery代码
setAttribute()		attr(name, value)
getAttribute()		attr(name)
removeAttribute()	removeAttr(name)

变量存储格式
	- $XXXEle
"""

案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<p id="d1" username="雪山菜鸟"></p>
</body>
</html>

let $pEle = $(\'p\')
undefined
$pELe.attr(\'id\')
"d1"
$pEle.attr(\'class\', \'c1\')
k.fn.init [p#d1.c1, prevObject: k.fn.init(1)]
           
$pEle.attr(\'id\', \'id888\')
k.fn.init [p#id888.c1, prevObject: k.fn.init(1)]
           
$pELe.attr(\'password\', \'这是密码\')		// 增加属性
k.fn.init [p#id888.c1, prevObject: k.fn.init(1)]
           
$pEle.removeAttr(\'password\')		// 删除属性
k.fn.init [p#id888.c1, prevObject: k.fn.init(1)]

文档处理

添加到指定元素内部的后面

$(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()// 删除匹配的元素集合中所有的子节点。

替换

replaceWith()
replaceAll()

克隆

clone()// 参数

事件

常用事件

"""
click(function(){...})
hover(function(){...})
blur(function(){...})
focus(function(){...})
change(function(){...})
keyup(function(){...})
"""

绑定事件

.on( events [, selector ],function(){})

events：事件
selector: 选择器（可选的）
function: 事件处理函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<button id="d1">点我</button>
<button id="d2">点我呀！</button>

<script>
    // 第一种
    $(\'#d1\').click(function () {
        alert(\'啥也别说，点我就对了！！\')
    })

    // 第二种   ---> 功能更强大  支持事件委托
    $(\'#d2\').on(\'click\', function () {
        alert(\'哈哈，感谢点击！\')
    })

</script>
</body>
</html>

移除事件

.off( events [, selector ][,function(){}])

events：事件
selector: 选择器（可选的）
function: 事件处理函数

off() 方法移除用 .on()绑定的事件处理程序。

克隆事件

.clone(true)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

    <style>
        #d1 {
            height: 100px;
            width: 100px;
            background-color: green;
            border: 1px solid blue;
        }
    </style>
</head>
<body>
<button id="d1">点我就送超级会员</button>

<script>
    $(\'#d1\').on(\'click\', function () {
        // console.log(this)       // this指代永远当前被操作的标签对象  在这里指的绑定了的button对象
        // 克隆默认情况下只克隆html和css  不克隆事件
        // $(this).clone().insertAfter($(\'body\'))     // $(this)将当前标签对象变成jQuery对象

        // 此时可以克隆事件  括号内加true即可
        $(this).clone(true).insertAfter($(\'body\'))     // $(this)将当前标签对象变成jQuery对象
    })
</script>
</body>
</html>

hover事件

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

<script src="jQuery-3.3.1.js">
</script>
<script>
    $(\'p\').hover(
        function () {
            alert(\'来啦，老弟\')
        },
        function () {
            alert(\'慢走哦～\')
        }
    )
</script>
</body>
</html>

实时监听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>

# hover事件
	$(\'#d1\').hover(function(){})  # 进出都会触发
  
  $(\'#d1\').hover(
    function(){},
    function(){}
  ) 
# input框实时监控输入内容事件
	$(\'#d1\').on(\'input\',function(){})
# 键盘按键事件
	$(window).keydown(function(event){
  	event.keyCode		# 拿到按键对应的数字
})
  $(window).keyup(function(){})

阻止后续事件的执行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<form action="">
    <span id="d1" style="color: red"></span>
    <input type="submit" id="d2">
<!--    实际上是执行了两个事件  -->
</form>

<script>
    $(\'#d2\').click(function () {
        $(\'#d1\').text(\'这是你点击按钮后显示的文字！\')
        // 阻止标签后续事件的执行
        return false	// 推荐使用

    })

    // $(\'#d2\').click(function (e) {
    //     $(\'#d1\').text(\'这是你点击按钮后显示的文字！\')
    //     // 阻止标签后续事件的执行
    //     e.preventDefault()
    //
    // })
</script>
</body>
</html>

<script>
    $(\'#d2\').click(function () {
        $(\'#d1\').text(\'这是你点击按钮后显示的文字！\')
        // 阻止标签后续事件的执行
        return false
    })
</script>

阻止事件冒泡

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<div id="d1">div
    <p id="d2">div>p
        <span id="d3">div>p>span</span>
    </p>
</div>

<script>
    $(\'#d1\').click(function () {
        alert(\'div\')
    })

    $(\'#d2\').click(function () {
        alert(\'p\')
        return false
    })

    $(\'#d3\').click(function () {
        alert(\'span\')
        return false	// 推荐使用
        // e.stopPropagation()  一般不用
    })
</script>
</body>
</html>

事件委托

事件委托是通过事件冒泡的原理，利用父标签去捕获子标签的事件。

<button>是兄弟，就来砍我!!!</button>

<script>
    // 给页面上所有的button标签绑定点击事件
    // $(\'button\').click(function () {  // 无法影响到动态创建的标签
    //     alert(123)
    // })

    // 事件委托     
    $(\'body\').on(\'click\',\'button\',function () {
        alert(123)  // 在指定的范围内 将事件委托给某个标签 无论该标签是事先写好的还是后面动态创建的
    })
</script>

表格中每一行的编辑和删除按钮都能触发相应的事件。

$("table").on("click", ".delete", function () {
  // 删除按钮绑定的事件
})

页面加载

javascript代码一般是写在body最下面，等待标签加载完毕后才执行js代码。

当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。这是事件模块中最重要的一个函数，因为它可以极大地提高web应用程序的响应速度。

两种写法：

$(document).ready(function(){
// 在这里写你的JS代码...
})

简写：

$(function(){
// 你在这里写你的代码
})

动画效果

// 基本
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])

$(\'#d1\').hide(5000)		// 5s后隐藏
w.fn.init [div#d1]
$(\'#d1\').show(5000)		// 5s后展示出来
w.fn.init [div#d1]
$(\'#d1\').slideUp(5000)	// 5s后向上移动
w.fn.init [div#d1]
$(\'#d1\').slideDown(5000)		// 5s后向下一移动
w.fn.init [div#d1]
$(\'#d1\').fadeOut(5000)		// 5s后淡出
w.fn.init [div#d1]
$(\'#d1\').fadeIn(5000)		// 5s后淡入
w.fn.init [div#d1]
$(\'#d1\').fadeTo(5000,0.4)
w.fn.init [div#d1]

# each()
# 第一种方式
$(\'div\')
w.fn.init(10) [div, div, div, div, div, div, div, div, div, div, prevObject: w.fn.init(1)]
$(\'div\').each(function(index){console.log(index)})
VM181:1 0
VM181:1 1
VM181:1 2
VM181:1 3
VM181:1 4
VM181:1 5
VM181:1 6
VM181:1 7
VM181:1 8
VM181:1 9

$(\'div\').each(function(index,obj){console.log(index,obj)})
VM243:1 0 <div>1</div>
VM243:1 1 <div>2</div>
VM243:1 2 <div>3</div>
VM243:1 3 <div>4</div>
VM243:1 4 <div>5</div>
VM243:1 5 <div>6</div>
VM243:1 6 <div>7</div>
VM243:1 7 <div>8</div>
VM243:1 8 <div>9</div>
VM243:1 9 <div>10</div>

# 第二种方式
$.each([111,222,333],function(index,obj){console.log(index,obj)})
VM484:1 0 111
VM484:1 1 222
VM484:1 2 333
(3) [111, 222, 333]
"""
有了each之后 就无需自己写for循环了 用它更加的方便
"""
# data()
"""
能够让标签帮我们存储数据 并且用户无法直接看见
"""
$(\'div\').data(\'info\',\'回来吧，我原谅你了!\')
w.fn.init(10) [div#d1, div, div, div, div, div, div, div, div, div, prevObject: w.fn.init(1)]
               
$(\'div\').first().data(\'info\')
"你快回来！"
$(\'div\').last().data(\'info\')
"你快快回来！"
               
$(\'div\').first().data(\'xxx\')
undefined
$(\'div\').first().removeData(\'info\')
w.fn.init [div#d1, prevObject: w.fn.init(10)]
           
$(\'div\').first().data(\'info\')
undefined
$(\'div\').last().data(\'info\')
"你快回来！"