jQuery最有现今最长寿的库,也是全世界80%网站都在使用的库,很有学习的必要。从学习jQuery中可以学到其许多优秀的设计思想,这些思想也沿用在现在的许多流行的库里面。下面是我自己在学习jQuery中总结的jQuery的一些重要的设计思想。
1. jQuery 如何获取元素
jQuery的基本设计思想和用法就是——“选择一个元素,然后再对其进行一些操作”。这第一步就是选择一个元素,放到特殊的构造函数jQuery()中(可以简写成(选择表达式)`
这个选择表达式可以使CSS选择器,还可以是jQuery特有的表达式
$(CSS选择器)
$(document) //选择整个文档对象
$('#test') //选择ID为test的元素
$('div.className') //选择class为className的div元素
$('input[name=first]') //选择name属性为first的input元素
$(jQuery特有的表达式)
$('div:first') //网页中第一个div元素
$('tr:odd') //选择表格的奇数行
$('#myForm:input') //选择表单中的input元素
2. jQuery 的链式操作是怎样的
jQuery的链式操作就是选择一个元素,可以对它进行一系列的操作,所有的操作都可以链接在一起,一个链条的形式呈现出来。例如:
$('#test').find('.child1').addClass('red').addClass('blue')
展开之后就是下面所示:
$('#test') //找到ID为test的元素
.find('.child1') //选择class为child1的元素
.addClass('red') //在.child1上添加一个class名为red
.addClass('blue') //在.child1上添加一个class名为blue
jQuery最精髓和最巧妙的地方就是每一步的jQuery操作,返回的都是一个jQuery对象,所以不同的操作才可以链接起来。
jQuery还提供了.end()方法,可以跳转到上一步
$('#test') //找到ID为test的元素
.find('.child1') //选择class为child1的元素
.addClass('red') //在.child1上添加一个class名为red
.end()
.addClass('blue') //在#test上添加一个class名为blue
3. jQuery 如何创建元素
jQuery创建新元素的方法很简单,只要把新的元素直接传入到jQuery的构造函数中就行啦。
$('<div>Hello</div>')
$('<p>新建p元素</p>')
$('<ul><li class="new">new list item</li></ul>')
4. jQuery 如何移动元素
jQuery的设计思想中提供了两种方法来操作元素的移动。一种是直接移动该元素,另一种是移动其他元素,是该元素达到我们想要的位置。
-
第一种方法是使用
.insertAfter()
,将一个div元素移动到一个p元素的后面:$('div').insertAfter($('p'));
-
第二种方法是使用
.after()
,将p元素加到div元素的前面:$('p').after($('div'));
这两种方式从表面上来看没有什么区别,无非就是顺序不同,一个是div元素到p元素的后面,一个是p元素到div元素的前面。其实,两者的区别在于返回值的不同。第一种方法的返回值是div元素,第二种方法的返回值是p元素。我们可以根据实际的情况来选择使用哪一种方法。 使用这种操作模式的方法一共有四队:
.insertAfter()
和.after()
——在现存元素的外部,从后面插入元素insertBefore()
和.before()
——在现存元素的外部,从前面插入元素.appendTo()
和.append()
——在现存元素的内部,从后面插入元素.prependTo()
和.prepend()
——在现存元素的外部,从前面插入元素
5. jQuery 如何修改元素的属性
在操作网页元素中,我们做的最多的操作就是对其进行取值和赋值操作,也就是修改元素的属性操作。在jQuery的设计思想中,将取值(getter)和赋值(setter)合二为一。到底是取值还是赋值,由函数的参数决定。 例如:
$('h1').text('Hello') //这就是给h1赋值
$('h1').text() //text()中没有值,说明是给h1取值
修改元素属性的函数以下这些:注意$div可能对应对个div元素
$div.text()
——读写文本内容$div.html()
——读写HTML内容$divattr('title',??)
——读写属性$div.css({color:'red'})
——读写style。//$div.style
会更好$div.addClass('blue')
/$div.removeClass()
/$div.hasClass()
——添加、删除、遍历属性$div.on('click',fn)
——添加监听事件$div.off('click',fn)
——删除监听事件