1.jQuery是js库
库:相当于java的工具类,jQuery库就是存放js代码的地方,将原本的javascript代码封装成一个个方法。简化javascript的使用。
2.dom对象和jquery对象
dom对象:使用javascript语法创建的对象叫做dom对象,也就是js对象。本质上就是html元素。
var obj= document.getElementById("txt1"); obj是dom对象,也叫做js对象
jquery对象:使用jquery语法表示的对象叫做jquery对象,jquery对象本质上是一个数组,里面封装这dom对象。他们可以互相转换。 例如 var jobj = $("#txt1")
dom对象和jquery对象可以互相转换:两种对象只能使用自己的语法,所以需要互相转换
dom对象可以转为jquery , 语法: $(dom对象)
jquery对象也可以转为dom对象, 语法: 从数组中获取第一个对象, 第一个对象就是dom对象, 使用$("#btn")[0]或者$("#btn").get(0).
3.选择器
常见的选择器:只有id选择器选择一个dom元素,其他两种都可以选择多个
1) id选择器, 语法: $("#dom对象的id值")
通过dom对象的id定位dom对象的。 通过id找对象, id在当前页面中是唯一值。
2) class选择器, 语法: $(".class样式名)
class表示css中的样式, 使用样式的名称定位dom对象的。
3)标签选择器, 语法: $("标签名称")
使用标签名称定位dom对象的
表单选择器
使用<input>标签的type属性值,定位dom对象的方式。
:text 文本框
:password 密码框
:radio 单选按钮
:reset 重置按钮
:input 所有input
:file 文件域
:checkbox 复选框
:submit 提交按钮
:image image按钮
:hidden 选取所有不可见元素
表单属性过滤器:
:checked 选中的单选和多选元素
:enabled 选取可用元素
:disable 选取所有不可用元素
:selected 选取select中被选中的option元素
过滤器:一般搭配选择器使用,由于选择器可以选择多个dom元素,所以可以使用过滤器来对选中的元素过滤
1)$("选择器:first") : 第一个dom对象
2)$("选择器:last"): 数组中的最后一个dom对象
3)$("选择器:eq(数组的下标)") :获取指定下标的dom对象
4)$("选择器:lt(下标)") : 获取小于下标的所有dom对象
5)$("选择器:gt(下标)") : 获取大于下标的所有dom对象
4.jquery中的方法
each语法
可以对数组,json,dom数组循环处理
语法: $.each( 循环的内容, 处理函数 ) :表示使用jquery的each,循环数组,每个数组成员,
都会执行后面的“处理函数”一次。
处理函数:function(index, emelent) :
index, element都是自定义的形参, 名称自定义。
index:循环的索引
element:数组中的成员
(1)一般的使用方式:each函数是一个类函数,可以直接通过$符号调用
$.each(arr,function(index,element){ /这里的两个参数就是序号和数组的值
})
$.each(json,function(key,value){ /这里的两个参数就是json的key和value
})
$.each(jquery对象,function(index,dom){ /这里的两个参数就是索引和dom对象
})
2).循环jquery对象, jquery对象就是dom数组
$("#btn").each( function(index,element) {} )
jquery中给dom对象绑定事件
1) $(选择器).事件名称( 事件的处理函数)
$(选择器):定位dom对象, dom对象可以有多个, 这些dom对象都绑定事件了
事件名称:就是js中事件去掉on的部分, 例如 js中的单击事件 onclick(),
jquery中的事件名称,就是click,都是小写的。
事件的处理函数:就是一个function ,当事件发生时,执行这个函数的内容。
例如给id是btn的按钮绑定单击事件
$("#btn").click(funtion(){
alert("btn按钮单击了")
})
2) on 事件绑定
$(选择器).on( 事件名称 , 事件的处理函数)
事件名称: 就是js事件中去掉on的部分, 例如js中onclick ,这里就是click
事件的处理函数: function 定义。
例如, <input type="button" id="btn">
$("#btn").on("click", function() { 处理按钮单击 } )
使用jquery的函数,实现ajax请求的处理。
没有jquery之前,使用XMLHttpRequest做ajax , 有4个步骤。 jquery简化了ajax请求的处理。
使用三个函数可以实现ajax请求的处理。
1) $.ajax() : jquery中实现ajax的核心函数。
2) $.post() : 使用post方式做ajax请求。
3) $.get() : 使用get方式发送ajax请求。
$.post()和$.get() 他们在内部都是调用的 $.ajax()
例如: $.ajax( { async:true ,
contentType:"application/json" ,
data: {name:"lisi",age:20 },
dataType:"json",
error:function(){
请求出现错误时,执行的函数
},
success:function( data ) {
// data 就是responseText, 是jquery处理后的数据。
},
url:"bmiAjax",
type:"get"
}
)
1)async:是一个boolean类型的值, 默认是true ,表示异步请求的。可以不写async这个配置项
xmlHttp.open(get,url,true),第三个参数一样的意思。
2)contentType: 一个字符串,表示从浏览器发送服务器的参数的类型。 可以不写。
例如你想表示请求的参数是json格式的, 可以写application/json
3)data: 可以是字符串,数组,json,表示请求的参数和参数值。 常用的是json格式的数据
4)dataType: 表示期望从服务器端返回的数据格式,可选的有: xml , html ,text ,json
当我们使用$.ajax()发送请求时, 会把dataType的值发送给服务器, 那我们的servlet能够
读取到dataType的值,就知道你的浏览器需要的是 json或者xml的数据,那么服务器就可以
返回你需要的数据格式。
5)error: 一个function ,表示当请求发生错误时,执行的函数。
error:function() { 发生错误时执行 }
6)sucess:一个function , 请求成功了,从服务器端返回了数据,会执行success指定函数
之前使用XMLHttpRequest对象, 当readyState==4 && status==200的时候。
7)url:请求的地址
8)type:请求方式,get或者post, 不用区分大小写。 默认是get方式。
主要使用的是 url , data ,dataType, success .