文章目录
1基础介绍
jQuery是一款跨主流浏览器的JavaScript库，封装了JavaScript相关方法调用，简化JavaScript对HTMLDOM操作
优点：
- write less do more
- 免费，开源且轻量级的js库，容量很小
- 兼容市面上主流浏览器，例如IE，Firefox，Chrome
- 能够处理HTML/JSP/XML、CSS、DOM、事件、实现动画效果，也能提供异步AJAX功能
- 文档手册很全，很详细
- 成熟的插件可供选择，多种js组件
- 出错后，有一定的提示信息
- 不用再在html里面通过< script >标签插入一大堆js来调用命令
JavaScript对象和jQuery对象
jQuery对象是一个数组。在数组中存放本次定位的DOM对象。JQuery对象与JavaScript对象是可以互相转化的，一般地，由于Jquery用起来更加方便，我们都是将JavaScript对象转化成Jquery对象
相互转化：
function btnClick(){
//获取dom对象
var obj = document.getElementById("btn");
//使用dom的value属性,获取值
alert("使用dom对象的属性="+obj.value)
//把dom对象转jquery,使用jquery库中的函数
var jobj = $(obj);
//调用jquery中的函数,获取value的值
alert( jobj.val() )
}
function btnClick(){
//使用jquery的语法,获取页面中的dom对象
//var obj = $("#txt")[0];
// 从数组中获取下标是0的dom对象
var obj = $("#txt").get(0);
//从数组中获取下标是0的dom对象
alert( obj.value)
}
2 选择器
2.1 基本选择器
1） id选择器， 语法： $("#dom对象的id值")
通过dom对象的id定位dom对象的。 通过id找对象， id在当前页面中是唯一值。
2） class选择器， 语法： $(".class样式名)
class表示css中的样式， 使用样式的名称定位dom对象的。
3） 标签选择器， 语法： $(“标签名称”)
使用标签名称定位dom对象的
4） 所有选择器，语法：$("*")
5）组合选择器，语法：$(“id,class,标签名”)
2.2 4. 表单选择器
使用标签的type属性值，定位dom对象的方式。
语法： $(":type属性值")
$(":text")选取所有的单行文本框
$(":password")选取所有的密码框
$(":radio")选取所有的单选框
$(":checkbox")选取所有的多选框
$(":file")选取所有的上传按钮
3 过滤器
3.1 基本过滤器
在定位了dom对象后，根据一些条件筛选dom对象。
过滤器有是一个字符串，用来筛选dom对象的。
过滤器不能单独使用， 必须和选择器一起使用。
1）$("选择器:first") : 第一个dom对象
2）$("选择器:last"): 数组中的最后一个dom对象
3）$("选择器:eq(数组的下标)") ：获取指定下标的dom对象
4）$("选择器:lt(下标)") ： 获取小于下标的所有dom对象
5）$("选择器:gt(下标)") ： 获取大于下标的所有dom对象
3.2 表单对象属性过滤器
6.表单属性过滤器： 根据表单中dom对象的状态情况，定位dom对象的。
启用状态 ： enabled
不可用状态：disabled
选择状态 ： checked
下拉列表的被选中元素：选择器>option:selected
4 函数
val
$(选择器).val() ：
无参数调用形式，读取数组中第一个DOM对象的value属性值
$(选择器)val(值)：
有参形式调用;对数组中所有DOM对象的value属性值进行统一赋值
text
$(选择器).text():
无参数调用，读取数组中所有DOM对象的文字显示内容，
将得到内容拼接为一个字符串返回
$(选择器).text(值):
有参数方式，对数组中所有DOM对象的文字显示内容进行统一赋值
attr
$(选择器).attr(“属性名”):
获取DOM数组第一个对象的属性值
$(选择器).attr(“属性名”,“值”):
对数组中所有DOM对象的属性设为新值
hide
$(选择器).hide() :
将数组中所有DOM对象隐藏起来
show
$(选择器).show():
将数组中所有DOM对象在浏览器中显示起来
remove
$(选择器).remove() :
将数组中所有DOM对象及其子对象一并删除
empty
$(选择器).empty()：
将数组中所有DOM对象的子对象删除
append
$(选择器).append("<div>我动态添加的div</div>")
为数组中所有DOM对象添加子对象
html
$(选择器).html()：
无参数调用方法，获取DOM数组第一个匹元素的内容。
$(选择器).html(值)：
有参数调用，用于设置DOM数组中所有元素的内容。
each
each是对数组，json和dom数组等的遍历,对每个元素调用一次函数。
语法1：
$.each(要遍历的对象,function(index,element){处理程序})
语法2：
jQuery对象.each( function( index, element ){处理程序})index: 数组的下标element: 数组的对象
5 事件
5.1 定义元素监听事件
$(选择器).事件名称( 事件的处理函数)
$(选择器)：定位dom对象， dom对象可以有多个， 这些dom对象都绑定事件了
事件名称：就是js中事件去掉on的部分， 例如 js中的单击事件 onclick(),jquery中的事件名称，就是click，都是小写的。
事件的处理函数：就是一个function ，当事件发生时，执行这个函数的内容。
$("#btn").click(funtion(){
alert("btn按钮单击了")
})
5.2 on()绑定事件
$(选择器).on( 事件名称 , 事件的处理函数)
事件名称： 就是js事件中去掉on的部分， 例如js中onclick ,这里就是click事件的处理函数： function 定义。
<input type="button" id="btn">
$("#btn").on("click", function() {
处理按钮单击 } )
6 Ajax
6.1 ajax()
$.ajax()是jQuery中AJAX请求的核心方法，所有的其他方法都是在内部使用此方法。
语法：$.ajax({name:value, name:value, … })
说明：参数是json的数据，包含请求方式，数据，回调方法等
async ：布尔值，表示请求是否异步处理。默认是true
contentType ：发送数据到服务器时所使用的内容类型。默认是：“application/x-www-form-urlencoded”。
data：规定要发送到服务器的数据，可以是：string，数组，多数是json
dataType：期望从服务器响应的数据类型。jQuery从xml, json, text, html这些中测试最可能的类型
“xml” -一个XML 文档
“html” -HTML 作为纯文本
“text” -纯文本字符串
“json” -以JSON 运行响应，并以对象返回
error(xhr,status,error)：如果请求失败要运行的函数,其中xhr, status, error是自定义的形参名
success(result,status,xhr)：当请求成功时运行的函数，其中result, status, xhr是自定义的形参名
type：规定请求的类型（GET 或POST等），默认是GET，get，post不用区分大小写url：规定发送请求的URL。
以上是常用的参数。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” 、“html”、“text”、“json”
6.3 post()
$.post()方法使用HTTP POST 请求从服务器加载数据。
语法：$.post(URL,data,function(data,status,xhr),dataType)
参数同$get()
6.4 使用AJAX级联查询
项目地址：Gitee
传送门
上一章：Web进阶 第一部分 Ajax