JQuery复习笔记
=====================================================================
一. jQuery 语法
- $(selector).action()
- 文档就绪事件 ： 这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码 + 语法：
$(document).ready(function(){
// 开始写 jQuery 代码...
});
- 简写方法：
$(function(){
// 开始写 jQuery 代码...
});
- $(selector).load()
- 文档就绪事件 ： 所有图片、视频加载完后执行
二. jQuery 选择器
- $("*") -- 选取所有元素 - 集合
- $(this) -- 选取当前 HTML 元素 - 单个
- $("#id") -- 选取 id 为 id 的元素 - 单个
- $(".class") -- 选取 class 为 class 的元素 - 集合
- $("lable") -- 选取所有 lable 标签元素 - 集合
- $("#id,lable.class") -- 选取所有 id 为 id，lable 标签 class 为 class 的元素，"," 和 - 集合
- $("div p") -- 选取 div 里面所有的p标签，" " 后代元素，包含子元素与孙元素... - 集合
- $("div>p") -- 选取 div 下所有的p标签，">" 子元素 - 集合
- $(".class+div") -- 选取 class 为 class 的下一个 div 同辈元素，"+" 下一个同辈元素 - 单个
- $("#id ~ div") -- 选取 id 为 id 后面所有的 div 同辈元素，"~" 后面所有同辈元素 - 集合
三. 过滤选择器
- 基本过滤器
- $("li:first") -- 选取所有 li 元素中的第一个 li 元素 - 单个
- $("li:last") -- 选取所有 li 元素中的最后一个 li 元素 - 单个
- $("li:not(.class)") -- 选取所有 li 元素中 class 不是 class 的 li 元素 - 集合
- $("li:even") -- 选取所有索引值是偶数的 li 元素，索引值从 0 开始 - 集合
- $("li:odd") -- 选取所有索引值是奇数的 li 元素，索引值从 0 开始 - 集合
- $("li:eq(index)") -- 选取索引值等于 index 的 li 元素，索引值从 0 开始 - 单个
- $("li:gt(index)") -- 选取索引值大于 index 的 li 元素，索引值从 0 开始 - 集合
- $("li:lt(index)") -- 选取索引值小于 index 的 li 元素，索引值从 0 开始 - 集合
- $(":herder") -- 选取所有的标签元素(h1~h6) - 集合
- $(":focus") -- 选取当前获取焦点的元素 - 单个
- 内容过滤选择器
- $("li:contains("文本")") -- 选取文本内容包含"文本"的 li 元素 - 集合
- $(":parent") -- 选取包含有子元素或者文本的非空元素 - 集合
- $(":empty") -- 选取不包含有子元素或者文本的空元素 - 集合
- $("div:has('p .class')") -- 选取包含有 class 为 class 的 p 标签的 div 标签 - 集合
- 属性过滤选择器
- $("div[class]") -- 选取拥有 class 属性的 div 元素
- $("div[class=test]") -- 选取拥有 class 属性且属性值为 test 的 div 元素
- $("div[class!=test]") -- 选取拥有 class 属性且属性值不为 test 的 div 元素
- $("div[class^=test]") -- 选取拥有 class 属性且属性值以 test 开始的 div 元素
- $("div[class*=test]") -- 选取拥有 class 属性且属性值包含有 test 的 div 元素
- =test]") -- 选取拥有 class 属性且属性值以 test 结束的 div 元素
- $("div[id]][title=test]") -- 选取拥有 id 属性和属性值为 test 的 title 属性的 div 元素
- 子元素过滤选择器
- $("ul li:nth-child(eq|even|odd)") -- 选取每个 ul 中的 index 个或者偶数或者奇数的子元素 li (eq从 1 开始)
- $("ul li:first-child") -- 选取每个 ul 中的第一个子元素 li
- $("ul li:last-child") -- 选取每个 ul 中的最后一个子元素 li
- $("ul li:only-child") -- 选取每个 ul 中是唯一一个子元素 li
- 表单对象属性过滤选择器
- $(":enabled") -- 选取表单中所有属性为可用的元素
- $(":disabled") -- 选取表单中所有属性为不可用的元素
- $(":checked") -- 选取表单中所有被选中的元素
- $(":selected") -- 选取表单中所有被选中 option 的元素
四. jQuery事件与语法
- 语法：
$("元素").事件(function(){
// 事件的方法
});
- 事件
- 在 jQuery 中，大多数 JavaScript DOM 事件都有一个等效的 jQuery 方法，去掉事件中的 on 即可
- 常见鼠标事件
-
click() -- 鼠标点击触发
-
dblclick() -- 鼠标双击触发
-
mousedown() -- 鼠标按键被按下触发
-
mouseup() -- 鼠标按键被松开触发
-
hover() -- 鼠标移入和移除元素时触发
- 语法：
$("元素").hover(function(){ // 鼠标移入时触发的方法 },function(){ // 鼠标移除时触发的方法 })
- mouseenter() -- 鼠标移动到元素上时触发
- mouseover() -- 鼠标移动到元素上时触发
- mouseleave() -- 当鼠标指针移出元素时触发
- mouseout() -- 当鼠标指针移出元素时触发
- mousemove() -- 鼠标在元素上移动时触发
-
- 常见键盘事件
- keydown() -- 某个键盘按键被按下，一直按着则会不断触发，返回键盘代码
- keypress() -- 某个键盘按键被按下并松开，一直按着某按键则会不断触发，且 shift、alt、ctrl 等键按下并不会产生字符，所以监听无效。
- keyup() -- 某个键盘按键被松开，返回键盘代码
- 常见框架/对象（Frame/Object）事件
- beforeunload -- 该事件在即将离开页面（刷新或关闭）时触发
- pagehide -- 该事件在用户离开当前网页跳转到另外一个页面时触发
- error -- 在加载文档或图像时发生错误。 ( object,body 和 frameset)
- load -- 一张页面或一幅图像完成加载。
- pageshow -- 该事件在用户访问页面时触发
- resize -- 窗口或框架被重新调整大小。
- scroll -- 当文档被滚动时发生的事件。
- 表单事件
- focus() -- 元素获取焦点时触发
- blur() -- 元素失去焦点时触发
- change() -- 该事件在表单元素的内容改变时触发( input, keygen, select, 和 textarea)
- input() -- 元素获取用户输入时触发
- search() -- 用户向搜索域输入文本时触发 (input="search")
- select() -- 用户选取文本时触发 ( input 和 textarea)
- submit() -- 表单提交时触发
- 鼠标/键盘事件对象
- button -- 返回当事件被触发时，判断哪个鼠标按钮被点击。
- pageX -- 返回当某个事件被触发时，鼠标指针的水平坐标(对于整个页面来说，包括了被卷去的body部分的长度)。
- pageY -- 返回当某个事件被触发时，鼠标指针的垂直坐标(对于整个页面来说，包括了被卷去的body部分的长度)。
- screenX -- 返回当某个事件被触发时，鼠标指针的水平坐标(距离当前电脑屏幕的x，y坐标)。
- screenY -- 返回当某个事件被触发时，鼠标指针的垂直坐标(距离当前电脑屏幕的x，y坐标)。
- clientX -- 返回当某个事件被触发时，鼠标指针的水平坐标(距离当前body可视区域的x，y坐标)。
- clientY -- 返回当某个事件被触发时，鼠标指针的垂直坐标(距离当前body可视区域的x，y坐标)。
- offsetX -- 返回当某个事件被触发时，鼠标指针的水平坐标(相对于带有定位的父盒子的x，y坐标)。
- offsetY -- 返回当某个事件被触发时，鼠标指针的垂直坐标(相对于带有定位的父盒子的x，y坐标)。
- key -- 在按下按键时返回按键的标识符。
- ctrlKey -- 返回当事件被触发时，判断"CTRL" 键是否被按下。
- altKey -- 返回当事件被触发时，判断"ALT" 是否被按下。
- shiftKey -- 返回当事件被触发时，"SHIFT" 键是否被按下。
- metaKey -- 返回当事件被触发时，"meta" 键是否被按下。
- 这些只是常用事件，如需了解详情或者了解其他事件请移步☞
五. jQuery 效果 – 隐藏和显示
- 显示
- 语法：
$(selector).show(speed,callback); // 可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。 // 可选的 callback 参数是隐藏或显示完成后所执行的函数名称。- 示例：
$("#id").show(1000,function(){
// 显示后执行的代码
});
- 隐藏
- 语法：
$(selector).hide(speed,callback);
// 可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。
// 可选的 callback 参数是隐藏或显示完成后所执行的函数名称。
- 自动切换显示或隐藏
- 语法：
$(selector).toggle(speed,callback);
// 可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。
// 可选的 callback 参数是隐藏或显示完成后所执行的函数名称。
六. jQuery 效果 – 淡入淡出
- 淡入
- 语法：
$(selector).fadeIn(speed,callback);
// 可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
// 可选的 callback 参数是 fading 完成后所执行的函数名称。
- 淡出
- 语法：
$(selector).fadeOut(speed,callback);
// 可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
// 可选的 callback 参数是 fading 完成后所执行的函数名称。
- 自动切换淡入或淡出
- 语法：
$(selector).fadeToggle(speed,callback);
// 可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
// 可选的 callback 参数是 fading 完成后所执行的函数名称。
- 渐变为给定的不透明度（值介于 0 与 1 之间）。
- 语法：
$(selector).fadeTo(speed,opacity,callback); // 必需的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。 // fadeTo() 方法中必需的 opacity 参数将淡入淡出效果设置为给定的不透明度（值介于 0 与 1 之间）。 // 可选的 callback 参数是该函数完成后所执行的函数名称。- 示例：
$("#id").fadeTo(1000,.5,function(){
//渐变后执行的代码
});
七. jQuery 效果 - 滑动
- 向下滑动元素
- 语法：
$(selector).slideDown(speed,callback);
// 可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
// 可选的 callback 参数是 fading 完成后所执行的函数名称。
- 向上滑动元素
- 语法：
$(selector).slideUp(speed,callback);
// 可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
// 可选的 callback 参数是 fading 完成后所执行的函数名称。
- 自动切换向下或向上滑动元素
- 语法：
$(selector).slideToggle(speed,callback);
// 可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
// 可选的 callback 参数是 fading 完成后所执行的函数名称。
八. jQuery 效果 – 动画
- animate() 方法
- 语法：
$(selector).animate({params},speed,callback); 必需的 params 参数定义形成动画的 CSS 属性。 可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。 可选的 callback 参数是动画完成后所执行的函数名称。 $("#id").animate({ css属性名1 : "css属性值1", css属性名2 : "css属性值2", css属性名3 : "css属性值3", ... },1000,function(){ //动画完成后调用的方法 });- 示例：
$("#id").animate({
height: "200px",
width: "200px"
},500);
- 使用 animate() 方法几乎可以操作所有的 CSS 属性，但是，色彩动画并不包含在核心 jQuery 库中，如果需要生成颜色动画，您需要引用 Color 插件。
- 地址：
<script
src="http://code.jquery.com/color/jquery.color.plus-names-2.1.2.min.js"
integrity="sha256-Wp3wC/dKYQ/dCOUD7VUXXp4neLI5t0uUEF1pg0dFnAE="
crossorigin="anonymous"></script>
- jQuery animate() - 使用相对值
- 说明： 该值相对于元素的当前值 += 或 -=;
- 示例：
$("#id").animate({
// 高在当前值上增加200px
height: "+=200px",
// 宽在当前之上减少200px
width: "-=200px"
},500);
- jQuery animate() - 使用预定义的值
- 说明： 您可以把属性的动画值设置为 "show"、"hide" 或 "toggle";
- 示例：
// 元素上下隐藏/显示
$("#id").animate({
height: "toggle"
},500);
// 元素左右隐藏/显示
$("#id").animate({
width: "toggle"
},500);
- jQuery animate() - 使用队列功能
- 说明： 如果您在彼此之后编写多个 animate() 调用，jQuery 会创建包含这些方法调用的"内部"队列。然后逐一运行这些 animate 调用。
- 示例：
// id 为 id 的元素高度和宽度同时增加100px
$("#id").animate({
height: "+=100px",
width: "+=100px"
})
// id 为 id 的元素先高度增加100px，然后宽度增加100px
$("#id").animate({height: "+=100px"},500);
$("#id").animate({width: "+=100px"},500);
- jQuery 停止动画
- 语法：
$(selector).stop(stopAll,goToEnd);
// 可选的 stopAll 参数规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。
// 可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。
// 因此，默认地，stop() 会清除在被选元素上指定的当前动画。
* 示例：
$("id").stop(true);
九. jQuery 捕获
-
获取/设置内容/属性
- html() -- 设置或返回匹配的元素集合中的 HTML 内容，相当于 innerHTML。
- text() -- 设置或返回匹配元素的内容，相当于 innerTsxt。
- attr() -- 设置或返回匹配元素的属性和值。
- removeAttr() -- 从所有匹配的元素中移除指定的属性。
- val() -- 设置或返回匹配元素的值。
- css() -- 设置或返回匹配元素的样式属性。
- 语法：
// 获取一个属性 var 属性值 = $("目标元素").css("属性名"); // 更改一个属性值 $("目标元素").css("属性","属性值"); // 更改多个属性值 $("目标元素").caa({ "属性1":"属性值1", "属性2":"属性值2", "属性3":"属性值3" })- height() -- 设置或返回匹配元素的高度。
- 示例：
// 获取屏幕高度 var winHeight = $(window).height();- width() -- 设置或返回匹配元素的宽度
- scrollTop() -- 设置或返回匹配元素相对滚动条顶部的偏移。
- 示例：
// 获取滚动高度 var roolHeigth = $(window).scrollTop();- scrollLeft() -- 设置或返回匹配元素相对滚动条左侧的偏移。
-
获取/设置 class
- hasClass() -- 检查匹配的元素是否拥有指定的类，返回布尔值。
- addClass() -- 向匹配的元素添加指定的类名。
- 语法：
//普通方式 $(selector).addClass("class"); // 使用函数 $(selector).addClass(function(index,oldclass)); // index - 可选。选择器的 index 位置。 // class - 可选。选择器的旧的类名。- removeClass() -- 从所有匹配的元素中删除全部或者指定的类。
- toggleClass() -- 从匹配的元素中添加或删除一个类。
-
给元素/内容添加标签
- wrapinner() -- 将每一个匹配的元素的子内容用指定的内容或元素包裹起来。
- 示例：
$("#id").wrapinner("<div></div>"); $("#id").wrapinner(".class");- wrap() -- 把匹配的元素用指定的内容或元素包裹起来，用法同上。
- wrapAll() -- 把所有匹配的元素用指定的内容或元素包裹起来，用法同上。
- wrapinner() -- 将每一个匹配的元素的子内容用指定的内容或元素包裹起来。
十. jQuery 节点操作
-
插入节点
- append() -- 向匹配元素内部的"尾部"插入节点，插入的节点为自己的子元素
- 语法： var html = "html内容"; (html));
- 示例：
// html <div id="div"> <p>这是文字一</p> <p>这是文字二</p> <p>这是文字三</p> </div> // js var html = "<p>这是插入的文字</p>"; $("#div").append($(html)); // 结果 // html <div id="div"> <p>这是文字一</p> <p>这是文字二</p> <p>这是文字三</p> <p>这是插入的文字</p> </div>- appendTo() -- 把当前节点插入到匹配元素内部的"尾部"，插入的节点为自己的子元素
- 语法： var html = "html内容"; ("选择目标元素"));
- 示例：
// html <div id="div"> <p>这是文字一</p> <p>这是文字二</p> <p>这是文字三</p> </div> // js var html = "<p>这是插入的文字</p>"; $(html).appendTo($("#div")); // 结果 // html <div id="div"> <p>这是文字一</p> <p>这是文字二</p> <p>这是文字三</p> <p>这是插入的文字</p> </div>- prepend() -- 向匹配元素内部的"开始"插入节点，插入的节点为自己的子元素
- 语法： var html = "html内容"; (html));
- 示例：
// html <div id="div"> <p>这是文字一</p> <p>这是文字二</p> <p>这是文字三</p> </div> // js var html = "<p>这是插入的文字</p>"; $("#div").prepend($(html)); //结果 // html <div id="div"> <p>这是插入的文字</p> <p>这是文字一</p> <p>这是文字二</p> <p>这是文字三</p> </div>- prependTo() -- 把当前节点插入到匹配元素内部的"开始"，插入的节点为自己的子元素
- 语法： var html = "html内容"; ("选择目标元素"));
- after() -- 向匹配元素外部的"尾部"插入节点，插入的节点为自己的兄弟元素
- 语法： var html = "html内容"; (html));
- 示例：
// html <div id="div"> <p>这是文字一</p> <p>这是文字二</p> <p>这是文字三</p> </div> // js var html = "<p>这是插入的文字</p>"; $("#div").after($(html)); // 结果 // html <div id="div"> <p>这是文字一</p> <p>这是文字二</p> <p>这是文字三</p> </div> <p>这是插入的文字</p>- insertAfter() -- 把当前节点插入到匹配元素外部的"尾部"，插入的节点为自己的兄弟元素
- 语法：
var html = "html内容"; $(html).insertAfter($("选择目标元素"));- before() -- 向匹配元素外部的"开始"插入节点，插入的节点为自己的兄弟元素
- 语法：
var html = "html内容"; $("选择目标元素").before($(html));- insertBefore() -- 把当前节点插入到匹配元素外部的"开始"，插入的节点为自己的兄弟元素
- 语法：
var html = "html内容"; $(html).insertBefore($("选择目标元素")); - append() -- 向匹配元素内部的"尾部"插入节点，插入的节点为自己的子元素
-
删除节点
- remove() -- 移除所有匹配的元素。
- 语法： $("选择目标元素").remove("参数"); // remove 方法可以添加参数，该参数可以是任何 jQuery 选择器的语法，可以用来筛选，但是不能筛选子元素 // remove 方法不仅删除了所选元素的子元素，所选元素也会被删除
- 示例：
// 示例一 //html <div id="div"> <p>这是文字一</p> <p>这是文字二</p> <p>这是文字三</p> </div> // js $("#div").remove(); // 结果 // html // 所有都被删除 // 示例二 //html <div id="div"> <p>这是文字一</p> <p class="p">这是文字二</p> <p>这是文字三</p> </div> // js $("p").remove(".p"); // 结果 // html <div id="div"> <p>这是文字一</p> <p>这是文字三</p> </div>- empty() -- 删除匹配的元素集合中所有的子节点。
- 语法： $("选择目标元素").empty(); // empty 方法可以不可以添加参数 // empty 方法仅删除了所选元素的子元素，所选元素不会被删除
- 示例：
//html <div id="div"> <p>这是文字一</p> <p>这是文字二</p> <p>这是文字三</p> </div> // js $("#div").empty(); // 结果 // html <div id="div"></div>- unwrap() -- 删除匹配的元素集合中的父节点。
- 语法： $("选择目标元素").unwrap(); // unwrap 方法可以不可以添加参数 // unwrap 方法仅删除了所选元素的父元素，所选元素不会被删除
- 示例：
//html <div id="div"> <p>这是文字一</p> <p>这是文字二</p> <p>这是文字三</p> </div> // js $("p").empty(); // 结果 // html <p>这是文字一</p> <p>这是文字二</p> <p>这是文字三</p>- detach() -- 从 DOM 中移除匹配元素集合。
- 说明： detach 方法和 remove 方法用法相同 detach 方法和 remove 方法的不同点 使用 remove 方法删除的元素其绑定的方法也会被删除， 而使用 detach 方法删除的元素其绑定的方法不会被删除。 详情见示例
- 示例：
- remove() -- 移除所有匹配的元素。
// remove 方法
// html
<div id="d">
<p class="p1">删除</p>
<p class="p2">添加</p>
<p class="p3">更改效果</p>
</div>
// js
var p3 = "";
$(".p1").click(function(){
p3 = $("p").detach(".p3");
});
$(".p2").click(function(){
$("#d").append($(p3));
});
$(".p3").click(function(){
$(".p3").css("color","red");
});
// 在点击删除后 p3 删除，然后点击恢复后 p3 回复，但是在点击 p3 时， p3 样式不会改变
// detach 方法
// html
<div id="d">
<p class="p1">删除</p>
<p class="p2">添加</p>
<p class="p3">更改效果</p>
</div>
// js
var p3 = "";
$(".p1").click(function(){
p3 = $("p").detach(".p3");
});
$(".p2").click(function(){
$("#d").append($(p3));
});
$(".p3").click(function(){
$(".p3").css("color","red");
});
// 在点击删除后 p3 删除，然后点击恢复后 p3 回复，但是在点击 p3 时， p3 样式会发生改变
- 替换节点
- replaceWith() -- 用匹配的元素替换所有匹配到的元素。
- 语法： var html = "html内容"; (html));
- 示例：
// html <div id="d"> <p class="p1">这是文字一</p> <p class="p2">这是文字二</p> <p class="p3">这是文字三</p> </div> // js var newP = "<p>这是新的的文字</p>" $(".p2").replaceWith($(newP)); // 结果 // html <div id="d"> <p class="p1">这是文字一</p> <p>这是新的的文字</p> <p class="p3">这是文字三</p> </div>- replaceAll() -- 用新内容替换匹配的元素。
- 语法：
- replaceWith() -- 用匹配的元素替换所有匹配到的元素。
var html = "html内容";
$(html).replaceAll($("选择目标元素"));
- 复制节点
- clone() -- 创建匹配元素集合的副本。
- 语法： ("选择目标元素").clone(true);// 不仅复制节点，而且复制节点绑定的事件
- 示例：
- clone() -- 创建匹配元素集合的副本。
// html
<div id="d">
<p class="p1">删除</p>
<p class="p2">添加</p>
<p class="p3">更改效果</p>
</div>
// js
var newP = $("p").clone();
$("#d").append(newP);
// 结果
// html
<div id="d">
<p class="p1">删除</p>
<p class="p2">添加</p>
<p class="p3">更改效果</p>
<p class="p1">删除</p>
<p class="p2">添加</p>
<p class="p3">更改效果</p>
</div>
- 遍历节点
- each() -- 遍历目标节点
- 语法：
$("目标元素").each(function(index){ // $(this) 表示当前元素 // index 表示当前元素的下标 })- 示例：
- each() -- 遍历目标节点
// html
<div id="d">
<p class="p1">这是文字一</p>
<p class="p2">这是文字二</p>
<p class="p3">这是文字三</p>
</div>
//js
var arr = ["新的文字一","新的文字二","新的文字三"]
$("p").each(function(index){
$(this).html(arr[index]);
});
// 结果
// html
<div id="d">
<p class="p1">新的文字一</p>
<p class="p2">新的文字二</p>
<p class="p3">新的文字三</p>
</div>
十一. jQuery 遍历
- jQuery 遍历 -- 祖先
- parent() -- 返回被选元素的直接父元素，可返回多个元素。 + 示例：
// html <ul> <li> 第一个li <a href="#" class="as"></a> </li> </ul> <ul> <li> 第二个li <a href="#" class="as"></a> </li> <li> 第三个li <a href="#" class="as"></a> </li> </ul> // js $(".as").parent().html("这是a元素的父元素"); // 结果 // html <ul> <li> 这是a元素的父元素 <a href="#" class="as"></a> </li> </ul> <ul> <li> 这是a元素的父元素 <a href="#" class="as"></a> </li> <li> 这是a元素的父元素 <a href="#" class="as"></a> </li> </ul> // 示例二 // 所有的遍历方法后面均可添加参数进行筛选 // html <ul> <li class="lia"> 第一个li <a href="#" class="as"></a> </li> </ul> <ul> <li> 第二个li <a href="#" class="as"></a> </li> <li> 第三个li <a href="#" class="as"></a> </li> </ul> // js $(".as").parent(".lia").html("这是a元素的父元素"); // 结果 // html <ul> <li class="lia"> 这是a元素的父元素 <a href="#" class="as"></a> </li> </ul> <ul> <li> 第二个li <a href="#" class="as"></a> </li> <li> 第三个li <a href="#" class="as"></a> </li> </ul>- parents() -- 返回被选元素的所有祖先元素，它一路向上直到文档的根元素 (html)，可返回多个元素。
- 示例：
// html <body> 这是a标签的曾祖父 <ul> 这是a标签的祖父 <li> 这是a标签的父级元素 <a href="#" class="as">这是a标签</a> </li> </ul> </body> // js $(".as").parents().css("color","red"); // 结果 // 效果 这是a标签的曾祖父、这是a标签的祖父、这是a标签的父级元素 全部变成红色- parentsUntil() -- 返回介于两个给定元素之间的所有祖先元素，可返回多个元素。
- 示例：
// html
<body>
这是a标签的曾祖父
<ul>
这是a标签的祖父
<li>
这是a标签的父级元素
<a href="#" class="as">这是a标签</a>
</li>
</ul>
</body>
//js
$(".as").parentsUntil("body").css("color","red");
// 结果
// 效果
这是a标签的祖父、这是a标签的父级元素 变成红色
- jQuery 遍历 -- 后代
- children() -- 返回被选元素的所有直接子元素，可返回多个元素。
- find() -- 返回被选元素的后代元素，一路向下直到最后一个后代，可返回多个元素。
- jQuery 遍历 -- 同胞(siblings)
- siblings() -- 返回除被选元素以外其他的所有同胞元素，可返回多个元素。
- next() -- 返回被选元素的下一个同胞元素，只返回一个元素。
- nextAll() -- 返回被选元素以后的所有的同胞元素，可返回多个元素。
- nextUntil() -- 向下返回介于两个给定参数之间的所有跟随的同胞元素，第二个给定元素必须在第一个之后，可返回多个元素。
- 示例：
// 示例一 // html <div>div (父元素) <p>p</p> <span>span</span> <h2>h2</h2> <h3>h3</h3> <h4>h4</h4> <h5>h5</h5> <h6>h6</h6> <p>p</p> </div> // js $("h2").nextUntil("span").css("color","red"); // 结果 // 效果 因为在 h2 标签后没有 span 标签，所以 h3、h4、h5、h6、p 全部变成红色 // 示例二 // html <div>div (父元素) <p>p</p> <span>span</span> <h2>h2</h2> <h3>h3</h3> <h4>h4</h4> <h5>h5</h5> <h6>h6</h6> <p>p</p> </div> // js $("h2").nextUntil("p").css("color","red"); // 结果 // 效果 因为此方法为向下查找，所以 h3、h4、h5、h6 变成红色- prev() -- 返回被选元素的上一个同胞元素，只返回一个元素。
- prevAll() -- 返回被选元素以上的所有的同胞元素，可返回多个元素。
- prevUntil() -- 向上返回介于两个给定参数之间的所有跟随的同胞元素，第二个给定元素必须在第一个之后，可返回多个元素，详情参考 nextUntil;
- jQuery 遍历 -- 过滤
- first() -- 返回被选元素的首个元素
- 示例：
//选取 id 为 id 的元素的第一个子元素 $("#id").children().first(); //选取第一个 p 标签 $("p").first();- last() -- 返回被选元素的最后一个元素。
- eq() -- 返回被选元素中带有指定索引号的元素
- 示例：
//选取 id 为 id 的元素的第二个子元素 $("#id").children().eq(1);- filter() -- 允许您规定一个标准。不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回
- 语法：
// 方式一 filter("选择器"); // 方式二 filter(function(index,event){ // 筛选条件 // index 当前元素的下标 // event 当前元素 });- 示例：
// 方式二 // html <div>div (父元素) <p>p</p> <span>span</span> <h2>可选</h2> <h3>可选</h3> <h4>不可选</h4> <h5>可选</h5> <h6>可选</h6> <p>p</p> </div> // js var trueH = $("span").nextUntil("p").filter((index,event) => { return event.innerHTML == "可选"; }) trueH.css("color","red"); // 结果 // 效果 所有 可选 变成红色- not() -- 返回不匹配标准的所有元素
- 说明： 此方法和上面的正好 filter 相反，用法一样，只是一个筛选的是匹配的，一个筛选的是不匹配的而已
- is() -- 检查表达式的当前选择，如果选项中至少有一个元素符合给定的选择器，那么返回 true
- prop() -- 设置或获取三大状态的 bool 值，三大属性 :disabled/:checked/:selected
- data() -- 获取或设置自定义属性的值，data("key","valie")。
- first() -- 返回被选元素的首个元素
十二. jQuery Ajax
- 完整的 jQuery Ajax
- 语法：
//请求参数
var list = {};
$.ajax({
//请求方式 POST/GET
type: "POST",
//请求的媒体类型,默认值如下，一般不用写就可以
contentType: "application/x-www-form-urlencoded",
// 异步还是同步 默认是true表示异步，false表示同步
async: true,
//请求地址
url: "",
//请求数据，这里是json字符串，也可以为对象
// 如:
// data:{
// key1:value1,
// key2:value2,
// }
data: JSON.stringify(list),
// 超时时间ms
timeout: 5000,
// 返回数据类型,这里是json数据，也可以是 xml/html/script/jsonp/text 一般都是json数据
dataType: 'json',
// 成功返回处理
success: function(data, textStatus, jqXHR) {
// data 为返回的数据
// jqXHR 包含状态码200/404
//解析json数据
console.log(data);
console.log(textStatus);
console.log(jqXHR);
},
// 错误返回
error: function(e, textStatus) {
//e 错误信息
console.log('错误');
console.log(e);
console.log(textStatus);
}
});
- jQuery - AJAX load() -- 方法从服务器加载数据，并把返回的数据放入被选元素中
- 语法：
$("被选元素").load(URL,data,callback);
// 必需的 URL 参数规定您希望加载的 URL。
// 可选的 data 参数规定与请求一同发送的查询字符串键/值对集合。
// 可选的 callback 参数是 load() 方法完成后所执行的函数名称。
十三. jQuery noConflict() 方法
- 说明： 其中某些框架也使用 $ 符号作为简写，如果您在用的两种不同的框架正在使用相同的简写符号，有可能导致脚本停止运行。
- 示例：
// 示例一，直接取消 $ 符号，利用 jQuery 代替 $ 符号
$.noConflict();
jQuery(document).ready(function(){
jQuery("button").click(function(){
jQuery("p").text("jQuery is still working!");
});
});
// 示例二，创建自己的简写代替 $ 符号
var jq = $.noConflict();
jq(document).ready(function(){
jq("button").click(function(){
jq("p").text("jQuery is still working!");
});
});
// 示例三，把 $ 符号作为变量传递给 ready 方法，这样就可以在函数内使用 $ 符号了，而在函数外，依旧不得不使用 "jQuery"
$.noConflict();
jQuery(document).ready(function($){
$("button").click(function(){
$("p").text("jQuery is still working!");
});
});
十四. Jquery事件代理/事件委托
- 常规写法：
- 语法：
$("祖籍/父级元素").delegate("事件绑定元素","事件名",function(){]
//事件方法
});
- 简化写法：
- 语法：
$("祖籍/父级元素").on("事件名","事件绑定元素",function(){]
//事件方法
});
十五. jQuerytrigger() 方法
- 语法： // 触发被选元素上指定的事件以及事件的默认行为 $(选择器).trigger(方法,参数一，参数二...) // 参数可选
- 示例：
itme = setInterval(function() {
//没过2秒触发 .right 的 click 事件
$("button").trigger("click");
}, 2000);
