数码资讯
jQuery使用简明教程
web元素的选择 jQuery的基本设计和主要用途是选择一个Web元素，然后对它做些什么，这是区别于其他函数库的基本特征。 使用jQuery的第一步是将替代表达式放入构造函数jQuery（）（缩写为$），然后获取所选元素。 选择表达式可以是CSS选择器： 复制代码代码如下所示： $（文档）/选择整个
选购提示
关注价格、性能、续航、售后和真实使用场景，理性比较后再下单。
web元素的选择
jQuery的基本设计和主要用途是选择一个Web元素，然后对它做些什么，这是区别于其他函数库的基本特征。
使用jQuery的第一步是将替代表达式放入构造函数jQuery（）（缩写为$），然后获取所选元素。
选择表达式可以是CSS选择器：
复制代码代码如下所示：
$（文档）/选择整个文档对象
$（不存在#） / ID作为网页元素不存在
$（'div.myclass）类 / / DIV元素中
$（输入{名称=第一}） /名称属性等于输入元素
它也可以是jQuery特有的表达式：
复制代码代码如下所示：
$（：第一'） / /第一选择网页元素
$（TR： / /奇）选择表号线
$（#：以下是我参考网上输入）的形式 / /输入元件
$（'div：可见的） / DIV的可见元素
（'div：GT（2美元）'） / /选择所有div元素，除了前三
$（'div：动画） / /选择div元素目前在动画状态
两。更改结果集
如果选择了多个元素，jQuery提供了一个过滤器，那么结果集就可以减少：
复制代码代码如下所示：
$（'div）。有（'p'）； / / DIV元素含有P元素
$（'div '），（'。MyClass）； / /班不等于前面的div元素
$（'div）。滤波器（'。MyClass）； / /班等于div MyClass
$（'div）。弗斯特（DIV）； / /第一元素
$（'div）。情商（5）； / /第六DIV元素
在某些情况下，我们需要从结果集移到附近的相关元素，而jQuery也提供了一种在DOM树上移动的方法：
复制代码代码如下所示：
$（'div）。二（'p'）； / /选择第一个P的div元素的背后
$（'div）。父（）； / /选择父div元素
$（'div）。最近（‘形'）； / /选择最接近的父元素div形式
$（'div）。儿童（）； / /所有的子元素div
$（'div）。兄弟姐妹（DIV）； / /选择同级元素
三、连锁经营
选择页面元素时，可以在其上执行某些操作。
jQuery允许所有操作都以链的形式连接在一起，例如：
复制代码代码如下所示：
$（'div）。发现（'h3）。情商（2），Html（你好）；
我们能做的是从下面打开：
复制代码代码如下所示：
$（'div '） / /找到div元素
找到（'h3）的选择 / / h3元素
EQ（2）第三个H3元素
HTML（你好'）； / /内容改为你好
这是jQuery最值得称道和方便的特性，它的原理在于每个步骤的jQuery操作，而返回是一个jQuery对象，因此不同的操作可以连接在一起。
jQuery还提供了端（）方法，允许结果集返回一步：
复制代码代码如下所示：
$（'div）
找到（'h3）。
情商（2）
HTML（你好）。
结束（H3）返回以选择步骤的所有元素。
EQ（0）选择第一个H3元素
.html（世界的）； / /内容改变了世界
四。元素的操作：值和赋值
操作Web元素最常见的要求是获取它们的值，或者将它们分配给它们。
jQuery使用相同的函数来执行值和赋值，它是由函数的参数决定的。
$（'h1'）。Html（）； / / html（）没有参数，表明了H1的值为（'h1'）。Html（你好）； / / html（）有一个参数你好，说明H1分配。
常用值和赋值函数如下所示：
复制代码代码如下所示：
html（）获取或设置HTML内容
文本（）获取或设置文本内容。
.attr（）带或设置一个属性的值
宽度（）取出或设置一个元素的宽度。
高度（）去掉或设置一个元素的高度。
（）获取表单元素的值。
应该注意的是，如果结果集包含多个元素，则在赋值时，将分配所有元素。当选择值时，它只接受第一个元素的值（文本（）异常，它提取所有元素的文本内容）。
五，元素的运行：运动
如果要移动选定的元素，有两种方法：一种是直接移动元素，另一种是移动其他元素，这样目标元素就可以到达我们想要的位置。
假设我们已经选择了一个div元素，我们需要将它移动到p元素的后面。
第一种方法是use.insertafter（）转移到P元素div元素：
复制代码代码如下所示：
$（'div）。InsertAfter（'p'）；
第二种方法是使用.在p元素的前面添加p元素：
复制代码代码如下：$（'p'）后（'div）；
从表面上看，这两种方法的效果是一样的。唯一的区别似乎是操作角度上的差异。实际上，它们之间有很大的不同，也就是说返回的元素是不同的。第一个方法返回div元素，第二个方法返回p元素。
使用这种模式有四种操作方法。
复制代码代码如下所示：
insertAfter（）。和。后（）：在现有元素外，从后面插入元素
。在（）和（）。之前：在现有元素外，从前面插入元素
。appendto（）和（）。追加：在现有的元素，从后面插入元素
。prependto（）和Prepend（）：在现有的元素，从前面插入元素
六，元素的操作：复制、删除和创建
复制元素使用克隆（）。
删除元素使用。删除（）和（）的分离，两者之间的区别是，前者不保留已删除的元素的事件，后者被保留，有利于重新插入文档。
清除元素的内容（但不删除元素）使用。空（）。
创建新元素的方法非常简单，只要将新元素直接传递到jQuery的构造函数中即可：
复制代码代码如下所示：
（$
你好
'）；
（$
新的列表项
'）；
$（'ul）。追加（
列表项
'）；
七、工具法
除了操作所选元素之外，jQuery还提供了许多工具方法（实用工具），可以直接使用，而不必选择元素。
如果你了解Javaｓｃｒｉｐｔ语言的原则，你能理解的工具方法的本质。这是一个jQuery构造器，即定义的方法，jquery.method（），可以直接使用。操纵元素的方法是对构造函数，即原型对象中定义的方法，jquery.prototype.method（），所以我们必须生成实例（即选择元素）和后来的使用它们。如果我们不了解这种差异，问题不是很大。只要我们将工具方法理解为Javaｓｃｒｉｐｔ原生函数，就可以直接使用该方法。
常用的工具如下：
复制代码代码如下所示：
$（）去掉字符串两端的空格。
每个（）遍历数组或对象。
美元。内部数组（）返回数组中的索引位置的值。如果该值不在数组中，将返回- 1。
美元。grep（）返回符合某些标准的数组的一个元素。
$（）将多个对象合并到第一个对象中。
美元。makearray（）将对象转换成一个数组。
$（）确定对象的类别（函数对象、日期对象、数组对象、规则对象等）。
美元。ISArray（）确定参数是一个数组。
美元。isemptyobject（）决定一个对象是否为空（无产权）。
美元。功能（）确定参数是一个函数。
（美元。isplainobject）确定一个参数是对象{} 或新对象的建立。
$（）确定浏览器是否支持特定的特性。
八。事件操作
jQuery可以绑定到Web页面的元素，并根据不同的事件运行相应的函数。
复制代码代码如下所示：
$（'p'）。Click（function（）{）
警报（你好）；
}）；
目前，jQuery主要支持以下事件：
复制代码代码如下所示：
Blur（）表单元素失去焦点。
更改（）窗体的表单元素的值的变化
单击（）鼠标单击
（）。双击鼠标的双击
焦点（）表单元素获得焦点。
的。（）子元素获得焦点的焦点
Focusout（）的子元素失去焦点。
。悬停（）指定了一个MouseEnter同时MouseLeave事件处理函数
。KeyDown（）按键盘（长按键，只返回一个事件）
（）。按键按下键盘（长按钮，会返回多个事件）
KeyUp（）松开键盘。
加载（）元素。
鼠标按下鼠标（）。
。MouseEnter（）鼠标进入（进入子元素不会触发）
。MouseLeave（）离开鼠标（离开不触发的子元素）
鼠标移动。MouseMove（）里面的元素
。mouseout（）鼠标离开（离开子元素也会触发）
.mouseover（）鼠标进入（进入子元素也会触发）
松开鼠标（）松开鼠标。
就绪（）DOM加载完成
更改大小（）浏览器窗口的大小
滚动条的位置。
选择（）用户选择文本框中的内容
提交（）用户提交表单。
切换（）依次运行多个函数，根据鼠标的点击次数。
卸载（）用户离开页面
这些事件是在jQuery，便捷的方式。Bind（）Using.Bind（）可以更灵活地控制事件，比如绑定多个事件相同的功能：
复制代码代码如下所示：
$（输入的）。Bind（点击改变，点击和改变同时绑定/事件
函数（）{
警报（你好）；
}
）；
如果您只想运行该事件一次，可以使用-1（）方法。
复制代码代码如下所示：
$（p）。
警报（）；只运行一次单击，不运行
}）；
。解放（）是用来解除事件绑定。
复制代码代码如下所示：
$（'p'）。Unbind（听到咔哒声）；
所有事件处理函数都可以接受事件对象（事件对象）作为参数，如下面例子中的E：
复制代码代码如下所示：
$（p）。Click（函数（e）{）
警报（e.type）； / /点击
}）；
这个事件对象有一些非常有用的属性和方法：
复制代码代码如下所示：
水平距离，鼠标距离到网页的左上角event.pagex事件发生时
垂直距离鼠标距离到网页的左上角event.pagey事件发生时
该event.type事件类型（如点击）
其中关键是event.which压
event.data绑定的事件对象的数据，然后通过事件处理函数
对于event.target事件页面元素
Event.preventDefault（）防止违约行为的事件（如单击链接，自动打开新的网页）
event.stoppropagation（）停止事件冒泡到上元
在事件处理函数中，您可以使用此关键字返回事件的DOM元素：
复制代码代码如下所示：
$（A）。Click（function（）{）
如果（$（this）。Attr（'href）。比赛（'邪恶'））{ / /如果确认为有害链接
（e.preventDefault）； / /停止开放
$（这）。AddClass（'邪恶'）； / /说有害类加
}
}）；
有两种方法可以自动触发一个事件。一种是直接使用事件功能，和使用。Trigger（）（）（）or.triggerhandler。
复制代码代码如下所示：
$（a）Click（）；
$（A），Trigger（听到咔哒声）；
九。特殊效果
jQuery允许对象具有一些特殊效果。
$（'h1'）。显示（H1）； / /显示一个标题
特殊效果如下：
复制代码代码如下所示：
（淡入渐显）。
淡出淡入淡出（）。
fadeTo（）调整透明度。
隐藏（）隐藏元素
显示（）显示元素
slideDown（）向下。
slideup（）卷起来。
（）。slidetoggle折叠或卷起的又一个元素
切换（）依次显示或隐藏一个元素。
此外，（）和（）。隐藏，所有其他特效默认的执行时间为400ms（毫秒），但您可以更改此设置。
复制代码代码如下所示：
$（'h1'）。FadeIn（300）； / / 300毫秒
$（'h1'）。FadeOut（'慢'）； / /慢慢淡出
特殊效果结束后，您可以指定一个函数。
复制代码代码如下所示：
$（'p'）。FadeOut（300）、功能（去除（）{ $（this）；}）；
更复杂的特效可以定制。
复制代码代码如下所示：
$（'divAnimate（）。
{
左：+ = 50 /继续正确
不透明性：0.2 指定透明度
}，
300 持续时间
（功能）{ alert（'done！）；返回函数
）；
停止（）和Delay（）用于停止或延迟特效的执行。
如果美元。fx.off设置为true，所有网站的具体影响是封闭的。
jQuery的基本设计和主要用途是选择一个Web元素，然后对它做些什么，这是区别于其他函数库的基本特征。
使用jQuery的第一步是将替代表达式放入构造函数jQuery（）（缩写为$），然后获取所选元素。
选择表达式可以是CSS选择器：
复制代码代码如下所示：
$（文档）/选择整个文档对象
$（不存在#） / ID作为网页元素不存在
$（'div.myclass）类 / / DIV元素中
$（输入{名称=第一}） /名称属性等于输入元素
它也可以是jQuery特有的表达式：
复制代码代码如下所示：
$（：第一'） / /第一选择网页元素
$（TR： / /奇）选择表号线
$（#：以下是我参考网上输入）的形式 / /输入元件
$（'div：可见的） / DIV的可见元素
（'div：GT（2美元）'） / /选择所有div元素，除了前三
$（'div：动画） / /选择div元素目前在动画状态
两。更改结果集
如果选择了多个元素，jQuery提供了一个过滤器，那么结果集就可以减少：
复制代码代码如下所示：
$（'div）。有（'p'）； / / DIV元素含有P元素
$（'div '），（'。MyClass）； / /班不等于前面的div元素
$（'div）。滤波器（'。MyClass）； / /班等于div MyClass
$（'div）。弗斯特（DIV）； / /第一元素
$（'div）。情商（5）； / /第六DIV元素
在某些情况下，我们需要从结果集移到附近的相关元素，而jQuery也提供了一种在DOM树上移动的方法：
复制代码代码如下所示：
$（'div）。二（'p'）； / /选择第一个P的div元素的背后
$（'div）。父（）； / /选择父div元素
$（'div）。最近（‘形'）； / /选择最接近的父元素div形式
$（'div）。儿童（）； / /所有的子元素div
$（'div）。兄弟姐妹（DIV）； / /选择同级元素
三、连锁经营
选择页面元素时，可以在其上执行某些操作。
jQuery允许所有操作都以链的形式连接在一起，例如：
复制代码代码如下所示：
$（'div）。发现（'h3）。情商（2），Html（你好）；
我们能做的是从下面打开：
复制代码代码如下所示：
$（'div '） / /找到div元素
找到（'h3）的选择 / / h3元素
EQ（2）第三个H3元素
HTML（你好'）； / /内容改为你好
这是jQuery最值得称道和方便的特性，它的原理在于每个步骤的jQuery操作，而返回是一个jQuery对象，因此不同的操作可以连接在一起。
jQuery还提供了端（）方法，允许结果集返回一步：
复制代码代码如下所示：
$（'div）
找到（'h3）。
情商（2）
HTML（你好）。
结束（H3）返回以选择步骤的所有元素。
EQ（0）选择第一个H3元素
.html（世界的）； / /内容改变了世界
四。元素的操作：值和赋值
操作Web元素最常见的要求是获取它们的值，或者将它们分配给它们。
jQuery使用相同的函数来执行值和赋值，它是由函数的参数决定的。
$（'h1'）。Html（）； / / html（）没有参数，表明了H1的值为（'h1'）。Html（你好）； / / html（）有一个参数你好，说明H1分配。
常用值和赋值函数如下所示：
复制代码代码如下所示：
html（）获取或设置HTML内容
文本（）获取或设置文本内容。
.attr（）带或设置一个属性的值
宽度（）取出或设置一个元素的宽度。
高度（）去掉或设置一个元素的高度。
（）获取表单元素的值。
应该注意的是，如果结果集包含多个元素，则在赋值时，将分配所有元素。当选择值时，它只接受第一个元素的值（文本（）异常，它提取所有元素的文本内容）。
五，元素的运行：运动
如果要移动选定的元素，有两种方法：一种是直接移动元素，另一种是移动其他元素，这样目标元素就可以到达我们想要的位置。
假设我们已经选择了一个div元素，我们需要将它移动到p元素的后面。
第一种方法是use.insertafter（）转移到P元素div元素：
复制代码代码如下所示：
$（'div）。InsertAfter（'p'）；
第二种方法是使用.在p元素的前面添加p元素：
复制代码代码如下：$（'p'）后（'div）；
从表面上看，这两种方法的效果是一样的。唯一的区别似乎是操作角度上的差异。实际上，它们之间有很大的不同，也就是说返回的元素是不同的。第一个方法返回div元素，第二个方法返回p元素。
使用这种模式有四种操作方法。
复制代码代码如下所示：
insertAfter（）。和。后（）：在现有元素外，从后面插入元素
。在（）和（）。之前：在现有元素外，从前面插入元素
。appendto（）和（）。追加：在现有的元素，从后面插入元素
。prependto（）和Prepend（）：在现有的元素，从前面插入元素
六，元素的操作：复制、删除和创建
复制元素使用克隆（）。
删除元素使用。删除（）和（）的分离，两者之间的区别是，前者不保留已删除的元素的事件，后者被保留，有利于重新插入文档。
清除元素的内容（但不删除元素）使用。空（）。
创建新元素的方法非常简单，只要将新元素直接传递到jQuery的构造函数中即可：
复制代码代码如下所示：
（$
你好
'）；
（$
新的列表项
'）；
$（'ul）。追加（
列表项
'）；
七、工具法
除了操作所选元素之外，jQuery还提供了许多工具方法（实用工具），可以直接使用，而不必选择元素。
如果你了解Javaｓｃｒｉｐｔ语言的原则，你能理解的工具方法的本质。这是一个jQuery构造器，即定义的方法，jquery.method（），可以直接使用。操纵元素的方法是对构造函数，即原型对象中定义的方法，jquery.prototype.method（），所以我们必须生成实例（即选择元素）和后来的使用它们。如果我们不了解这种差异，问题不是很大。只要我们将工具方法理解为Javaｓｃｒｉｐｔ原生函数，就可以直接使用该方法。
常用的工具如下：
复制代码代码如下所示：
$（）去掉字符串两端的空格。
每个（）遍历数组或对象。
美元。内部数组（）返回数组中的索引位置的值。如果该值不在数组中，将返回- 1。
美元。grep（）返回符合某些标准的数组的一个元素。
$（）将多个对象合并到第一个对象中。
美元。makearray（）将对象转换成一个数组。
$（）确定对象的类别（函数对象、日期对象、数组对象、规则对象等）。
美元。ISArray（）确定参数是一个数组。
美元。isemptyobject（）决定一个对象是否为空（无产权）。
美元。功能（）确定参数是一个函数。
（美元。isplainobject）确定一个参数是对象{} 或新对象的建立。
$（）确定浏览器是否支持特定的特性。
八。事件操作
jQuery可以绑定到Web页面的元素，并根据不同的事件运行相应的函数。
复制代码代码如下所示：
$（'p'）。Click（function（）{）
警报（你好）；
}）；
目前，jQuery主要支持以下事件：
复制代码代码如下所示：
Blur（）表单元素失去焦点。
更改（）窗体的表单元素的值的变化
单击（）鼠标单击
（）。双击鼠标的双击
焦点（）表单元素获得焦点。
的。（）子元素获得焦点的焦点
Focusout（）的子元素失去焦点。
。悬停（）指定了一个MouseEnter同时MouseLeave事件处理函数
。KeyDown（）按键盘（长按键，只返回一个事件）
（）。按键按下键盘（长按钮，会返回多个事件）
KeyUp（）松开键盘。
加载（）元素。
鼠标按下鼠标（）。
。MouseEnter（）鼠标进入（进入子元素不会触发）
。MouseLeave（）离开鼠标（离开不触发的子元素）
鼠标移动。MouseMove（）里面的元素
。mouseout（）鼠标离开（离开子元素也会触发）
.mouseover（）鼠标进入（进入子元素也会触发）
松开鼠标（）松开鼠标。
就绪（）DOM加载完成
更改大小（）浏览器窗口的大小
滚动条的位置。
选择（）用户选择文本框中的内容
提交（）用户提交表单。
切换（）依次运行多个函数，根据鼠标的点击次数。
卸载（）用户离开页面
这些事件是在jQuery，便捷的方式。Bind（）Using.Bind（）可以更灵活地控制事件，比如绑定多个事件相同的功能：
复制代码代码如下所示：
$（输入的）。Bind（点击改变，点击和改变同时绑定/事件
函数（）{
警报（你好）；
}
）；
如果您只想运行该事件一次，可以使用-1（）方法。
复制代码代码如下所示：
$（p）。
警报（）；只运行一次单击，不运行
}）；
。解放（）是用来解除事件绑定。
复制代码代码如下所示：
$（'p'）。Unbind（听到咔哒声）；
所有事件处理函数都可以接受事件对象（事件对象）作为参数，如下面例子中的E：
复制代码代码如下所示：
$（p）。Click（函数（e）{）
警报（e.type）； / /点击
}）；
这个事件对象有一些非常有用的属性和方法：
复制代码代码如下所示：
水平距离，鼠标距离到网页的左上角event.pagex事件发生时
垂直距离鼠标距离到网页的左上角event.pagey事件发生时
该event.type事件类型（如点击）
其中关键是event.which压
event.data绑定的事件对象的数据，然后通过事件处理函数
对于event.target事件页面元素
Event.preventDefault（）防止违约行为的事件（如单击链接，自动打开新的网页）
event.stoppropagation（）停止事件冒泡到上元
在事件处理函数中，您可以使用此关键字返回事件的DOM元素：
复制代码代码如下所示：
$（A）。Click（function（）{）
如果（$（this）。Attr（'href）。比赛（'邪恶'））{ / /如果确认为有害链接
（e.preventDefault）； / /停止开放
$（这）。AddClass（'邪恶'）； / /说有害类加
}
}）；
有两种方法可以自动触发一个事件。一种是直接使用事件功能，和使用。Trigger（）（）（）or.triggerhandler。
复制代码代码如下所示：
$（a）Click（）；
$（A），Trigger（听到咔哒声）；
九。特殊效果
jQuery允许对象具有一些特殊效果。
$（'h1'）。显示（H1）； / /显示一个标题
特殊效果如下：
复制代码代码如下所示：
（淡入渐显）。
淡出淡入淡出（）。
fadeTo（）调整透明度。
隐藏（）隐藏元素
显示（）显示元素
slideDown（）向下。
slideup（）卷起来。
（）。slidetoggle折叠或卷起的又一个元素
切换（）依次显示或隐藏一个元素。
此外，（）和（）。隐藏，所有其他特效默认的执行时间为400ms（毫秒），但您可以更改此设置。
复制代码代码如下所示：
$（'h1'）。FadeIn（300）； / / 300毫秒
$（'h1'）。FadeOut（'慢'）； / /慢慢淡出
特殊效果结束后，您可以指定一个函数。
复制代码代码如下所示：
$（'p'）。FadeOut（300）、功能（去除（）{ $（this）；}）；
更复杂的特效可以定制。
复制代码代码如下所示：
$（'divAnimate（）。
{
左：+ = 50 /继续正确
不透明性：0.2 指定透明度
}，
300 持续时间
（功能）{ alert（'done！）；返回函数
）；
停止（）和Delay（）用于停止或延迟特效的执行。
如果美元。fx.off设置为true，所有网站的具体影响是封闭的。
声明：本文内容用于数码产品信息整理与选购参考，具体价格、库存、售后政策以官方渠道和电商页面实时信息为准。