锋利的jQuery学习笔记

---

看书时随手整理的jQuery的相关内容及API，之后会将相应的功能与JavaScript进行比对整理。

jQuery选择器

• jQuery中无法使用DOM对象的方法
  $("#foo").html() //效果等于document.getElementById("foo")

• $("#tt")获取的永远是对象，即使网页上没有此元素

• 基本选择器

  • $("#myDiv") //根据给定的ID选择匹配的元素，返回：单个元素
  • $(".myClass") //根据给定的样式名称选择匹配的元素，返回：集合元素
  • $("div") //根据给定的元素名称选择匹配的元素，返回：集合元素
  • $("#myDiv,div.myClass,span") //根据给定的规则选择匹配的元素，返回：集合元素
  • $("*") //选择页面所有元素，返回：集合元素

• 层次选择器

  • $("div span") //选择所有DIV元素下的所有span元素（所有后代元素），返回：集合元素
  • $("div>span") //选择所有DIV元素下的span子元素（仅子元素），返回：集合元素
  • $(".myClass+div") //选择样式名称为myClass的下一个DIV元素，返回：集合元素
    等价于 $(".myClass")`.next("div");
  • $(".myClass~div") //选择样式名称为myClass之后的所有DIV元素，返回：集合元素
    等价于 $(".myClass")`.nextAll();
  • $(".myClass").siblings("div") //选择样式名称为myClass的元素的所有同辈DIV元素（无论前后），返回集合元素

• 过滤选择器（index从0开始）

  • $("div:first") //选择所有DIV元素下的第一个DIV元素，返回：单个元素
  • $("div:last") //选择所有DIV元素下的最后一个DIV元素，返回：单个元素
  • $("div:not(.myClass)") //选择所有样式不包括myClass的DIV元素，返回：集合元素
  • $("div:even") //选择所有索引是偶数的DIV元素，返回：集合元素
  • $("div:odd") //选择所有索引是奇数的DIV元素，返回：集合元素
  • $("div:eq(index)") //选择所有索引等于index的DIV元素，返回：集合元素
  • $("div:gt(index)") //选择所有索引大于index的DIV元素，返回：集合元素
  • $("div:lt(index)") //选择所有索引小于index的DIV元素，返回：集合元素
  • $(":header") //选择所有标题元素（h1,h2,h3），返回：集合元素
  • $("div:animated") //选择所有正在执行去画的DIV元素，返回：集合元素

• 内容过滤选择器

• $(":contains(text)")//选择所有内容包含text的元素，返回：集合元素

• $("div:empty") //选择所有内容为空的DIV元素，返回：集合元素

• $("div:has(span)")//选择所有含有SPAN子元素的DIV元素，返回：集合元素

• $("div:parent") //选择所有含有子元素的DIV元素（包括文本元素），返回：集合元素

• 可见性选择器

• $(":hidden")//选择所有不可见的元素（type="hidden" style="display:none" style="visibility:none"），返回：集合元素

• $(":visible") //选择所有可见的元素，返回：集合元素

• 属性过滤选择器

• $("div[id]")选择拥有属性id的元素

• $("div[title=test]")选择属性title为"test"的<div>元素

• $("div[title!=test]")title不等于"test"的div

• $("div[title^=test]")title以"test"开始的div

• $("div[title$=test]")title以"test"结束的div

• $("div[title*=test]")title含有"test"的div

• $("div[title|=en]")title等于en或以en为前缀（en-data）的元素

• $("div[title~=uk]") title用空格分隔的值中包含字符uk的元素

• $("div[id][title$='test']")拥有属性id，且title以"test"结束的div

• 子元素过滤选择器

  • $(":nth-child(index/even/odd/3n+1)") //选择每个父元素下的第index/偶数/奇数/索引值是3n+1的子元素
    :eq(index)只能匹配一个元素，且Index从0开始，:nth-child可以匹配多个元素，Index从1开始
  • $(":first-child")//选择每个父元素下的第一个子元素，返回：集合元素
  • $(":last-child") //选择每个父元素下的最后一个子元素，返回：集合元素
  • $("ul li:only-child") //在UL元素中选择只有一个LI元素的子元素，返回：集合元素

• 表单对象属性选择器

  • $("#myForm:enabled")//选择ID属性为myForm的表单的所有可用元素，返回：集合元素
  • $("#myForm:disabled") //选择ID属性为myForm的表单的所有不可用元素，返回：集合元素
  • $("#myForm:checked") //选择ID属性为myForm的表单的所有所有被选中的元素，返回：集合元素
  • $("#myForm:selected") //选择ID属性为myForm的表单的所有所有被选中的元素，返回：集合元素

• 表单选择器

  • $(":input") //选择所有<input> <select> <button> <textarea>元素，返回：集合元素
  • $(":text") //选择所有单行文本框元素，返回：集合元素
  • $(":password") //选择所有密码框元素，返回：集合元素
  • $(":radio") //选择所有单选框元素，返回：集合元素
  • $(":checkbox") //选择所有复选框元素，返回：集合元素
  • $(":submit") //选择所有提交按钮元素，返回：集合元素
  • $(":image") //选择所有图片按钮元素，返回：集合元素
  • $(":reset") //选择所有重置按钮元素，返回：集合元素
  • $(":button") //选择所有按钮元素，返回：集合元素
  • $(":file") //选择所有上传域元素，返回：集合元素
  • $(":hidden") //选择所有不可见域元素，返回：集合元素
  • $(":text") //选择所有单选文本框元素，返回：集合元素

• <div id="id[1]">cc</div>
  获取非法的id 用\\\来转义特殊字符 $("#id\\\[1\\\]")

• .show() .hide() 显示/隐藏匹配元素

• .css('color','red') 设置单个样式
  .css({'color':'red','width':'15px'})设置多个样式

• .filter(":contains('abc')")筛选指定表达式匹配的元素

• toggleBtn.toggle(func1,func2) 交替一组动作

jQuery中的DOM操作

• 创建节点
  var $li = $("<li title='香蕉'>香蕉</li>") 创建一个<li>元素
  $("ul").append($li) 插入文档

• 插入节点
  append() 元素内部的尾部追加
  appendTo() 与append()相同，颠倒了操作
  prepend() 元素内部的首部追加
  prependTo() 与prepend() 相同，颠倒了操作
  after() 元素之后插入
  insertAfter() 与after() 相同，颠倒了操作
  before() 元素之前插入
  insertBefore() 与before()相同，颠倒了操作

• 删除节点
  1.$("element").remove() 删除后其后代节点也同时被删除，绑定事件失效
  可以接受传参
  $("ul li").remove("li[title = "菠萝"]")
  2.$("element").detach() 删除节点，但不会从jQuery对象中删除，恢复后绑定事件仍可用
  3.empty()清空节点（节点存在，只是内容为空）

• 复制节点
  .clone() 复制节点，且不具有任何行为
  .clone(true) 具有复制元素的绑定事件

• 替换节点
  $("#pid").replaceWith("<span>苹果</span>")
$("<span>苹果</span>").replaceAll("#pid")
  两者效果相同（操作相反）

• 包裹节点

<strong title="选择你最喜欢的水果." >你最喜欢的水果是?</strong>
<strong title="选择你最喜欢的水果." >你最喜欢的水果是?</strong>
    <ul>
      <li title='苹果'>苹果</li>
      <li title='橘子'>橘子</li>
      <li title='菠萝'>菠萝</li>
    </ul>

1.wrap() 单独包裹
使用方法：$("strong").wrap("<b></b>")
结果：

<b><strong title="选择你最喜欢的水果." >你最喜欢的水果是?</strong></b>
<b><strong title="选择你最喜欢的水果." >你最喜欢的水果是?</strong></b>

2.wrapAll() 全部包裹
使用方法：$("strong").wrapAll("<b></b>")
结果：

<b>
    <strong title="选择你最喜欢的水果." >你最喜欢的水果是?</strong>
    <strong title="选择你最喜欢的水果." >你最喜欢的水果是?</strong>
</b>

3.wrapInner() 包裹子内容（包括文本节点）
使用方法：$("strong").wrapInner("<b></b>")
结果：

<strong title="选择你最喜欢的水果." ><b>你最喜欢的水果是?</b></strong>
<strong title="选择你最喜欢的水果." ><b>你最喜欢的水果是?</b></strong>

• 属性操作
  .attr()获取（getAttribute和setAttribute）
  .removeAttr()移除

• 样式操作
  .addClass()增加类
  .removeClass()移除类
  toggleBtn.toggle(func1,func2) 交替一组动作
  $("p").toggleClass("another") 类名存在则删除，类名不存在则添加
  hasClass() 等于is()操作
  .html() 获取/设置元素的HTML .innerHTML()
.text()获取/设置元素的文本内容
  .val()设置/获取/选中元素的值 .value()

• 遍历节点
  .children()获取子元素集合
  .next()获取下一个同辈元素
  .prev()获取上一个同辈元素
  .siblings()获取前后所有同辈元素
  .closest("li")取得最近的li元素

• CSS-DOM操作

  • .css()获取/设置样式
  • offset()元素在当前视窗的相对偏移
    offset.left左偏移
    offset.right右偏移
  • position() 相对于最近一个position为relative或absolute的父节点的相对偏移
    position.left 左偏移
    position.right右偏移
  • scrollTop()获取/设置元素滚动条距顶端的距离
    scrollLeft()获取/设置元素滚动条距左端的距离

jQuery中的事件和动画

事件

• $(document).ready()与window.onload

  • $(document).ready()在DOM完全就绪时就可以调用，window.onload必须在网页所有元素（包括元素的关联文件）加载完成后才能执行。

  • window.onload一次只能保存一个引用，会自动用后面的函数覆盖前面的函数。
    $(document).ready()每次调用都会在现有的行为上追加新的行为。按注册的顺序依次进行。
    在有多个javascript文件时，$(document).ready()更有优势

  • $(document).ready(function(){}) 可以简写为 $(function(){})

• 事件绑定

  • .bind(type[ , data] , fn)
    type为要绑定的事件类型，fn为处理函数
    $("div").bind("mouseover mouseout",function(){}) 绑定多个事件
  • .click(fn)
  • .mouseover(fn)
  • .mouseout(fn)

• 合成事件

  • .hover(fn)光标悬停
  • toggle(fn1,fn2,...fnN)鼠标连续单击

• 事件冒泡

  • event.stopPropagation() 阻止事件冒泡
  • event.preventDefault() 阻止时间默认行为
  • return false 同时阻止冒泡和默认行为

• 事件对象属性

  • event.type 获取事件类型
  • event.target 获取触发事件的元素
  • event.pageX和event.pageY 鼠标相对于页面的x,y坐标

• 移除事件

  • .unbind([type],[data])
    没有参数，删除所有绑定事件
    有两个相同的事件的话，可以通过第二个参数（函数名）来指定删除特定的事件处理函数

• 模拟操作

  • .trigger(type,[data])
    可以触发自定义的事件
    触发事件，同时也会执行函数默认操作（例如focus事件会让input也获得焦点）
    如果只想触发绑定事件，可以用triggerHandler()方法

动画

• .show()和.hide()
  接受一个参数，可以为速度关键词"fast"、normal、"slow"，也可以是时间，元素在相应的时间里显示/隐藏。
  隐藏时元素宽高不透明度同时减少，最后元素样式为display:none。

• fadeIn()和fadeOut()
  只改变元素的不透明度，最后元素样式为display:none。

• slideUp()和slideDown()
  只改变元素的高度，最后元素样式为display:none。

• animate(params,speed,callback)

  • params:一个包含样式及值的映射，比如{property1:"value1",property2:"value2"，...}
    speed:速度参数，可选
    callback：回调函数，可选
  • 可以用jQuery的链式调用来实现多步动画
  • .css()方法不会加入到动画队列，会立即执行。可以使用回调函数对非动画方法实现排队。