jQuery 简介

jQuery 是一个快速，简洁的 JavaScript 库，通过易于使用的API（跨浏览器），它使HTML文档的遍历和操作，事件处理，动画和Ajax等事情变得更加简单。

  • jQuery 是目前前端最长寿的库，2006年发布
  • jQuery 是世界上使用最广泛的库，排名前100万的的网站有80%的网站在使用

jQuery的基本设计思想和主要用法，就是”选择某个网页元素，然后对其进行某种操作”。这是它区别于其他Javascript库的根本特点。

目录

1.jQuery 如何获取元素

2.jQuery 的链式操作是怎样的

3.jQuery 如何创建元素

4.jQuery 如何移动元素

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

正文

1.jQuery 如何获取元素

使用jQuery的第一步，往往就是将一个选择表达式，放进构造函数jQuery()（简写为$），然后得到被选中的元素。

1.1.选择表达式为CSS选择器

  1. $(document) // 获取整个文档对象
  2. $('#myId') // 选择ID为xxx的元素
  3. $('div.myClass') // 选择class为myClass的div元素
  4. $('input[name=first]') // 选择name属性等于first的input元素

1.2.选择表达式为jQuery特有的表达式

  1. $('a:first') // 选择网页中第一个a元素
  2. $('tr:odd') // 选择表格的奇数行
  3. $('#myForm :input') // 选择表单中的input元素
  4. $('div:visible') // 选择可见的div元素
  5. $('div:gt(n)') // 选择所有的div元素，除了前n+1个
  6. $('div:animated') // 选择当前处于动画状态的div元素

1.3.改变结果集

  • [x] jQuery 提供了一些强大的过滤器

    1. $('div').has('p') // 选择包含p元素的div元素
    2. $('div').not('.myClass') // 选择class不等于myClass的div元素
    3. $('div').filter('.myClass') // 选择class等于myClass的div元素
    4. $('div').first() // 选择第1个div元素
    5. $('div').eq(5) // 选择第6个div元素

  • [x] 从结果集出发，移动到附近的相关元素

    1. $('div').next('p') // 选择div元素后面的第一个p元素
    2. $('div').parent() // 选择div元素的父元素
    3. $('div').closest('form') // 选择离div最近的那个form父元素
    4. $('div').children() // 选择div的所有子元素
    5. $('div').siblings() // 选择div的同级元素

    2.jQuery 的链式操作是怎样的

  • jQuery 最终选中网页元素以后，可以对它进行一系列操作，并且所有操作可以连接在一起，以链条的形式写出来，比如：

    1. $('div').find('h3').eq(2).html('Hello')

  • 分解开来，就是下面这样：

    1. $('div') // 找到所有的div元素
    2. .find('h3') // 获取其中所有的h3元素
    3. .eq(2) // 选择第3个h3元素
    4. .html('Hello') // 将它的内容改为Hello

  • [x] 链式操作是 jQuery 最令人称道、最方便的特点

  • 原理是每一步的jQuery操作，返回的都是一个jQuery对象

  • 并且 jQuery 还提供了 .end() 操作，使得结果集可以后退一步，示例如下：

    1. $('div')
    2. .find('h3')
    3. .eq(2)
    4. .html('Hello')
    5. .end() // 退回到选中所有的h3元素的那一步
    6. .eq(0) // 选中第一个h3元素
    7. .html('World') // 将它的内容改为World

    3.jQuery 如何创建元素

    创建新元素的方法非常简单，只要把新元素直接传入jQuery的构造函数就行了，如下：

    1. $('<p>Hello</p>')
    2. $('<li class="new">new list item</li>')
    3. $('ul').append('<li>list item</li>')

    4.jQuery 如何移动元素

  • 两种方法来操作元素在网页中的位置移动。

  • 一种是直接移动该元素（改变自己）
  • 另一种是移动其他元素，使得目标元素达到我们想要的位置（改变他人）

  • 示例：假定我们选中了一个div元素，需要把它移动到p元素后面

    • 方法一：使用 .insertAfter()，把div元素移动p元素后面：

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

    • 方法二：使用 .after()，把p元素加到div元素前面

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

  • [x] 以上示例，表面上看两种方法的效果是一样的，唯一的不同似乎只是操作视角的不同。但是实际上，它们有一个重大差别，那就是返回的元素不一样。第一种方法返回div元素，第二种方法返回p元素（返回的都为前面的元素）。你可以根据需要，选择到底使用哪一种方法。

  • 也可以一次性创建内容并将其插入到几个相同的元素后面，如下：

    1. $( "<p>hello</p>" ).insertAfter( ".test" )
    2. $( ".test" ).after( "<p>hello</p>" )

    新建内容为 hello 的 p 标签，插入到所有 class 为 test 元素后面

  • 使用这种设计模式的的操作方法，一共有四对：

  • .insertAfter() 和 .after()：在现存元素的外部，从后面插入元素（同级元素）
  • .insertAfter()：就是把前面的元素放到后面的元素后面，.after() 则相反
  • .insertBefore() 和 .before()：在现存元素的外部，从前面插入元素（同级元素）
  • .insertBefore()：就是把前面的元素放到后面的元素前面， .before() 则相反
  • .appendTo() 和 .append()：在现存元素的内部，从后面插入元素（作为最后一个子元素插入）
  • .appendTo()：就是把前面的元素作为最后一个子项插入到后面元素， .append() 则相反
  • .prependTo() 和 .prepend()：在现存元素的内部，从前面插入元素（作为第一个子元素插入）

  • [ ] .prependTo() ：就是把前面的元素作为第一个子项插入到后面的元素， .prepend() 则相反

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

    5.1.元素的操作：取值和赋值

    jQuery 的思想是使用同一个函数，来完成取值（getter）和赋值（setter），即”取值器”与”赋值器”合一。到底是取值还是赋值，由函数的参数决定。

    1. $('h1').html() // html()没有参数，表示取出h1的值
    2. $('h1').html('Hello') // html()有参数Hello，表示对h1进行赋值

  • [x] 常见的取值和赋值函数如下：

    1. .html(?) // 取出或设置html内容
    2. .text(?) // 取出或设置text内容
    3. .attr('title',?) // 取出或设置某个属性的值
    4. .width() // 取出或设置某个元素的宽度
    5. .height() // 取出或设置某个元素的高度
    6. .val() // 取出某个表单元素的值

    需要注意的是，如果结果集包含多个元素，那么赋值的时候，将对其中所有的元素赋值；取值的时候，则是只取出第一个元素的值（ .text() 例外，它取出所有元素的 text 内容）。

    5.2.元素的操作：复制、删除、以及一些其他的常用操作

    | 功能 | API | 备注 | | :—-: | :—-: | :—-: | | 复制元素 | .clone() | | | 删除元素 | .remove() | 不保留被删除元素的事件 | | | .detach() | 保留被删除元素的事件，有利于重新插入文档时使用 | | 清空元素内容 | .empty() | 不删除该元素 | | 添加类 | .addClass() | 参数可为 className / fn | | 删除类 | .removeClass() | | | 确定元素是否有改类 | .hasClass() | 返回 true / false | | 读写 style | .css({color:’red’}) | 不同于CSS里的是 .style |

参考资料：
阮一峰-jQuery设计思想
jQuery 中文文档