jQuery的简单总结

Bela
199 阅读3分钟

很多人现在都说jQuery已经过时了，没有必要花费时间学习，但是我觉得jQuery永远不会过时，它内含的一些经典设计模式永远都值得我们赏析，例如自定义不用new的构造函数、利用闭包隐藏对象细节、函数重载、设计别名、链式操作等等。现在我将根据这两天对jQuery的学习做一个简单总结，主要包含jQuery如何获取元素、jQuery的链式操作、jQuery如何创建及移动元素、jQuery怎样修改元素的属性等内容。

jQuery如何获取元素

jQuery的主要用法就是选择某个/某些网页元素，然后对其进行操作，注意它并不返回你选取的元素，而是返回能够对你所选取的元素进行操作的一系列api，这是通过闭包实现对选取元素进行操作的，那么如何使用jQuery获取元素呢？这是使用jQuery的第一步，需要将一个选择表达式，放进构造函数jQuery()（简写为$）里，然后就能得到被选中的元素。

1.选择表达式可以是css表达式

$('input[name="man"]') //name属性值为'man'的input元素
$('#div1')  //id为div1的元素
$('.row')  //class为row的元素
$('span')  //选择所有span元素
$('*')     //选择所有元素
······

2.选择表达式也可以是jQuery特有的表达式

$('a:first')  //选择第一个a元素
$("div:animated") //选择正在执行动画的div元素
$("tr:even")  //选择偶数行
$("tr:odd")  //选择奇数行
$("div:eq(2)") //选择索引值为2的div元素
$("div:gt(4)")  //选择索引值大于4的div元素
······

jQuery的链式操作

jQuery中令人称赞的其中一点就是它的链式操作，因为jQuery并不返回选取的对象，而是返回一个拥有很多能够对选取对象进行各种操作的api的对象，然后运用闭包的方式将选取的对象放在jQuery函数内，这样就能很顺利地实现链式操作。

例如：

$('div').find('.red').addClass('blue');

分解过程：

$('div')               //找到所有div元素
  .find('.red')        //选择所有div元素下类名为red的元素
  .addClass('blue');   //为所有类为red的div元素添加类blue

jQuery如何创建及移动元素

  1. $('<p>Test</p>')：创建一个p元素，创建一个元素直接将内容传入到$('')函数中即可。
  2. .appendTo(target)：将匹配的元素插入到目标元素的最后面：

开始状态：

<div class="container">
  <div class="inner">Hello</div>
  <div class="inner">Goodbye</div>
</div>

可以创建内容然后同时插入到几个元素里面：

$('<p>Test</p>').appendTo('.inner');

结果：

<div class="container">
  <div class="inner">
    Hello
    <p>Test</p>
  </div>
  <div class="inner">
    Goodbye
    <p>Test</p>
  </div>
</div>
  1. .clone()：深度复制所有匹配的元素集合：

开始状态：

<div class="container">
  <div class="goodbye">
    Goodbye
    <div class="hello">Hello</div>
  </div>
</div>

复制.hello元素：

$('.hello').clone().appendTo('.goodbye');

结果：

<div class="container">
  <div class="hello">Hello</div>
  <div class="goodbye">
    Goodbye
    <div class="hello">Hello</div>
  </div>
  1. .warp():在每个匹配的元素外层包上一个html元素：

开始状态：

<div class="container">
  <div class="inner">Hello</div>
  <div class="inner">Goodbye</div>
</div>

在inner div外层插入一个div元素：

$('.inner').wrap('<div class="new" />');

结果：

<div class="container">
  <div class="new">
    <div class="inner">Hello</div>
  </div>
  <div class="new">
    <div class="inner">Goodbye</div>
  </div>
</div>
  1. .after()：在匹配元素集合中的每个元素后面插入参数所指定的内容，作为其兄弟节点。
  2. .before()：匹配元素的前面插入内容。
  3. .detach()：从DOM中去掉所有匹配的元素。
  4. .empty()：从DOM中移除集合中匹配元素的所有子节点。
  5. .remove()：将匹配元素集合从DOM中删除。 ······

jQuery怎样修改元素的属性

  1. .attr()：获取匹配的元素集合中的第一个元素的属性的值或设置每一个匹配元素的一个或多个属性。

（1）$("em").attr("title")：获取em元素的title属性值。

（2）$('img').attr('alt', 'logo.jpg');：设置img元素的alt属性值为logo.jpg。

（3）$('img').attr({alt: 'logo.jpg',title: 'photo'});：设置img元素的多个属性。

从jQuery1.6开始，.prop()方法返回 property 的值，而.attr()方法返回attributes的值。

  1. .removeAttr()：为匹配的元素集合中的每个元素移除一个属性（attribute）。
  2. .removeProp()：为集合中匹配的元素删除一个属性（property）。
  3. .val()：获取匹配的元素集合中第一个元素的当前值。

更多内容请参考：jQuery 中文文档

本文参考： jQuery 中文文档
阮一峰：《jQuery设计思想》

avatar
文章
阅读
粉丝