【元素的查找】js和jquery方法查找dom元素

一.jquery方法查找dom元素（即选择器）

      1.查找子节点（已知父节点）

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

       

               eg:  $("div").find("span").css("color","red");//搜索div下所有的span元素，并将其颜色设置为红色

          .children(selector)  //匹配当前元素集合中每个元素的下一代元素

                 eg: $("div").children("span:first").addClass("hide");//搜索div元素的下一级的第一个span的元素，并增加class样式为hide

     2.查找父节点（已知子节点）

          .parents(selector) //获得当前元素的祖先元素的集合

                  ★parents和closest()都是沿着dom树向上遍历，匹配元素，不同点如下         点击查看api

                           ·①parents()从父元素开始向上查找，而closest()是从自身开始向上查找

                                ②parents()会一直向上查找，直到文档的根元素为止，会返回零个，一个或多个元素的jquery对象

                                      而closest()是直到找到一个已应用选择器的一个匹配为止。返回零个，或者一个元素的jquery对象

          .parent(selector)//获得当前元素的唯一父元素

      3.查找相邻节点

        .next(selector) / /获得匹配元素集合中每个元素紧邻的同胞元素。如果提供选择器，则取回匹配该选择器的下一个同胞元素    .nextAll(selector)

        .prev(selector)//获得匹配元素集合中每个元素紧邻的前一个同胞元素，通过选择器进行筛选是可选的。    .preAll(selector)

        .siblings(selector)//获得匹配集合中每个元素的同胞，通过选择器进行筛选是可选的  即获取到所有的同级元素（不论前后还是紧邻）

二.js方法查找dom元素

     1.查找子节点（已知父节点）

    。。。。。。暂略

三.jquery的选择器          更多可查看这里

          ①jquery元素选择器

         

$("button");//选取所有的button元素
$("button.save")//选取所有的class为save的button标签
$("button#go")//选取所有的id为go的button标签

         ②jquery属性选择器

$("[data-click]");//选取所有含有data-click属性的标签；$("[data-click])[0]返回的是dom对象，用getAttribute();
$("[data-click='save']");//选取所有data-click属性等于save的标签对象数组
$("[data-click$='ve']");//选取所有data-click的属性以ve结尾的标签的数组