jQuery基础

jQuery

1：jQuery是js库

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

 

2.dom对象和jQuery对象

dom对象，使用javaScript的语法创建的对象叫做dom对象，也就是js对象
var obj=document.getElementById("txt1");obj是dom对象，也叫做js对象
obj.value;

jquery对象：使用jQuery语法表示对象叫做jQuery对象，注意：jQuery表示的对象都是数组
例如：var jobj=$("#txt1")，jobj就是使用jQuery语法表示的对象，也就是jQuery对象，
它是一个数组，现在数组中就一个值。

dom对象可以和jQuery对象相互的转换
dom对象可以转换成dom对象，语法：从数组获取其中的对象，每一个对象就是dom对象，
使用[0]或者get(0)
为什么要进行dom和jQuery的转换：目的是要使用对象的方法，或者方法

当是dom对象时，可以使用dom对象的属性或者方法，如果你要想使用jQuery提供的函数，
必须是jQuery对象才可以。

 

3.选择器：就是一个字符串，用来定位dom对象的，定位了dom对象，就可以通过jQuery的函数来操作dom

常用的选择器：

1.id选择器：语法：$("#dom对象的id值")
通过dom对象的id定位dom对象，通过id找到对象，id在当前页面中是唯一值

2.class选择器，语法：$(".class样式名")
class 表示css中的样式，使用样式的名称可以定位dom对象

3.标签选择器，语法：$("标签名")；
使用标签名定位dom对象的

 

4.表单选择器

使用<input>标签的type的属性值，定位dom对象的方式
语法：$(":type属性值")
例如：$(":text")，选择的是所有的单行文本框
$(":button")，选择的所有的按钮

 

5.基本过滤器：在定位了dom对象之后，根据一些条件筛选dom对象

过滤器又是一个字符串，用来筛选dom对象的。
过滤器不能单独使用，必须和选择器一起使用

1)$("选择器:first") ：第一个dom对象
2)$("选择器:last"):数组中的最后一个dom对象
3)$("选择器:eq(数组中的下标)")：获取指定下标的dom对象
4)$("选择器:lt(下标)"):获取小于下标的所有dom对象
5)$("选择器:gt(下标)"):获取大于下标的所有dom对象

 

6.表单属性过滤器

启用状态：enabled
不可用状态：disabled
选择状态：checked,例如：radio，checkbox
1) 选择可用的文本框 :$(":text:enabled");
2)选择不可用的文本框：$(":text:disabled");
3)复选框选中的元素：$(":checkbox:checked");
4)选择指定下拉列表的被选中元素：$(":选择器>option:selected");

 

7.each语法：

1.可以对数组，JSON，dom数组循环处理，数组，JSON中的每个成员都会调用一次处理函数

var arr={1,2,3}//数组
var json={"name":"lisi","age":20}
var obj=${":text"};

 

语法：$.each(循环的内容，处理函数)：表示使用jQuery的each，循环数组，每个数组成员
都会执行后面的“处理函数”一次
$：相当于java中的一个类型
each:就是类中的静态方法
静态方法调用，可以使用类名.方法名称

处理函数：function(index,emelent):
index,element都是自定义的形参，名称是自定义的
index:循环的索引
element:数组中的成员

js循环数组：

for(var i=0;i<arr.length;i++){
var item=arr[i];//数组成员
//操作数组成员
shuzu(i,item);
}

function shuzu(index,element){
输出index,element;
}

 

2.循环jQuery对象，jQuery对象就是dom数组

jquery对象.each(function(index,element){
处理函数
})

 

8.jquery中给dom对象绑定事件

1)$(选择器)：事件名称(事件的处理函数)

$(选择器)：定位dom对象，dom对象可以有多个，这些dom对象都绑定了事件
事件名称：就是js中事件去掉on的部分，例如js中的单击事件onclick(),
jquery中的事件名称，就是click，都是小写的
事件的处理函数：就是一个function，当事件发生是，执行这个函数的内容

例如：给id的是btn的按钮绑定单击事件
$("#btn").click(function(){
alert("btn按钮单击了");
})

 

2) on事件绑定
$(选择器).on(事件名称，事件的处理函数)

 

事件名称：就是js中去掉on的部分，例如js中的onclick,这里就是click
事件的处理函数：function定义

例如：<input type="button" id="btn"/>
$("#btn").on("click",function(){处理按钮的单击})

 

9.使用jquery的函数，实现ajax请求的处理

没有jQuery之前，使用xmlHttpRequest做ajax,有四个步骤，jQuery简化了ajax请求的处理
使用三个函数，可以实现ajax请求的处理

1)$.ajax():jquery中实现ajax的核心函数
2)$.get():使用get方式发送ajax请求
3)$.post():使用post方式发送ajax请求

$.post()和$.get()：他们的内部都是调用了$.ajax();

介绍：$.ajax()函数的使用，函数的参数表示请求的url，请求的方式，参数值等信息
$.ajax()参数是一个JSON的结构

例如： $.ajax({名称:值,名称1:值1.....})

例如：

$.ajax({ async:true,
contentType:"application/json",
data:{name:"lisi",age:20},
dataType:"json",
error:function(){
请求出现错误时，执行的函数
},

success:function(){
//data就是responseText，是jquery处理之后的数据
},
url:"bmiAjax",
type:"get"
})

 

JSON结构的参数说明：

1)async:是一个boolean类型的值，默认是true，表示异步请求的，可以不写这个async这个配置项 xmlHttp.open(get,url,true),第三个参数是一样的意思

2)contextType:一个字符串，表示从浏览器发送给服务器的参数的类型，可以不写
例如你想表示请求的参数是JSON格式的，可以写appliication/json

3)data:可以是字符串，数组，JSON，表示请求的参数和参数值，常用的是JSON格式的数据

4)dataType:表示期望从服务器端返回的数据格式，可选的有：xml,html,text,json
当我们使用$.ajax()发送请求时，会把dataType的值发送给服务器，那我们的servlet
能够读取到dataType的值，就知道你的浏览器需要的是json 或xml的数据，那么服务器
就可以返回你需要的数据格式

5)error：一个function，表示请求发生错误时，执行的函数
error.function(){发生错误时执行}

6)success:一个function,表示请求成功了，从服务端返回了数据，会执行success执行函数
之前使用xmlHttpRequest对象，当readyState==4&&status==200时

 

7)url:请求的地址

8)type:请求方式，get或者post，不用区分大小写，默认是get方式

主要使用的是 url,data，dataType,success