JQuery学习笔记

00 jQuery介绍

jQuery是js库，
库：相当于java的工具类，库是存放东西的， jQuery是存放js代码的地方， 放的用js代码写的function

01 DOM 对象和 jQuery 对象

DOM 对象是用 JavaScript 语法创建的对象，也看做是 js 对象。

1.1 DOM 对象转换 jQuery 对象：$(DOM 对象)

使用$(DOM 对象) 方式，可以 DOM 对象转换为 jQuery 对象， 转换为 jQuery 对象才可以使用 jQuery 中的提供的方法，操作 DOM 对象。一般情况下，在命名 jQuery 对象时，为了与 DOM 对象进行区分，习惯性的以$ 开头，这不是必须的。
例：
新建 html 页面文件 domTojQuery.html
1.页面加入按钮 button
2.转换 DOM 对象

1.2 jQuery 对象转为 DOM 对象：get(0) 方式与下标[0]

jQuery 对象本身为数组对象，该数组中的第 0 个元素即为该 jQuery 对象对应的 DOM对象。所以有两种方式可以获取到 DOM 对象：get(0) 方式与下标[0]

02 选择器

选择器: 就是定位条件；通知 jquery 函数定位满足条件的 DOM 对象

2.1 基本选择器

2.1.1 id 选择器

语法：$(“#id”)

2.1.2 class 选择器

语法：$(“.class 名称”)

2.1.3 标签选择器

语法：$(“标签名”)

2.1.4 所有选择器

语法：$(“*”) 选取页面中所有 DOM 对象。

2.1.5 组合选择器

组合选择器是多个被选对象间使用逗号分隔后形成的选择器，可以组合 id，class，标签名等。
语法：$(“id,class,标签名”)

2.2 表单选择器

表单相关元素选择器是指文本框、单选框、复选框、下拉列表等元素的选择方式。该方法无论是否存在表单，均可做出相应选择。表单选择器是为了能更加容易地操作表单，表单选择器是根据元素类型来定义的

<input type="text">
<input type="password">
<input type="radio">
<input type="checkbox">
<input type="button">
<input type="file">
<input type="submit">
<input type="reset">

$(“:tr”): 不能用，tr 不是 input 标签
语法： $(“:type 属性值”)
例如：
$(“:text”)选取所有的单行文本框

$(“:password”)选取所有的密码框

$(“:radio”)选取所有的单选框

$(“:checkbox”)选取所有的多选框

$(“:file”)选取所有的上传按钮

03 过滤器

3.1 基本过滤器

3.1.1 选择第一个 first, 保留数组中第一个 DOM 对象

语法：$(“选择器:first”)

3.1.2 选择最后个 last, 保留数组中最后 DOM 对象

语法：$(“选择器:last”)

3.1.3 选择数组中指定对象

语法：$(“选择器:eq(数组索引)”)

3.1.4 选择数组中小于指定索引的所有 DOM 对象

语法：$(“选择器:lt(数组索引)”)

3.1.5 选择数组中大于指定索引的所有 DOM 对象

语法：$(“选择器:gt(数组索引)”)

3.2 表单对象属性过滤器

3.2.1 选择可用的文本框

$(“:text:enabled”)

3.2.2 选择不可用的文本框

$(“:text:disabled”)

3.2.3 复选框选中的元素

$(“:checkbox:checked”)

3.2.4 选择指定下拉列表的被选中元素

选择器>option:selected

04 函数

4.1 val

操作数组中 DOM 对象的 value 属性.

$(选择器).val() ：无参数调用形式， 读取数组中第一个 DOM 对象的 value属性值

$(选择器).val(值)：有参形式调用;对数组中所有 DOM 对象的 value 属性值进行统一赋值

4.2 text

操作数组中所有 DOM 对象的【文字显示内容属性】

$(选择器).text():无参数调用，读取数组中所有 DOM 对象的文字显示内容，将得到内容拼接为一个字符串返回

$(选择器).text(值):有参数方式，对数组中所有 DOM 对象的文字显示内容进行统一赋值

4.3 attr

对 val, text 之外的其他属性操作

$(选择器).attr(“属性名”): 获取 DOM 数组第一个对象的属性值

$(选择器).attr(“属性名”,“值”): 对数组中所有 DOM 对象的属性设为新值

4.4 hide

$(选择器).hide() :将数组中所有 DOM 对象隐藏起来

4.5 show

$(选择器).show():将数组中所有 DOM 对象在浏览器中显示起来

4.6 remove

$(选择器).remove(): 将数组中所有 DOM 对象及其子对象一并删除

4.7 empty

$(选择器).empty()：将数组中所有 DOM 对象的子对象删除

4.8 append

为数组中所有 DOM 对象添加子对象
$(选择器).append(“<div>我动态添加的 div</div>”)

4.9 html

设置或返回被选元素的内容（innerHTML）。

$(选择器).html()：无参数调用方法，获取 DOM 数组第一个匹元素的内容。

$(选择器).html(值)：有参数调用，用于设置 DOM 数组中所有元素的内容。

4.10 each

each 是对数组，json 和 dom 数组等的遍历,对每个元素调用一次函数。

语法 1：$.each( 要遍历的对象, function(index,element) { 处理程序 } )
语法 2：jQuery 对象.each( function( index, element ) { 处理程序 } )

index: 数组的下标
element: 数组的对象

05 事件

为页面元素绑定事件，即对于指定页面元素，当某个事件发生后，执行指定动作

5.1 定义元素监听事件

语法：$(选择器).监听事件名称(处理函数)
例如：
为页面中所有的 button 绑定 onclick,并关联处理函数 fun1
$(“button”).click(fun1)

为页面中所有的 tr 标签绑定 onmouseover，并关联处理函数 fun2
$(“tr”).mouseover(fun2)

5.2 on() 绑定事件

on() 方法在被选元素上添加事件处理程序。

语法：$(选择器).on(event,date,function)

event：事件一个或者多个，多个之间空格分开
data：可选。规定传递到函数的额外数据，json 格式
function: 可选。规定当事件发生时运行的函数。

06 AJAX

jQuery 提供多个与 AJAX 有关的方法。通过 jQuery AJAX 方法，您能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSO同时能够把接收的数据更新到 DOM 对象

6.1 $.ajax()

$.ajax() 是 jQuery 中 AJAX 请求的核心方法，所有的其他方法都是在内部使用此方法。

语法：$.ajax( { name:value, name:value, … } )

说明：参数是 json 的数据，包含请求方式，数据，回调方法等
type：规定请求的类型（GET 或 POST 等），默认是 GET， get，post 不用区分大小写

url：规定发送请求的 URL。

async ： 布尔值，表示请求是否异步处理。默认是 true

data：规定要发送到服务器的数据，可以是：string， 数组，多数是 json

dataType：期望从服务器响应的数据类型。jQuery 从 xml, json, text, html 这些中测试最可能的类型

• “xml” - 一个 XML 文档
• “html” - HTML 作为纯文本
• “text” - 纯文本字符串
• “json” - 以 JSON 运行响应，并以对象返回

contentType ：发送数据到服务器时所使用的内容类型。默认是：
“application/x-www-form-urlencoded”。

error(xhr,status,error)：如果请求失败要运行的函数, 其中 xhr, status, error 是自定义的形参名

success(result,status,xhr)：当请求成功时运行的函数，其中 result, status, xhr 是自定义的形参名

以上是常用的参数。 error() , success()中的 xhr 是 XMLHttpRequest 对象。

6.2 $.get()

$.get() 方法使用 HTTP GET 请求从服务器加载数据。

语法：$.get(url,data,function(data,status,xhr),dataType)

url 必需 规定您需要请求的 URL。
data 可选 规定连同请求发送到服务器的数据。
function(data,status,xhr)可选 当请求成功时运行的函数。data,status,xhr 是自定义形参名。
参数说明：

• data - 包含来自请求的结果数据
• status - 包含请求的状态（“success”、“notmodified”、“error”、“timeout”、“parsererror”）
• xhr - 包含 XMLHttpRequest 对象

dataType 可选 规定预期的服务器响应的数据类型。默认地，jQuery 会智能判断。可能的类型：

• “xml” - 一个 XML 文档
• “html” - HTML 作为纯文本
• “text” - 纯文本字符串
• json" - 以 JSON 运行响应，并以对象返回

6.3 $.post()

$.post() 方法使用 HTTP POST 请求从服务器加载数据。

语法：$.post(URL,data,function(data,status,xhr),dataType)

参数同$get()