jQuery理念
write less , do more
jquery优势
jQuery凭借简洁的语法和跨平台的兼容性,极大简化了js开发人员便利html文档,操作DOM,处理事件,执行动画,开发Ajax的操作;
- 轻量级,min版加在服务器启动Gzip压缩后,大小只有18KB;
- 强大的选择器,支持css1-3几乎所有的选择器,以及jQuery独创的高级且复杂的选择器,加入插件可使其支持XPath选择器;
- 出色的DOM操作的封装;
- 可靠地事件处理机制;
- 完善的Ajax,所有的操作都封装在$.ajax()里,开发者可以只关心业务无需关心浏览器兼容,XMLHttpRequest对象的创建和使用;
- 不污染顶级变量,jQuery只建立了一个名为jQuery的对象,所有的函数都在这个对象之下,其别名$也可以随时交出控制权;
jQuery.noConflict(); - 出色的浏览器兼容性;
- 链式操作方式;
- 隐式迭代;(迭代 iterate,按照某种顺序逐个访问列表中的每一项,比如for循环)
- 行为层与结构层的分离;
- 丰富的插件扩展;
- 完善的文档;
- 开源;
end()方法
end()方法结束当前链条中最近的筛选操作,并将匹配元素集还原为之前的状态;
$("p").find("a").end().css("background","#ccc"); 加上end()方法使背景色加在了p标签上,而不是a标签上;
window.onload与$(document).ready()区别
区别 | window.onload | $(document).ready() |
---|---|---|
执行时间 | 需要等页面上所有内容包括图片加载完毕才能执行 | 页面的DOM结构加载完毕就执行 |
编写个数 | 不能同时编写多个,后面的会覆盖前面的 | 能同时编写多个,按先后顺序执行 |
简写 | 无 | $(function(){}) |
window.onload 等于 $(window).load(function(){})
jQuery对象与DOM对象区别,相互转换
DOM对象
含义: 文档对象模型,每个DOM都可以表示一棵树,可以通过js的getElementsByTagName/getElementById来获取元素节点,得到DOM对象
获取对象方法: document.getElementById(“id”)
区别: DOM对象不能使用jQuery中的方法jQuery对象
含义: jQuery对象是jQuery独有的,是通过jQuery包装DOM对象后产生的对象
获取对象方法: $(“#id”)
区别: jQuery对象不能使用DOM中的方法
相互转换
jQuery对象转DOM
jQuery对象是一个数组对象,可以通过[index]和get(index)来转换成DOM对象
[index]
var $c=$(".cr"); //jQuery对象
var c=$c[0]; //DOM对象
get(index)
var $c=$("#cr"); //jQuery对象
var c=$c.get(0); //DOM对象
DOM对象转jQuery
只需要用$()把DOM对象包装起来,就可以获得jQuery对象;
var cr=documentElementById("id"); //DOM对象
var $cr=$(cr); //jQuery对象
- 选择器
选择器 | 实例 | 作用 |
---|---|---|
:checkbox | $(“:checkbox”) | 所有带有type=”checkbox”的input元素 |
:enabled | $(“:enabled”) | 所有启用input的元素 |
:disabled | $(“:disabled”) | 所有禁用input的元素 |
:checked | $(“:checked”) | 所有选中input的元素 |
:has(selector) | $(“div:has(p)”) | 所有包含p元素在内的div元素 |
:contains(text) | $(“contains(‘hello’)”) | 所有包含文本hello的元素 |
- jQuery方法
方法 | 用例 | 含义 | 备注 |
---|---|---|---|
is() | cr.is(“:checked”) | 是否被选中,被选中返回true | cr.checked(DOM方法) |
jQuery库与其他库冲突解决办法
当jQuery库在其他库之后引入,调用jQuery.noConflict()函数将$控制权移交给其他库;
为 jQuery 库自定义一个快捷方式var $j=jQuery.noConflict();
如果还想再用
符号,可以在函数内部继续使用 ;
还可以定义匿名函数,设置形参,然后执行匿名函数,传递实参;
如果jQuery库在其他库之前使用,可以直接使用jQuery来做一些jQuery的工作,然后使用$()作为其他库的快捷方式;
css3选择器
分类 | 用法 | 说明 |
---|---|---|
类别选择器 | .class{} | |
标签选择器 | p{} | |
ID选择器 | id{} | |
后代选择器 | .class .class{} | |
子选择器 | .class>.class{} | |
伪类选择器 | a:link{color:#ccc};a:hover{color:red;};a:visited{color:#000;};a:active{color:yellow;} | input:focus{outline:none;}(不兼容ie8\9,其余模式下未测)” 伪类不仅可以用在链接标签上,还可以应用在一些表单元素上,但表单元素的应用ie不支持; |
通用选择器 | *;p *{color:red;} | 当某一标签里嵌塘了与之相同的标签,不要在标签后跟通配符,会导致样式跟想象中不同 |
群组选择器 | p,h1,#id,.class span{} | 用逗号隔开 |
相邻同胞选择器 | h1+p;h1~p;.span~span) | ~代表拥有相同父元素的h1之后的所有p元素 |
属性选择器 | [type];[type=”text”];[class^=”ase”];[alt$=”des”];[class~=”min”];[class*=”min”];[class | =”tes”] |
伪元素选择器 | :before{}; :after{}; :first-letter{}; :first-line{} | :first-leffter;:first-line都只应用于块级元素 |
结构性伪类选择器 | :first-child{};:last-child{};:only-child{};nth-child();first-of-type;nth-of-type;:root{};:empty{};:not(selector){};:target{}; | 结构类选择器即可匹配子元素也可以匹配孙子元素; |
UI元素状态伪类选择器 | :enabled{};:disabled{};:read-write{};:read-only{};:checked{};::selector{} | 根据元素所处的一些状态来进行选择;比如,input有radonly属性,就可以设置:read-only{}的样式; |
- jQuery选择器