第一章
jQuery简介
jQuery是一个JavaScript库
jQuery具备简洁的语法和跨平台的兼容性
简化了JavaScript的操作。
在页面中引入jQuery
jQuery是一个JavaScript脚本库,不需要特别的安装,只需要我们在页面 <head> 标签内中,通过 script 标签引入jQuery 库即可,可以使用以下两种方法: 引入本地jQuery库 从远程CDN中载入jQuery, 如从百度中加载jQuery
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>环境搭建</title> <!--本地引入--> <script type="text/javascript" src="js/jquery.js"></script> <!--远程CDN引入--> <!-- <script src=”http://libs.baidu.com/jquery/1.9.1/jquery.min.js”></script>--> </head> <body> </body> </html>
jQuery 语法
jQuery语法是为HTML元素的选取编制的,可以对元素执行某些操作。 基础语法是:$(selector).action() 美元符号定义 jQuery 选择符(selector)“查询”和“查找” HTML 元素 jQuery 的 action() 执行对元素的操作
示例 $(this).hide() - 隐藏当前元素
$("p").hide() - 隐藏所有段落
$(".test").hide() - 隐藏所有 class="test" 的所有元素
$("#test").hide() - 隐藏所有 id="test" 的元素
jQuery文档就绪函数
jQuery对象与DOM对象的对比
通过jQuery方法包装后的对象,是一个数组对象,而DOM对象就是一个单独的DOM元素。它与DOM对象完全不同,唯一相似的是它们都能操作DOM;
jQuery对象是jQuery独有的,如果一个对象是jQuery对象,那么它就可以使用jQuery 里的方法: $(“#p1”).html();
jQuery对象无法使用DOM对象的任何方法, 同样DOM对象也不能使用jQuery里的任何方法;
约定:如果获取的是 jQuery 对象, 那么要在变量前面加上 $. var $variable = jQuery 对象 var variable = DOM 对象
第二章
jQuery选择器是什么?
选择器是jQuery的根基,在jQuery中,对事件处理,遍历DOM和Ajax操作都依赖于选择器。如何能熟练地使用选择器,不仅能简化代码,而且可以达到事半功倍的效果。
学习jQuery选择器,必须了解CSS(Cascading Sytle Sheets,层叠样式表)技术。它使得网页的结构和表现样式完全分离。利用CSS选择器能轻松地对某个元素添加样式而不改动HTML结构,只需通过添加不同的CSS规则,就可以得到各种不同样式的网页。要使某个样式应用特定的HTML元素,首先要找到该元素,执行这一任务的表现规则称为CSS选择器。
CSS的选择器
常用CSS选择器如下表
jQuery选择器
jQuery中的选择器完全继承CSS的风格。利用jQuery选择器,可以非常便捷和快速地找出特定的DOM元素,然后为他们添加相应的行为,而无需担心浏览器是否支持这一选择器。
jQuery选择器的优点:
简洁的写法:
完善的事件处理机制
内容过滤器 Content Filters
内容过滤选择器的过滤规则主要体现在它所包含的子元素和文本内容上
可见性过滤器 Visibility Filters
可见性过滤选择器是根据元素的可见和不可见状态来选择相应的元素
可见选择器 :hidden 不仅包含样式属性 display 为 none 的元素, 也包含文本隐藏域 (<input type=“hidden”>)和 visible:hidden 之类的元素
属性过滤器 Attribute Filters
属性过滤选择器的过滤规则是通过元素的属性来获取相应的元素
子元素过滤选择器:
nth-child() 选择器详解如下:
(1) :nth-child(even/odd): 能选取每个父元素下的索引值为偶(奇)数的元素
(2):nth-child(2): 能选取每个父元素下的索引值为 2 的元素 (3):nth-child(3n): 能选取每个父元素下的索引值是 3 的倍数 的元素
(3):nth-child(3n + 1): 能选取每个父元素下的索引值是 3n + 1的元素
表单对象属性过滤选择器 Form Filters
基本选择器 Basics
基本选择器是 jQuery 中最常用的选择器, 也是最简单的选择器, 它通过元素 id, class 和标签名来查找 DOM 元素(在网页中 id 只能使用一次, class 允许重复使用).