jQuery基本原理 1

jQuery基本原理 

 

jQuery

是目前使用最广泛的

javascript

函数库。

据统计，

全世界排名前

100

万的网站，

有

46%使用

jQuery，

远远超过其他库。微 软公司甚至把

jQuery

作为他们的官方库。对于网页开发者来说，学会

jQuery

是

必要的。因为它让你了解业界最通用的技术，为将来学习更高级的库打下 基础，并且确实可以很轻松

地做出许多复杂的效果。 

51CTO推荐专题：

jQuery从入门到精通

 

一、选择网页元素jQuery的基本设计和主要用法，就是"选择某个网页元素，然后对其进行某种操作"。

这是它区别于其他函数库的根本特点。

 

使用

jQuery

的第一步，往往就是将一个选择表达式，放进构造函数

jQuery()(简写为$)，然后得到被选

中的元素。 

选择表达式可以是

CSS

选择器： 

1.

 

$(document)//选择整个文档对象   

2.

 

$('#myId')//选择

ID

为

myId

的网页元素     

3.

 

$('div.myClass')//选择

class

为

myClass

的

div

元素       

4.

 

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

也可以是

jQuery

特有的表达式： 

1.

 

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

2.

 

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

3.

 

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

4.

 

$('div:visible') //选择可见的div元素     

5.

 

$('div:gt(2)')//选择所有的div元素，除了前三个     

6.

 

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

二、改变结果集

 

如果选中多个元素，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元素  

有一些时候，

我们需要从结果集出发，

移动到附近的相关元素，

jQuery

也提供了在

DOM

树上的移动方法：

 

1.

 

$('div').next('p'); //选择div元素后面的第一个p元素     

2.

 

$('div').parent(); //选择div元素的父元素     

3.

 

$('div').closest('form'); //选择离div最近的那个form父元素     

4.

 

$('div').children(); //选择div的所有子元素     

5.

 

$('div').siblings(); //选择div的同级元素  

三、链式操作

 

选中网页元素以后，就可以对它进行某种操作。 

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  

这是

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  

四、元素的操作：取值和赋值

 

操作网页元素，最常见的需求是取得它们的值，或者对它们进行赋值。 

jQuery

使用同一个函数，来完成取值(getter)和赋值(setter)。到底是取值还是赋值，由函数的参数决

定。 

1.

 

$('h1').html(); //html()没有参数，

表示取出h1

的值 $('h1').html('Hello'); //html()有

参数Hello，表示对h1

进行赋值     

2.

 

常见的取值和赋值函数如下：   

3.

 

.html()     

4.

 

.text() 取出或设置

text

内容     

5.

 

.attr() 取出或设置某个属性的值     

6.

 

.width() 取出或设置某个元素的宽度     

7.

 

.height() 取出或设置某个元素的高度     

8.

 

.val()  取出或设置

html

内容 取出某个表单元素的值  

取出或设置

html

内容 取出某个表单元素的值 

需要注意的是，如果结果集包含多个元素，那么赋值的时候，将对其中所有的元素赋值;取值的时候，

则是只取出第一个元素的值(.text()例外，它取出所有元素的

text

内容)。