jQuery

页面加载事件

    // 同window.onload,页面结构和外部资源全部加载完毕后执行
    $(window).load(function () {});​

    // 页面结构加载完毕后就执行, 优先于load()事件之前执行, 推荐使用该方式
    $(document).ready(function () {});​

    // 同$(document).ready(function(){});
    jQuery(function () {});​

    // 因为jQuery等同于$   所以功能同上
    $(function () {});

DOM 对象和 jQuery 对象之间互转

DOM 对象：可以使用 WebAPI 提供的一些方法和属性
jQuery 对象：相当于对 DOM 对象的包装，使用 jQuery 提供的一些方法和属性，来操作 DOM 元素

• DOM 对象转为 jQuery 对象：

$(DOM对象)

• jQuery 对象转为 DOM 对象：

jQuery对象.get(0)
jQuery对象[0]

选择器

ID 选择器

获取元素

$('#btn')

注册点击事件：

$('#btn').click(function () {})

修改元素内部文本：

$("#dv").text("内容“);

修改元素的背景色

$('#dv').css('backgroundColor', 'red')

标签选择器

$('p')

类选择器

$('.cls')

交集选择器

$('p.cls')

并集选择器

$('p,span,a,#btn')

层次选择器

$('#dv span')
$('#dv>span')
$('#dv+span') // 获取ID为dv后面第一个兄弟元素span
$('#dv~span') // 获取ID为dv后面所有兄弟元素span

奇数偶数选择器

$('#dv>ul>li:even') // 获取索引为偶数的li元素
$('#dv>ul>li:odd') // 获取索引为奇数的li元素

索引选择器

eq : equal gt : greater than lt : less than

$('ul>li:eq(7)')
获取ul中索引为7的li元素
$('ul>li:gt(7)')
获取ul中索引大于7的li元素
$('ul>li:lt(7)')
获取ul中索引小于7的li元素

如果索引是变量则需要使用字符串拼接

$('ul>li:eq(' + a + ')')
$('ul>li').eq(a)

表单元素属性选择器

$('#se>option:selected') // 表示获取id为se下main所有selected属性为true的option
$('#dv :checkbox') // 获取id为dv下所有类型为checkbox的表单元素
$('#dv :checked') // 获取id为dv下所有checked为true的表单元素

属性选择器

$('#dv p[index=5]') // 获取id为dv下所有index属性为5的p标签

常用方法

共同特性：传入参数表示设置，不传参数表示获取

方法	说明
text()	相当于 DOM 中的 innerText
html()	相当于 DOM 中的 innerHTML
val()	相当于 DOM 中的 value 属性
css()	相当于 DOM 中的 style 属性，一般只用这个方法设置样式，不会用于获取$("#dv").css("backgroundColor","yellow");$("#dv").css({"width":"300px","height":"200px","backgroundColor":"yellow"});
children()	获取所有的直接子元素，可以传入参数进行过滤，例如需要所有的子元素 ul，children("ul");
show()	显示元素，传入参数毫秒值，可以执行动画
hide()	显示元素，传入参数毫秒值，可以执行动画
siblings()	获取所有的兄弟元素，可以传入参数进行过滤，同 children()规则
find()	在当前元素中找子元素，在不可使用选择器时，可以当后代选择器的功能来使用，不同于children(),children()只能获取直接子元素
each(function(k,v){ .. })	循环
foreach(function(v,k){ .. })	循环

操作类样式

方法	说明	备注
addClass()	添加类样式	传入类名可以添加类样式，不需要在前面加点，如果需要添加多个类样式，用空格隔开
removeClass()	移除类样式	传入一个参数表示移除指定的类样式 不传参数表示移除所有的类样式
hasClass()	判断是否应用了类样式	传入一个参数判断是否应用了该类样式，返回值是 boolean 类型
toggleClass()	切换类样式	传入一类样式，如果有就移除，如果没有就添加

链式编程

对象调用方法后，返回值仍然是对象自身，可以继续调用该对象的其他方法

修复断链

end(); 回到断链之前的对象

元素操作

获取兄弟元素

方法	说明
next()	获取下一个兄弟元素
prev()	获取上一个兄弟元素
nextAll()	获取后面所有的兄弟元素
prevAll()	获取前面所有的兄弟元素
siblings()	获取其他所有的兄弟元素

获取父子元素

方法	说明
children()	获取所有的直接子元素
find()	获取指定的子元素（直接或者间接的都可以获取）
parent()	获取父元素
first()	获取第一个元素
last()	获取最后一个子元素

创建：

$('标签代码')
$('<p>111</p>')
jQuery对象.html('标签代码')

添加：

方法	说明
append()	在当前元素中的末尾追加
prepend()	在当前元素中的前面插入
after()	在当前元素后面作为兄弟元素添加
appendTo()	将调用者加到参数 1 元素中

移除内容和克隆元素

方法	说明
clone()	克隆元素
remover()	移除自身
empty()	清空元素内部的内容
html("")	清空元素内部的内容

操作元素属性

attr(); 设置属性，参数 1 是属性名，参数 2 是属性值，如果只传入一个参数，则表示根据属性明获取属性值

动画

显示隐藏

show(); hide();

• 参数 1：动画执行的速度，可以传入number或string，传入number表示动画执行时长，单位是毫秒，string的取值是slow normal fast
• 参数 2：回调函数，当动画执行完毕后执行的函数

划入滑出

slideUp(); slideDown(); slideToggle();

• 参数 1：动画执行的速度，可以传入number或string，传入number表示动画执行时长，单位是毫秒，string的取值是slow normal fast
• 参数 2：回调函数，当动画执行完毕后执行的函数

淡入淡出

fadeIn(); fadeOut(); fadeToggle();

• 参数 1：动画执行的速度，可以传入number或string，传入number表示动画执行时长，单位是毫秒，string的取值是slow normal fast
• 参数 2：回调函数，当动画执行完毕后执行的函数 fadeTo();将透明度以动画的形式改变到指定的值
• 参数 1：动画执行的速度
• 参数 2：指定的透明度
• 参数 3：回调函数

animate 方法

指定自定义动画

• 参数 1：指定width height top left opacity等属性的目标值
• 参数 2：动画执行的时长
• 参数 3：回调函数

stop 方法

stop(); 停止动画；因为jQuery中动画都是排队执行的，所以有些情况需要停止动画后执行动画

其他方法

表单元素的一些状态属性，例如checked selected disabled等，这些属性无法使用attr()方法来获取和设置，需要使用prop()：

方法	说明
prop();	传一个参数表示获取 传两个参数表示设置，参数 1 属性名，参数 2 属性值
width();	宽，不传参数表示获取，传入参数表示设置，可带单位的字符串或数字
height();	高
offset();	不传参数表示获取，返回值是一个对象，该对象有top和left属性，分别表示offsetTop和offsetLeft； 传入参数表示设置，可以传入一个具有left和top属性的对象
scrollTop();	不传参数表示获取，元素滚动出去的高
scrollLeft();	不传参数表示获取，元素滚动出去的宽

事件

绑定事件

click

$('#btn').click()

bind

$('#btn').bind('click', function () {})

• 参数 1：事件类型
• 参数 2：事件处理函数

$("#btn").bind("click mouseover mouseout",function(){}); // 为三种事件绑定同一个事件处理函数
$("#btn").bind({click:function(){},mouseover:function(){}); // 同时为元素绑定多个事件，对应多个事件处理函数

事件委派delegate();

$('#dv').delegate('p', 'click', function () {})

• 参数 1:：子元素
• 参数 2：事件类型
• 参数 3：事件处理函数

on 推荐：

既可以给自己绑定事件，也可以做事件委派，

• 给自己绑定事件

  $('#btn').on('click', function () {})
  

  • 参数 1：事件类型
  • 参数 2：事件处理函数
• 给子元素绑定事件

  $('#dv').on('click', 'p', function () {})
  

  • 参数 1：事件类型
  • 参数 2：要绑定事件的子元素
  • 参数 3：事件处理函数

解绑事件

成对出现，用什么方法绑定的事件，就用对应的方法解绑

on()	off()
bind()	unbind()
delegate()	undelegate()

提示

如果是通过事件委派的方式给子元素绑定的事件，当解绑父元素的事件时，子元素的事件也会被解绑
off();不传参数表示移除父子元素的所有事件
off("**"); 解绑子元素的事件

触发事件

• 直接调用 jQuery 对象的事件方法
• 使用 trigger()方法
• 使用 triggerHandler()方法

提示

第一种和第二种完全一样 第三种不会触发浏览器的默认事件，例如文本框获取焦点后会光标闪烁并显示轮廓

取消冒泡和取消浏览器的默认行为

在事件处理函数末尾return false即可