$在Jquery是合法标识符，也可以作为函数名

Jquery本质上是一个javascript的封装库

1.从JS到Jquery

(1)通过ID属性: document.getElementByld()

(2)通过class属性: getElementsByClassName()

(3)通过标签名: document.getElementsByTagName()

上面代码可以看出Javascript方法名太长了,大小写的组合太多了,编写代码效率,容易出错.

jQuery分别使用$(“#id”), $(“.class “),$(“标签名”)封装了上面的js方法。

$(document)是把document对象转换为JQuery对象

首先window.onload{} >>>$(document).ready(function(){})>>>>>>.$(function(){})>>>>>>window.jquery(function({}))>>>>>Jquery(function(){})

2.Dom对象与Jquery对象

dom对象:使用JavaScript创建的对象也叫做js对象

Jquery:使用Jquery语法表示的对象，都是数组，哪怕只有一个对象也是数组

以上两者可以相互转化

• dom->Jquery $(dom对象)

• Jquery->dom 从数组中取出一个元素就是dom对象 get或者下标索引

转化的提供只是为了获得Dom对象或者Jquery对象属性，只有是对应对象类型才可以获得对应对象的属性

3.Jquery基本选择器

1.ID选择器

语法:$(“#对象id”)

2.class选择题

语法:$(“.样式名”)

3.标签选择器

语法:$(“标签名”)

4.全部选择器

语法:$(“*”)

5.混合选择器

语法:$(“#对象id”,”.classname”,”标签名”)

6.表单选择器

只能用来选取表单，！！！与有无form组件无关！！！

语法:$(“:button”)选取所有的button

Jquery改css方法:

1. 定位Jquery对象

2. 调用css方法

3. css(“属性”，”值”)的方式修改

4. PS如果要修改多个样式css({“属性”:“值”,—–})#类似python

Jquery的val方法

1. 无参调用返回Jquery的value值

2. 有参调用设置Jquery的value值

4.Jquery过滤器

过滤器要配合选择器一起使用，也就是先定出数组，再筛选

语法:$(“选择器:过滤器”)

• 如取出button的第一个对象$(“:button:first”)

• 如取出button的最后一个对象$(“:button:last”)

• 如取出button的指定下标对象$(“:button:eq(下标)”)

• 如取出button的小于指定下标所有对象$(“:button:lt(下标)”)

• 如取出button的大于指定下标所有对象$(“:button:gt(下标)”)

注意对象在数组中的次序与html中出现次序一致,可以使用选择器配合下标直接获取

但是使用过滤器以后仍然是Jquery对象但是使用下标或者get方法以后就是dom对象了

5.定于元素监听事件

语法:$(选择器).监听事件名称(处理函数);

说明:监听事件名称是js事件中去掉on后的内容(全都是小写), js中的onclick的监听事件名称是click

实例:$(“button”).click(function(){})这种就支持了批量绑定事件因为选择器中对象可能有多个

6.表单属性过滤器

运用表单当前的可用与否的属性来过滤

• 可用:enabled

• 不可用:disabled

• 选中状态:checked

比如选中可用的文本框$(“:text:enabled”)、不可用的文本框$(“:text:disabled”)、选中的checkbox$(“:checkbox:checked”)

对于select 选择器>option:selected 其中>表示由父到子

7.函数(都是Jquery对象而言的)

一、val()

• 无参调用val，展示对象的value

• 有参调用val，设置对象的value

二、text()

• 无参调用text:Jquery所有dom对象拼接成一个字符串返回

• 有参调用text:Jquery为所有dom对象统一赋值的

三、attr()

为除了value与text其他的属性赋值的

• attr(“属性名”:”值”)给所有dom对象赋值

• attr(“属性名”)获取第一个dom对象的属性值

多重赋值还是{“key”:”value”,….}的方式

四、remove()

将数组中所有Dom对象及其子对象一并删除

五、empty()

将数组中所有Dom对象的子对象一并删除

六、append()

为数组中所有Dom对象添加子对象

语法:选择器.append(“

七、html()

设置或返回被选元素内容(innerhtml)

• 无参调用:获取第一个与选择器匹配的元素内容

• 有参调用:把所有匹配的元素的内容改为html中的内容

八、each()

对dom数组、数组、json等遍历，每个元素调用一次function

语法:$.each(可迭代对象,function(index,element){ //statement})//index为数组下标(json中是key，dom数组中也是下标)，element为数组的对象(json中是value,dom数组中是dom对象)

语法:Jquery对象.each(function(index,element))

8.on事件绑定方式

语法:$(选择器).on(event,function) 注:event可以有多个，用空格分开即可

通过配合append可以新增带有功能的按钮，这些用之前的 选择器.event也可以看做到，这种方式的有点体现在可以支持多个event

9.ajax请求处理⭐

$视作一个java类

ajax处理请求的核心函数$.ajax()

• $.post()用post请求做ajax

• $.get()用get请求做ajax

以上两者内部调用的其实是$.ajax()

AJAX()参数是一个JSON的结构，用函数参数表示URL，方式，参数值等等

比如$.ajax({“参数1″:”值1″，”参数2″，”值2”})

参数说明

• async : 布尔值，表示请求是否异步处理。默认是(true)

• contentType :发送数据到服务器时所使用的内容类型，可以不写。例如application/json

• data:规定要发送到服务器的数据，可以是:字符串，数组，多数是json

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

  • xml:一个XML文档

  • html:HTML 作为纯文本

  • text:纯文本字符串

  • json:以JSON运行响应，并以对象返回

• error():如果请求失败要运行的函数

• success(resp):当请求成功时运行的函数， 其中resp是自定义的形参名，表示jQuery加工以后的数据ResponseText

• type:规定请求的类型(GET或POST等)，默认是GET, get, post不用区分大小写

• url:规定发送请求的URL

url，data，dataType，success这些常用

$. get()方法使用 Http Get请求从服务器加载数据，json提交

语法:

$. get(url,data, function(resp), dataType))

• url必需。规定您需要请求的URL

• data可选。规定连同请求发送到服务器的数据

• function(resp)可选。当请求成功时运行的函数。resp是自定义形参名

  • 参数说明:resp包含来自请求的结果数据

• dataType:希望服务器返回的数据格式

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

语法: $.post( URL data, function(resp), data Type) 参数同$.get()