jQuery干货
jQuery干货
1.简介：jQuery库可以通过一行简单的标记被添加到网页中
2.需要具备的基础知识：html、css、javascript
3.jQuery是什么：javascript函数库(js框架)，安全、效率、简洁。有以下功能：html元素选取及操作、css操作、html事件函数、js特效和动画、html DOM遍历和修改、ajax、大量插件
4.使用理由：最流行基于dom操作的js框架，提供大量的扩展
5.官网地址：https://jquery.com/
6.下载版本：生产版本-用于实际网站，已被精简和压缩；开发版本-用于测试和开发，代码可读
7.下载地址：https://jquery.com/download/
8.简单语法-作用：选择HTML元素，执行actions(操作)
9.简单语法-基础语法：$(selector).action() 说明：$定义jquery、selector-选择符查询和查找HTML元素、action执行对元素的操作
10.简单语法-实例
<script>
$(this).hide() - 隐藏当前元素
$("p").hide() - 隐藏所有<p>元素
$("#test").hide() - 隐藏所有id=test的元素
<script>11.简单语法-文档就绪事件：为了防止文档在完全加载就绪之前运行jquery代码，如果文档没有完全加载就运行函数，可能出错
方法1：$(document).ready(function(){});
方法2：$(function(){});
12.jQuery选择器-定义：jQuery选择器允许对HTML元素组或单个元素进行操作。jQuery选择器基于元素的id、类、类型、属性、属性值等查找或选择HTML元素。
它基于已经存在的CSS选择器，另外还有一些自定义的选择器。
jQuery中的选择器都以$开头：$();
13.相关重点选择器(重点内容：
13.1 元素选择器：jQuery元素选择器基于元素名选择元素。例如-在页面中选取所有"p"元素：$(“p”)/jQuery(“p”)
实例：用户点击按钮后，所有p元素进行隐藏
实例代码：
$(function(){
$("button").click(function(){
$("p").hide();
});
});13.2 #id选择器：jQuery #id选择器通过HTML元素的id属性选取指定的元素。页面中元素的id唯一，在页面中选取唯一的元素通过#id选择器。例如-选择id=test的元素：$("#test")
实例：用户点击按钮后，id=test的元素进行隐藏
实例代码：
$(function((){
$("button").click(function(){
$("#test").hide();
});
});13.3 .class选择器：jQuery类选择可以通过class查找元素。例如-查找class=test的元素：$(".test")
实例：用户点击按钮后，class=test的属性进行隐藏
实例代码：
$(function(){
$("button").click(function(){
$(".test").hide();
});
});13.4 其他选择器
$("*") 选取所有元素
$(“this”) 选取当前元素
$(“p.intro”) 选取class=intro的p元素
$(“p:first”) 选取第一个p元素
$(“p:last”) 选取最后一个p元素
$("[href]") 选取带有htef属性的元素
$("[href=]") 选择带有href属性并且属性值等于某个值的元素
$(“a[tatger=_blank]”) 选取a标签中带有target属性且属性值等于_blank的元素
$(":button") 选取页面所有的button
$(":checked") 选取页面所有被选中的元素
$(“tr:even”) 选取偶数位的tr
$(“tr:odd”) 选取奇数位的tr
$(":selected") 选取select中被选中的元素
14.jQuery事件
14.1 定义：页面对不同访问者的响应叫做事件。事件处理程序指的是当HTML中发生某些事件时所调用的方法。
14.2 实例：元素上移动鼠标、选取单选按钮、点击元素、按下按键时触发keypress事件
14.3 简单用法：在jQuery中，大多数DOM事件都有一个等效的jQuery方法。页面中指定一个点击事件：$(“p”).click(function(){});
14.4 常用的jQuery事件方法：
click 单击事件-鼠标点击某个对象
实例：给文档中id=box的元素添加点击事件
实例代码：
$(function(){
$("#box").click(function(){
alert("单击事件");
});
});在jQuery事件中，也可主动响应对应的事件:$("box").click();
dbclick 双击事件-鼠标双击某个对象
实例：给文档中id=box的元素添加双击事件
实例代码：
$(function(){
$("#box").dbclick(function(){
console.log("双击事件");
});
});focus 获得焦点事件
blur 失去焦点事件
实例：给文档中的inpyt元素添加点击事件
实例代码：
$(function(){
$("input").focus(function(){
console.log("获得焦点");
});
$("input").blur(function(){
console.log("失去焦点");
});
});change 改变事件,change域的内容被改变时触发，用于select、input和textarea标签。
当用于select元素时，change事件会在选择某个选项时发生；当用于input和textarea元素时，该时间会在元素失去焦点时触发。
实例：给文档中的select标签和input标签添加改变时间
实例代码：
<body>
故乡：<select name="city" id="city">
<option value="1">北京</option>
<option value="2">广州</option>
<option value="3">武汉</option>
<option value="4">深圳</option>
</select>
密码：<input type="password" placeholder="请输入密码">
</body>
<script>
$("select").change(function(){
console.log("选中城市为:"+$(this).val);
});
$("input").change(function(){
console.log("输入密码为:"+$(this).val);
});
</script>mouseenter 鼠标事件-鼠标指针穿过元素时触发,大多数与mouseleave事件一起使用。mouseover和mouseout事件一起使用。
与mouseover事件不同，只有当鼠标指针穿过被选元素时，才会触发mouseenter事件。如果鼠标指针穿过任何子元素，同样会触发mouseover事件。
实例：给id=box的元素添加鼠标事件
实例代码：
$(function(){
$("#box").mouseenter(function(){
console.log("鼠标进入");
});
$("#box").mouseleave(function(){
console.log("鼠标离开");
});
$("#box").mousedown(function(){
console.log("鼠标按下");
});
$("#box").mouseupon(function(){
console.log("鼠标抬起");
});
$("#box").mousemove(function(){
console.log("鼠标移动");
});
});
hover事件 一个模仿悬停事件(鼠标移动到一个对象上面及移除这个对象)的方法
语法：hover([fnOver],fnOut)
fnOver 鼠标移到元素上要触发的函数；fnOut表示鼠标移出时要触发的函数
当鼠标移动到一个匹配的元素上面时(mouseenter)会触发指定的第一个函数，当鼠标移出这个元素(mouseleave)时，会触发指定的第二个函数
实例代码：
<script>
$(function(){
$("#box").hover(function(){
console.log("鼠标进入");
},function(){
console.log("鼠标离开");
});
});
</script>
event事件对象-event属性
属性-描述(事件)
altKey-事件触发时是否按下了alt键(鼠标事件)
ctrlKey-当事件触发时是否按下了ctrl键(鼠标事件)
shiftKey-当事件触发时是否按下了shift键(鼠标事件)
button-当事件触发时是按的鼠标的那个键(鼠标事件)
clientX-设置或获取最标指针位置相对于窗口客户区域的x坐标,其中客户区域不包括窗口自身的控件和滚动条。(鼠标事件)
clientY-设置或获取鼠标指针位置相对于窗口客户区域的y坐标,其中客户区域不包括窗口自身的控件和滚动条。(鼠标事件)
keyCode-得到被按下键的ASCESC 编码(键盘事件)
type-返回当前Event对象表示的事件的名称(任意事件)
target-最初触发事件的DOM元素,特指事件触发源event.target(任意事件)
currentTarger-在事件冒泡阶段中的当前DOM元素，特指当前事件源(任意事件)
data-当前执行的处理器被绑定的时候，包含的数据传递(任意事件)
event事件对象-event方法
stopPropagation 阻止事件冒泡(任意事件)
preventDefault 阻止事件的默认动作(任意事件)
事件冒泡：事件会按照DOM的层次结构像水泡一样不断向上直至顶端
实例：阻止文档中的class=“child"的元素事件派发
实例代码：
<script>
$(".child").on("click",function(event){
console.log("子元素响应事件");
event.stopPropagation();
});
$(".parent").on("click",function(){
console.log("父元素响应事件");
});
</script>
实例：阻止文档中元素的默认行为
实例代码：
$(".ling").on("click",function(event){
event.preventDefault();//阻止事件的默认动作
});15.jQuery DOM操作【重中之重】
15.1 jQuery捕获
jQuery 中提供了一系列与DOM相关的方法，使得访问和操作元素和属性很简单
DOM = Document Object Model (文档对象模型)
DOM定义访问HTML和XML文档的标准
W3C文档对象模型独立于平台和语言的界面，允许程序和脚本动态访问和更新文档的内容、结构及样式
获取内容-text()、html()、val()。三个简单实用的用于DOM操作的jQuery方法
text() -设置或返回所选元素的文本内容
html() -设置或返回所选元素的内容(包括HTML标记)
val() -设置或返回表单字段的值
实例：通过text()和html()方法来获取内容、通过val()方法获取输入字段的值
<body>
<p id="test">这是段落中的 <b>粗体</b> 文本。</p>
<button id="btn1"> 显示文本</button>
<button id="btn2"> 显示HTML</button>
<p>名称: <input type="text" id="test1" value="jQuery教程"></p>
<button id="btn3">显示值</button>
</body>
<script>
$(function(){
$("#btn1").click(function(){
alert("Text:"+$("#test").text());
});
$("#btn2").click(function(){
alert("HTML:"+$("#test").html());
});
$("#btn3").click(function(){
alert("值为:"+$("#test1").val());
});
});
</script>attr() -此方法用于获取自定义的DOM属性值
实例：获取href属性的值
<a href="www.runoob.com" id="powernode">jQuery</a>
<script>
$(function(){
$("button").click(function(){
alert($("#powernode").attr("href"));
});
});
</script>prop() -获取HTML元素本身带有的固有属性，快读准确
注意：在select和radio和checkbox中我们取selected checked属性应使用prop
15.2 jQuery设置
设置内容-text()、html()、val()
text()-设置或返回所选元素的文本内容
html()-设置或返回所选元素的内容(包括HTML标记)
val() -设置或返回表单字段的值
实例：通过text()、html()、val()设置内容
实例代码：
$(function(){
$("#btn1").click(function(){
$("#test1").text("hello world");
});
$("#btn2").click(function(){
$("#test2").html("<b>hello world!</b>");
});
$("#btn3").click(function(){
$("#test3").val("powernode");
});
});
text()、html()、val()的回调函数，回调函数有两个参数，被选元素列表中当前元素的下表，以及原始值。然后以函数新值返回希望适用的字符串。
实例：带回调眼熟的text()、html()
实例代码：
$("#btn1").click(function(){
$("#test1").text(function(i,origText){
return "旧文本:"+origText+"新文本:hello world!(index:"+i+)";
});
});
$("#btn2").click(function(){
$("#test2").html(function(i,origText){
return "旧html:"+origText+"新html:<b>hello world<b>(index:"+i+")";
});
});注意：html(function(index,html)) index为元素在集合中的索引位置，html为原先的HTML值
设置属性-attr()
attr()方法也可用于设置/改变属性值
实例：设置(改变)链接中href属性的值
实例代码：$("#powernode”).attr(“href”,“ ”);
实例:设置改变href和title，两个属性
实例代码：$("#powernode").attr({“href”:“ ”,“title”:“标题”});
attr的回调函数，有两个参数，分别为被选元素列表中当前元素的下标，以及原始的旧值。然后以函数新值返回希望适用的字符串。
实例代码：
$("button").click(function(){
$("#powernode").attr("href",function(i,origValue){
return origValue + "/java";
});
});
设置属性-prop()
对于HTML元素本身就带有的固有属性，在处理时，使用prop方法。快速，准确。
对于HTML元素我们自己自定义的DOM属性，在处理时，使用attr方法。
注意：在select和radio和checkbox中我们取selected checked属性应使用prop
15.3 添加元素
添加新的HTML内容
append() -在被选元素的内部结尾添加内容
prepend() -在被选元素的内部开头添加内容
after() -在被选元素之后插入内容
before() - 在被选元素之前插入内容
实例代码：
$("p").append("追加文本");
$("p").prepend("开头追加文本");
$("img").after("在后面添加文本");
$("img").before("在前面添加文本");15.4 删除元素
remove() -删除被选元素及其子元素,remove()方法支持接收1个参数,允许对被删除元素进行过滤，参数可以是jQuery任何选择器的语法
empty() -从被选元素中删除子元素
实例代码：$("#div1").remove();$("#div2").empty();$("#div3").remove(".italic");
15.5 jQuery CSS 类
jQuery拥有若干进行CSS操作的方法，常用如下：
addClass() -向被选元素添加一个或多个类
removeClass() -向被选元素删除一个或多个类
toggleClass() -向被选元素进行添加/删除类的切换操作
css() - 设置或返回样式属性
实例样式表
.important
{
font-weight:bold;
font-size:xx-large;
}
.blue
{
color:blue;
}addClass()实例代码：向不同元素添加class属性
$("button").click(function(){
$("h1,h2,p").addClass("blue"); --选取多个元素添加
$("div").addClass("important"); -- 选取单个元素添加
$("#div1").addClass("import class"); -- 添加多个类
});removeClass()实例代码:在不同的元素中删除指定的class属性
$("button").click(function(){
$("h1,h2,p").removeClass("blue");
});toggleClass()实例代码：对被选元素进行添加/删除类的切换操作
$("button").click(function(){
$("h1,h2,p").toggleClass("blue");
});css()实例代码：设置或返回被选元素的一个或多个样式属性
返回指定的css属性的值语法：css(“propertyname”);
实例：返回被选元素的background-color值 实例代码：$(“p”).css(“background-color”);
设置执行的css属性的值语法：css(“propertyname”,“value”);
实例：将所匹配元素的background-color设置为yellow 实例代码：$(“p”).css(“background-color”,“yellow”)
设置多个css属性语法：css({“propertyname”:“value”,“propertyname”:“value”…})
实例：将所匹配元素设置background-color和font-size 实例代码：$(“p”).css({“background-color”:“yellow”,“font-size”:“200%”})
16.jQuery和DOM对象互转【重点】
16.1 jQuery转换成DOM对象
两种转换方式:[index]、.get(index)
jQuery对象是一个数据对象，可以通过[index]的方法，来得到一个DOM对象
例如 var vj = ("#v");//jQuery对象
var vd = $vj[0]; //DOM对象
alert(vd.checked); //检测这个checkbox是否被选中
jQuery本身提供.get(index)方法，得到相应的DOM对象
例如 var vj = ("#v"); //jQuery对象
var vd = $vj.get(0); //DOM对象
alert(vd.checked); //检测这个checkbox是否被选中
16.2 DOM转换为jQuery对象
用()将DOM对象包装起来，即可转换为jQuery对象
例如 var vd = Document.getElementByID(“v”); //DOM对象
var vj = (vd); //jQuery对象
转换之后，可任意适用jQuery的方法。
注意：DOM对象才能适用DOM对象的方法，jQuery对象不可适用DOM对象的方法
17.表单处理【掌握】
17.1 解决表单提交的冒泡问题
实例代码
<body>
<form action="#" method="get" id="frm">
ID:<input type="text" id="id" name="id"> <br>
NAME:<input type="text" id="name" name="name"> <br>
<input type="button" id="doSubmit" value="提交">
<input type="button" id="doReset" value="提交">
</form>
</body>
<script>
$(function(){
$("#doSubmit").click(function(){
console.log("doSubmit点击事件被触发");
$("#frm").submit();
});
$("#doReset").click(function(){
$("#frm")[0].reset();//通过js去重置，在jquery里的表单对象没有reset方法，适用原生js中的reset方法
});
});
</script>17.2 serializeArray()和 serialize()的区别
serializeArray()返回一个JSON数组，里面是表单属性的name的属性值和value
serialize()返回的是一个查询参数，例如id=1&name=2&gender=3&sal=4
18.jQuery each()方法 【掌握】
语法：$(selector).each(function(index,element))
作用描述：为每个匹配元素运行规定的函数，index表示选择器的index位置,element表示当前的元素，也可用this代替
实例：循环JSON数组生成无刷新的table并能删除和添加
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>01表单处理.html</title>
<!--引入jquery-->
<script src="../js/jquery-3.6.0.js" charset="UTF-8"></script>
</head>
<body>
<h1>添加用户</h1>
<form id="userAddFrm" action="#" method="get">
ID:<input type="text" name="id">
NAME:<input type="text" name="name">
SEX:<input type="radio" name="sex" checked value="男">男 <input type="radio" value="女" name="sex">女
SAL:<input type="text" name="sal">
<input type="button" id="doSubmit" value="添加">
<input type="reset" value="重置">
</form>
<hr>
<h1>用户列表</h1>
<table id="userTable" width="100%" border="1" cellspacing="3" cellpadding="3" style="border: 1px solid green">
</table>
</body>
<script>
//声明一个json数组的容器
let users=[{"id":1,"name":"小明","sex":"男","sal":5998.00}
,{"id":2,"name":"小红","sex":"女","sal":1998.00}
,{"id":3,"name":"小丽","sex":"女","sal":2998.00}
,{"id":4,"name":"小芳","sex":"女","sal":3998.00}]
//数据初始化的方法
function initTableData(){
let userTable=$("#userTable");
let html="<tr><th>ID</th><th>NAME</th><th>SEX</th><th>SAL</th><th>操作</th></tr>"
$.each(users,function (index,item){
html+="<tr><th>"+item.id+"</th><th>"+item.name+"</th><th>"+item.sex+"</th><th>"+item.sal+"</th><th><input type='button' οnclick='del("+item.id+")' value='删除'></th></tr>"
})
userTable.html(html)
}
initTableData();
//监听添加按钮的事件
$("#doSubmit").click(function (){
let userAddFrm=$("#userAddFrm");
let arrays=userAddFrm.serializeArray()
let jsonObj={};
$.each(arrays,function (index,item){
jsonObj[item.name]=item.value;
})
//把组装好的json对象放到users数组里面
users.push(jsonObj);
//刷新表格
initTableData()
})
function del(id){
//循环users找到id=传入id这个对象，再删除
$.each(users,function (index,item){
if(item.id==parseInt(id)){
//删除
users.splice(index, 1);
//刷新表格
initTableData()
return;
}
})
}
</script>