核心思想
jQuery是一个函数,也可以说是一个非严格意义上的构造函数。jQuery巧妙的运用到了“闭包、链式操作”。与其他函数不同,它的返回值是一个对象,简称"jQuery"对象。该对象具有一些方法,可以操作获(增删改查)取到的元素。简写$.
获取元素
- 选择表达式可以是css选择器
$(document)
$("#red")
$("input[name=blue]") // 选择name属性为blue的input元素
- 特有表达式
$('a:first') //选择网页中第一个a元素
$('tr:odd') //选择表格的奇数行
$('#myForm :input') // 选择表单中的input元素
$('div:visible') //选择可见的div元素
$('div:gt(2)') // 选择所有的div元素,除了前三个
$('div:animated') // 选择当前处于动画状态的div元素
(来自阮一峰)
- 其他
$('div').has('p'); // 选择包含p元素的div元素
$('div').not('.myClass'); //选择class不等于myClass的div元素
$('div').filter('.myClass'); //选择class等于myClass的div元素
$('div').first(); //选择第1个div元素
$('div').eq(5); //选择第6个div元素
$('div').next('p'); //选择div元素后面的第一个p元素
$('div').parent(); //选择div元素的父元素
$('div').closest('form'); //选择离div最近的那个form父元素
$('div').children(); //选择div的所有子元素
$('div').siblings(); //选择div的同级元素
(来自阮一峰)
移动元素
移动元素有两种方法:直接移动和移动其他元素,使目标元素达到我们想要的位置。
$('p').after($('div'))// 把p元素加到div的后面,返回值是p;
$('div').insertAfter($('p'));// 把div移动到p的后面,返回值是div;
共有四组:
.insertAfter()和.after() //在现存元素的外部,从后面插入元素
.insertBefore()和.before()//在现存元素的外部,从前面插入元素
.appendTo()和.append()//在现存元素的内部,从后面插入元素
.prependTo()和.prepend()//在现存元素的内部,从前面插入元素
元素的删除、克隆和创建
- .clone()
- .remove()和.detach(),后者保留被删除元素的事件
- .empty()//清空元素内容,但不删除该元素
取值和赋值
- ('h1').html('hello'),把hello赋值给h1。
- .attr()同理读取属性和修改属性
链式操作
链式操作实质上是jQuery函数的返回值是其构造的对象,用来操作选取的元素,所以可以直接“.find()/.addClass()...”