jQuery 的主要设计思想和用法,就是"选择某个网页元素,对其进行某种操作"
jQuery 如何获取元素
可以使用 CSS 选择器
$(document) // 选择整个文档对象
$('#id') // 选择一个具有给定id属性的单个元素。
$('.class') // 选择给定样式类名的所有元素。
$('input[name=first]') // 选择name属性等于first的input元素
$('*') // 选择所有元素
$('element') // 根据给定(html)标记名称选择所有的元素。
$('selector1, selector2, selectorN') // 将每一个选择器匹配到的元素合并后一起返回。
也可以是 jQuery 特有的表达式
$('a:first') //选择网页中第一个a元素
$('tr:odd') //选择表格的奇数行
$('#myForm :input') // 选择表单中的input元素
$('div:visible') //选择可见的div元素
$('div:gt(2)') // 选择所有的div元素,除了前三个
$('div:animated') // 选择当前处于动画状态的div元素
jQuery 的链式操作
就是最终选中网页元素以后,可以对它进行一系列操作,并且所有操作可以连接在一起,以链条的形式写出来。
$('div') //找到div元素
.find('p') //选择其中的p元素
.eq(2) //选择第3个p元素
.html('Hello'); //将它的内容改为Hello
它的原理在于每一步的jQuery操作,返回的都是一个jQuery对象,所以不同操作可以连在一起。
jQuery还提供了.end()方法,使得结果集可以后退一步:
$('div')
.find('p')
.eq(2)
.html('Hello')
.end() //退回到选中所有的p元素的那一步
.eq(0) //选中第一个p元素
.html('World'); //将它的内容改为World
jQuery 的元素操作
创建元素:把新元素直接传入jQuery的构造函数就行了
$('<p>Hello</p>');
$('<li class="new">new list item</li>');
$('ul').append('<li>list item</li>');
复制元素使用.clone()。
删除元素使用.remove()和.detach()。两者的区别在于,前者不保留被删除元素的事件,后者保留,有利于重新插入文档时使用。
清空元素内容(但是不删除该元素)使用.empty()。
jQuery 如何移动元素
一组方法是直接移动该元素,另一组方法是移动其他元素,使得目标元素达到我们想要的位置。
$('div').insertAfter($('p')); //把div元素移动p元素后面
$('p').after($('div')); //把p元素加到div元素前面
两种方法返回的元素不一样。
jQuery 修改元素属性
.attr()
获取匹配的元素集合中的第一个元素的属性的值。设置每一个匹配元素的一个或多个属性。
.prop()
获取匹配的元素集中第一个元素的属性(property)值为匹配的元素设置一个或多个属性(properties)。
.removeAttr()
为匹配的元素集合中的每个元素中移除一个属性(attribute)。
.removeProp()
为集合中匹配的元素删除一个属性(property)。
.val()
获取匹配的元素集合中第一个元素的当前值。设置匹配的元素集合中每个元素的值。
@--- jQuery 中文文档
@---阮一峰 jQuery