阅读 59

《你应该知道的jQuery的设计思想》

jQuery最有现今最长寿的库,也是全世界80%网站都在使用的库,很有学习的必要。从学习jQuery中可以学到其许多优秀的设计思想,这些思想也沿用在现在的许多流行的库里面。下面是我自己在学习jQuery中总结的jQuery的一些重要的设计思想。

1. jQuery 如何获取元素

jQuery的基本设计思想和用法就是——“选择一个元素,然后再对其进行一些操作”。这第一步就是选择一个元素,放到特殊的构造函数jQuery()中(可以简写成)。——)。——`(选择表达式)`

这个选择表达式可以使CSS选择器,还可以是jQuery特有的表达式

  1. $(CSS选择器)
    $(document) //选择整个文档对象
    $('#test')  //选择ID为test的元素
    $('div.className')  //选择class为className的div元素
    $('input[name=first]')  //选择name属性为first的input元素
复制代码
  1. $(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的设计思想中提供了两种方法来操作元素的移动。一种是直接移动该元素,另一种是移动其他元素,是该元素达到我们想要的位置。

  1. 第一种方法是使用.insertAfter(),将一个div元素移动到一个p元素的后面:

$('div').insertAfter($('p'));

  1. 第二种方法是使用.after(),将p元素加到div元素的前面:

$('p').after($('div'));

这两种方式从表面上来看没有什么区别,无非就是顺序不同,一个是div元素到p元素的后面,一个是p元素到div元素的前面。其实,两者的区别在于返回值的不同。第一种方法的返回值是div元素,第二种方法的返回值是p元素。我们可以根据实际的情况来选择使用哪一种方法。 使用这种操作模式的方法一共有四队:

  1. .insertAfter().after()——在现存元素的外部,从后面插入元素
  2. insertBefore().before()——在现存元素的外部,从前面插入元素
  3. .appendTo().append()——在现存元素的内部,从后面插入元素
  4. .prependTo().prepend()——在现存元素的外部,从前面插入元素

5. jQuery 如何修改元素的属性

在操作网页元素中,我们做的最多的操作就是对其进行取值和赋值操作,也就是修改元素的属性操作。在jQuery的设计思想中,将取值(getter)和赋值(setter)合二为一。到底是取值还是赋值,由函数的参数决定。 例如:

$('h1').text('Hello')  //这就是给h1赋值
$('h1').text()         //text()中没有值,说明是给h1取值
复制代码

修改元素属性的函数以下这些:注意$div可能对应对个div元素

  1. $div.text()——读写文本内容
  2. $div.html()——读写HTML内容
  3. $divattr('title',??)——读写属性
  4. $div.css({color:'red'})——读写style。//$div.style会更好
  5. $div.addClass('blue')/$div.removeClass()/$div.hasClass()——添加、删除、遍历属性
  6. $div.on('click',fn)——添加监听事件
  7. $div.off('click',fn)——删除监听事件
文章分类
前端
文章标签