jquery -- 学习笔记(二)

最新推荐文章于 2022-11-18 19:38:06 发布

有所执着

最新推荐文章于 2022-11-18 19:38:06 发布

阅读量125

点赞数

本文链接：https://blog.csdn.net/lljxk2008/article/details/83026147

版权

.向上选取DOM

parent()
parents()
parentsUntil()

parent() 方法返回被选元素的直接父元素

parents() 方法返回被选元素的所有祖先元素，它一路向上直到文档的根元素 (<html>)

parents(参数) 方法筛选指定的祖先元素

parentsUntil() 方法返回区间内的所有祖先元素 (开区间)

$(document).ready(function(){
  $("span").parent();
  $("span").parents();
  $("span").parents("ul");            //方法筛选参数所指的父元素
  $("span").parentsUntil("div");
});

.向下取DOM

children()
find()

children() 方法返回被选元素的所有直接子元素 (同样也可以使用可选参数来过滤子元素)

find() 方法返回被选元素的后代元素

$(document).ready(function(){
   $("div").children();            // 所有直接子元素
   $("div").children("p.one");     // 过滤选择直接子元素
   $("div").find("*");             // 所有子元素
   $("div").find("span");          // 过滤选择子元素
});

.选择同胞DOM元素:

同胞元素拥有相同的父元素

siblings() --- 同胞元素
next() --- 其后的一个同胞元素
nextAll() --- 其后所有的同胞元素
nextUntil() --- 其后的区间内的所有同胞元素 (开区间)
prev() --- 其前一个同胞元素
prevAll() --- 其前面所有同胞元素
prevUntil() --- 其前面的区间内的所有同胞 (开区间)

siblings() 方法返回被选元素的所有同胞元素 (使用可选参数来过滤同胞元素)

next() 方法返回被选元素的下一个同胞元素

nextAll() 方法返回被选元素后的所有同胞元素

nextUntil() 方法返回给定参数之间, 其后所有的同胞元素

<script>
    $(document).ready(function(){
          $("h2").siblings().css({"color":"red","border":"2px solid red"});
          $("h2").siblings("p").css({"color":"red","border":"2px solid red"});
          $("h2").next().css({"color":"red","border":"2px solid red"});
          $("h2").nextAll().css({"color":"red","border":"2px solid red"});
          $("h2").nextUntil("h6").css({"color":"red","border":"2px solid red"});
    });
</script>

.筛选元素

基于位置, 在选中的一组元素中选择一个特定的元素

first() 方法返回被选元素的首个元素

last() 方法返回被选元素的最后一个元素

eq() 方法返回被选元素中带有指定索引号的元素

filter() 方法返回被选元素中匹配的元素

not() 方法返回被选元素中不匹配的元素

<script>
    $(document).ready(function(){
         $("div p").first().css("background-color","yellow");
         $("div p").last().css("background-color","yellow");
         $("p").eq(1).css("background-color","yellow");
         $("p").filter(".intro").css("background-color","yellow");
         $("p").not(".intro").css("background-color","yellow");
    });
</script>

.jquery遍历(有如下几种写法, 后面两种需要先给出要循环的集合(数组)或对象(json串))

$('div').each(function (i) { // i表示索引, 即当前循环到的元素的下标, 可以用$(this)表示当前循环到的元素

});

$('div').each(function (index, element) { // index表示索引, element表示获取遍历到的元素

});

$.each(list, function (index, element) { // list表示要循环的集合

});

$.each(obj, function (key, value) { // obj表示要循环的对象

});

注: js中集合指的是数组, 对象指的是键值对(map)

json串和js对象写法差不多, 比较明显的是json串的键要使用引号, 而js对象的键可以不使用

循环得到元素, 然后是这样使用元素 :$(element).css(...); 而不是element.css(...);