JQuery设计模式

304 阅读2分钟

jQuery是目前使用最广泛的javascript函数库。
据统计,全世界排名前10万的网站,有90%使用jQuery,远远超过其他库。

如何获取元素

jQuery就是通过获取某个网页元素,然后对其进行某种操作。这是它区别于其他Javascript库的根本特点。 使用jQuery的第一步,往往就是将一个选择表达式,放进构造函数jQuery()(简写为$),然后得到被选中的元素。

jQuery('#xxx')//获取id为xxx的元素。简写:$('#xxx')
jQuery('.xxx')//获取属性名为xxx的元素。简写:$('.xxx')
jQuery('#xxx').find('.red')//查找id为xxx中的.red元素。简写:$('#xxx').find('.red')
jQuery('#xxx').parent()//获取爸爸。简写:$('#xxx').parent()
jQuery('#xxx').children()//获取儿子。简写:$('#xxx').children()
jQuery('#xxx').sibling()//获取兄弟姐妹。简写:$('#xxx').sibling()
jQuery('#xxx').index()//获取排行,从0开始计数。简写:$('#xxx').index()
jQuery('#xxx').next()//获取弟弟。简写:$('#xxx').next()
jQuery('#xxx').prev()//获取哥哥。简写:$('#xxx').prev()
jQuery('#xxx').each(fn)//遍历每个元素,执行fn。简写:$('#xxx').each(fn)

jQuery构造函数并不返回网页元素,所返回的是一个对象。称之为jQuery构造出来的对象。

链式操作是怎样的

当获取某个元素以后,JQuery就可以对元素进行一系列的操作,并且这些操作可以连在一起,以链条的形式写出来,例如:

$('div').find(h2).html('hello');  

还可以分解开来写:

$('div')            //获取div元素
  .find(h2)        //获取其中的h2元素
  .html('hello')  //将h2内容改为hello  

这就是链式操作,其原理是每一步的JQuery操作返回的都是一个JQuery对象,所以可以把不同的操作连在一起。

** jQuery还提供了.end()方法,使得结果集可以后退一步:**

$('my')  //找到my元素
.find('h3')  //选择其中的h3元素
.eq(2)  //选择第3个h3元素
.html('Hello')  //将它的内容改为Hello
.end()   //退回到选中所有的h3元素的那一步
.eq(0)   //选中第一个h3元素
.html('World');   //将它的内容改为World

如何创建元素

JQuery创建一个元素的方法很简单,将元素传入JQuery构造函数里面:

$('<p>hello</p>') //创建一个p标签
$('ul').append('<li>item</li>') //创建列表  

如何移动元素

JQuery有两种移动元素的方法,一种是直接移动元素,第二种是移动其他元素以让我们想要移动的元素到达我们想让他到达的位置。例如要把div元素移动到p元素的后面:

  • 方法一
$('div').insertAfter($('p'))  //使用 .insertAfter() 将 div 元素移动到 p 元素后面
  • 方法二
$('p').after$($('div'))  //使用 .after 将 p 元素加到 div 元素前面

需要注意的地方:这两种方法的返回的元素不同,第一种方法返回的是div元素,第二种方法返回的是p元素.

如何修改元素的属性

JQuery中用attr()方法来获取和修改元素的属性,attr是attribute(属性)的缩写,也就是JS中getAttribute()以及setAttribute()的简化

console.log($('div').attr('id'))    //将第一个 div 元素的 id 的值打印出来
$('div').attr('class','newClass')   //给每一个 div 元素设置一个值为 newClass 的 class  
  • .removeAttr() :为匹配的元素集合中的每个元素移除一个属性
$('div').removeAttr('class')    //将每一个 div 元素的 class 属性移除掉
  • .prop() :获取匹配的元素集中第一个元素的属性值或设置每一个匹配元素的一个或多个属性
$('div').prop('id')                 //获取第一个 div 的 id 的值
$('div').prop('class','newClass')   //将每一个 div 的 class 设置为 newClass  

如何删除元素

$div.remove()
sdiv.empty()
//两者区别:前者不保留被删除元素的事件,后者保留,有利于重新插入文档时使用  

常用的工具方法

$.trim() 去除字符串两端的空格。
$.each() 遍历一个数组或对象。
$.inArray() 返回一个值在数组中的索引位置。如果该值不在数组中,则返回-1$.grep() 返回数组中符合某种标准的元素。
$.extend() 将多个对象,合并到第一个对象。
$.makeArray() 将对象转化为数组。
$.type() 判断对象的类别(函数对象、日期对象、数组对象、正则对象等等)。
$.isArray() 判断某个参数是否为数组。
$.isEmptyObject() 判断某个对象是否为空(不含有任何属性)。
$.isFunction() 判断某个参数是否为函数。
$.isPlainObject() 判断某个参数是否为用"{}""new Object"建立的对象。
$.support() 判断浏览器是否支持某个特性。  

总结

对于网页开发者来说,学会jQuery是必要的。因为它让你了解业界最通用的技术,为将来学习更高级的库打下基础,并且确实可以很轻松地做出许多复杂的效果。