jQuery 功能简介

jQuery 功能简介

jQuery 的基本思想是选取元素再对其操作,操作时特点是可以进行链式操作。

通过设置别名,可以将 jQuery 简写成 $。

获取元素

$(选择器) 用于获取元素

选择器的规则详见 选择器

举例一些常用获取元素的表达式

  • $('#myId') 选择 id 为 myId 的网页元素

  • $('div.myClass') 选择 class 为 myClass 的 div 元素

  • $('input[name=first]') 选择 name 属性等于 first 的 input 元素

  • $('a: first') 选择网页中第一个 a 元素

  • $('tr: odd') 选择表格的奇数行

  • $('#myForm: input') 选择表单中的 input 元素

    类似的有 $('#myForm: submit'), $('#myForm: text'), $('#myForm: selected'), $('#myForm: password'), $('#myForm: radio') ....

  • $('div: visibile') 选择可见的 div 元素

  • $('div: gt(2)') 选择所有的 div 元素,除了前三个(索引值大于等于2)

  • $('div: animated') 选择当前处于动画状态的 div 元素

链式操作

因为每一步的 jQuery 操作都是返回 jQuery 对象,所以可以将不同的操作依次连着写,即链式操作。

$('div').find('h3').eq(2).html('Hello'),最终实现的结果是找到div元素中的第三个h3元素,将其内容改成 Hello

jQuery 还提供了 end() 方法,能使获取的元素回退到上一次的结果,如

$('div') // 选择的是 div 元素
.find('h3') // 选择的是 div 元素中的 h3 元素
.eq(2) // 选择的是 div 元素中第三个 h3 元素
.html('Hello')
.end() // 回退到上一次结果,即选择的是 div 元素中的 h3 元素
.eq(0) // 选择的是div 元素中第一个 h3 元素
.html('World')

创建元素

创建元素只要把元素内容传入 jQuery 构造函数即可,如 $('<p>Hello</p>')

移动元素

移动可分为两类,一类是于外部移动后成为对方的兄弟,另一种是于内部移动后成为对方的子女。

执行完移动操作后不改变选中的元素

  • 外部移动

    • $('div').insertAfter($('p')) 将 div 元素移动到 p 元素后面

      div 是 p 的弟弟,执行完这次操作后选择的元素是 div

    • $('p').after($('div')) 使 p 元素的后面是 div 元素,即将 p 元素移到 div 元素前面

      div 是 p 的弟弟,执行完这次操作后选择的元素是 p

    • $('div').insertBefore($('p')) 将 div 元素移动到 p 元素前面

      div 是 p 的哥哥,执行完这次操作后选择的元素是 div

    • $('p').before($('div')) 使 p 元素的前面是 div 元素,即将 p 元素移到 div 元素后面

      div 是 p 的哥哥,执行完这次操作后选择的元素是 p

  • 内部移动

    • $('div').appendTo($('p')) 将 div 元素移动到 p 元素最后一个子元素后面

      div 是 p 的小儿子,执行完这次操作后选择的元素是 div

    • $('p').append($('div')) 给 p 元素添加一个尾部子元素 div,即将 div 元素移动到 p 元素最后一个子元素后面

      div 是 p 的小儿子,执行完这次操作后选择的元素是 p

    • $('div').prependTo($('p')) 将 div 元素移动到 p 元素第一个子元素前面

      div 是 p 的大儿子,执行完这次操作后选择的元素是 div

    • $('p').prepend($('div')) 给 p 元素添加一个头部子元素 div,即将 div 元素移动到 p 元素第一个子元素前面

      div 是 p 的大儿子,执行完这次操作后选择的元素是 p

查看或修改元素属性

jQuery 使用同一个函数来实现查看或修改,通过传入参数的不同来决定。

$('h1').html() // html() 没有传入参数,表示查看 h1 的值
$('h1').html('Hello') // html() 有参数,表示修改 h1 的值为 'Hello'
$("em").attr("title"); // attr() 只有参数 attributeName 'title' 表示查看 em 元素 title 标签的值
$("em").attr("title", "World"); // attr() 有参数 attributeName 'title' 及 value 'World' 表示修改 em 元素 title 标签的值为'World' 

常见的取值赋值函数有

  • .html() 查看或修改 html 内容
  • .text() 查看或修改 text 内容
  • .attr() 查看或修改某个属性的值
  • .width() / .height() 查看或修改某个元素的宽度/高度
  • .val() 查看或修改某个表单元素的值

注意如果选中的元素集包括多个元素,那么赋值的时候会对其中所有元素赋值;取值的时候只取其中第一个的值。(.text() 除外,它取出所有元素的 text 内容)

参考

jQuery设计思想

jQuery API 中文文档

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 原文地址作者: 阮一峰 由于jQuery十分值得学习,对于其的总结已经十分精辟,选取该文章以帮助以自己学习。 一、...
    2b61575c37fd阅读 767评论 0 0
  • 【目录】 一、选择网页元素 二、改变结果集 三、链式操作 四、元素的操作:取值和赋值 五、元素的操作:移动 六、元...
    L怪丫头阅读 1,898评论 0 1
  • 一、选择网页元素 选择表达式可以是CSS选择器: $(document)//选择整个文档对象 $('#myId')...
    孤魂草阅读 2,905评论 0 1
  • jquery介绍 : jQuery是目前使用最广泛的javascript函数库,jquery是一个函数库,一个js...
    末版车阅读 2,817评论 0 0
  • jquery介绍 : jQuery是目前使用最广泛的javascript函数库,jquery是一个函数库,一个js...
    dream_seeker阅读 1,352评论 0 0