JQuery
监听页面的加载
$(document).ready(function() {})
/* 区别： */
/* [1] 监听的时机不一样 */
/* window.onload监听页面(HTML + js + css + img资源)加载完毕 底层(load)*/
/* jQuery监听页面(HTML)加载完毕
底层(DOMContentLoaded)*/
/* [2] 监听的次数 */
/* window.onload 监听N次只会触发1次(覆盖) */
/* jQuery监听N次会触发N次 */
简写（省略document、ready()）
$(() => {})
注意
1、DOM操作拿到的标签和jQuery实例对象是不一样的
2、dom标签和jQuery实例对象的关系
可以理解为是包含的关系，jQuery实例对象中保存0个或者是多个标签
3、dom标签和jQuery对象是不同的东西，不能无法直接互相访问成员
4、相互转换（dom <=> jQ）
(1) dom->jQ $(dom)
(2) dom<-jQ jQ[index] | jQ.get(index)
jQuery操作CSS
1、读取：jQ.css(key)
$("div").css("width")
2、设置：jQ.css(key,val)
（1）单个设置 $("div").css("color", "red")
（2）链式编程
$("div").css("color", "red").css("background", "#666").css("width", "200px")
（3）以对象作为参数
$("div").css({
color: "green",
border: "1px solid #000"
})
jQuery操作Class
1、添加 jQ.addClass()
单个多个链式
$("div").addClass("box1 box2 box3 box")
2、删除 removeClass()
单个多个链式
$("div").removeClass("box t1 t3")
3、检查 检查标签中是否存在指定的class
单个
$("div").hasClass("box")
4、切换
如果当前标签存在对应的样式那么就删除它，否则那么就添加这个样式
$("div").toggleClass("box t1 t4")
JQuery选择器
1、基本选择器
001-id选择器 #id
002-class选择器 .class
003-标签选择器 标签名
004-并集选择器 #id,.class
005-通配符选择器 *
2、层级选择器
001-获取指定标签指定的后代元素 $("#demoID div")
002-获取指定标签指定的直接后代元素 $("#demoID > div")
003-获取指定标签后面的第一个兄弟节点 $(".box2 + div")
所有兄弟节点 $(".box2 ~ div")
3、筛选选择器
001-第一个 $("li:first")
002-最后一个 $("li:last")
003-指定某一个 $("li:eq(0)")（第一个）
004-索引为奇数|偶数的标签 $("li:odd")、$("li:even")
005-排除 $("li:not(:eq(1))")（排除索引为1的那个标签）
006-范围(大于|小于)
$("li:lt(3)")（索引小于3）
$("li:gt(3)")（索引大于3）
4、父子选择器
父节点相关
001 jQ.parent() 获取父节点
002 jQ.parents() 获取祖先节点
003-jQ.parentsUntil() 获取祖先节点直到某个节点为止
子节点相关
$("#demoID").children("span") 获取子节点
兄弟节点相关
001-$(".box2").next() 下一个兄弟节点
002-$(".box2").nextAll() 下面所有兄弟
$(".box2").nextUntil()
003-$(".box2").prev() 上一个兄弟
004-$(".box2").prevAll() 上面所有兄弟
$(".box2").prevUntil()
005-$(".box2").siblings() 所有兄弟
5、属性选择器
001-选中所有拥有href属性节点的标签 $("a[href]")
002-href的内容必须是XXX $("a[href='XXX']")
003-href的内容不是XXX $("a[href！='XXX']")
004-href的内容以特定的字符串开头或者是结尾|包含特定的字符串
$("a[href^='file:']")
$("a[href$='.cn']")
$("a[href*='qq']")
005-多个属性 $("a[href='ftp://www.qq.cn'][title]")
操作标签的内容
1、jq.text([val]) 获取|设置标签的文本内容
001-读取标签的文本内容
如果选中了多个标签，那么会把多个标签的内容拼在一起返回
002-设置标签的内容
如果选中了多个标签，那么会遍历设置每个标签的文本内容
2、jq.html([val]) 获取|设置标签的节点内容
001-读取标签的节点内容
如果选中了多个标签，那么只会读取第一个标签的节点内容
002-设置标签的节点内容
如果选中了多个标签，那么会遍历设置每个标签的节点内容
标签的创建
$("<div class='box'>我是divY</div>")
标签的插入
A.append(B)== B.appendTo(A) 把B插到A后面
A.prepend(B)== B.prependTo(A) 把B插到A前面
A.insertAfter(B) 把B插到A后面（成为兄弟）
A.insertBefore(B) 把B插到A前面（成为兄弟）
删除
remove()
清空
empty()
复制
clone(true|false)
传递参数 true 表示在克隆的时候把标签的事件也一起拷贝
操作属性的方法
语法：jQ.prop() 读取|设置(添加|修改)
语法：jQ.removeProp(key) （删除）
$("#demoID").prop("a1", 111); //添加属性 a1
操作属性节点的方法
语法：jQ.attr() 读取|设置(添加|修改)
语法：jQ.removeAttr(key) （删除）
$("#demoID").attr("class")
补充
语法：jQ.data() （读取）
$("#demoID").data()
$("#demoID").data("index")
操作表单方法
1、语法：jQ.val([val])
如果没有传递参数表示获取输入框的内容，如果传递了参数表示设置输入框的内容
2、语法：jQ.is()
$("#checkboxID").is(":checked")
操作标签的方法
001-jQ.get()
从jQuery实例对象中根据索引来获取指定的标签
002-jQ.eq()
从jQuery实例对象中根据索引来获取指定的标签，并且包装成jQuery对象返回
注意：该方法参数可以是负数：倒数
003-jQ.first() == eq(0)
004-jQ.last() == eq(-1)
005-jQ.find() 表示在当前标签的内部来进行查找
006-jQuery补充
$ 是函数 jQuery == $
语法：$(selector,context)
selector 选择器
context 上下文 如果没有传递这个参数，那么默认为document 表示的搜索的范围
$("div", document) 表示要去文档中查找所有的div标签
jQuery事件注册
001-语法：jQ.on(type,handler)
002-快捷方法 click mouseenter mouseleave mousemove keydown keyup change focus
003-语法: jQ.one(type,handler)（只触发一次）
jQuery事件注销
语法1：jQ.off(type) 表示把选中标签中指定标签的某一类事件注销
语法2：jQ.off(type,handler)
jQuery事件委托
委托box这个标签给内部的li标签来添加click事件
$(".box").on("click", "li,span", function() {
let index = $(this).index();
let val = $(this).text();
console.log(`${index} ${val}`);
})
自定义事件:
我们可以通过on方法给标签添加自定义事件,自定义事件只能自动触发
给按钮添加xxx事件
$("button").on("xxx", function() {
console.log('xxxx-----xxx');
});
$("button").trigger("xxx");
有时候我们可能需要通过代码的方式模拟用户点击了按钮（自动触发
001-所有选中标签的点击事件都会被触发
$("button").trigger("click")
002-只有第一个选中标签的点击事件被触发
$("button").triggerHandler("click")
hover方法
001-语法1：jQ.hover(f1,f2)
当鼠标移入的时候触发第一个回调函数，移出的时候会触发第二个回调函数
002-语法2：jQ.hover(fn)
当鼠标移入或者是移出的时候都会触发该回调函数
动画和特效
语法：jq.xxx(time,callBack)
显示和隐藏动画：show() hide() toggle()（切换）
展开和收起动画：slideDown() slideUp() slideToggle()
淡入和淡出动画：fadeIn() fadeOut() fadeTo(3参数 fadeToggle()
自定义动画：animate() delay() stop()
注意点：时间可以是数字(毫秒) 也可以是字符串(默认提供了三个时间) “slow” “normal” “fast” 0.6 - 0.4 - 0.2秒
自定义动画
语法：JQ.animate({},time,callBack)、
$("button").last().click(() => {
$(".box")
.animate({
width: "200px",
height: "200px"
}, 1000)
.delay(2000)
.animate({
top: "0px",
left: "0px",
}, 3000)
})
JQ下Ajax模块的
load方法
根据路径来发送网络请求加载服务器端的数据并且设置为标签的内容，如果返回的是HTML标签，那么支持对返回的数据进行过滤
$("div").load("../server/03-getData.html .box,span")
$.getScript("../server/07-index.js")
加载此JS
$.getJSON("../server/06-data.json", (json) => {
console.log(json)
})
获取json，运行函数
事件监听
1、监听页面中的网络请求，只要请求成功就会触发这个方法
$(document).ajaxSuccess(function(e, xhr, setting) {})
2、监听页面中的网络请求，只要请求失败就会触发这个方法
$(document).ajaxError(function(e, xhr, setting) {})
3、第一个网络请求开始发送(只会触发1次)
$(document).ajaxStart(() => console.log("ajaxStart"))
4、最后一个网络请求结束(只会触发1次)
$(document).ajaxStop(() => console.log("ajaxStop"))
5、监听每个网络请求开始发送(N次)
$(document).ajaxSend(() => console.log("ajaxSend"))
6、监听每个网络请求完成(N次)
$(document).ajaxComplete(() => console.log("ajaxComplete"))
注意
1、默认所有的网络请求都会被全局事件监听，如果某个网络请求不想要被全局事件监听，那么可以考虑配置 （global: false）
$.ajax({
global: false,
url: "../server/01-getData.php",
success: function(response) {
console.log("response--请求3");
}
});
2、设置全局网络请求配置，默认配置，这个方法本质上修改的是ajaxSetting配置对象
$.ajaxSetup({
type:"get"
})
JQ的其他工具
1、each方法
该方法用来遍历数组、对象和伪数组，支持退出循环(在回调函数中返回false)，且this指向value值
语法：$.each(arr|likeArr|obj,fn)
语法：$().each(fn)
$("div").each(function(key, val) {
console.log(key, val);
})
2、$.trim() （ES5+ str.trim()）
清理字符串开头和结尾位置的空格
3、toArray()
把jQuery实例对象转换数组
4、makeArray()
把伪数组转换数组
$.makeArray($("div")) $.makeArray(likeArr)
浙公网安备 33010602011771号