《锋利的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选择器