//使用$操作得到的对象,都是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
原文:http://www.cnblogs.com/colnlin-0408/p/6250186.html