首页 > Web开发 > 详细

Jquery基础知识

时间:2017-01-04 21:54:27      阅读:218      评论:0      收藏:0      [点我收藏+]

//使用$操作得到的对象,都是Jquery对象


如何把Jquery对象转换成dom对象?$abc


    方法1:var div = $div.get(0)


    方法2:var div = $div[0]


如何把原生的dom对象转换成Jquery对象?


    var div = document.getElementById("div");


    var $div = $(div);


onload()和Jquery中的ready()区别:


    1.执行时机:onload事件是页面完全加载完毕才执行;ready是页面节点加载完毕就可以执行,比onload要早一点;


    2.添加个数:onload事件只能添加一个;(如果添加多个,后面的则会覆盖前面的。)ready可以添加多个。


    3.简化写法: onload无;ready事件可以简化为:$(function(){});

三、Jquery简单选择器 (类似css)

    ID选择器      var $div = $("#div")      //通过ID找到元素


    标签选择器    var $a = $(‘a‘)             //通过标签名找到元素为a的标签


    类选择器       var $cla = $(".类名")

四、Jquery进阶选择器

    群组选择器 var $elements = $(".box,#div,h1")   //可以同时选中多个元素,不同的选择器间用逗号隔开


    后代选择器 var $as = $("p a")                      //找到p标签下的所有a标签


    通配符选择器 var$length = $("*").length          //获取当前文档中所有元素的个数

五、Jquery高级选择器

    后代选择器和find()方法


            var $allLis = $(".box li")


                           = $(".box").find("li") //找到class是box元素下面的所有的li标签元素


    子元素选择器和children()方法


            var $divs = $(".box>div")


                        = $(".box").children() //找到.box元素下面的所有直接子元素(和孙子无关)


            注意:children方法也可以带参数,表示这个选择器选中的子标签。???


    next选择器(+)和next()方法


            var $nextDiv = $(".box .item2 + .item3")      //兄弟选择器 找到.box .item2后的是.item3的紧挨着的下一个兄弟


                           = $(".box .item2").next(".item3")   //参数可有可无。


            注意:next()方法有参数,表示下一个兄弟必须满足这个条件;不跟参数,表示如果有下一个兄弟就返回!!


    nextAll选择器(~)和nextAll()方法


            var $divs = $(".item2~div")            //获取.item2的所有同辈div标签  注意:不包括.item此标签签


                          = $(".item2").nextAll("div")   //可以不跟参数,表示后面的所有同辈元素


    prev()方法和prevAll()方法


            var $prev = $(".item2").prev("div")    //找到紧挨着这个的上一个同辈div元素。如果不是div则不返回。也可以不给参数,表示返回上一个同辈元素


                      = $(".item5").prevAll("div")     //获取.item5的所有的前面的同辈div元素
    sibling()方法


            var $sibling = $(".item2").sibling();     //获取所有同辈标签

六、属性选择器    

    与元素的属性相关的选择器。属性选择器必须用[]括起来


    var $ids = $("[id]")           //找到有ID属性的所有元素


             = $(".box [id]")       //找到.box的所有后代中有ID属性的元素


             = $("[id=id1]")        //找到ID=id1的元素


             = $("[id!=box]")      //找到ID不是box的所有元素。注意:没有ID属性的也包括!


             = $("[id^=b]")            //找到ID属性以b开头的所有元素


             = $("[id*=b]")            //找到ID属性的值包含b的所有元素

七、过滤选择器

    使用特定的过滤规则来筛选出所需的DOM元素。过滤选择器的语法和css中的伪类写法一样,都是用:开头。


    基本过滤选择器

           var $first = $("div:first")             //所有的div元素中的第一个div


                              $last  = $("div:last")             //...最后一个


                                  = $("div:not(.box)")    //所有的div元素中,class不是box的div


                                       = $("div:even")           //...索引是偶数的div


                                       = $("div:odd")            //...索引是奇数的div


                                  = $("div:eq(0)")          //...索引是0的div


                                   = $("div:gt(0)")          //...索引大于0的div


                                  = $("div:lt(3)")             //...所有小于3的div


                                  = $(":header")             //获取所有的标题元素


                                      = $(":focus")              //获取当前取得焦点的元素
                              
    内容过滤选择器

          var $text = $("div:contains(标签)")    //选取包含文本"标签"的div元素。 注意:如果div的子元素满足,那么这个div也算!


                                   = $("div:empty")               //选取没有子标签或文本的div元素


                                       = $("div:has(.item2)")       //选取有后代是.item2的div元素


                                       = $(":parent")                  //选取有文本或子元素的所有元素;即当爹的元素
    
    可见性选择过滤器

          console.log($("div:visible"))           //获取所有可见的元素。 注意:如果一个元素的visibility是hidden的话也会被选中。


                            console.log($("div:hidden"))          //获取不可见的元素。 包括:input的type属性是hidden,display是none;
    
    子元素过滤选择器

         var $ps = $("p:nth-child(2)");       //从p元素的父元素的所有子元素中查找。如果第2个元素是p,则返回这个p元素;否则,不返回。


                               = $("p:first-child");         //同上,如果第1个元素是p,则返回这个p;否则,不返回。


                               = $("p:last-child");         //返回父元素的最后一个子元素    


                               = $("div:only-child")         //如果父元素仅仅有一个子元素就返回    
    
八、表单选择器    
    
    console.log($(":input"))       //获取所有的input、button、select、textarea


                :text                 //获取所有的单行文本框 (类似:type=text)


                :password          //获取所有的密码框


                :radio                //...单选框


                :checkbox          //...复选框


                :submit              //...提交按钮


                :button              //...选取所有按钮


                :image               //选取所有的图像按钮


                :reset


                :file


                :hidden   

Jquery基础知识

原文:http://www.cnblogs.com/colnlin-0408/p/6250186.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!