jQuery的字面意思其实就是JavaScript和查询（Query），即用于辅助开发JavaScript的库。jQuery 极大地简化了 JavaScript 编程，jQuery使用户可以更加方便地处理HTML（标准通用标记语言下的一个应用）、events、实现动画效果，而且方便地为网站提供AJAX交互。
实例找到div标签并给div标签设置为红色
原生js操作 var d1Ele = document.getElementById('d1'); d1Ele.style.color = 'red'; jQuery操作 $('#d1').css('color','blue'); 您可以从网页中添加 jQuery
1、从官网http://jquery.com/download/下载 jQuery 库
里面分为：Production version（用于实际的网站中，已被精简和压缩）和Development version（用于测试和开发，未压缩，是可读的代码），一般使用Production version压缩版本的。
2、从 CDN 中载入 jQuery, 如从 Google 或 百度 中加载 jQuery
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script> 或者 <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script> 或者 <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.slim.js"></script> 一定要先导入后使用
jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作。
$(selector).action() jQuery 选择器可以对 HTML 元素组或单个元素进行操作。 jQuery 选择器基于元素的 id、类、类型、属性、属性值等查找HTML 元素。它基于已经存在的 CSS 选择器外，还有一些自定义的选择器。
ID选择器、类名选择器、标签选择器、组合选择器
| 选择器 | 实例 | 选取 |
|---|---|---|
| * | $("*") | 所有元素 |
| #id | $("#d1") | id=“d1” 的元素 |
| .class | $(".name") | class=“name” 的所有元素 |
| .class , .class | $(".name,.password") | class 为 “name” 或 “password” 的所有元素 |
| *element | $(“span”) | 所有 <span> 元素 |
| el1,el2,el3 | $(“h1,div,p”) | 所有 <h1>、<div> 和 <p> 元素 |
DOM对象与jQuery对象互相转换 $('#d1')[0] var d1Ele = document.getElementById('d1'); $(d1Ele) | 选择器 | 实例 | 选取 |
|---|---|---|
| parent > child | $(“div > p”) | <div> 元素的直接子元素的所有 <p> 元素 |
| parent descendant | $(“div p”) | <div> 元素的后代的所有 <p> 元素 |
| element + next | $(“div + p”) | 每个 <div> 元素相邻的下一个 <p> 元素 |
| element ~ siblings | $(“div ~ p”) | <div> 元素同级的所有 <p> 元素 |
| 选择器 | 实例 | 选取 |
|---|---|---|
| :first | $(“p:first”) | 第一个 <p> 元素 |
| :last | $(“p:last”) | 最后一个 <p> 元素 |
| :even | $(“tr:even”) | 所有偶数 <tr> 元素 |
| :odd | $(“tr:odd”) | 所有奇数 <tr> 元素 |
| :gt(nu) | $(“ul li:gt(3)”) | 列举 index 大于 3 的元素 |
| :lt(nu) | $(“ul li:lt(3)”) | 列举 index 小于 3 的元素 |
| :eq(nu) | $(“ul li:eq(3)”) | 列举 index 等于 3 的元素 |
| :not(selector) | $(“input:not(:empty)”) | 所有不为空的输入元素 |
| :has(element) | $(“div:has(a)”) | 返回拥有一个或多个元素在其内的所有元素 |
/用ul标签举例 $('#ul>li:first') $('#u1>li:last') $('#ul>li:eq(3)') $('#ul>li:even') $('#ul>li:odd') $('#ul>li:gt(3)') $('#ul>li:lt(3)') $('#u1>li:not(.c1)') 最后一个has的玩法需要写个三个div:一个空div、一个儿子有a标签、一个儿子没有a，孙子有a标签 $('div:has(a)') 输出： k.fn.init(3) [div, div#d2, div#d3, prevObject: k.fn.init(1)] | 方法 | 描述 |
|---|---|
| addClass() | 向被选元素添加一个或多个类名 |
| after() | 在被选元素后插入内容 |
| append() | 在被选元素的结尾插入内容 |
| appendTo() | 在被选元素的结尾插入 HTML 元素 |
| attr() | 设置或返回被选元素的属性/值 |
| before() | 在被选元素前插入内容 |
| clone() | 生成被选元素的副本 |
| css() | 为被选元素设置或返回一个或多个样式属性 |
| detach() | 移除被选元素（保留数据和事件） |
| empty() | 从被选元素移除所有子节点和内容 |
| hasClass() | 检查被选元素是否包含指定的 class 名称 |
| height() | 设置或返回被选元素的高度 |
| html() | 设置或返回被选元素的内容 |
| innerHeight() | 返回元素的高度（包含 padding，不包含 border） |
| innerWidth() | 返回元素的宽度（包含 padding，不包含 border） |
| insertAfter() | 在被选元素后插入 HTML 元素 |
| insertBefore() | 在被选元素前插入 HTML 元素 |
| offset() | 设置或返回被选元素的偏移坐标（相对于文档） |
| offsetParent() | 返回第一个定位的祖先元素 |
| outerHeight() | 返回元素的高度（包含 padding 和 border） |
| outerWidth() | 返回元素的宽度（包含 padding 和 border） |
| position() | 返回元素的位置（相对于父元素） |
| prepend() | 在被选元素的开头插入内容 |
| prependTo() | 在被选元素的开头插入 HTML 元素 |
| prop() | 设置或返回被选元素的属性/值 |
| remove() | 移除被选元素（包含数据和事件） |
| removeAttr() | 从被选元素移除一个或多个属性 |
| removeClass() | 从被选元素移除一个或多个类 |
| removeProp() | 移除通过 prop() 方法设置的属性 |
| replaceAll() | 把被选元素替换为新的 HTML 元素 |
| replaceWith() | 把被选元素替换为新的内容 |
| scrollLeft() | 设置或返回被选元素的水平滚动条位置 |
| scrollTop() | 设置或返回被选元素的垂直滚动条位置 |
| text() | 设置或返回被选元素的文本内容 |
| toggleClass() | 在被选元素中添加/移除一个或多个类之间切换 |
| unwrap() | 移除被选元素的父元素 |
| val() | 设置或返回被选元素的属性值（针对表单元素） |
| width() | 设置或返回被选元素的宽度 |
常用实例：
三级菜单展示
$(this).next().removeClass('hide').parent().siblings().find('.items').addClass('hide') 直接操作css属性
// 两个参数设置属性 $('#p1').css('font-size','24px') // 一个参数获取属性 $('#p1').css('font-size') // 一次设置多个属性 $('#p1').css({"border":"1px solid black","color":"blue"}) 位置操作
// 不加参数获取位置参数 $(".c3").offset() // 加参数设置位置参数 $(".c3").offset({top:284,left:400}) // position只能获取值，不能设置值 // scrollTop获取当前滚动条偏移量 $('window').scrollTop(); $('window').scrollTop(0); // 设置滚动条偏移量 文本操作
text() html() 不加参数获取值，加参数设置值 val() 不加参数获取值，加参数设置值 属性操作
// 获取文本属性 $('#d1').attr('s1') // 获取属性值 $('#d1').attr('s1','haha') // 设置属性值 $('#d1').attr({'num':50,'taidi':'gay'}) // 设置多个属性 $('#d1').removeAttr('taidi') // 删除一个属性 // 获取check与radio标签的checked属性 $('#i1').prop('checked') $('#i1').prop('checked',true) 文档处理
// 标签内部尾部追加元素 $('#d1').append(pEle) $pEle.appendTo($('#d1')) // 标签内部头部添加元素 $('#d1').prepend(pEle) $pEle.prependTo($('#d1')) // 标签外部下面添加元素 $(A).after(B)// 把B放到A的后面 $(A).insertAfter(B)// 把A放到B的后面 // 标签外部上面添加元素 $(A).before(B)// 把B放到A的前面 $(A).insertBefore(B)// 把A放到B的前面 // 替换标签 replaceWith() // 什么被什么替换 replaceAll() // 拿什么替换什么 // 克隆事例 <button id="b2">屠龙宝刀，点击就送</button> // clone方法加参数true，克隆标签并且克隆标签带的事件 $("#b2").on("click", function () { $(this).clone(true).insertAfter(this); // true参数 }); | 选择器 | 实例 | 选取 |
|---|---|---|
| :input | $(":input") | 所有 input 元素 |
| :text | $(":text") | 所有带有 type=“text” 的 input 元素 |
| :password | $(":password") | 所有带有 type=“password” 的 input 元素 |
| :checkbox | $(":checkbox") | 所有带有 type=“checkbox” 的 input 元素 |
| :submit | $(":submit") | 所有带有 type=“submit” 的 input 元素 |
| :reset | $(":reset") | 所有带有 type=“reset” 的 input 元素 |
| :button | $(":button") | 所有带有 type=“button” 的 input 元素 |
| :image | $(":image") | 所有带有 type=“image” 的 input 元素 |
| :file | $(":file") | 所有带有 type=“file” 的 input 元素 |
| :enabled | $(":enabled") | 所有启用的 input 元素 |
| :disabled | $(":disabled") | 所有禁用的 input 元素 |
| :selected | $(":selected") | 所有选定的 input 元素 |
| :checked | $(":checked") | 所有选中的 input 元素 |
// 针对表单内的标签 $('input[type="text"]') // 简化写法 $(':text') // 找到所有被选中的checkbox $(':checkbox') // 注意select框中默认selected标签也会被找到 $('input:checkbox') | 方法 | 描述 |
|---|---|
| add() | 把元素添加到匹配元素的集合中 |
| children() | 返回被选元素的所有直接子元素 |
| closest() | 返回被选元素的第一个祖先元素 |
| contents() | 返回被选元素的所有直接子元素（包含文本和注释节点） |
| each() | 为每个匹配元素执行函数 |
| filter() | 把匹配元素集合缩减为匹配选择器或匹配函数返回值的新元素 |
| find() | 返回被选元素的后代元素 |
| first() | 返回被选元素的第一个元素 |
| is() | 根据选择器/元素/jQuery 对象检查匹配元素集合，如果存在至少一个匹配元素，则返回 true |
| last() | 返回被选元素的最后一个元素 |
| next() | 返回被选元素的后一个同级元素 |
| nextAll() | 返回被选元素之后的所有同级元素 |
| nextUntil() | 返回介于两个给定参数之间的每个元素之后的所有同级元素 |
| not() | 从匹配元素集合中移除元素 |
| offsetParent() | 返回第一个定位的父元素 |
| parent() | 返回被选元素的直接父元素 |
| parents() | 返回被选元素的所有祖先元素 |
| parentsUntil() | 返回介于两个给定参数之间的所有祖先元素 |
| prev() | 返回被选元素的前一个同级元素 |
| prevAll() | 返回被选元素之前的所有同级元素 |
| prevUntil() | 返回介于两个给定参数之间的每个元素之前的所有同级元素 |
| siblings() | 返回被选元素的所有同级元素 Returns all sibling elements of the selected element |
| slice() | 把匹配元素集合缩减为指定范围的子集 |
each() 方法为每个匹配元素规定要运行的函数。 $.each(array,function(index){ console.log(array[index]) }) $.each(array,function(){ console.log(this); }) // 支持简写 $divEles.each(function(){ console.log(this) // 标签对象 }) python代码诠释链式调用,其实就是在调用方法之后讲对象再次返回
<div> <p>p1</p> <p>p2</p> </div> $('div>p').first().addclass('c1').next().addclass('c2'); 事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。
$(document).ready() 方法允许我们在文档完全加载完后执行函数。为了防止网页还没加载完，js代码就已经执行，通常利用下面两种方式来书写js代码。
$(document).ready(function(){ // 在这里写你的JS代码... }) 网页最后 $(function(){ // 在这里写你的代码 }) click() 方法是当按钮点击事件被触发时会调用一个函数。
在下面的实例中，当点击事件在某个<p> 元素上触发时，隐藏当前的 <p> 元素：
$("p").click(function(){ $(this).hide(); }); 当双击元素时，会发生 dblclick 事件。
$("p").dblclick(function(){ $(this).hide(); }); 当鼠标指针穿过元素时，会发生 mouseenter 事件。
$("#p1").mouseenter(function(){ alert("鼠标经过了!"); }); 当鼠标指针离开元素时，会发生 mouseleave 事件。
$("#p1").mouseleave(function(){ alert("鼠标离开了!"); }); 当鼠标指针移动到元素上方，并按下鼠标按键时，会发生 mousedown 事件。
$("#p1").mousedown(function(){ alert("鼠标按下!"); }); 当在元素上松开鼠标按钮时，会发生 mouseup 事件。
ouseup(function(){ alert("鼠标松开!"); }); hover()方法用于模拟光标悬停事件。当鼠标移动到元素上时，会触发指定的第一个函数(mouseenter);当鼠标移出这个元素时，会触发指定的第二个函数(mouseleave)。
$("#p1").hover(function(){ alert("你的光标悬停！"); }, function(){ alert("你的光标已经离开！"); }); 当元素获得焦点时，发生 focus 事件。
$("input").focus(function(){ $(this).css("background-color","#eee"); }); 当元素失去焦点时，发生 blur 事件。
$("input").blur(function(){ $(this).css("background-color","#eee"); }); input实时监听，输入内容时发生 input 事件
$('#i1').on('input',function () { console.log($(this).val()) }); 利用preventDefault() $('input').click(function (e) { alert(123); e.preventDefault(); }); 直接返回false $('input').click(function (e) { alert(123); return false； }); iv>p>span // 三者均绑定点击事件 $("span").click(function (e) { alert("span"); e.stopPropagation(); // 阻止事件冒泡 }); <button>按钮</button> <script src="jQuery-3.3.1.js"></script> <script> $('body').on('click','button',function () { alert(123) }) </script> 下面的表格列出了用于创建动画效果的 jQuery 方法。
| 方法 | 描述 |
|---|---|
| delay() | 对被选元素的所有排队函数（仍未运行）设置延迟 |
| dequeue() | 移除下一个排队函数，然后执行函数 |
| fadeIn() | 逐渐改变被选元素的不透明度，从隐藏到可见 |
| fadeOut() | 逐渐改变被选元素的不透明度，从可见到隐藏 |
| fadeTo() | 把被选元素逐渐改变至给定的不透明度 |
| fadeToggle() | 在 fadeIn() 和 fadeOut() 方法之间进行切换 |
| finish() | 对被选元素停止、移除并完成所有排队动画 |
| hide() | 隐藏被选元素 |
| queue() | 显示被选元素的排队函数 |
| show() | 显示被选元素 |
| slideDown() | 通过调整高度来滑动显示被选元素 |
| slideToggle() | slideUp() 和 slideDown() 方法之间的切换 |
| slideUp() | 通过调整高度来滑动隐藏被选元素 |
| stop() | 停止被选元素上当前正在运行的动画 |
| toggle() | hide() 和 show() 方法之间的切换 |
标签记得设置高和宽 $('img').hide(5000) $('img').show(5000) $('img').slideDown(5000) $('img').slideUp(5000) $('img').fadeIn(5000) $('img').fadeOut(5000) $('img').fadeTo(5000,0.4)