为了简化javascript的开发,诞生了一些JavaScript库。jQuery是一个快速、简洁的JavaScript框架,是一个优秀的JavaScript代码库(或JavaScript框架)。jQuery设计的宗旨是“write Less,Do More”,即倡导写更少的代码,做更多的事情。它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化html文档操作、事件处理、动画设计和Ajax交互。
1. 发展历程:Javascript到jQuery:
1) Javascript弊端:
1.复杂的文档对象模型(DOM)
2.不一致的浏览器实现等
2) Javascript库
为了简化Javascript的开发,Javascript库封装了很多预定义的对象和使用函数。
3) jQuery
JQuery就是js的一个库(其实就是别人给我们封装好的js文件,简化我们平时的js中的代码操作)。jQuery 简洁的语法和跨平台的兼容性,极大的简化了Javascript开发人员遍历HTML文档,操作DOM,处理事件,执行动画和开发AJAX,其理念:write less,do more
jQuery优势:
1 轻量级
2 强大的选择器
3 出色的DOM操作的封装
4 可靠的事件处理机制
5 完善的Ajax,$.ajax()无需关心复杂的浏览器兼容性和XMLHttpRequest对象的创建和使用
6 不污染顶级变量,只建立一个名为jQuery对象,其所有函数方法都在这个对象之下. $("") jQuery("")
7 出色的浏览器兼容性
8 链式操作方式,发生在同一个jquery对象上的一组动作,可以直接连写而不用重复获取对象
jqnode.css(,).attr(,).css()
jsnode.style....=
jsnode.value=...
jQuery官网
http://jquery.com/
jQuery API中文文档
http://www.css88.com(注意,使用哪个版本看哪个版本的API)
jquery库类型
一般jquery库都有两个,一个为学习版,一个为项目版
完整版本 : jquery.js 主要用于测试,学习和开发
mini版本 : jquery.min.js 主要用于产品和项目
2. jQuery的使用
jQuery不需要安装,想要在某个页面上使用jQuery时,只需要在相关的html中引入jQuery的库文件即可。
例如:
<html> <head> <!--导入jquery库--> <script type="text/javascript" src="js/jquery-2.1.4/jquery.min.js"></script> <script type="text/javascript"> //书写js代码 </script> </head> <body> </body> </html>
3. jQuery函数
jQuery库只提供了一个叫jQuery的函数,该函数中预定义了大量的方法,方便jQuery对象和jQuery函数调用。jQuery/$(参数).
jQuery函数具有四种参数:
1) 参数为选择器(字符串)
jQuery函数通过该选择器获取对应的DOM,然后将这些DOM封装到一个jQuery对象中并返回(选择器)
2) 参数为DOM对象(即Node的实例)
jQuery函数将该DOM封装成jQuery对象并返回。
3) 参数为HTML文本字符串
jQuery函数会根据传入的文本创建好HTML元素并封装成jQuery对象返回
$("<div class=‘one‘>one<div>");
4) 参数为一个匿名函数
$(function(){
});
当文档结构加载完毕之后jQuery函数调用匿名函数
4.jQuery 语法
jQuery 语法是为 HTML 元素的选取编制的,可以对元素执行某些操作。
基础语法是:$(selector).action()
美元符号定义 jQuery
选择符(selector)“查询”和“查找” HTML 元素
jQuery 的 action() 执行对元素的操作
5. jQuery选择器
(查找节点,jQuery的选择机制构建于Css的选择器,它提供了快速查询DOM文档中元素的能力,而且大大强化了
JavaScript中获取页面元素的方式,另外,它还有一些自定义的选择器。)
$("字符串(选择器)")
1) 基本选择器
所有选择器 *
标签选择器 标签名
ID选择器 #ID
类选择器 .className
群组选择器 selector1,selector2
多个选择器使用,分割,取并集
复合选择器 selector1selector2
多个选择器组合使用,取交集
2) 层次选择器
后代选择器 selector1 selector2
两个选择器使用空格隔开,表示可以获取当前元素的子代以及孙子代等后代元素
子代选择器 selector1>selector2
两个选择器使用>隔开,表示只能获取当前选中元素的子代元素
3) 兄弟选择器
下一个兄弟选择器 selector1+selector2
两个选择器使用+隔开,表示可以获取当前元素下一个兄弟元素,下一个兄弟元素要能符合selector2
之后所有兄弟选择器 selector1~selector2
两个选择器使用~隔开,表示可以获取当前元素之后的所有兄弟元素,之后所有兄弟元素要能符合selector2