jquery获取子元素的方法 find()的用法

find() 方法获得当前元素集合中每个元素的后代，通过选择器、jQuery 对象或元素来筛选。

语法：find(selector)   参数selector  字符串值，包含供匹配当前元素集合的选择器表达式。

详细说明：

如

果给定一个表示 DOM 元素集合的 jQuery 对象，find() 方法允许我们在 DOM

树中搜索这些元素的后代，并用匹配元素来构造一个新的 jQuery 对象。find() 与 children() 方法类似，不同的是后者仅沿着

DOM 树向下遍历单一层级。

find() 方法第一个明显特征是，其接受的选择器表达式与我们向 $() 函数传递的表达式的类型相同。将通过测试这些元素是否匹配该表达式来对元素进行过滤。

实例：

打印结果：

elemchildren和elemchildNodes都是返回元素的 直接子元素 。

区别在于：

elemchildren 返回的是所有标签的元素节点的集合；

elemchildNodes 包括当前节点的所有子节点的集合。除了HTML元素节点，该属性返回的还包括Text节点和Comment节点。其中文本节点包括：空格、换行符和制表符等。

常见的方法：

getElementById()、getElementsByClassName()、getElementsByTagName()、getElementsByName()、querySelector()、querySelectorAll()

①getElementById()返回匹配指定ID属性的元素节点。如果没有发现匹配的节点，则返回null。注意：如果有几个相同id名，只返回第一个。

②getElementsByClassName()方法返回一个类似数组的对象（HTMLCollection类型的对象），包括了所有class名字符合指定条件的元素，元素的变化实时反映在返回结果中。

这个方法不仅可以在document对象上调用，也可以在任何元素节点上调用。

注意：这个方法的参数可以是多个空格分隔的class名字，返回同时具有这些节点的元素。

③getElementsByTagName()方法返回所有指定标签的元素。返回值是一个HTMLCollection对象(类似数组),任何元素的变化会实时反映在返回结果中。

这个方法不仅可以在document对象上调用，也可以在任何元素节点上调用。

④getElementsByName方法用于选择拥有name属性的HTML元素，比如form、img、frame、embed和object，返回一个NodeList格式的对象，不会实时反映元素的变化。

⑤querySelector方法返回匹配指定的CSS选择器的元素节点。如果有多个节点满足匹配条件，则返回第一个匹配的节点。如果没有发现匹配的节点，则返回null。

⑥querySelectorAll方法返回匹配指定的CSS选择器的所有节点，返回的是NodeList类型的对象。NodeList对象不是动态集合，所以元素节点的变化无法实时反映在返回结果中。

①创建一个元素可以用createElement()方法：

②给元素设置属性可以用setAttribute()方法：

③createTextNode()方法用来生成文本节点，参数为所要生成的文本节点的内容。

添加元素的方法有：

①appendChild()是在调用该方法的元素内添加新元素。新元素是作为子元素被添加的，且是添加在元素内最后的位置。

②insertBefore()也是在调用该方法的元素内添加新元素。但该方法接收两个参数，一个是被添加的元素，另一个是被“替位”的子元素。新元素会插入在旧子元素的位置之前。

删除元素方法有：

removeChild()能删除指定的元素

替换元素方法有：

replaceChild()接受两个参数：要插入的元素和要替换的元素

举例说明：

① DOM0级事件就是将一个函数赋值给一个事件处理程序属性。

②它的一个事件处理程序只能对应一个事件处理程序，也就是如果对同一事件,后面的处理程序会覆盖前面的。

① DOM2级事件处理方式指定了添加事件处理程序和删除事件处理程序的方法，addEventListener和removeEventListener。

②它的一个事件可以添加多个事件处理程序（可以写多个函数），而不会被后面的所覆盖，同时也不会覆盖DOM0级事件。

③它可以选择在捕获阶段还是冒泡阶段处理程序。

④IE9之前不支持DOM2级事件，而DOM0则跨浏览器且无兼容问题；

请参照 css3 伪类选择器；

:first-child

选择某个元素的第一个子元素（IE6不支持）

:last-child

选择某个元素的最后一个子元素

:first-of-type

[CSS3]选择一个上级元素下的第一个同类子元素

:last-of-type

[CSS3]选择一个上级元素的最后一个同类子元素

:only-child

[CSS3]选择的元素是它的父元素的唯一一个了元素（IE6-8不支持）

:only-of-type

[CSS3]选择一个元素是它的上级元素的唯一一个相同类型的子元素（IE6-8不支持）

:nth-child()

[CSS3]选择某个元素的一个或多个特定的子元素（IE6-8不支持）

:nth-last-child()

[CSS3]选择某个元素的一个或多个特定的子元素，从这个元素的最后一个子元素开始算（IE6-8不支持）

:nth-of-type()

[CSS3]选择指定的元素（IE6-8不支持）

:nth-last-of-type()

[CSS3]选择指定的元素，从元素的最后一个开始计算（IE6-8不支持）

以上就是关于jquery获取子元素的方法 find()的用法全部的内容，包括:jquery获取子元素的方法 find()的用法、22.Dom、事件、css中如何获取dom元素等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！