小博老师解析JavaWeb核心技术 ——JQuery基础

引言

很多小伙伴看完AJAX系列最后一回，感觉JQuery真的是太好用了，问小傅老师能否详细聊聊JQuery。好吧，这系列小傅老师就带大家一起学习学习jQuery的详细使用。

JQuery

前面介绍过了jquery，可能有些小伙伴第一次看小傅老师的文章，这里做下简单回顾。

jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

小伙伴可以参考以下网页，来获取jQuery更多信息

百度百科：http://baike.baidu.com/link?url=_bCd8AArn9X1fb8i0koSIFzaaqZb8Vjymx9NsRL6DZkDk71mJQwrYpSVp6G3XmWWT3DR7XbrGFIkkKMh4l6MQq

jQuery官网:

http://jquery.com/

要使用jQuery先要取得库存文件，然后引入到网页中。

选择器

选择器作为jQuery的核心，它用优雅的方式取到网页元素，可以大幅减少JS代码。选择器取到是经过包装后的网页元素，我们称 其为JQUERY对象，可以使用JQUERY中方法。Jquery提供多种类型的选择器，比如id选择器、元素选择器、类选择器、属性选择器、组合选择器等等。下面小傅老师将常用的选择器介绍给小伙伴们。

Id选择器

Id选择器是最常用的选择器之一，以之对应的是原始JS中getElementById()方法。

Id选择器的语法非常简单





如果我们id值为b100的按钮元素，用原始的JS怎么写呢。对了，我们要借助于getElementById()方法。





再用id选择器试试





怎么样是不是很简单，可能有学员感觉也少不了代码多少啊。在小傅老师看来选择器至少消除小伙伴们单词忘记或拼写错误的问题，而且当JS中有大量取得元素的代码时，选择器的优式就很明显了。

细心的小伙们发现二种方式的变量名称命名不一样，小傅老师将选择器取到的元素保存到带$前缀的变量中。在编程中我们可以这样约定，jquery类型的变量前加【$】与原始JS取得到元素区分开来。因为getElementById()方法取到的是DOM对象，它是不能使用JQUERY中提供的方法。

元素选择器

元素选择器根据元素的名称来取得，与之对应的原始JS方法为getElementsByName()。

语法





如要取得页面上所有的input元素，可采用原生JS写法





元素选择器就很方便





小傅老师要提下，页面上id值是唯一的而相同元素可以有多个，所以ID选择器返回的是一个对象，元素选择器是返回一组对象的集合。

类选择器

当我们要取得元素名称不一样的几个元素时，原生JS是没有办法做到。Jquery可以方便、快速取得类名称取得类名称相同的一组不同类型的元素。

类选择器语法





以下代码为取得类名称为“fjh”的所有元素

属性选择器

HTML中的input元素修改其type属性可以变换成不同的控件，如要取得网页上的所有单行文本输入元素，就可以使用属性选择器了。

属性选择器语法





下面代码可以取得所有按钮





JQUERY提供了丰富的选择器，以上介绍的几种都是使用中最常见的，起到抛砖引玉的作用。更多的选择器内容可以到JQUERY官网取得，再加上自己的实际操作，小傅老师相信你一定会很快掌握选择器的使用。