jQuery技术

Jquery常用的方法汇总(5)

字号+ 作者:H5之家 来源:H5之家 2015-10-10 12:16 我要评论( )

$("标签").children(); 标签的jQuery对象.children(); a b c/c /b d/d /a $("a").children();//就是2 因为a的子元素只有b和d $("b").children();//就是1 因为b的子元素只有c一个 $("d").children();//就是0 因为d没

        $("标签").children();
        标签的jQuery对象.children();
        <a>
            <b>
                <c></c>
            </b>
            <d></d>
        </a>
        $("a").children();//就是2  因为a的子元素只有b和d

        $("b").children();//就是1 因为b的子元素只有c一个

        $("d").children();//就是0 因为d没有子元素

//同辈元素,next(),prev(),siblings() :

        next();//同辈的下一个元素
        prev();//同辈的上一个元素
        siblings();//所有的同辈元素
    <b>123</b>
    <p title="选择你最喜欢的水果." >你最喜欢的水果是?</p>
    <ul>
      <li title="苹果">苹果</li>
      <li title="橘子">橘子</li>
      <li title="菠萝">菠萝</li>
    </ul>
    <i>456</i>

   // 例子 : next()

   var p= $("p").next();
   p.html();//p元素的同辈下一个元素的内容(就相当于innerHTML),结果就是 :
            <li title="苹果">苹果</li>
            <li title="橘子">橘子</li>
            <li title="菠萝">菠萝</li>
            p的同辈的下一个标签是ul,<ul>这里就是html()的东西</ul>
    ---------------------
      //  prev()

        var p = $("p").prev();
        p.html();//就是p的同辈元素的上一位 就是b 元素吧 b元素的html(), 就是123把 所以就是123

        123

    ----------------------
    //  siblings()

        var p = $("p").siblings();//所有元素,现在是数组把
        p.html();//这个,只是123,因为是数组,如果输出,输出第一个,所以就是b标签的内容就是123  要遍历才能看到所有内容
        for(var i =0;p.length;i++){
            alert(p[i].innerHTML);//这就是所有的内容,为什么用innerHTML?
            //因为p是jQuery对象吧,当jQuery对象,后面跟下标的时候,就是DOM对象了,所以只能用innerHTML.这个和jQuery对象的html()方法,功能是一样的,
            //alert();是个普通的弹框
            //结果就是 :
                    123
                    你最喜欢的水果是?
                    苹果
                    橘子
                    菠萝
                    456
        }

//事件委托机制 : 

        事件委托机制 : 我们要找到某个元素,改变其属性,但是这个元素我们不知道能不能找到,所以我们就用一个临时变量,把事件委托给他,然后去寻找元素,找到以后就把事件转交

    // $(自定义变量.target).closest("要找的元素").css("找到之后的某一个属性","更改属性值")
   
        //这里从点击对象开始往上查询(如果点击的是a,就会先找a,在找span,再找p,再找body,一直除非找到正确的那个标签,就停止网上找了)
            $(document).bind("click",function(e){
                $(e.target).closest("body").css("color","red");
                })
            //$(document).bind("click",function("p"){
             //   $("p").css("color","red");
             //   })

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • 7个有用的jQuery小技巧

    7个有用的jQuery小技巧

    2016-02-26 13:02

  • jQuery制作select双向选择列表

    jQuery制作select双向选择列表

    2016-02-26 11:00

  • 全面详细的jQuery常见开发技巧手册

    全面详细的jQuery常见开发技巧手册

    2016-02-26 10:02

  • 强大的jQuery移动插件Top 10

    强大的jQuery移动插件Top 10

    2016-02-25 09:05

网友点评
j