学习JQuery

1. 重要基础

简写加载函数，事情必须在DOM加载之后，否则无法绑定对象

$(document).ready()
$(function(){}); //推荐缩写

使用包括 JQuery 库外语法类似的 JavaScript 库时，注意命名冲突

Jquery.noConflict() 
var 
$$
 = JQuery; //换成 
$$
 调用Jquery函数

2. 基础选择器

(选择器使用css1，css2的全部选择器语法，以及部分css3语法。)

对 id 元素使用选择器: 默认对第一个元素外的其他元素"失明"，返回第一个对象。
调用属性 .length 或函数 .size() 查看对象集合的数量
获取对象集合里的元素 .get(0) 或加下标 [0]
群组选择器: 逗号列举

$("label, #text, .blue")

后代选择器

＄("#nav h4 span")
$("#nav").find("h4").find("span")

子代选择器(只能是直接的父子关系)

＄("#nav > span")
$("#nav").children("span")

获取 span 的下一个同级兄弟元素 p

$("div span + p")
$("div span").next()

获取 span 以下的所有同级兄弟元素 p

$("div span ~ p")
$("div span").nextAll("p")

同级向上(向下)选取元素，直到找到 label 元素为止(不包括 label 元素)

.prevUntil("label") //向上
.nextUntil("label") //向下

寻找同级兄弟

.siblings("input")
.prevAll() 加上 .nextAll()

3. 过滤选择器

第一个(最后一个)元素

:first
:last

排除满足条件的元素

.not(.blue)

奇(偶)序元素

:odd
:even

等于/大于/小于

:eq(2)
:gt(3)
:lt(5)

标题元素(h1 ~ h6)

:header

正在执行动画的元素

:animated

正被聚焦的元素

:focus

包含指定文本的元素

:contains(".com")

不包含文本或者无子元素的元素

:empty

包含文本或子元素的元素

:parent

具有指定类的元素

:has(".blue")

不可见(可见)的元素

:hidden
:visible

每个父元素的第一个(最后一个)子元素

:first-child
:last-child

只有一个子元素的元素

:only-child

每个指定子元素的元素

:nth-child(odd)

匹配的元素

.is(".bule")
.hasClass("blue")
.filter(".blue")
.slice(1, 4) //第二个到第四个元素

4. 表单选择器

选择指定元素

:input
:button

选择不同类型的input元素

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

选择不同属性的元素

:enabled
:disabled
:checked
:selected

5. 基本 DOM 操作

获取(设置)元素html内容

.html() //加参数则设置

获取(设置)元素文本内容

.text() //加参数则设置

获取(设置)表单元素内容

.val() //加参数则设置

获取(设置)元素属性值

.attr() //加参数则设置
.attr({A: a, B: b}) //设置多个参数

获取(设置)css样式

.css() //加参数则设置，多参数设置同上

添加css样式

.addClass("blue")
.addClass("blue red green")

移除css样式

.removeClass("blue") //移除多个类同上

切换css样式

.toggleClass("blue") //切换多个类同上
.toggleClass(function(){}, [rate]) //自定义切换规则，第二个为可选参数频率

获取(设置)高度(宽度)

.height() //加参数则设置 
.width() //加参数则设置
.height(function(object, value){}) //object指定元素、value指定元素的高度

获取内外边框高度宽度

.innerWidth()
.innerHeight()
.outerWidth() //包括边框和内边距
.outerHeight() //同上
.outerWidth(true) //同上并包括外边框
.outerHeight(true) //同上

相对偏移

.offset() //相对于视口
.position() //相对于父元素

滚动条相关(获取/设置)

.scrollTop() //垂直
.scrollLeft() //水平

6. DOM节点操作

元素内部前面插入节点

.prepend(html) //插入节点html
.prepend(function(new, parent)) //向parent元素内部前面插入节点new
.prependTo(target) //将元素移至指定元素target

元素内部后面插入节点

.append(html)
.append(function(new, parent){})
.appendTo(target)

元素外部前面插入节点

.before()
.before(function(new, parent){})
.insertBefore(target)

元素外部后面插入节点

.after()
.after(function(new, parent){})
.insertAfter(target)

包裹节点

.wrap(target) //参数可为html内容或者对象节点
.wrap(function(target){})
.unwrap() //解除一层包裹

批量包裹

.wrapAll(parent) //被元素parent包裹
.wrapInner(parent) //包裹元素parent的子元素

复制节点

.clone(true) //加上true表示同时复制绑定事件、不加则只复制元素和内容

删除节点

.remove(‘p’) //可选参数

保留事件行为的删除

.detach()

删除节点内容

.empty()

替换节点

.replaceWith('span')
.replaceAll('p')

7. 基本事件

(以下函数均含匿名函数)

点击、双击

.click()
.dbclick()

点击弹起瞬间、弹起后

.mouseup()
.mousedown()

鼠标穿出入触发(包括子元素)

.mouseenter()
.mouseleave()

鼠标穿出入触发(不包括子元素)

.mouseover()
.mouseout()

鼠标移动

.mousemove()

键盘按下弹起瞬间、弹起后

.keyup()
.keydown()
.keypress()

焦点激活与丢失

.focus()
.blur()
.focusin()
.focusout()

其他事件

.select() //文本选定
.change() //值被改变
.submit //表单提交
.scroll() //滚动条拖动
.unload() //卸载本页面
.hover(fun1, [fun2]) //鼠标移入(移出)

8. 事件对象

(function(event){})

页面坐标(属性)

pageX //相对于页面
pageY
screenX //相对于显示屏
screenY
clientX //相对于视口
clientY

9. 高级事件

模拟用户行为

.trigger("click", [param1, param2])
.trigger("click", [{paramA1 : a, paramA2 : b}, {paramB1, paramB2}])

绑定(解绑)事件

.on("click dbclick", [function(){}])
.off("click")

仅触发一次事件

.one() //用法同.on

10. 动画

显示/隐藏

.show() //可选参数持续时间，如3000表示3秒，或者“slow”
.hide() //添加第二参数闭包函数则动画完毕后执行

自定义动画

.animate({'top': '+=88px', 'height': '200px'}, 'slow')

队列动画

.queue([function([next]){ ......; [next()[]}])
.dequeue() //两个函数都是执行下一个函数

上下卷动

.slideUp()
.slideDown()
.slidToggle()

动画操作

.delay()
.stop()

动画属性

.fx.interval //运行帧数
.fx.off = ture //关闭动画效果

11. AJAX

.load()

第一个参数：目的 url 或者带选择器的 url (可带get的参数)
第二个参数：不为空则为post方式
第三个参数：闭包函数（返回数据，状态，XMLHttpRequest对象）

.get()

.post()

.AJAX() //底层函数

(以下为传入参数的属性)

url
type
timeout
data
dataType
beforeSend
complete
success
error
global
cache
content
contentType
async
processData
dataFilter
ifModified
jsonp
username
password
scriptCharset
xhr
traditional

$.ajaxStart()

$.ajaxStop()

$.ajaxError()

$.ajaxSuccess()

$.ajaxComplete()

$.ajaxSend()

$.ajaxSetup() //请求默认值来初始化参数

$('form').serialize() //获取表单所有值

$('form').serializeArray() //返回键值对的Json对象

12. 工具函數

除去字符串两边空格

$.trim(str)

遍历数组(对象)

$.each(arr, function(index, value){})

数据筛选

$.grep(arr, function(element, index){})

修改数据

$.map(arr, function(element, index){})

合并数组

$.merge(arr1, arr2)

6.测试类型函数

$.isArray(obj)
$.isFunction(obj)
$.isEmptyObject(obj)
$.isPlainObject(obj) //纯粹对象
$.isNumeric(data)
$.isWindow(data) //window对象
$.contains(obj) //包含其他节点

判断类型函数

$.type(data)

将对象键值对转换为URL字符串键值对

$.param(obj)

调用内部函数

$.proxy(obj, 'objFunc') //返回obj对象里的objFunc函数

13. 插件

1.Validate.js

(jquery.validata.js 、 jquery.validate.messages_zh.js)

相关代码

$('form').validate()

必填项

class = “required”

邮箱

class = "email"

不得少于两位

minlength = "2"

网址

class = "url"

2. 自动完成插件 (jquery.autocomplete.js 、 jquery-migrate-1.2.1.js)

var name = ['John', 'Jack', 'Tom', 'Kitty'];
$('form input[name=name]').autocomplete(name, {minChars: 0}) //0表示不需要输入一个字符即可显示所有备选数据

3. 自定义插件

插件规范

名字: jquery.[name].js
局部对象附加 jquery.fn 对象上，全局函数附加在 jquery 上
插件内部，this 指向的是当前的局部对象
可以通过 this.each 来遍历所有元素
所有的方法或插件，必须用分号结尾，避免出现问题
插件应该返回的是 JQuery 对象，以保证可链式连缀
避免插件内部使用 $ ，如果要使用，请传递 JQuery 进去

学习JQuery

1. 重要基础

2. 基础选择器

3. 过滤选择器

4. 表单选择器

5. 基本 DOM 操作

6. DOM节点操作

7. 基本事件

8. 事件对象

9. 高级事件

10. 动画

11. AJAX

.load()

.get()

.post()

.AJAX() //底层函数

$.ajaxStart()

$.ajaxStop()

$.ajaxError()

$.ajaxSuccess()

$.ajaxComplete()

$.ajaxSend()

$.ajaxSetup() //请求默认值来初始化参数

$('form').serialize() //获取表单所有值

$('form').serializeArray() //返回键值对的Json对象

12. 工具函數

13. 插件

1.Validate.js

2. 自动完成插件 (jquery.autocomplete.js 、 jquery-migrate-1.2.1.js)

3. 自定义插件

分类

插件规范

继续阅读