依旧值得学习的 jQuery

194 阅读2分钟

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