JQuery（选择器，DOM操作，事件，Ajax）
JQuery
$ 符号在 jQuery 中代表对 jQuery 对象的引用,，是"jQuery"是核心对象。
1. JQuery选择器
1.1 基础选择器
| 选择器 | 名称 | 举例 |
|---|---|---|
| id选择器 | #id | $("#testDiv")选择id为testDiv的元素 |
| 元素名称选择器 | element | $(“div”)选择所有div元素 |
| 类选择器 | .class | $(".blue")选择所有class=blue的元素 |
| 选择所有元素 | * | $("*")选择页面所有元素 |
| 组合选择器 | selector1,selector2,selectorN | $("#testDiv,span,.blue")同时选中多个选择器匹配的元素 |
1.2 层次选择器
| 选择器 | 名称 | 举例 |
|---|---|---|
| 后代选择器 | ancestor descendant | $("#parent div")选择id为parent的元素的所有div元素 |
| 子代选择器 | parent > child | $("#parent>div")选择id为parent的直接div子元素 |
| 相邻选择器 | prev + next | $(".blue + img")选择css类为blue的下一个img元素 |
| 同辈选择器 | prev ~ sibling | $(".blue ~ img")选择css类为blue的之后的img元素 |
1.3 表单选择器
| Forms | 名称 | 举例 |
|---|---|---|
| 表单选择器 | :input | 查找所有的input元素：$(":input")； 注意：会匹配所有的input、textarea、select和button元素。 |
| 文本框选择器 | :text | 查找所有文本框：$(":text") |
| 密码框选择器 | :password | 查找所有密码框：$(":password") |
| 单选按钮选择器 | :radio | 查找所有单选按钮：$(":radio") |
| 复选框选择器 | :checkbox | 查找所有复选框：$(":checkbox") |
| 提交按钮选择器 | :submit | 查找所有提交按钮：$(":submit") |
| 图像域选择器 | :image | 查找所有图像域：$(":image") |
| 重置按钮选择器 | :reset | 查找所有重置按钮：$(":reset") |
| 按钮选择器 | :button | 查找所有按钮：$(":button") |
| 文件域选择器 | :file | 查找所有文件域：$(":file") |
1.4 位置选择器
以li标签为例：
| 名称 | 作用 |
|---|---|
| $(“li:first”) | 查找首行 |
| $(“li:last”) | 查找最后一行 |
| $(“li:odd”) | 查找奇数行 |
| $(“li:even”) | 查找偶数行 |
| $(“li:eq(0)”) | 查找指定行 |
2. DOM操作
2.1 操作元素的属性
获取属性的方法：
| 方法 | 说明 | 举例 |
|---|---|---|
| attr(属性名称) | 获取指定的属性值，操作 checkbox 时， 选中返回 checked，没有选中返回 undefined。 |
attr(‘checked’) attr(‘name’) |
| prop(属性名称) | 获取具有true和false两个属性的属性值 | prop(‘checked’) |
设置属性的方法：
| 方法 | 说明 | 举例 |
|---|---|---|
| attr(属性名称，属性值) | 设置指定的属性值， 操作 checkbox 时， 选中返回 checked， 没有选中返回 undefined。 |
attr(‘checked’,’checked’) attr(‘name’,’zs’) |
| prop(属性名称，属性值) | 设置具有true和false的属性值 | prop(‘checked’,’true’) |
移除属性的方法：
| 方法 | 说明 | 举例 |
|---|---|---|
| removeAttr(属性名) | 移除指定的属性 | removeAttr(‘checked’) |
2.2 操作元素的样式
操作元素样式的方法：
| 方法 | 说明 |
|---|---|
| attr(“class”) | 获取class属性的值，即样式名称 |
| attr(“class”,”样式名”) | 修改class属性的值，修改样式 |
| addClass(“样式名”) | 添加样式名称 |
| css() | 添加具体的样式 |
| removeClass(class) | 移除样式名称 |
2.3 操作元素的内容
操作元素内容的方法：
| 方法 | 说明 |
|---|---|
| html() | 获取元素的html内容 |
| html(“html,内容”) | 设定元素的html内容 |
| text() | 获取元素的文本内容，不包含html |
| text(“text 内容”) | 设置元素的文本内容，不包含html |
| val() | 获取元素value值 |
| val(‘值’) | 设定元素的value值 |
2.4 创建元素
$(‘元素内容’);
2.5 添加元素
添加元素的方法：
| 方法 | 说明 |
|---|---|
| prepend(content) | 在被选元素内部的开头插入元素或内容，被追加的 content 参数，可以是字符、HTML 元素标记。 |
| $(content).prependTo(selector) | 把 content 元素或内容加入 selector 元素开头 |
| append(content) | 在被选元素内部的结尾插入元素或内容，被追加的 content 参数，可以是字符、HTML 元素标记。 |
| $(content).appendTo(selector) | 把 content元素或内容插入selector 元素内，默认是在尾部 |
| before() | 在元素前插入指定的元素或内容:$(selector).before(content) |
| after() | 在元素后插入指定的元素或内容:$(selector).after(content) |
2.6 删除元素
删除元素的方法：
| 方法 | 说明 |
|---|---|
| remove() | 删除所选元素或指定的子元素，包括整个标签和内容一起删。 |
| empty() | 清空所选元素的内容 |
2.7 遍历元素
$(selector).each(function(index,element))：遍历元素
参数 function 为遍历时的回调函数，index 为遍历元素的序列号，从 0 开始。element是当前的元素，此时是dom元素。
3. JQuery事件
3.1 ready加载事件
ready()类似于onLoad()事件，ready()可以写多个，按顺序执行， ( d o c u m e n t ) . r e a d y ( f u n c t i o n ( ) ) 等 价 于 (document).ready(function(){})等价于 (document).ready(function())等价于(function(){})
3.2 bind()绑定事件
为被选元素添加一个或多个事件处理程序，并规定事件发生时运行的函数。
$(selector).bind( eventType [, eventData], handler(eventObject));
eventType ：是一个字符串类型的事件类型，就是你所需要绑定的事件。
这类类型可以包括如下：
blur, focus, focusin, focusout, load, resize, scroll, unload, click, dblclick
mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter
mouseleave,change, select, submit, keydown, keypress, keyup, error
[, eventData]：传递的参数，格式：{名:值,名2:值2}
handler(eventObject)：该事件触发执行的函数
4. JQuery Ajax
原生态ajax：
<html>
<head>
<meta charset="utf-8">
<title>title>
<script type="text/javascript">
window.onload=function(){
var a = document.getElementById("one");
a.onclick = function(){
//创建ajax核心对象
var req = new XMLHttpRequest();
//与服务器建立连接
req.open("get",this.href,true);
//发送
req.send();//没有数据发
//收
req.onreadystatechange = function(){
if(req.readyState==4 && req.status==200){
//局部刷新
document.getElementById("div2").innerHTML = req.responseText;
}
}
return false;
}
};
script>
head>
<body>
<a href="note.txt" id="one">note.txta>
<hr>
<div id="div2">div>
body>
html>
ajax封装使用：
<html>
<head>
<meta charset="utf-8">
<title>title>
<script src="js/jQuery3.6.js" type="text/javascript" charset="utf-8">script>
<script type="text/javascript">
$(function(){
$("#btn").click(function(){
//ajax第一种封装使用方式
$.ajax({
type:"get",
url:"js/note.json",
datatype:"json",
success:function(x){
var str = ""
;
x.list.forEach(function(ele,idx){
str+="" +ele.item+"";
})
str+="";
$("#div3").append(str);
}
});
//ajax第二种封装使用方式
$.get("js/note.json",function(x){
var str = ""
;
x.list.forEach(function(ele,idx){
str+="" +ele.item+"";
})
str+="";
$("#div3").append(str);
});
});
});
script>
head>
<body>
<button id="btn" type="button">开始button>
<hr>
<div id="div3">div>
body>
html>