《锋利的jQuery》读书笔记

引入jQuery文件

例如：

<script type="text/javascript" src="jquery-2.1.4.min.js"></script>

jQuery文件可以去jQuery官网上进行下载。
jQuery第一段程序

---

<script type="text/javascript">
    $(document).ready(function() {
        alert("Hello World");
    });
</script>

刷新页面会出现Hello World的弹框。

• $(document).ready(function() {//jQuery代码});即为Jquery代码的开端，所有的代码都在其中进行编写，其简写为$(function() {//jQuery代码});
• 相当于window.onload = function() {//JS代码}

jQuery代码风格

• 对于同一对象不超过3个操作的，可以写一行，如：$("li").show().unbind("click");
• 对于同一对象有很多操作的，可以每行写一个操作，如：
  $(this).removeClass("mouseout")
  .addClass("mouseover")
  .stop()
  .fadeTo("fast", 0.6)
  .click(function() {
  //其他代码
  });
• 对于多个对象但少量操作的，可以每个对象写一行，若涉及子元素，则应考虑缩进，如：
  $(this).addClass("highlight")
  .children("li").show().end()
  .siblings().removeClass("highlight")
  .children("li").hide();

jQuery对象与DOM对象

• DOM对象：Document Object Model的简写，称为“文档对象模型”
• jQuery对象：指通过jQuery包装DOM对象所产生的对象
• 两者之间转换（以$开头的变量指的是jQuery对象）
  var $variable = jQuery对象;
  var ariable = DOM对象;
  //jQuery对象转DOM对象，根据索引
  var $adiv = $("#myDiv");
  var adiv1 = $adiv[0];
  //或
  var adiv2 = $adiv.get(0);
  //DOM对象转jQuery对象，使用$()包括起来DOM对象即可
  var adiv = document.getElementById("mydiv");
  var $adiv = $(adiv);

jQuery选择器

• 基本选择器
  • $("li") 选定所有的li标签
  • $("#mydiv") 选定id为mydiv的标签
  • $(".mydiv") 选定class为mydiv的所有标签
  • $("div,span,li") 选定所有的div、span、li标签
  • $("*") 选定所有的元素
• 层次选择器
  • $("div span") 选定所有div标签中的span标签
  • $("div > span") 选定所有div标签下的子标签span，不包括孙子标签
  • $("#mydiv + div") 选定id为mydiv标签相邻的div标签，等价于$("#mydiv").next("div")
  • $("#mydiv ~ div") 选定id为mydiv标签下同辈的所有div标签,等价于$("#mydiv").nextAll("div")
• 过滤选择器
  • $("div:first") 选定所有div标签中的第一个div标签
  • $("div:last") 选定所有div标签中的最后一个div标签
  • $("div:not(#mydiv)") 选定所有id不是mydiv的div标签
  • $("div:even") 选定索引为偶数的所有div标签，索引从0开始
  • $("div:odd") 选定索引为奇数的所有div标签，索引从0开始
  • $("div:eq(1)") 选定索引为1的div标签
  • $("div:gt(1)") 选定索引大于1的所有div标签
  • $("div:lt(3)") 选定索引小于3的所有div标签
  • $(":header") 选定所有的标题标签，如：<h1>
  • $(":animated") 选定当前正在执行动画的所有标签
  • $(":focus") 选定当前获取焦点的所有标签
• XX选择器（未完待续）
• 选择器使用时的注意事项
  • 对于特殊字符，. # () [] 这些字符应使用\进行转义
  • 注意选择器的空格问题