Jquery基础知识

//使用$操作得到的对象，都是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