一、 jQuery 优势

jQuery 是优秀的 JavaScript 库，优势如下：

  1. 轻量级
  2. 强大的选择器
  3. 出色的 DOM 操作封装
  4. 可靠的事件处理机制
  5. 完善的 Ajax
  6. 不污染顶级变量
  7. 出色的浏览器兼容性
  8. 链式操作方式
  9. 隐式迭代
  10. 行为层与结构层的分离
  11. 丰富的插件支持
  12. 完善的文档
  13. 开源

二、jQuery 代码的编写

1. 在页面中引入 jQuery

  1. <!-- 在 head 标签内引入 jQuery -->
  2. <script src="./scripts/jquery.js"></script>

编辑简单的 jQuery 代码

  1. <script>
  2.     $(document).ready(function(){
  3.       alert("Hello World")
  4.   })
  5. </script>

2. window.onload 与 $(document).ready() 的对比

window.onload $(document).ready()
执行时机 必须等待网页中所有内容加载完毕后（包括图片）才能执行 网页中所有 DOM 结构绘制完毕后就执行，可能 DOM 元素关联的东西并没有加载完
编写个数 不同同时编写多个
一下代码无法正确执行
window.onload = function(){
alert(“test1”)
}
window.onload =function(){
alert(“test2”)
}		 能同时编写多个
以下代码正确执行
$(document).ready(function(){
alert(“Hello World”)
})
$(document).ready(function(){
alert(“Hello again”)
})
简化写法 无 $(document).ready(function(){
// …
})
可以简写成：
$(function(){
// …
})

3. jQuery 代码风格

链式操作风格

  1. $this.addClass("highlight")
  2.     .children("li").show().end()
  3. .siblings().removeClass("highlight")
  4.     .children("li").hide()

为了易读性，总结 3 种格式

  1. 对于同一个对象不超过 3 个操作，可以直接写成一样
  2. 对于用一个对象的较多操作，建议每行写一个操作
  3. 对于多个对象的少量操作，可以每个对象写一行，如果涉及子元素，可以考虑适当地缩进

为了提高可读性性，对于复杂的链式操作，可以为代码添加注释

三、jQuery 对象和 DOM 对象

jQuery 对象就是通过 jQuery 包装 DOM 对象后产生的对象

  1. $("foo").html() // 获取 id 为 foo 的元素内的 html 代码
  2. // 等同于
  3. document.getElementById("foo").innerHTML

一般我们对 jQuery 对象类型的变量前面 $

  1. var $variable = jQuery 对象
  2. var variable = DOM 对象

1. jQuery 对象转成 DOM 对象

  1. var $cr = $("#cr")
  2. var cr = $cr[0]

2. DOM 对象转成 jQuery 对象

  1. var cr = document.getElementById("cr")
  2. var $cr = $(cr)

强调一下，DOM 对象才能使用 DOM 中的方法，jQuery 对象不可以使用 DOM 中的方法

举一个例子加深对 jQuery 对象和 DOM 对象的理解

  1. // 使用 DOM 方式判断复选框是否被选中
  2. $(document).ready(function(){
  3.     var $cr = $("#cr")
  4.   var cr = $cr[0]
  5.   $cr.click(function(){
  6.       if(cr.checked){
  7.         alert("感谢您的支持！你可以继续操作")
  8.     }
  9.   })
  10. })
  12. // 使用 jQuery 方法判断选项是否被选中
  13. $(document).ready(function(){
  14.     var $cr = $("#cr")
  15.   $cr.click(function(){
  16.       if($cr.is(":checked")){
  17.         alert("感谢您的支持！你可以继续操作！")
  18.     }
  19.   })
  20. })

四、解决 jQuery 和其他库的冲突

默认情况下，jQuery 用 $ 作为资深的快捷方式

函数 jQuery.noConflict() 可以将变量 $ 的控制权交出来，并能够自定义快捷方式

  1. // 把 $ 的控制权转移
  2. jQuery.noConflict()
  4. // 自定义快捷方法
  5. var $j = jQuery.noConflict()

「@浪里淘沙的小法师」