【前端三剑客】JavaScript 网页脚本语言(jQuery write less, do more. - Overview)

更新日期:2022/07/22
只要我们一起大笑,可怕的东西就会跑光光了。

 


1. jQuery 简介

jQuery 是一个快速,小型且功能丰富的 JavaScript 库。它提供的 API 易于使用且兼容众多浏览器,使 HTML 文档的遍历和操作,事件处理,动画和 Ajax 等事情变得更加简单。jQuery 的基本设计思想和主要用法,就是 “选择某个网页元素,然后对其进行某种操作”。这是它区别于其他 Javascript 库的根本特点。使用 jQuery 的第一步,往往就是将一个选择表达式,放进构造函数 jQuery()(简写为$),然后得到被选中的元素。基础语法: $(selector).action()

更多内容 → jQuery API 中文文档

更多内容 → 菜鸟教程 - jQuery 教程

  • 快速开始
$(this).hide() - 隐藏当前元素

$("p").hide() - 隐藏所有 <p> 元素

$("p.test").hide() - 隐藏所有 class="test"<p> 元素

$("#test").hide() - 隐藏 id="test" 的元素

 


2. jQuery 下载

点击进入jQuery官网下载

在这里插入图片描述

这里选择开发版本,方便学习。

在这里插入图片描述

Ctrl+S 保存到本地,之后放到项目的 resource 文件夹下即可。

在这里插入图片描述

 


3. jQuery 入口函数

  • jQuery 入口函数
    jQuery 的入口函数在 html 所有标签(DOM)都加载之后,去执行;
    可执行多次,而且结果不会被覆盖。
$(document).ready(function () {
    // 执行代码
});
也可以简写为:
$(function () {
    // 执行代码
});
  • JavaScript 入口函数
    JavaScript 的入口函数要等到所有内容,包括外部图片之类的文件加载完后,去执行;
    只能执行一次,如果执行第二次,第一次的结果会被覆盖。
window.onload = function () {
    // 执行代码
}
  • html 页面引入 jquery 和自定义 js 文件
<script type="text/javascript" src="../../static/plugin/jquery-3.6.0.js"></script>
<script type="text/javascript" src="jQueryTest.js"></script>

 


4. jQuery 选择器

jQuery 中所有选择器允许对 HTML 元素组或单个元素进行操作且都以美元符号开头:$()
jQuery 基于已经存在的 CSS 选择器(id、类、类型、属性、属性值等),除此之外,它还有一些自定义的选择器。
使用 jQuery 扩展选择器不能充分利用原生 DOM 提供的 querySelectorAll() 方法来提高性能。为了在现代浏览器上获得更佳的性能,应首先使用纯 CSS 选择器选择元素,然后进行过滤选择。

4.1 属性选择器

使用 .not(‘[name=“value”]’) 过滤。

$("element[name]")                      	// 选择所有具有指定属性的元素,该属性可以是任何值
$("element[name='value']")              	// 选择指定属性是给定值的元素
【jQuery扩展】$("element[name!='value']")             	// 选择不存在指定属性,或者指定的属性值不等于给定值的元素
$("element[name|='value']")             	// 选择指定属性值等于给定字符串或以该字符串为前缀(该字符串后跟一个连字符“-” )的元素
$("element[name*='value']")             	// 选择指定属性具有包含一个给定的子字符串的元素。(选择给定的属性是以包含某些值的元素)
$("element[name~='value']")             	// 选择指定属性用空格分隔的值中包含一个给定值的元素
$("element[name^='value']")             	// 选择指定属性是以给定字符串开始的元素
$("element[name$='value']")             	// 选择指定属性是以给定值结尾的元素,区分大小写
$("element[name1='value1'][name2='value2']")			// 选择匹配所有指定的属性筛选器的元素

在这里插入图片描述

4.2 基础选择器

* 选择器或通用选择器,其速度是极其慢的。

$("*")                      // 选择所有元素
$(this)                     // 选择当前 HTML 元素
$("#id")                    // 选择给定 id 的单个元素
$(".class")                 // 选择给定样式类名的所有元素
$("element")                // 选择给定 html 标记名称的所有元素
$("#id, .class")            // 复合选择器,将每一个选择器匹配到的元素合并后一起返回

在这里插入图片描述

4.3 基础过滤器

使用 .filter(“:selector”) 过滤。

$("element:focus")           // 选择当前获取焦点的元素
$("element:lang")            // 选择指定语言的所有元素
$("element:not")             // 选择所有元素去除不匹配给定的选择器的元素
$("element:root")            // 选择该文档的根元素
$("element:target")          // 选择由文档 URI 的格式化识别码表示的目标元素。例如:给定的 URI http://example.com/#foo $( "p:target" ),将选择<p id="foo">元素。
【jQuery扩展】$("element:animated")        // 选择所有正在执行动画效果的元素
【jQuery扩展】$("element:eq(index)")       // 选择匹配的集合中选择索引值为 index(可以为负,倒数)的元素
【jQuery扩展】$("element:gt(index)")       // 选择匹配的集合中选择索引值大于 index(可以为负,倒数)的元素
【jQuery扩展】$("element:lt(index)")       // 选择匹配的集合中选择索引值小于 index(可以为负,倒数)的元素
【jQuery扩展】$("element:even")            // 选择索引值为偶数的元素,从 0 开始计数
【jQuery扩展】$("element:odd")             // 选择索引值为奇数的元素,从 0 开始计数
【jQuery扩展】$("element:first")           // 选择第一个匹配的元素
【jQuery扩展】$("element:last")            // 选择最后一个匹配的元素
【jQuery扩展】$("element:header")          // 选择所有标题元素,像h1, h2, h3 等

在这里插入图片描述

4.4 子元素过滤器

$("element:first-child")                // 选择所有父级元素下的第一个子元素
$("element:last-child")                 // 选择所有父级元素下的最后一个子元素
$("element:nth-child(index)")           // 选择所有他们父元素的第 n 个子元素
$("element:nth-last-child(index)")      // 选择所有他们父元素的第 n 个子元素,倒序
$("element:first-of-type")              // 选择所有相同的元素名称的第一个兄弟元素
$("element:last-of-type")               // 选择的所有元素之间具有相同元素名称的最后一个兄弟元素
$("element:nth-of-type(index)")         // 选择同属于一个父元素之下,并且标签名相同的子元素中的第 n 个
$("element:nth-last-of-type(index)")    // 选择同属于一个父元素之下,并且标签名相同的子元素中的第 n 个,倒序
$("element:only-child")                 // 如果某个元素是其父元素的唯一子元素,那么它就会被选中
$("element:only-of-type")               // 选择所有没有兄弟元素,且具有相同的元素名称的元素

在这里插入图片描述

4.5 内容过滤器

使用 .filter(“:selector”) 过滤。

$("element:contains(text)")             // 选择所有包含指定文本的元素
$("element:empty")                      // 选择所有没有子元素的元素(包括文本节点)
【jQuery扩展】$("element:has(selector)")              // 选择元素其中至少包含指定选择器匹配的一个种元素
【jQuery扩展】$("element:parent")                     // 选择所有含有子元素或者文本的父级元素

在这里插入图片描述

4.6 可见性过滤

使用 .filter(“:selector”) 过滤。

【jQuery扩展】$("element:hidden")                 // 选择所有隐藏的元素
【jQuery扩展】$("element:visible")                // 选择所有可见的元素

在这里插入图片描述

4.7 表单选择器

input 写入内容用 val() ;
button 写入内容用 text() ;

使用 [type=“type”] 代替。

$("element:checked")                     // 匹配所有勾选的元素
$("element:disabled")                    // 选择所有被禁用的元素
$("element:enabled")                     // 选择所有可用的元素
$("element:focus")                       // 选择当前获取焦点的元素
【jQuery扩展】$("element:button")                      // 选择所有按钮元素和类型为按钮的元素(type="button" 的 <input> 元素 和 <button> 元素)
【jQuery扩展】$("element:checkbox")                    // 选择所有类型为复选框的元素
【jQuery扩展】$("element:file")                        // 选择所有类型为文件的元素
【jQuery扩展】$("element:image")                       // 选择所有图像类型的元素
【jQuery扩展】$("element:input")                       // 选择所有 input, textarea, select 和 button 元素
【jQuery扩展】$("element:password")                    // 选择所有类型为密码的元素
【jQuery扩展】$("element:radio")                       // 选择所有类型为单选框的元素
【jQuery扩展】$("element:reset")                       // 选择所有类型为重置的元素
【jQuery扩展】$("element:selected")                    // 获取 select 元素中所有被选中的元素
【jQuery扩展】$("element:submit")                      // 选择所有类型为提交的元素
【jQuery扩展】$("element:text")                        // 选择所有类型为文本的元素

在这里插入图片描述

4.8 层级选择器

$("parent > child ")                    // 选择所有指定“parent”元素中指定的"child"的直接子元素
$("ancestor descendant")                // 选择给定的祖先元素的所有后代元素
$("prev + next")                        // 选择所有与"next"匹配且紧接一个同级"prev"的下一个元素
$("prev ~ siblings")                    // 匹配 “prev” 元素之后的所有兄弟元素且具有相同的父元素,并匹配过滤“siblings”选择器

在这里插入图片描述

 


5. jQuery 事件

页面对不同访问者的响应叫做事件。
事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。
注:事件冒泡简单的说就是,在冒泡路径上所有绑定了相同事件类型的元素上都会触发这些类型的事件。

5.1 文档加载

.ready() 方法只能被匹配当前文档的 jQuery 对象调用,因此选择符可被省略。

$(document).ready(handler) 	// 可省略为:$(handler)。当 DOM 准备就绪时,指定一个函数来执行。
$.ready			 			// 一个类似于 promise 的对象(或“thenable”),它在文档准备好时进行解析。
【例】----------------------------------------------
	$.when(
	  $.getJSON( "ajax/test.json" ),
	  $.ready
	).done(function( data ) {
	  // Document is ready.
	  // Value of test.json is passed as `data`.
	});
---------------------------------------------------
$.holdReady(boolean);  		// 指示是否暂停或恢复被请求的 ready 事件。通常被用来允许在 ready 事件发生之前动态加载其它的 JavaScript。例如 jQuery 插件,即使 DOM 可能已经准备就绪。
【例】----------------------------------------------
	$.holdReady(true);
	$.getScript("myplugin.js", function() {
	  $.holdReady(false);
	});
---------------------------------------------------

5.2 事件对象

对于委派事件处理程序而言,由于事件是直接绑定在元素上的,也就是 event.delegateTarget 总是等价于 event.currentTarget。

event.data 				// 当当前正在执行的处理程序绑定时,一个可选的数据对象传递给一个事件方法
event.metaKey  			// 事件触发时 Meta 键是否键被按下
event.namespace  		// 当事件被触发时此属性包含指定的命名空间
event.pageX 			// 鼠标相对于文档的左边缘的位置
event.pageY				// 鼠标相对于文档的顶部边缘的位置
event.result			// 显示之前的处理程序的返回值,获取自定义事件前一个返回值时非常有用
event.target			// 显示点击元素的标签名,用于事件冒泡时处理事件委托
event.currentTarget  	// 在事件冒泡过程中的当前 DOM 元素
event.relatedTarget		// 在事件中涉及的其它任何 DOM 元素
event.delegateTarget 	// 绑定了当前正在调用 jQuery 事件处理器的元素
event.timeStamp			// 返回事件触发时距离 1970年1月1日的毫秒数,用于分析事件的性能
event.type				// 事件的类型
event.which				// 针对键盘和鼠标事件,这个属性能确定你到底按的是哪个键
----------------------------------------------------------------------------------
event.stopPropagation() 		// 防止事件冒泡到 DOM 树上
event.isPropagationStopped()	// 事件对象中是否调用过 event.stopPropagation() 方法
event.stopImmediatePropagation() 		// 阻止剩余的事件处理函数执行并且防止事件冒泡到 DOM 树上
event.isImmediatePropagationStopped()	// 事件对象中是否调用过 event.stopImmediatePropagation() 方法
event.preventDefault()			// 如果调用这个方法,默认事件行为将不再触发。例如点击超链接将不会跳转到新的 URL 去
event.isDefaultPrevented()		// 事件对象中是否调用过 event.preventDefault() 方法

5.3 绑定事件处理器

任何事件的名称,都可以作为 events 参数。
.trigger() 方法可以触发标准的浏览器事件和自定义事件名绑定的处理程序。
如果省略 selector 或者是 null,那么事件处理程序被称为 直接事件 或者直接绑定事件 。每次选中的元素触发事件时,就会执行处理程序,不管它直接绑定在元素上,还是从后代(内部)元素冒泡到该元素的。
当提供 selector 参数时,事件处理程序是指为 委派事件 。事件不会在直接绑定的元素上触发,但当 selector 参数选择器匹配到后代(内部元素)的时候,事件处理函数才会被触发。
使用委派的事件,除了可以给未创建的后代元素绑定事件外,还可以避免频繁的绑定事件及解除绑定事件。而且当需要监视很多元素的时候,代理事件的开销更小。

委托事件不能用于 SVG。

$.proxy( function, context [, name] [, additionalArguments ] )  // 接受一个函数,然后返回一个新函数,并且这个新函数始终保持了特定的上下文语境
$("selector").on( events [, selector ] [, data ] [, handler(eventObject)]) 	// 在选定的元素上绑定一个或多个事件处理函数
$("selector").one( events [, selector ] [, data ] [, handler(eventObject)]) // 为元素的事件添加处理函数。处理函数在每个元素上每种事件类型最多执行一次
$("selector").off( events [, selector ] [, handler(eventObject) ]) 			// 移除一个事件处理函数
$("selector").trigger( event ) 		// 根据绑定到匹配元素的给定的事件类型执行所有的处理程序和行为
$("selector").triggerHandler(eventType [, extraParameters ])		// 为一个事件执行附加到元素的所有处理程序。与 .trigger() 方法不同的是他不会触发事件的默认行为,且仅影响第一个匹配到的元素。

5.4 浏览器事件

以下函数的带参数用法是 .on("event", handler) 的快捷方式。

$("selector").resize([ eventData ] [, handler(eventObject) ])		// 为 JavaScript 的 "resize" 事件绑定一个处理函数,或者触发元素上的该事件
$("selector").scroll([ eventData ] [, handler(eventObject) ])		// 为 JavaScript 的 "scroll" 事件绑定一个处理函数,或者触发元素上的该事件

5.5 表单事件

以下函数的带参数用法是 .on("event", handler) 的快捷方式。

$("selector").blur([ eventData ] [, handler(eventObject)])   	// 为 "blur" 事件绑定一个处理函数,或者触发元素上的 "blur" 事件(注:此事件不支持冒泡)
$("selector").change([ eventData ] [, handler(eventObject) ]) 	// 为JavaScript 的 "change" 事件绑定一个处理函数,或者触发元素上的 "change" 事件
$("selector").focus([ eventData ] [, handler(eventObject)])  	// 为 JavaScript 的 "focus" 事件绑定一个处理函数,或者触发元素上的 "focus" 事件
$("selector").focusin([ eventData ], handler(eventObject)) 		// 将一个事件函数绑定到"focusin" 事件
$("selector").focusout([ eventData ], handler(eventObject))  	// 将一个事件函数绑定到"focusout" 事件
$("selector").select([ eventData ] [, handler(eventObject) ]) 	// 为 JavaScript 的 "select" 事件绑定一个处理函数,或者触发元素上的该事件
$("selector").submit([ eventData ] [, handler(eventObject) ])   // 为 JavaScript 的 "submit" 事件绑定一个处理函数,或者触发元素上的该事件

5.6 键盘事件

以下函数的带参数用法是 .on("event", handler) 的快捷方式。

$("selector").keydown([ eventData ] [, handler(eventObject) ])   // 为 "keydown" 事件绑定一个处理函数,或者触发元素上的 "keydown" 事件
$("selector").keypress([ eventData ] [, handler(eventObject) ])  // 为 "keypress" 事件绑定一个处理函数,或者触发元素上的 "keypress" 事件
$("selector").keyup([ eventData ] [, handler(eventObject) ]) 	 // 为 "keyup" 事件绑定一个处理函数,或者触发元素上的 "keyup" 事件

5.7 鼠标事件

以下函数的带参数用法是 .on("event", handler) 的快捷方式。
.hover() 方法是同时绑定 mouseenter 和 mouseleave 事件。

$("selector").click([ eventData ] [, handler(eventObject) ])  		// 为 JavaScript 的"click" 事件绑定一个处理器,或者触发元素上的 "click" 事件
$("selector").dbclick([ eventData ] [, handler(eventObject) ])  	// 为JavaScript 的 "dblclick" 事件绑定一个处理函数,或者触发元素上的 "dblclick" 事件
$("selector").contextmenu([ eventData ] [, handler(eventObject) ])  // 为 JavaScript 的"contextmenu" 事件绑定一个处理器,或者触发元素上的 "contextmenu" 事件
$("selector").hover( handlerInOut( eventObject )) 								// 将一个事件函数绑定到匹配元素上,当鼠标指针进入和离开元素时被执行。
$("selector").hover( handlerIn( eventObject ), handlerOut( eventObject )) 		// 将两个事件函数绑定到匹配元素上,分别当鼠标指针进入和离开元素时被执行。
$("selector").mousedown([ eventData ] [, handler(eventObject) ])   // 为 JavaScript 的 "mousedown" 事件绑定一个处理函数,或者触发元素上的该事件
$("selector").mouseenter([ eventData ] [, handler(eventObject) ])  // 为 JavaScript 的 "mouseenter" 事件绑定一个处理函数,或者触发元素上的该事件
$("selector").mouseleave([ eventData ] [, handler(eventObject) ])  // 为 JavaScript 的 "mouseleave" 事件绑定一个处理函数,或者触发元素上的该事件
$("selector").mousemove([ eventData ] [, handler(eventObject) ])   // 为 JavaScript 的 "mousemove" 事件绑定一个处理函数,或者触发元素上的该事件
$("selector").mouseout([ eventData ] [, handler(eventObject) ])    // 为 JavaScript 的 "mouseout" 事件绑定一个处理函数,或者触发元素上的该事件
$("selector").mouseover([ eventData ] [, handler(eventObject) ])   // 为 JavaScript 的 "mouseover" 事件绑定一个处理函数,或者触发元素上的该事件
$("selector").mouseup([ eventData ] [, handler(eventObject) ])     // 为 JavaScript 的 "mouseup" 事件绑定一个处理函数,或者触发元素上的该事件

5.8 事件 Demo

在这里插入图片描述

 


6. jQuery 特效

jQuery 库提供了几种为页面添加动画效果的技术。包括经常使用的简单、标准的动画效果和用于创造新动画效果的辅助工具。

6.1 基本特效

可以指定动作持续时间,缓动效果和动作完成时执行的函数。

$("selector").hide([ duration ] [, easing ] [, complete ])		// 隐藏匹配的元素
$("selector").show([ duration ] [, easing ] [, complete ])		// 显示匹配的元素
$("selector").toggle([ duration ] [, easing ] [, complete ])	// 显示或隐藏匹配的元素

6.2 渐变

这些方法用于调整元素的透明度。
fadeTo() 没有默认参数,必须加上动画运行时间和透明度(字符串 ‘fast’ 和 ‘slow’ 分别代表 200 和 600 毫秒的延时)。

$("selector").fadeIn([ duration ] [, easing ] [, complete ])	 	 // 通过淡入的方式显示匹配元素
$("selector").fadeOut([ duration ] [, easing ] [, complete ])	 	 // 通过淡出的方式隐藏匹配元素
$("selector").fadeTo( duration, opacity [, easing ] [, complete ])	 // 调整匹配元素的透明度
$("selector").fadeToggle([ duration ] [, easing ] [, complete ]) 	 // 通过匹配的元素的不透明度动画,来显示或隐藏它们

6.3 滑动

$("selector").slideDown([ duration ] [, easing ] [, complete ])	  // 用滑动动画显示一个匹配元素
$("selector").slideUp([ duration ] [, easing ] [, complete ])	  // 用滑动动画隐藏一个匹配元素
$("selector").slideToggle([ duration ] [, easing ] [, complete ]) // 用滑动动画显示或隐藏一个匹配元素

6.4 自定义特效

这些函数用于创建 jQuery 中所没有的各种特效。
所有用于动画的属性必须是数字的,除非另有说明;例如:background-color 不能应用于自定义动画,除非使用jQuery.Color()插件。
只有队列中连续的事件会延迟。例如,不带参数的 .show() 或者 .hide() 不会延迟,因为他们没有使用效果队列。
stop(true,true) 效果等同于 clearQueue().finish();
stop(false,false) 效果等同于 stop();

jQuery.fx.off	// 全局禁用所有动画,动画可以通过设置这个属性为 false 重新打开
$("selector").animate( properties [, duration ] [, easing ] [, complete ])		// 根据一组 CSS 属性,执行自定义动画
$("selector").queue([ queueName ])			// 显示在匹配的元素上的已经执行的函数列队。在匹配元素上操作已经附加函数的列表
$("selector").clearQueue([ queueName ])		//  从列队中移除所有未执行的项
$("selector").dequeue([ queueName ])		// 执行匹配元素队列的下一个函数
$("selector").delay( duration [, queueName ])		// 设置一个延时来推迟执行队列中后续的项
$("selector").stop([ queue ] [, clearQueue ] [, jumpToEnd ])	// 停止匹配元素当前正在运行的动画。动画名称、布尔值、布尔值
$("selector").finish([ queue ])				// 停止当前正在运行的动画,删除所有排队的动画,并完成匹配元素所有的动画

6.5 特效 Demo

  • 基本特效 Demo

在这里插入图片描述

  • 自定义特效 Demo
    图片过大,已经过压缩。

在这里插入图片描述

  • js 代码
$(function () {
    const btns = {
        left: function () {
            $(".item").animate({"left": "-=100px"}, 2000).text("left");
        },
        right: function () {
            $(".item").animate({"left": "+=100px"}, 2000).text("right");
        },
        stop: function () {
            $(".item").stop(true, false).text("stop");
        },
        finish: function () {
            $(".item").finish().text("finish");
        },
        go: function () {
            $(".item")
                .clearQueue()
                .text("GO!")
                .animate({
                    top: 200
                }, 2000)
                .animate({
                    left: 1100
                }, 3000)
                .animate({
                    top: 0
                }, 2000);
        },
        off: function () {
            $.fx.off = !$.fx.off;
        },
        reset: function () {
            $(".item")
                .clearQueue()
                .animate({
                    top: 0
                })
                .animate({
                    left: 0
                })
                .finish()
                .text("reset")
        }
    };

    $("button").on("click", function () {
        btns[this.id]();
    });
})

 


7. jQuery 遍历

jQuery 遍历,意为"移动",用于根据其相对于其他元素的关系来查找或选取 HTML 元素。以某项选择开始,并沿着这个选择移动,直到抵达期望的元素为止。

7.1 过滤

缩小搜索元素的范围。

$("selector").eq( index )				// 过滤出指定索引的元素,可以为负(倒数)
$("selector").filter( jQuery object )	// 筛选元素集合中匹配表达式或通过传递函数测试的那些元素集合
$("selector").first() 	// 获取匹配元素集合中第一个元素
$("selector").last() 	// 获取匹配元素集合中最后一个元素
$("selector").has( selector ) 	  		// 筛选匹配元素集合中的那些有相匹配的选择器或 DOM 元素的后代元素
$("selector").is( jQuery object ) 		// 判断当前匹配的元素集合中的元素,是否为一个选择器,DOM 元素,或者 jQuery 对象,如果这些元素至少一个匹配给定的参数,那么返回 true
$("selector").not( jQuery object )		// 从匹配的元素集合中移除指定的元素
$("selector").map( callback(index, domElement) ) 	// 通过一个函数匹配当前集合中的每个元素,产生一个包含新的 jQuery 对象
$("selector").slice(start [, end ]) 				// 根据指定的下标范围,过滤匹配的元素集合,并生成一个新的 jQuery 对象

7.2 树遍历

可细分为祖先遍历、后代遍历和同胞遍历。

*****【祖先】*****
$("selector").parent([ selector ]) 		// 取得匹配元素集合中,每个元素的父元素,可以提供一个可选的选择器。
$("selector").parents([ selector ]) 	// 获得集合中每个匹配元素的祖先元素,可以提供一个可选的选择器作为参数。
$("selector").parentsUntil([ element ] [, filter ]) 	// 查找当前元素的所有的前辈元素,直到遇到选择器, DOM 节点或 jQuery 对象匹配的元素为止,但不包括这些元素。
$("selector").closest( jQuery object ) 	// 从元素本身开始,在 DOM 树上逐级向上级元素匹配,并返回最先匹配的祖先元素。
$("selector").offsetParent() 			// 取得离指定元素最近的含有定位信息的祖先元素。含有定位信息的元素指的是,CSS 的 position 属性是 relative, absolute, 或 fixed 的元素。
*****【后代】*****
$("selector").children([ selector ]) 	// 获得匹配元素集合中每个元素的子元素,选择器选择性筛选。
$("selector").find( jQuery object ) 	// 通过一个选择器,jQuery 对象,或元素过滤,得到当前匹配的元素集合中每个元素的后代。
*****【同胞】*****
$("selector").siblings([ selector ]) 	// 获得匹配元素集合中每个元素的兄弟元素,可以提供一个可选的选择器。
$("selector").next([ selector ]) 		// 取得匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合。如果提供一个选择器,那么只有紧跟着的兄弟元素满足选择器时,才会返回此元素。
$("selector").nextAll([ selector ]) 	// 获得每个匹配元素集合中所有下面的同辈元素。
$("selector").nextUntil([ element ] [, filter ]) 		// 通过选择器,DOM节点,或jQuery对象得到每个元素之后的所有兄弟元素,但不包括匹配的元素。
$("selector").prev([ selector ]) 		// 取得一个包含匹配的元素集合中每一个元素紧邻的前一个同辈元素的元素集合。选择性筛选的选择器。
$("selector").prevAll([ selector ]) 	// 获得集合中每个匹配元素的所有前面的兄弟元素。
$("selector").prevUntil([ element ] [, filter ]) 		// 获取每个元素但不包括选择器,DOM节点,或者jQuery对象匹配的元素的所有前面的兄弟元素。

7.3 其他遍历

$("selector").add( jQuery object ) 		// 添加元素到匹配的元素集合。
$("selector").addBack([ selector ]) 	// 添加堆栈中元素集合到当前集合。
$("selector").contents() 	// 获得匹配元素集合中每个元素的子元素,包括文字和注释节点。
$("selector").end() 		// 终止在当前链的最新过滤操作,并返回匹配的元素的以前状态。

 


8. jQuery HTML

该章节内容过多,单开了一个博客。

jQuery 拥有可操作 HTML 元素和属性的强大方法。

点此跳转 → 友情链接

 


9. jQuery Ajax

该章节内容过多,单开了一个博客。

前端 form 表单传统的请求方式,会让页面跳转并刷新页面。所以发明了一个新的请求发送方式 ajax :
1.无刷新的页面请求发起方式;
2.这个行为是由 JS 来执行的;
3.让页面实现局部刷新。

点此跳转 → 友情链接

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值