文章目录
- 一、jQuery是什么
- 二、dom对象和jQuery对象
- 1、DOM对象可以和jQuery对象相互的转换
- 三、基本选择器
- 1、元素选择器:根据HTML元素的名称选择元素
- 2、ID选择器:通过元素的ID属性选择元素
- 3、类选择器:通过元素的class属性选择元素
- 4、通配符选择器:选择所有元素
- 5、属性选择器:根据元素的属性选择元素
- 6、多个属性选择器:根据多个属性选择元素
- 7、子元素选择器:选择特定父元素的子元素
- 8、后代选择器:选择特定元素的后代元素(不仅限于直接子元素)
- 9、相邻兄弟选择器:选择紧接在另一元素后的元素,且二者有相同父元素
- 10、一般兄弟选择器:选择所有在另一元素后的兄弟元素,且二者有相同父元素
- 11、首元素选择器:选择特定父元素的第一个子元素
- 12、末元素选择器:选择特定父元素的最后一个子元素
- 13、奇偶元素选择器:选择特定父元素的奇数或偶数索引的子元素
- 14、特定索引选择器:选择特定父元素的具有特定索引的子元素
- 15、表单选择器:使用`<input>`标签的type属性值,定位DOM对象的方式。
- 16、不是选择器:选择不匹配特定选择器的所有元素
- 四、表单属性过滤器
- 1、`:input`:选择所有的`<input>`、`<textarea>`、`<select>`和`<button>`元素。
- 2、`:text`:选择所有的文本输入框
- 3、`:password`:选择所有的密码输入框
- 4、`:radio`:选择所有的单选按钮
- 5、`:checkbox`:选择所有的复选框
- 6、`:submit`:选择所有的提交按钮
- 7、`:image`:选择所有的图像按钮
- 8、`:reset`:选择所有的重置按钮
- 9、`:button`:选择所有的按钮元素和类型为"button"的<input>元素
- 10、`:file`:选择所有的文件上传元素
- 11、`:hidden`:选择所有隐藏的元素
- 12、`:enabled`:选择所有启用的表单元素
- 13、`:disabled`:选择所有禁用的表单元素
- 14、`:checked`:选择所有被选中的表单元素(如复选框、单选按钮)
- 15、`:selected`:选择所有被选中的<option>元素
- 五、使用each循环处理数组
- 六、jQuery中给DOM对象绑定事件
- 1、`$(选择器).事件名称(事件的处理函数)`
- 2、on 事件绑定
- 七、使用jQuery的函数,实现Ajax请求的处理。
- 1、jQuery实现Ajax请求的处理
- 2、$.ajax函数
- 3、Ajax中的json结构参数说明
- 1、async
- 2、contentType
- 3、data
- 4、dataType
- 5、error
- 6、success
- 7、url
- 8、type
一、jQuery是什么
jQuery是一个JavaScript库,它封装了JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档遍历、事件处理、动画和Ajax交互。jQuery的设计宗旨是“Write Less, Do More”,即倡导写更少的代码,做更多的事情。它具有快速、小巧且功能丰富的特点。
jQuery具有以下一些主要特点:
- 简洁性:jQuery使用简洁的语法来操作HTML文档、处理事件、执行动画和与服务器交互。它大大简化了传统JavaScript代码的编写。
- 跨浏览器兼容性:jQuery内部处理了浏览器的兼容性问题,使得开发者可以编写统一的代码,而无需担心不同浏览器之间的差异。
- 丰富的插件支持:jQuery拥有庞大的插件库,这些插件可以帮助开发者实现各种复杂的功能,从表单验证到复杂的UI效果。
- 链式操作:jQuery支持链式操作,这意味着可以对一个jQuery对象连续调用多个方法,而无需每次都重新选择元素。
- 事件处理:jQuery提供了简洁的事件处理机制,可以方便地绑定和处理各种事件。
- Ajax交互:jQuery简化了Ajax的使用,使得开发者可以轻松地实现与服务器的异步交互。
由于jQuery的这些优点,它被广泛用于Web开发中,无论是简单的静态页面还是复杂的Web应用,都可以看到jQuery的身影。
二、dom对象和jQuery对象
DOM对象:使用javascript的语法创建的对象叫做DOM对象,也就是js对象。
var obj = document.getElementById("txt1"); // obj是DOM对象,也叫做js对象
obj.value; // 获取DOM对象的属性,调用其方法。
jQuery对象:使用jquery语法表示对象叫做jquery对象。
注意:jquery表示的对象都是数组。
var jobj = $("#txt1"); // jobj就是使用jQuery语法表示的对象,就是jQuery对象,
它是一个数组,现在数组中就一个值。
1、DOM对象可以和jQuery对象相互的转换
DOM对象可以转为jQuery:
$(DOM对象)
jQuery对象也可以转为DOM对象:
- 从数组中获取第一个对象,第一个对象就是DOM对象,使用
[0]
或者get(0)
。
为什么要进行DOM和jQuery的转换:目的是要使用对象的方法,或者方法。
当你是DOM对象时,可以使用DOM对象的属性或者方法,如果你要想使用jQuery提供的函数,必须是jQuery对象才可以。
三、基本选择器
jQuery提供了多种基本选择器,用于选择页面上的元素。选择器就是一个字符串,用来定位DOM对象的。定位了DOM对象,就可以通过jQuery的函数操作DOM。这些选择器基于元素的名称、ID、类名、属性以及元素在DOM树中的位置来定位元素。
以下是一些常用的jQuery基本选择器:
1、元素选择器:根据HTML元素的名称选择元素
$("p") // 选择所有的<p>元素
2、ID选择器:通过元素的ID属性选择元素
$("#myId") // 选择ID为myId的元素
3、类选择器:通过元素的class属性选择元素
$(".myClass") // 选择所有class为myClass的元素
4、通配符选择器:选择所有元素
$("*") // 选择页面上的所有元素
5、属性选择器:根据元素的属性选择元素
$("[href]") // 选择所有具有href属性的元素
$("[href='#']") // 选择所有href属性值为'#'的元素
6、多个属性选择器:根据多个属性选择元素
$("[href][target='_blank']") // 选择同时具有href和target='_blank'属性的元素
7、子元素选择器:选择特定父元素的子元素
$("ul li") // 选择所有<ul>元素内的<li>元素
8、后代选择器:选择特定元素的后代元素(不仅限于直接子元素)
$("ul li a") // 选择所有<ul>元素内的<li>元素下的<a>元素
9、相邻兄弟选择器:选择紧接在另一元素后的元素,且二者有相同父元素
$("label + input") // 选择所有紧接在<label>元素后的<input>元素
10、一般兄弟选择器:选择所有在另一元素后的兄弟元素,且二者有相同父元素
$("form ~ input") // 选择<form>元素内的所有<input>兄弟元素
11、首元素选择器:选择特定父元素的第一个子元素
$("ul li:first-child") // 选择所有<ul>元素内的第一个<li>子元素
12、末元素选择器:选择特定父元素的最后一个子元素
$("ul li:last-child") // 选择所有<ul>元素内的最后一个<li>子元素
13、奇偶元素选择器:选择特定父元素的奇数或偶数索引的子元素
$("ul li:even") // 选择所有<ul>元素内的偶数索引的<li>子元素
$("ul li:odd") // 选择所有<ul>元素内的奇数索引的<li>子元素
14、特定索引选择器:选择特定父元素的具有特定索引的子元素
$("ul li:eq(2)") // 选择所有<ul>元素内的第三个<li>子元素(索引从0开始)
15、表单选择器:使用<input>
标签的type属性值,定位DOM对象的方式。
$(":type属性值")// 例如:
$(":text"), // 选择的是所有的单行文本框,
$(":button"), // 选择的是所有的按钮。
16、不是选择器:选择不匹配特定选择器的所有元素
$("input:not(:checked)") // 选择所有未被选中的<input>元素
这些选择器可以根据需要组合使用,以创建更复杂的选择器表达式,从而精确地定位页面上的元素。在使用jQuery选择器时,请确保文档已经加载完毕,通常将选择器代码放在$(document).ready()
函数中,以确保DOM元素已经可用。
四、表单属性过滤器
在jQuery中,表单属性过滤器允许您基于表单元素的特定属性来选择元素。这些过滤器对于处理表单输入特别有用,因为它们可以根据元素的属性(如type、checked、disabled、selected等)来快速选择元素。
以下是一些常用的jQuery表单属性过滤器:
1、:input
:选择所有的<input>
、<textarea>
、<select>
和<button>
元素。
$(":input") // 选择所有的输入元素
2、:text
:选择所有的文本输入框
$(":text") // 选择所有的<input type="text">元素
3、:password
:选择所有的密码输入框
$(":password") // 选择所有的<input type="password">元素
4、:radio
:选择所有的单选按钮
$(":radio") // 选择所有的<input type="radio">元素
5、:checkbox
:选择所有的复选框
$(":checkbox") // 选择所有的<input type="checkbox">元素
6、:submit
:选择所有的提交按钮
$(":submit") // 选择所有的<input type="submit">元素
7、:image
:选择所有的图像按钮
$(":image") // 选择所有的<input type="image">元素
8、:reset
:选择所有的重置按钮
$(":reset") // 选择所有的<input type="reset">元素
9、:button
:选择所有的按钮元素和类型为"button"的元素
$(":button") // 选择所有的<button>和<input type="button">元素
10、:file
:选择所有的文件上传元素
$(":file") // 选择所有的<input type="file">元素
:hidden
:选择所有隐藏的元素
11、$(":hidden") // 选择所有隐藏的元素,包括<input type="hidden">
12、:enabled
:选择所有启用的表单元素
$(":enabled") // 选择所有启用的表单元素
13、:disabled
:选择所有禁用的表单元素
$(":disabled") // 选择所有禁用的表单元素
14、:checked
:选择所有被选中的表单元素(如复选框、单选按钮)
$(":checked") // 选择所有被选中的复选框和单选按钮
15、:selected
:选择所有被选中的元素
$(":selected") // 选择所有被选中的<option>元素
这些表单属性过滤器可以与其它选择器组合使用,以构建更复杂的选择器表达式,从而精确地选择满足特定条件的表单元素。
例如,如果想要选择所有被选中的复选框并且它们的父元素是某个特定的<div>
,可以这样写:
$("#myDiv :checkbox:checked") // 选择ID为myDiv的元素内的所有被选中的复选框
五、使用each循环处理数组
val,append,each这三个函数是使用最高的!
可以对数组, json,DOM数组循环处理数组, json中的每个成员都会调用一次处理函数。
var arr = { 1, 2, 3}; //数组;var json = {"name":"lisi","age":20 };var obj = $(":text");
语法:$.each( 循环的内容,处理函数 )
,表示使用jQuery的each,循环数组,每个数组成员都会执行后面的“处理函数”一次。
- $:相当于是java的一个类名
- each:就是类中的静态方法
- 静态方法调用,可以使用:
类名.方法名称
处理函数:function(index, element)
- index, element都是自定义的形参, 名称自定义。
- index:循环的索引
- element:数组中的成员
js循环数组:
for(var i=0; i<arr.length; i++){var item = arr[i]; //数组成员//操作数组成员shuchu(i, item);
}function shuchu(index, element){consol.log(index, element);
}
循环jQuery对象, jQuery对象就是DOM数组。
jQuery对象.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请求的处理。
1、jQuery实现Ajax请求的处理
没有jQuery之前,使用XMLHttpRequest做Ajax ,有4个步骤。
- 创建异步对象
- 给异步对象绑定事件
- 始异步请求对象
- 使用异步对象发送请求
jQuery简化了ajax请求的处理。使用三个函数可以实现Ajax请求的处理。
$.ajax()
:jQuery中实现ajax的核心函数。$.post()
:使用post方式做ajax请求。$.get()
:使用get方式发送ajax请求。
$.post()
和$.get()
他们在内部都是调用的 $.ajax()
。
2、$.ajax函数
$.ajax()参数是一个json的结构。
$.ajax( {名称:值, 名称1:值1..... } ) $.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"})
3、Ajax中的json结构参数说明
1、async
是一个boolean类型的值,默认是true ,表示异步请求的。可以不写这个配置项,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 ,表示当请求发生错误时,执行的函数。
6、success
一个function。表示请求状态。请求成功了,从服务器端返回了数据,会执行success指定函数
XMLHttpRequest对象当readyState==4 && status==200
的时候。
7、url
请求的地址
8、type
请求方式,get或者post,不用区分大小写。 默认是get方式。
主要使用的是 url,data,dataType,success。