• JQuery中查找父元素,子元素,追加元素,插入元素和删除元素 及其他常用方法


    Jquery之所以强大,和其在获取对象时使用与css选择器兼容的语法有很大关系。而且它还兼容了CSS3的选择器,而且多出了不少。

    所以jQuery的选择器也就变得很多很强大。就最基本的有以下四个:

    $('*')  匹配页面所有元素

    $('#id') id选择器

    $('.class') 类选择器

    $('element') 标签选择器

    $('E[attr]') 含有属性attr的元素E

    $('E[attr=value]') 属性attr=value的元素E

    JQuery中查找父元素

    .closest()

    closest会首先检查当前元素是否匹配,如果匹配则直接返回元素本身。如果不匹配则向上查找父元素,一层一层往上,直到找到匹配选择器的元素。如果一直没有找到匹配元素,则返回一个空的jQuery对象

    <ul class="ulCss">
    <li class="itemA">A</li>
    <li class="itemB">B</li>
    </ul>
    
    <script>
    $('li.itemA').closest('ul').css('background-color','red');
    </script>

    在这里,$('li.itemA').closest('ul') 获取的就是 <ul class="ulCss"> 这个元素 

    .parent()

    parent() 向上只查找一层,即返回唯一的父元素。 如果选择器选择了多个对象(比如 $("div").parent(), 这里选择器$("div")会返回页面上所有的div,如果页面上有多个div,则就是说,这个选择器$('div')就是选择了多个对象),则返回父元素数组.

    比如: $("div").parent() 返回页面上所有div元素的父元素,结果是一个数组。如果需要在这个数组里面继续选择,可以使用$("div").parent("#id"), $("div").parent(".className")

    .parents()

    parents()方法就不是往上只查找一层,而是会一层一层的往上查找,直到返回所有匹配上的元素.  也就是说,它会查找jQuery对象符合选择器的所有祖先元素,但不包括元素本身.

    $("p.selected").parents("div").css("border","2px red solid")  会查找css class为selected的p元素 的 所有祖宗div元素,然后给这些div元素添加border属性"2px red solid"

    所以 parents()和closest()的区别

    1. parents()从父级开始匹配元素,而closest()从自身开始

    2. parents()向上查找所有的父级元素,直到根元素。然后把这些所有的查找结果放到一个临时的集合中,再通过额定的条件来进行筛选.

       closest()从自身元素开始向上查找,直到找到有效的匹配元素就停止.

    3. parents()返回的元素值可以有0个,1个,或者多个. 而closest()结果返回值就只有0个或者1个

    JQuery中查找子元素

    .children()

    .children()方法和.parent()方法 (注意 不是parents()) 相对应

    children在英文中是孩子的意思,所以它只向下追索一层.

    children()方法返回被选元素的所有直接子元素,该方法只会向下一级对DOM树进行遍历.

    比如 $("div").children() 会返回页面上每个div的所有直接子元素.

    .find()

    find()方法用来查找指定元素的后代元素,一路向下直到最后一个后代  注意: find()用来查找当前元素的所有后代元素

    $('ul').find('li').css('background-color','red') 首先找到页面上所有的ul元素,然后找到ul元素下面的所有后代li元素,给他们加上背景颜色-红色

    又比如 $("#table1").find("td") 和 $("#table1 td")效果是一样的。

    $("div").find("*") 返回<div>的所有后代元素.

    JQuery中的基本方法

    .ready(handler) 

     文档加载完成后执行的方法,区别于window.onload

    $(document).ready(function(){
    
    });

    .each(function(index,element))

     其中, function(index,element) 为必须项, 为每个匹配元素规定运行的函数.

    index -- 选择器的index位置

    element - 当前的元素 (也可使用 "this" 选择器)

    each()方法是jQuery中的一个非常强大的方法(该方法在javascript中也存在). each()方法能够使得DOM循环结构简洁,不容易出错. 它封装了强大的遍历功能,可以用来遍历一维数组,多维数组,DOM和JSON等等.

    each处理一维数组例子:

    var arrTest = ["a","b","c"];
    
    $.each(arrTest,function(i,val){
    
       alert(i);
       alert(val);
    
    });
    
    alret(i)将输出 0, 1, 2
    alret(val)将输出 a,b,c

    each处理二维数组例子:

    var arrTest = [['a','aa','aaa'],['b','bb','bbb'],['c','cc','ccc']]
    
    $.each(arrTest, function(i,item){
    
      alert(i);
      alert(item);
    
    });
    
    在这里, arrTest是一个二维数组,而item相当于获取这个二维数组中的每一个数组
    alert(i) 将输出0,1,2 因为这个二维数组含有3个数组元素
    alert(item) 将输出['a','aa','aaa'],['b','bb','bbb'],['c','cc','ccc']
    item[0] 则相当于取其中每个一维数组里面的第一个值
    
    所以,如果我们需要获取里面的每个一维数组中的每个元素,需要使用两个each循环
    
    $.each(arrTest,function(i,item){
    
        $.each(item,function(j,val){
         
                  alert(j);
                  alert(val);
    
    
           });
    
    
    });
    
    在这里, alert(j)将输出0,1,2,0,1,2,0,1,2
    alert(val)将输出a,aa,aaa,b,bb,bbb,c,cc,ccc

    each处理json数据的例子

    var obj = {one:1, two:2, three:3}
    $.each(obj,function(key,val){
    
        alert(key);
        alert(val);
    });
    
    采用RunJs (http://runjs.cn/code)进行测试这个代码,发现
    alert(key)将输出one, two,three
    alert(val)将输出1,2,3
  • 相关阅读:
    新概念4-27
    胡雪岩06
    新概念4-26
    新概念4-25
    作业01
    day 01 小结
    计算机编程基础
    计算机组成
    markdown文档的编写
    zoj 2674 Strange Limit 欧拉定理应用 (3-E)
  • 原文地址:https://www.cnblogs.com/wphl-27/p/6917382.html
Copyright © 2020-2023  润新知