jquery中的【children()与find()】、【html()与text()、val()】用法区别详解

一、jquery中children()与find()用法区别详解

1、children() 是一个筛选器，顾名思义就是筛选子元素，筛选那些符合条件的子元素。
jquery取索引使用eq函数。
eq() 选择器选取带有指定 index 值的元素。
index 值从 0 开始，所有第一个元素的 index 值是 0（不是 1）。
经常与其他元素/选择器一起使用，来选择指定的组中特定序号的元素。

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

通过以上的解释，可以总结如下：
1：children及find方法都用是用来获得element的子elements的，两者都不会返回 text node，就像大多数的jQuery方法一样。
2：children方法获得的仅仅是元素一下级的子元素
3：find方法获得所有下级元素
4：children方法的参数selector 是可选的（optionally），用来过滤子元素，但find方法的参数selector方法是必选的；

二、 jquery中html()与text()、val()用法区别详解

首先，html属性中有两个方法，一个有参，一个无参。
1、 无参html（）：取得第一个匹配元素的html内容。这个函数不能用于XML文档。但可以用于XHTML文档，返回的是一个String
例子：
html页面代码：<div><span>你好</span></div>
jquery代码：$(“div”).html();
结果：你好（获取子标签和文本内容）

2.有参html（val）：设置每一个匹配元素的html内容。这个函数不能用于XML文档。但可以用于XHTML文档。返回一个jquery对象
html页面代码：<div></div>
jquery代码：$(“div”).html(“<p>我爱你中国</p>”);
浏览器显示出来的结果是:我爱你中国（也就是说浏览器能识别我们插入进去的标签）

其次，text属性中有两个方法，一个有参，一个无参
1、无参text（）：取得所有匹配元素的内容。结果是由所有匹配元素包含的文本内容组合起来的文本。返回的是一个String。
例子：
html页面代码：<p><span>你好<span><div> 很好</div></p>
jquery代码：$(“p”).text();
结果：你好 很好（只选取标签下面的文本，标签不会被识别识别出）

2.有参text（val）：设置所有匹配元素的文本内容,与 html() 类似, 但将编码 HTML (将 “<” 和 “>” 替换成相应的HTML实体).返回一个jquery对象。
html页面代码：<div>Paragraph.</div>
jquery代码：$(“div”).text(“<b>哈哈，我会被完整输出</b> new text.”);
结果: <p><b>哈哈，我会被完整输出</b> new text.</p> （html标签不会被浏览器识别，而是当作字符串来输出）

关于三者的区别
1、 .val()方法和.html()相同，如果其应用在多个元素上时，只能读取第一个表单元素的"value"值，但是.text()和他们不一样，如果.text()应用在多个元素上时，将会读取所有选中元素的文本内容。
2、html(),.text(),.val()都可以使用回调函数的返回值来动态的改变多个元素的内容。