谈论jQuery选择器和DOM操作

谈论jQuery选择器和DOM操作

jQuery选择器

1。基本选择器

基本选择器，jQuery中最常用的选择器，也是最简单的选择器，它通过元素id、类和标签名查找DOM元素。

1）$（# ID），获得ID指定元素的ID是全局唯一的，因此只有一个成员。

2）$（.）获取特定于类的元素，不同的元素可以具有相同的类属性，因此它可能有多个成员。

3）$（元素）、元素（元素名称，如div、表等）指定的元素，它可能有多个成员。

（4美元）（*），获取所有的元素，相当于文档。

（selector1，selector2）5美元，…selectorn），返回每个选择器匹配的元素融合在一起。返回设置+匹配+ selector2的selector1比赛。一套是由+ selectorn匹配。

2。电平选择器

水平是多少层次结构是父子关系和兄弟关系的节点。因此，层次结构选择器是父节点和获取指定元素的兄弟节点。

1）$（祖先后裔），获取下面祖先元素的所有元素。

（$ 2）父>子），所有子元素获取父元素如下（只包含第一级元素）。

3）$（前+下一步），其次是获取一个同级元素后的预元素。

4）$（前兄弟姐妹），所有的元素，以获得前元素背后的兄弟。

三.滤波器选择器

过滤器它肯定会添加过滤条件。通过：添加过滤器条件，比如$（div：First），返回div元素集的第一个div元素，第一个是过滤条件。

根据过滤规则的不同，过滤选择器可以分为基本过滤、内容过滤、可见性过滤、属性过滤、子元素过滤和表单对象属性筛选。

1）。基本过滤选择器

答：首先，选择第一个元素，不要忘记它也放在集合中！因为jQuery是DOM对象的集合，例如，$（）第一个返回所有TR元素的第一个TR元素，它仍然存储在集合中。

最后，选择最后一个元素。例如，$（最后）返回所有TR元素的最后一个TR元素，它仍然存储在集合中。

C：不是（选择器），删除与给定选择器相匹配的所有元素。例如，$（）输入（不检查）返回所有输入元素，但删除选定元素（单选按钮和复选框）。

d：甚至，在所有元素中选择元素的偶数，因为jQuery对象是一个集合，这里的偶数指的是集合的索引，索引从0开始。

e：奇数，选择所有元素中奇数的元素，索引从0开始。

）：EQ（index），选择指定索引的元素，索引从0开始。

g：gt（index），选择具有大于指定索引的索引的元素，索引从0开始。

h：LT（index），选择一个小于指定索引的元素，索引从0开始。

一）头，选择所有标题元素，如HQ、H2等。

j：动画，选择当前正在执行的所有动画元素。

2）。内容过滤选择器

它是文本的元素和内容的操作。

答：包含（文本），选择包含文本内容的元素。

空：选择一个不包含子元素或文本节点的空元素。

C：有（选择器），选择包含选择器匹配的元素的元素。

d：父元素，选择包含子元素或文本节点的元素（它是父节点）。

3）。可见性过滤选择器

根据元素的可见和不可见状态选择元素。

：隐藏，选择所有不可见元素。

可见，选择所有可见元素。

可见选择器：隐藏不仅包含样式属性显示的元素，也包括文本隐藏字段（）和可见的元素。

4）。属性过滤选择器

通过元素的属性选择相应的元素。

{ }，选择具有此属性的元素。

B）{属性}，选择具有指定属性值的所有元素。

C）{属性！= }，选择属性值不为值的所有元素。

d，选择从值开始的所有元素的属性值。

{属性值}，选择所有元素的属性值到值的结尾。

选择包含值的所有元素的属性值。

g）{ selector1 } { selector2 }…{ selectorn }，复合选择器，首先选择selector1 } {返回设置，然后设置一个，然后返回到B组的selector2 } {选择集B，然后返回{ } { }的selectorn selectorn。

5）。子元素过滤选择器

其名称是，它是元素的元素的选择。

a）n个子（索引偶数），一个具有索引索引的元素，一个偶数的元素和一个奇数的元素。

l n个子（甚至奇数）：可以在每个父元素下选择偶数（奇数）索引值的元素。

l n个子（2）：可以在每个父元素下选择一个索引为2的元素。

l nth-child（3N）：可以选择多个3每个父元素下的元素。

l nth-child（3n + 1）：每个父元素的索引值可以选择为3n + 1元。

）：第一个孩子，选择第一个子元素。

c：最后一个子元素，选择最后一个子元素。

D）：唯一的孩子，唯一的孩子选中元素，和它的父元素的子元素只。

6）。形态滤波选择器

为表单元素选择筛选器选择器。

a）输入、选择全部和元素。

（b）：文本，选择所有文本框元素。

）：密码，选择所有密码框元素。

d）单选，选择所有的单盒元素。

E：复选框），选择所有复选框元素。

f：提交，选择所有提交按钮元素。

g：图像，选择所有的图像按钮元素。

h：重置，选择所有重置按钮元素。

i）：按钮，选择所有按钮元素。

j：文件，选择上传域元素的所有文件。

k：隐藏，选择所有的不可见元素。

7）。表单对象属性筛选器选择器

为表单元素属性选择筛选器选择器。

：启用，选择所有可用的元素。

禁用，选择所有不可用元素。

选中，选中所有选中的元素，如单选框、复选框。

选定，选择所有选定的项目，如下：列表框，列表框。

四，jQuery中的DOM操作

与浏览器、平台和语言无关的接口。使用此接口，您可以轻松地访问页面中的所有标准组件。

DOM核心：DOM核心不完全属于Javaｓｃｒｉｐｔ，可以使用任何支持DOM的编程语言，它不仅用于处理网页，还可以用来处理用标记语言编写的任何类型的文档，如XML。

HTML DOM：有许多属性，属于html-dom写作使用Javaｓｃｒｉｐｔ和DOM HTML文件的脚本时。

css-dom：为CSS的操作，在Javaｓｃｒｉｐｔ中，css-dom主要用于获取和设置的样式对象的各种属性。

1。查找节点

见上面的基本选择器。

2。创建节点

使用jQuery的工厂函数创建一个新的节点：节点= $（var $你好）；然后将新结点插入到指定的元素节点。

三.插入节点

将新创建的节点或已获取节点插入指定位置。

node.append美元（$节点），将端到每个匹配元素的结束。例如，$（p）。追加（你好）；添加你好P结束。

newnode.appendto美元（$节点），添加新的元素，每一个匹配元素的结束。

node.prepend美元（$节点）将开始在每一个匹配元素的结束。例如，$（p）。Prepend（你好）；添加你好P开始。

newnode.prependto美元（$节点），添加新的元素，每个匹配元素的开始。

node.after美元（$节点），将其插入每个匹配元素后，是一个并列的兄弟。例如，$（p），（你好）；插入你好到P后面。他们是兄弟。

newnode.insertafter美元（$节点），插入新的元素在每个匹配的元素。

newnode.before美元（$节点），在每一个匹配元素之前插入内容。例如，$（p），（你好）；插入你好到P前

node.insertbefore美元（$节点），插入新的元素在每个匹配的元素。

注意：如果插入的节点不是新创建的，那么插入将成为一个移动操作。

4。删除节点

从DOM中删除所有匹配的元素。例如，$（p）。删除（hello）；删除类属性值的hello元素和它下面的所有元素。

清除DOM中所有匹配的元素。例如，$（）。空（）；清除所有p元素，以及它下面的所有元素。

5。复制节点

克隆匹配的DOM元素。例如，$（p）。Clone（）；返回复制的副本，但没有任何行为。如果您想要一起克隆DOM事件，您应该使用$（）Clone（true）；。

6。替换节点

所有匹配的元素都与指定的HTML或DOM元素替换。例如，$（p）。ReplaceWith（段落）；段代替所有的p元素。。

回用：$（段落）。ReplaceAll（P）；。

7。包裹结

包（）：指定的节点与其他标记一起包装。这种方法对在文档中插入额外的结构化标记非常有用，并且不会破坏原始文档的语义。例如，$（）包装。

WrapAll（）：所有匹配的元素用一元。包（）方法是将所有的元素。例如，$（p）。WrapAll（）；包装所有的P元素进去。

WrapInner（）：的子内容（包括文本节点）每个匹配元素包与其他结构化的标记。例如，$（p）。WrapInner（）；每一个P元素包裹。

8。属性设置

attr（）：获取属性和设置属性。

当一个参数被传递给方法，指定的属性得到的元素。例如，$（img）。Attr（src）；得到的img元素的src属性的值。

当两参数传递给这个方法，指定的属性的值设置为一个特定的元素。例如，$（img）。Attr（src

在jQuery是一个功能的实现和建立的方法很多，如：attr（）、（）、文本（HTML）、瓦迩（）、高度（宽度）、（）、（）和CSS等。

RemoveAttr（）：删除指定属性指定元素的。

9。操作风格

CSS样式可以设置或获得的属性（）。

附加式：addClass（）。例如，$（p）。AddClass（选择）；将所选样式的所有P元素。

删除样式：removeClass（）-删除所有或指定的类从匹配的元素。例如，$（p）。RemoveClass（选择）；删除所有选定的P元素。

开关方式：toggleclass（）-控制方式重复切换。如果存在类的名称，它被删除，如果类的名称不存在，它补充说。例如，$（p）。ToggleClass（选择）；所有的P元素，如果有是一个选择的方式，选择的方式是删除，否则所选样式添加。

确定风格包含：hasclass（）-它是否包含某一类的元素，并返回true；否则，返回false。例如，$（这）。HasClass（保护），确定当前节点是否具有保护方式。

10。设置或获取HTML、文本和值

读取并设置HTML元素中的HTML内容：HTML（），它可以用于XHTML，但不能用于XML文档。

读取并设置文本元素中的文本内容：文本（），它可以同时用于XHTML和XML文档中。

读取并设置一个元素中的值：K（），它与Javaｓｃｒｉｐｔ中的value属性类似。对于文本框、下拉列表框、复选框，该方法可以返回元素的值（复选框只返回第一个值）。如果选中的下拉列表框返回一个包含所有选择的值数组。

11。常用的遍历节点的方法

一组匹配的所有子元素元素是：孩子们（）。这个方法只考虑第一级元素不考虑任何后代。

匹配元素旁边的一组同级元素（但集合中只有一个元素）：下一个（）。

一组兄弟元素（但在集只有一个元素）：沪指（）得到。

获取匹配元素前后的所有兄弟元素：兄弟姐妹（）。

12.css-dom操作

获取并设置元素的样式属性：CSS（）。

获取并设置元素透明度：不透明（）属性。

获取和设置元素的高度，宽度，高度，宽度：（）（）。当该值设置，默认单位是PX如果数过。如果你需要使用其他单位，你需要传递一个字符串，例如，$（P：第一高度（2em））；

获取当前窗口中元素的相对位移：偏移量（）。它返回的对象包含两个属性：顶部，左边。这个方法只对可见元素有效。

五，jQuery中的事件

1。加载DOM

在页面加载时，浏览器增加了一个事件的DOM元素通过Javaｓｃｒｉｐｔ，Javaｓｃｒｉｐｔ代码，这在window.onload方法是常用的，和$（document）。Ready（）方法中使用jQuery，jQuery简化为（）。当一个事件发生在一个在window.onload注册，它只能在一个在window.onload体注册。但使用jQuery，你可以登记多美元（文件）。Ready（）或（）。

2。事件绑定

在匹配元素上绑定到指定事件。

例如，我们的方式绑定事件昨天在window.onload：

$（p）。Onclick（function（）{）

警报（$（this））文本（））；

}）；

$（文档）Ready（）在jQuery中

它可以用这种方式绑定：

$（p）。Click（函数（）{警报（$（this））（））；

}）；

使用绑定（），可以像这样绑定它：

$（p）。Bind（单击

警报（$（this））文本（））；

}）；
三.综合事件

悬停（）：模拟光标的悬停时间。当光标移动到元素时，它触发指定的第一个函数，当光标移出元素时，它触发指定的第二个函数。

例如，悬停效应是：

$（）。Hover（函数（））

{ $（this）。AddClass（悬停）；}，

（）函数

{ $（this）。RemoveClass（悬停）；}）；

切换（）（）：

用于模拟鼠标连续单击事件。第一次单击元素触发指定的第一个函数。当我们再次单击同一元素时，我们将触发指定的第二个函数。如果有更多的函数，我们将依次触发它们直到最后一个。例如，设置元素的选择和未选中的效果：

$（）。Toggle（函数（））

{ $（this）。AddClass（选择）；}，

（）函数

{ $（this）。RemoveClass（选择）；}）；

在不传递参数的情况下使用切换（），其效果是开关元件的可见状态。
4者的冒泡。事件

事件将像泡沫一样停在DOM层次结构的顶部。

解决方案：在事件处理函数中返回false并停止事件冒泡。您还可以停止元素的默认行为。

所有当前UI交互或它们的事件都支持此特性。事件处理函数在其自身事件中返回false，以继续中止事件。

5的属性。事件对象

事件对象：当事件被触发时，创建事件对象。使用程序中的事件只需要向处理函数添加一个参数。

例如，当一个事件发生时，该event.pagex，event.pagey，和事件的事件处理函数的参数。

6。删除事件

删除按钮点击事件：$（BTN）。Unbind（点击）

删除按钮上的所有事件：$（BTN）Unbind（）；

一（）：这种方法可以将一个元素绑定到一个处理函数，当处理函数一次触发时，事件立即被删除，即，在每个对象上，事件处理函数只执行一次。
六和jQuery中的DOM动画

通过设置DOM对象的显示和隐藏方式，可以生成动画效果。

1。无动画效果的隐藏和显示

隐藏（）：在HTML文档中，对元素的隐藏（）方法的调用将将元素的显示样式更改为无。代码函数与CSS相同（显示，无）。

显示（）：将元素的显示样式更改为以前的显示状态。

开关元素的可见状态：如果元素在可见时可见，则开关被隐藏；如果元素隐藏，则开关是可见的。

2。通过隐藏和显示透明效果来淡入淡出

FadeIn（）（），（）：淡出只改变的element.fadeout透明度降低（）在指定的一段时间内的元素的不透明度直到元是完全disappearing.fadein（）是相反的。例如，慢下来的段落在600毫秒内：$（p）。FadeIn（慢）；

FadeTo（）：调整不透明度到规定值（0 - 1）在一个渐进的方式。当动画完成后，一个回调函数触发选择。例如，段落的透明度调整为0.25到200毫秒。在动画完成后，一个动画做信息框显示：$（p）。FadeTo（快

三.通过设置高度效果来隐藏和显示，实现幻灯片和动画效果。

SlideDown（）（）（），slideup：它只改变元素的高度。如果一个元素的显示属性是没有的，当调用slideDown（）方法，这个单元将从上到下的显示，slideup（）方法则正好相反，和元素是隐藏的下第一。例如，滑下一段慢600毫秒：$（p）。SlideDown（慢）；

SlideToggle（）：通过高度的变化转换的匹配元素的可见性。

例如，200毫秒很快地滑动或滑动一段，动画结束后，会显示一个动画完成的信息框：

$（p）。SlideToggle（快

警报（动画完成）；

}）；。

使用Javaｓｃｒｉｐｔ和jQuery可以处理当前页面的动态更新，并结合CSS样式做出非常漂亮的用户界面，多的甚至比桌面软件界面更漂亮。调试Javaｓｃｒｉｐｔ编译是很麻烦的，所以一些公司制作的一个简化开发的Javaｓｃｒｉｐｔ应用程序，如GWT谷歌制作的，可以编写Javaｓｃｒｉｐｔ一样摆动用java写的。它为用户提供了用户界面和事件一样摆动和支持java核心库。使用GWT的编译器，java代码可以编译成Javaｓｃｒｉｐｔ代码、CSS样式和HTML文件。
上述讨论jQuery选择器和DOM操作，萧边分享了你的全部内容。希望能给大家一个参考，希望大家能支持更多。