前端之jQuery
拖把湛屎，戳谁谁死 2024-06-27 17:03:03 阅读 88
jQuery
jQuery操作HTML元素
增加元素
append（在内部进行尾插）
let newImg = $("<img src='///'>");
$("img").append(newImg);
appendTo
let newImg = $("<img src='///'>");
newImg.appendTo($("img"));
//下列方法使用方式相同
perpend（在内部进行头插）
perpendTo
after（选中元素的平级进行尾插）
insertAfter
befor（选中元素的平级进行头插）
insertBefore
删除元素
remove（将选中的元素及其子元素全部删除）
empty（将选中的元素及其子元素全部清空）
修改元素
修改文本
text（有参代表修改文本内容，无参代表获取元素文本内容）
html（有参修改内部内容，包括带有html标签的内容，无参代表获取元素html内容）
val（有参代表向input输入框添加内容，无参代表获取input输入内容）
<input name="username" id="username"/>
<script>
$(function(){
let username = $("#username").val();//只针对value属性，一般来说，只有input标签有value属性
})
</script>
修改属性
attr（一个参数代表取值，两个参数代表修改属性值）
增加属性
addClass（向选中的元素添加class属性）
删除属性
removeClass（删除选中元素的calss属性）
在增加calss和删除class之间切换：
toggleClass()
修改样式
css（一个参数代表取值，两个参数代表修改属性值）
查找元素
基本筛选：first(),last(),eq(index)
选择第一个$(“div:first”)/$(“div”).fisrt()选择最后一个$(“div:last”)/$(“div”).last()选择指定下标$(“div:eq(1)”)/$(“div”).eq(1)选择大于指定下标$(“div:gt(1)”)选择小于指定下标$(“div:lt(1)”)选择下标为奇数$(“div:even”)选择下标为偶数$(“div:odd”)
子代选择
属于其父元素的第一个子元素的所有
元素 $("p:first-child")
属于其父元素的第一个
元素的所有
元素 $("p:first-of-type")
属于其父元素的最后一个子元素的所有
元素$("p:last-child")
属于其父元素的最后一个
元素的所有
元素$("p:last-of-type")
属于其父元素的第二个子元素的所有
元素$("p:nth-child(2)")
属于其父元素的第二个子元素的所有
元素，从最后一个子元素开始计数 $("p:nth-last-child(2)")
属于其父元素的第二个
元素的所有
元素 $("p:nth-of-type(2)")
属于其父元素的第二个
元素的所有
元素，从最后一个子元素开始计数 $("p:nth-last-of-type(2)")
属于其父元素的唯一子元素的所有
元素$("p:only-child")
属于其父元素的特定类型的唯一子元素的所有
元素$("p:only-of-type")
加
type和不加type的区别：
加上
type：指定了父元素中只能是某个类型的标签，比如$("p:first-of-type")，指定了是父元素中的p标签不加type：直接从父元素中的子元素开始，不管什么类型
内容选择：
包含指定内容 $(“div:contains(‘John’)”)不包含指定内容$(“div:empty(‘John’)”)选择隐藏的元素$(“div:hidden”)
属性选择
选择带有href属性的元素$(“[href]”)选择带有href属性并且值等于a.html的元素$(“[href=‘a.html’]”)选择带有href属性并且值不等于a.html的元素$(“[href!=‘a.html’]”)选择带有href属性并且值以abc结尾的元素$(“[href$=‘abc’]”)选择带有href属性并且值以abc开头的元素$(“[href^=‘abc’]”)选择带有href属性并且值等于或包含abc结尾的元素$(“[href|=‘abc’]”)选择带有href属性并且值包含***单词***abc的元素$(“[href~=‘abc’]”)选择带有href属性并且值包含字符串abc的元素$(“[href~=‘abc’]”)
表单组件选择（都是在form中才能这样写）
所有input标签$(“:input”)所有带有 type=“text” 的 input 元素$(":text")所有带有 type=“password” 的 input 元素$(":password")所有带有 type=“radio” 的 input 元素$(":radio")所有带有 type=“checkbox” 的 input 元素$(":checkbox")所有带有 type=“submit” 的 input 元素$(":submit")所有带有 type=“reset” 的 input 元素$(":reset")所有带有 type=“button” 的 input 元素$(":button")所有带有 type=“image” 的 input 元素$(":image")所有带有 type=“file” 的 input 元素$(":file")获取所有启用的元素$(":enbale")获取所有禁用的元素$(":enbale")所有选定的下拉列表元素$(":select")所有选中的单/复选框选项素$(":checked")
遍历：
查找父级标签
parent() 返回被选元素的直接父元素
parents() 返回被选元素的所有父元素，直到根节点<html>
parentsUntil(param) 返回被选元素与param元素之间的父元素
查找同级标签
siblings(param) 如果有参数，查找标签为param的同胞元素；如果没有参数，查找所有的同胞元素
next() 返回被选元素的直接下一个同胞元素，prev() 与之相反
nextAll() 返回被选元素后的所有同胞元素，prevAll() 与之相反
nextUntil(param) 返回被选元素到param元素之间的所有同胞元素，prevUntil（param）与之相反
查找子孙标签
children(selector) 返回被选标签的所有(满足selector条件的)直接子元素
find(param) 返回标签为param的所有子元素
jQuery效果
隐藏与显示
show(speed, callback) 显示
hide(speed, callback) 隐藏
toggle(speed, callback) 在隐藏于显示之间切换
淡入淡出
fadeIn(speed, callback) 淡入效果
fadeOut(speed, callback) 淡出效果
fadeToggle(speed, callback) 在淡入淡出效果之间切换
fadeTo(speed, callback) 将选中的元素设置为介于0~1之间的透明度
滑动
slideDown(speed,callback) 向下滑动
slideUp（speed, callback） 向上滑动
slideToggle（speed, callback） 向上滑动与向下滑动切换
动画
animate的param参数可以有多个属性，包括width、height、opacity等
animate({params},speed,callback)
回调函数callback
Callback 回调函数在当前动画 100% 完成之后执行
可以是显示的
function(params){}，也可以是箭头函数(params)=>{}
jQuery事件
冒泡事件
事件向上传递
阻止冒泡事件：
//假设在一个p标签中嵌套了一个span标签
$(function(){
$("p").click(()=>{
alert("p标签被点击了");
})
$("span").click((event)=>{
event.stopPropagation();
alert("span标签被点击了");//p标签的点击事件不会触发
});
})
鼠标事件
click 点击事件
dblclick 双击事件
mousrenter 鼠标进入
mouseleave 鼠标离开
mousedown 鼠标点击（鼠标上任意键点击）
mouseup 鼠标放开（鼠标上任意键点击后放开）
hover 覆盖（事mouseenter和mouseleave事件的组合）
//hover覆盖
$("#man").hover(
function(){
console.log("鼠标移入");
},
function(){
console.log("鼠标移出");
}
)
toggle切换
//在版本 1.9 中被移除。 添加 click 事件之间要切换的两个或多个函数
焦点事件
foucs 获取焦点事件（当输入光标闪烁）
blur 失去焦点事件（当输入完成，输入光标消失：可以用作表单提交前的信息验证）
多事件绑定
on 可以将单个事件或者多个事件绑定到元素（bind方法在3.0移除）
//为p标签绑定点击事件（单个事件）
$("p").on("click", function(){
$(this).hide();
});
//为p标签绑定多个事件
$("p").on({
mouseenter: function(){
$(this).css("background-color", "lightgray");
},
mouseleave: function(){
$(this).css("background-color", "lightblue");
},
click: function(){
$(this).css("background-color", "yellow");
}
});
多个事件功能一致
//
$("p").on("click mouseenter mouseleave", function(){
console.log("不同事件，小相同的功能");
});
触发绑定的事件
trigger 自动触发绑定到被选元素的所有事件
//表单中有账号名、密码和确认密码
//验证账号和密码
$("#username").blur(()=>{
let username = $(this).val();
if(username.trim() === null ){
alert("账号不能为空");
submit=false;
}
})
$("#password").blur(()=>{
let password = $(this).val();
if(password.trim() === null ){
alert("密码不能为空");
submit=false;
}
})
$("#repassword").blur(()=>{
let password = $(this).val();
let repassword = $("#repassword").val();
if(password.trim() === null ){
alert("确认密码不能为空");
submit=false;
}else if(password.trim()!=repassword.trim()){
alert("两次密码不一致");
submit=false;
}
})
//在表单提交前自动验证表单数据
//全局flag是否可以注册
boolen submit=true;
$("#form").submit(()=>{
submit = true;
$("#username").trigger("blur");
$("#password").trigger("blur");
$("#repassword").trigger("blur");
return bool;
})
jQuery与AJAX
get与post
请求：
get方法只有两个参数（url, callback）,post方法有三个参数（url, data, callback）
get和post方法接收到服务器的数据都在回调函数callback中，callback有两个参数（data, status）,一个是来自服务器的字符串，另一个是状态
方法：
引入jquery.js
选择get请求或者post请求
编写请求和响应后的逻辑
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="common-js/jquery1.10.js"></script>
</head>
<body>
<p id="name"></p>
<p id="age"></p>
</body>
<script>
$(function (){
$.get("AJax?username=周珍珍&age=12&sex=女", (response, state)=>{
let student = JSON.parse(response);
$("p#name").text(student.name);
$("p#age").text(student.age);
})
})
</script>
</html>
声明
本文内容仅代表作者观点，或转载于其他网站，本站不以此文作为商业用途
如有涉及侵权，请联系本站进行删除
转载本站原创文章，请注明来源及作者。