jQuery

jQuery 概述

1. jQuery 是一个优秀的 JavaScript 框架，是一个轻量级的 js 库；
2. 封装了 js、css、DOM,提供了一致的、简介的 API ；
3. 使用户的 html 页面保持代码和 html 内容的分离；
4. 使用户更方便的处理 html、Events、实现动画效果，并且更方便的为网站提供 AJAX 交互；
5. 兼容 css3 及各种浏览器。

jQuery 使用步骤

1. 引入 jQuery 的 js 文件
2. 使用选择器定位要操作的节点
3. 调用 jQuery 方法对相应节点进行操作

jQuery 对象

1. jQuery 为了解决 浏览器的兼容问题，提供了一种统一封装后的对象描述；
2. jQuery 提供的方法都是针对 jQuery 对象特有的，而且大部分方法返回值的类型也是 jQuery 对象，所以 jQuery 方法可以连缀调用；
3. 通过 jQuery 选择器选中的对象为 jQuery 对象；

jQuery 对象与 DOM 对象之间的关系

jQuery 对象本质上是一个 DOM 对象数组，它在该数组上扩展了一些操作数组中元素的方法。

• obj.length; 获取数组的长度
• obj.get(index); 获取数组中的某一个 DOM 对象
• obj[index]; 等价于 obj.get(index)
  DOM 对象可以直接转化为 jQuery 对象：$(DOM 对象)；

jQuery 选择器

1. 什么是 jQuery 选择器？
   jQuery 选择器类似于 CSS选择器（定位元素，施加样式），能够实现定位元素，施加行为。使用 jQuery 选择器能够将内容与行为分离。
2. 选择器的种类
   
   • 基本选择器
   • 层次选择器
   • 过滤选择器
   • 表单选择器

3. 各类选择器详解
   基本选择器

   • 元素选择器：依据表签名定位元素 $(“表签名”)
   • 类选择器：依据 class 属性定位元素 $(“.class属性名”)
   • id 选择器：依据 id 属性定位元素 $(“#id”)
   • 选择器组：定位一组选择器所对应的所有元素 $(“#id”,.important)

   层次选择器

   • 在 select1 元素下，选中所有满足 select2 的子孙元素。
     $(“select1 select2”)
   • 在 select1 元素下，选中所有满足 select2 的子元素
     $(“select1 > select2”)
   • 选中 select1 元素的，满足 select2 的下一个弟弟
     $(“select1 + select2”)
   • 选中 select1 元素的，满足 select2 的所有弟弟
     $(“select1 ~ select2”)

   过滤选择器

   1. 基本过滤选择器
      根据元素的基本特征定位元素，常用于表格和列表

基本过滤选择器 含义 :first 第一个元素 :last 最后一个元素 :not(selector) 把 selector 排除在外 :even 挑选偶数行 :odd 挑选奇数行 eq(index) 下标等于 index 的元素 gt(index) 下标大于 index 的元素 It(index) 下标小于 index 的元素

$("tr:first")

2 . 内容过滤选择器
根据文本内容定位元素

内容过滤选择器 意义 :contains(text) 匹配包含给定文本的元素 :empty 匹配所有不包含子元素或文本的空元素

$("p:contains('月饼')")

3 . 可见性过滤选择器
根据可见性定位元素

可见性过滤选择器 意义 :hidden 匹配所有不可见元素，或 type 为 hidden 的元素 :visible 匹配所有的可见元素

$("input:hidden")

4 . 属性过滤选择器
根据属性定位元素

属性过滤选择器 意义 [attribute] 匹配具有 attribute 属性的元素 [attribute=value] 匹配属性等于 value 的元素 [attribute != value] 匹配属性不等于 value 的元素

$("input[value='您好']")

5 . 状态过滤选择器
根据状态定位元素

内容过滤选择器 意义 :enabled 匹配可用的元素 :disabled 匹配不可用的元素 :checked 匹配选中的 checkbox :selected 匹配选中的 option

$("input:selected")

表单选择器

表单选择器 含义 :text 匹配文本框 :password 匹配密码框 :radio 匹配单选框 :checkbox 匹配多选框 :submit 匹配提交按钮 :reset 匹配重置按钮 :button 匹配普通按钮 :file 匹配文件筐 :hidden 匹配隐藏框

$(":text")

jQuery 操作 DOM 节点