《锋利的jQuery》笔记（一）

• 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选择器