jquery find，jquery find() 方法

各位老铁们好，相信很多人对jquery find都不是特别的了解，因此呢，今天就来为大家分享下关于jquery find以及jquery find() 方法的问题知识，还望可以帮助大家，解决大家的一些困惑，下面一起来看看吧！

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

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

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

详细说明：

如

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

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

DOM树向下遍历单一层级。

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

实例：

谈谈Jquery中的childrenfind的区别有哪些_jquery

精华：find方法能找子孙，children方法只能找儿子

一、Jquery中children

语法

.children(selector)

说明

expr是表达式，可选参数，所有选择器中的表达式都可以用在这，比如按标签名"div",按类名".class",按序号":first"等等，如果表达式为空，那么返回的是所有的孩子，返回的结果仍为jQuery对象。

二、Jquery中find

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

语法

.find(selector)

说明

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

三、jquery中children、find的区别

1、children及find方法都用是用来获得element的子elements的，两者都不会返回 text node，就像大多数的jQuery方法一样。

2、children方法获得的仅仅是元素一下级的子元素

3、find方法获得所有下级元素

4、children方法的参数selector是可选的（optionally），用来过滤子元素，但find方法的参数selector方法是必选的。

5、find方法事实上可以通过使用 jQuery( selector, context)来实现

jquery几种页面元素定位及操作的方法

这两种方式还可以联合起来混合使用。我们来试着在我们的test.html代码中选择并修改第一个ordered list.一开始，我们需要选择这个list本身，这个list有一个ID叫“orderedlist”，通常的javascript写法是document.getElementById("orderedlist").在jQuery中，代码如下：$(document).ready(function(){$("#orderedlist").addClass("red");});若将一个CSS样式blue附加到了orderedlist上，在你刷新了test.html后，你将会看到第一个有序列表(ordered list)背景色变成了蓝色，而第二个有序列表没有变化.代码如下：$(document).ready(function(){$("#orderedlist> li").addClass("blue");});这样，所有orderedlist中的li都附加了样式"blue"。如果要实现把鼠标放在li对象上面和移开时进行样式切换，但只在list的最后一个element上生效。$(document).ready(function(){$("#orderedlist li:last").hover(function(){$(this).addClass("green");}, function(){$(this).removeClass("green");});}); find()让你在已经选择的element中作条件查找,因此$("#orderedlist).find("li")就像$("#orderedlist li")一样。each()方法迭代了所有的li，并可以在此基础上作更多的处理。大部分的方法,如addClass(),都可以用它们自己的 each()。html()用来获取每个li的html文本,追加一些文字，并将之设置为li的html文本。jQuery提供了filter()和not()两个方法。 filter()以过滤表达式来减少不符合的被选择项, not()则用来取消所有符合过滤表达式的被选择项.考虑一个无序的list，你想要选择所有的没有ul子元素的li元素。$(document).ready(function(){$("li").not(":has(ul)").css("border","1px solid black");//原文为$("li").not("[ul]").css("border","1px solid black");});这个代码选择了所有的li元素，然后去除了有ul子元素的li元素。刷新浏览器后，所有的li元素都有了一个边框，只有ul子元素的那个li元素例外。上面代码中的[expression]语法是从XPath而来，可以在子元素和属性(elements and attributes)上用作过滤器，比如你可能想选择所有的带有name属性的链接:$(document).ready(function(){$("a[name]").css("background-color","#eee");//原文为“$("a[@name]").background("#eee");”在jQuery1.2及以上版本中,@符号应该去除,background方法被css方法取代});这个代码给所有带有name属性的链接加了一个背景色。更常见的情况是以name来选择链接，你可能需要选择一个有特点href属性的链接，这在不同的浏览器下对href的理解可能会不一致，所以我们的部分匹配("*=")的方式来代替完全匹配("=")：$(document).ready(function(){$("a[href*=/content/gallery]").click(function(){// do something with all links that point somewhere to/content/gallery});});到现在为止，选择器都用来选择子元素或者是过滤元素。另外还有一种情况是选择上一个或者下一个元素，比如一个FAQ的页面，答案首先会隐藏，当问题点击时，答案显示出来，jQuery代码如下：$(document).ready(function(){$('#faq').find('dd').hide().end().find('dt').click(function(){ var answer=$(this).next(); if(answer.is(':visible')){ answer.slideUp();} else{ answer.slideDown();}});});这里我们用了一些链式表达法来减少代码量，而且看上去更直观更容易理解。像'#faq'只选择了一次，利用end()方法，第一次find()方法会结束(undone)，所以我们可以接着在后面继续find('dt')，而不需要再写$('#faq').find('dt')。在点击事件中的，我们用$(this).next()来找到dt下面紧接的一个dd元素，这让我们可以快速地选择在被点击问题下面的答案。除了选择同级别的元素外，你也可以选择父级的元素。

文章分享结束，jquery find和jquery find() 方法的答案你都知道了吗？欢迎再次光临本站哦！