初识jQuery

---

一、jQuery简介

• jQuery由美国人John Resig于2006年创建
• jQuery是目前最流行的JavaScript程序库，它是对JavaScript对象和函数的封装
• 它的设计思想是write less,do more

目前流行的JavaScript库

认识jQuery

jQuery的用途

1. 访问和操作DOM元素
2. 控制页面样式
3. 对页面事件进行处理
4. 扩展新的jQuery插件
5. 与Ajax技术完美结合

jQuery能做的JavaScript也都能做，但使用jQuery能大幅提高开发效率

jQuer的优势

1. 体积小，压缩后只有100KB左右
2. 强大的选择器
3. 出色的DOM封装
4. 可靠的事件处理机制
5. 出色的浏览器兼容性
6. 使用隐式迭代简化编程
7. 丰富的插件支持

配置jQuery环境

获取jQuery的最新版本

进入jQuery的官方网站(http://jquery.com)。在页面右侧的Download jQuery区域，下载最新版的jQuery库文件。

jQuery库类型说明

jQuery库分开发版和发布版

在页面中引入jQuery

将jquery-1.12.4.js放在目录js下，为了方便调试，在所提供的jQuery例子中引用时使用的是相对路径，在实际项目中，可以根据实际需要调整jQuery库的路径。

<script src="js/jquery-1.12.4.js" type="text/javascript"></script>

二、jQuery语法

$(document).ready()

$(document).ready()与window.onload类似，但也有区别

jQuery语法结构

$(selector).action();

• 工厂函数$()：将DOM对象转化为jQuery对象
• 选择器 selector：获取需要操作的DOM 元素

$(selector);

• 方法action()：jQuery中提供的方法，其中包括绑定事件处理的方法

jQuery操作页面元素

使用addClass( )方法为元素添加样式

jQuery 对象.addClass([样式名]);

使用css( )方法设置元素样式

css("属性","属性值") ;	//设置一个css属性
css({"属性1":"属性值1","属性2":"属性值2"...}) ;		//同时设置多个css属性

使用show( )、hide( ) 方法设置元素的显示和隐藏

$(selector).show( );	//显示
$(selector).hide( );	//隐藏

jQuery程序的代码风格

1. “$”等同于“ jQuery ”
2. 链式操作
   对一个对象进行多重操作，并将操作结果返回给该对象。
3. 隐式迭代
4. 添加注释
   

DOM对象和jQuery对象

DOM对象

直接使用JavaScript获取的节点对象

jQuery对象

使用jQuery包装DOM对象后产生的对象，它能够使用jQuery中的方法

注意： DOM对象和jQuery对象分别拥有一套独立的方法，不能混用

jQuery对象与DOM对象的互相转换

jQuery对象转换成DOM对象

jQuery对象是一个类似数组的对象，可以通过[index]和get(index)方法得到相应的DOM对象

DOM对象转换成jQuery对象

 使用$()函数进行转化：$(DOM对象)

jQuery对象命名一般约定以$开头

在事件中经常使用$(this)，this是触发该事件的对象

---