// 锋利的jQuery

POSTED ON // BY s5s5 // IN First Category // - 评论

jQuery 基础概念

优点：轻量、选择器、DOM操作、事件处理、兼容、链式操作

理念：write less, do more

PS：windows.onload 与 $(document).ready() 区别

代码风格：

  1. 链式操作风格（同级多行、子级缩进）
  2. 注释

jQuery对象与DOM对象：

  1. 方法不通用
  2. 可互转（$(cr), $cf\[0\]）

PS：is(':checked') 与其它库的冲突：在别的库之前JQ被引入用jQuery，之后用noConflict()

选择器

基本选择器

#id .class element * selector1,...,selectorN

层次选择器

  • $('ancestor descendant')
  • $('parent > child')
  • $('prev + next')
  • $('prev ~ siblings')

过滤选择器

:first :last :not(selector) :even :odd :eq(index) :gt(index) :lt(index) :header :animated :focus :contains(text) :empty :has(selector) :parent :hidden :visible [attribute] [attribute=value] [attribute!=value] [attribute^=value] [attribute$=value] [attribute*=value] [attribute|=value] [attribute~=value] [attribute1][attributeN] :nth-child(index/even/odd/equation) :first-child :last-child :only-child :enabled :disabled :checked :selected

表单选择器

:input :text :password :radio :checkbox :submit :image :reset :button :file :hidden

DOM 操作

查找节点

  • $li = $("ul li:eq(1)")
  • 查找属性节点：$li.attr("title")

创建节点

$li_1 = $("<li title='香蕉'>香蕉</li>")

插入/移动节点

append() appendTo() prepend() prependTo() after() insertAfter() before() insertBefore()

删除节点

remove() detach() empty()

复制节点

clone(true)

替换节点

replaceWith() replaceAll()

包裹节点

wrap() wrapAll() wrapInner()

属性操作

attr() removeAttr()

样式操作

addClass() removeClass() toggleClass() hasClass() is()

设置获取值

html() text() val() focus() blur()

遍历节点

children() next() prev() siblings() closest() parent() parents()

CSS-DOM操作

css() width() height() offset() position() scrollTop() scrollLeft()

事件处理

加载DOM

ready()

事件绑定

bind() - blur, focus, focusin, focusout, load, resize, scroll, unload, click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress, keyup, error

合成事件

hover()

事件冒泡

  • event.stopPropagation()
  • event.preventDefault()
  • {return false;}

事件对象的属性

event.type event.target event.relatedTarget event.pageX event.pageY event.which event.metaKey

移除事件

unbind() one()

模拟操作

trigger(type,[data]) triggerHandler()

事件命名空间

  • bind('click.plugin')
  • trigger('click!')

动画

基础动画

show() hide() fadeIn() fadeOut() slideUp() slideDown() fadeTo() toggle() slideToggle() fadeToggle()

自定义动画

.animate(properties[, duration][, easing][, complete])

多重动画

.animate().animate()

停止动画及动画状态

stop([clearQueue],[gotoEnd]) is(':animated') delay()

动画回调

queue(function(next){next();})

高级技巧

属性和样式

  • css() animate() 接受以对象方式的多个CSS属性，接受 +=88、-=88 这样的属性
  • this.checked = !this.checked 反转布尔值
  • prop() 只存在布尔值的属性使用，一般用attr()

链式操作优化

  • 链式选择器与遍历节点方法共用减少代码量
  • trigger() 调用已经绑定的办法减少代码量
  • each() 遍历一个jQuery对象，为每个匹配元素执行一个函数
  • end() 终止在当前链的最新过滤操作，并返回匹配的元素的以前状态
  • :contains() 选择所有包含指定文本的元素
  • filter(selector) 筛选元素集合中匹配表达式 或 通过传递函数测试的 那些元素集合

其他

jquery.cookie.js

AJAX

优劣

优点：无插件、体验好、性能好、负担少
缺点：支持不一、前进后退失效、SEO不好、没好工具

XMLHttpRequest

ActiveXObject(ie6) xmlHttpReq.open() xmlHttpReq.onreadystatechange xmlHttpReq.send() xmlHttpReq.readyState xmlHttpReq.status

AJAX 方法

  • load()：从服务器载入数据并且将返回的HTML代码并插入至匹配的元素中
  • $.get()：使用一个HTTP GET请求从服务器加载数据
  • $.post()：使用一个HTTP POST 请求从服务器加载数据
  • $.getScript()：使用一个HTTP GET请求从服务器加载并执行一个 JavaScript 文件
  • $.getJSON()：使用一个HTTP GET请求从服务器加载JSON编码的数据
  • $.ajax()：执行一个异步的HTTP（Ajax）的请求

序列化

  • .serialize()：将用作提交的表单元素的值编译成字符串
  • .serializeArray()：将用作提交的表单元素的值编译成拥有name和value对象组成的数组
  • $.param()：创建一个数组或对象序列化的的字符串，适用于一个URL 地址查询字符串或Ajax请求

不同阶段状态

.ajaxStart() .ajaxStop() .ajaxComplete() .ajaxError() .ajaxSend() .ajaxSuccess()

上下文参数

$( selector [, context ] ) context 第二个上下文参数用于来指定选择器查找的范围

jQuery 插件开发

基础

  • jquery.[插件名].js：注意 this 的使用
  • 闭包：;(function($){})(jQuery);

插件类型

  • 封装对象方法的插件：$.fn.extend({})
  • 封装全局函数的插件：$.extend({})
  • 选择器插件：$.extend($.expr[":"],{})

性能优化建议

  • 尽量使用ID选择器
  • 尽量给选择器指定上下文
  • 缓存对象
  • 循环时的DOM操作
  • 数组方式使用jQuery对象
  • length检查jQuery对象
  • 用on()监听多个事件
  • 将代码转化为jQuery插件
  • 使用join()拼接字符串
  • 合理使用HTML5的Data属性
  • 尽量使用原生的JavaScript方法
  • 压缩JS

高级特性

  • $.cssHooks：直接向 jQuery 中添加钩子，用于覆盖设置或获取特定 CSS 属性时的方法，目的是为了标准化 CSS 属性名或创建自定义属性
  • $.proxy()：接受一个函数，然后返回一个新函数，并且这个新函数始终保持了特定的上下文语境

感悟

断点：静静的陪你走了好远好远，连眼睛红了都没有发现……

终于学完这本书了，不错推荐，OVER

米随随 书于成都