jQuery对象、基本选择器、表单属性过滤器和实现Ajax请求简介

​

一、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">元素

11、:hidden 选择所有隐藏的元素

$(":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。

​