jQuery的设计思想及功能

99 阅读2分钟

核心思想

jQuery是一个函数,也可以说是一个非严格意义上的构造函数。jQuery巧妙的运用到了“闭包、链式操作”。与其他函数不同,它的返回值是一个对象,简称"jQuery"对象。该对象具有一些方法,可以操作获(增删改查)取到的元素。简写$.

获取元素

  • 选择表达式可以是css选择器
$(document)
$("#red")
$("input[name=blue]") // 选择name属性为blue的input元素

  • 特有表达式
$('a:first') //选择网页中第一个a元素
$('tr:odd') //选择表格的奇数行
$('#myForm :input') // 选择表单中的input元素
$('div:visible') //选择可见的div元素
$('div:gt(2)') // 选择所有的div元素,除了前三个
$('div:animated') // 选择当前处于动画状态的div元素

(来自阮一峰)
  • 其他
$('div').has('p'); // 选择包含p元素的div元素
$('div').not('.myClass'); //选择class不等于myClass的div元素
$('div').filter('.myClass'); //选择class等于myClass的div元素
$('div').first(); //选择第1个div元素
$('div').eq(5); //选择第6个div元素
$('div').next('p'); //选择div元素后面的第一个p元素
$('div').parent(); //选择div元素的父元素
$('div').closest('form'); //选择离div最近的那个form父元素
$('div').children(); //选择div的所有子元素
$('div').siblings(); //选择div的同级元素

(来自阮一峰)

移动元素

移动元素有两种方法:直接移动和移动其他元素,使目标元素达到我们想要的位置。

$('p').after($('div'))// 把p元素加到div的后面,返回值是p;

$('div').insertAfter($('p'));// 把div移动到p的后面,返回值是div

共有四组:

.insertAfter()和.after() //在现存元素的外部,从后面插入元素

.insertBefore()和.before()//在现存元素的外部,从前面插入元素

.appendTo()和.append()//在现存元素的内部,从后面插入元素

.prependTo()和.prepend()//在现存元素的内部,从前面插入元素

元素的删除、克隆和创建

  • .clone()
  • .remove()和.detach(),后者保留被删除元素的事件
  • .empty()//清空元素内容,但不删除该元素

取值和赋值

  • (h1).html();//html()没有参数表示取出h1的值,有参数表示对h1进行赋值,如:('h1').html();//html()没有参数表示取出h1的值,有参数表示对h1进行赋值,如:('h1').html('hello'),把hello赋值给h1。
  • .attr()同理读取属性和修改属性

链式操作

链式操作实质上是jQuery函数的返回值是其构造的对象,用来操作选取的元素,所以可以直接“.find()/.addClass()...”