胸怀万里世界， 放眼无限未来。这篇文章主要讲述#yyds干货盘点#--30分钟上手jQuery相关的知识，希望能为你提供帮助。
一、jQuery的介绍
- jQuery是什么
jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的css选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等
- jQuery的版本
- jQuery的引入
<
script src="http://img.readke.com/220531/200K13192-0.jpg">
<
/script>
- jQuery的基本语法
$().方法()
- jQuery对象和dom对象的关系
<
!DOCTYPE html>
<
html lang="en">
<
head>
<
meta charset="UTF-8">
<
title>
Title<
/title>
<
!--远程导入-->
<
!--<
script src="http://img.readke.com/220531/200K11M8-1.jpg">
<
/script>
-->
<
!--本地导入-->
<
script src="https://www.songbingjia.com/android/jquery3.6.js">
<
/script>
<
/head>
<
body>
<
ul class="c1">
<
li>
123<
/li>
<
li>
234<
/li>
<
li>
345<
/li>
<
/ul>
<
script>
// $(".c1 li").css("color","red");
console.log($(".c1 li"));
//jQuery类型 是dom集合对象[dom1,dom2,...]// 如何将jQury对象转换为Dom对象
console.log($(".c1 li")[1].innerHTML);
// 如何将Dom对象转换为jQuery对象;
var ele = document.querySelector(".c1 li");
// console.log(ele);
// ele.style.color = "red";
$(ele).css("color","orange")// [ele]<
/script>
<
/body>
<
/html>
二、jQuery的选择器 2.1 直接查找
- 基本选择器
/*
#id# id选择符
element# 元素选择符
.class# claw43ss选择符
selector1, selector2, selectorN# 同时获取多个元素的选择符 $("#id")
$(".class")
$("element")
$(".class,p,div")
*/- 组合选择器
/*
ancestor descendant// 包含选择符
parent >
child// 父子选择符
prev + next// 下一个兄弟选择符
prev ~ siblings// 兄弟选择符 $(".outer div")//outer 选择outer下所有div标签
$(".outer>
div")//outer 选择outer下儿子是div的标签
$(".outer+div")//outer 的所有兄弟标签
$(".outer~div")//outer 的下一个兄弟标签
*/- 属性选择器
/*
[attribute=value]// 获取拥有指定数据attribute,并且置为value的元素
$([type="checked"])
$([class*="xxx"])
*/// 3、属性选择器例子
// $(".links [href]").css("color","red");
// $(".links [href$=png]").css("color","red");
// $("[type=text]").css("border","1px solid red");
- 表单选择器
/*
$("[type=text]") 表单选择器还可以简写成$(":text")注意只适用于input标签: $("input:checked")
同样适用表单的以下属性
:enabled
:disabled
:checked
:selected
*/- 筛选器
/*// 筛选器
:first//从已经获取的元素集合中提取第一个元素
:even//从已经获取的元素集合中提取下标为偶数的元素
:odd//从已经获取的元素集合中提取下标为奇数的元素
:eq(index)//从已经获取的元素集合中提取指定下标index对应的元素
:gt(index)//从已经获取的元素集合中提取下标大于index对应的元素
:last//从已经获取的元素集合中提取最后一个元素
:lt(index)//从已经获取的元素集合中提取下标小于index对应的元素
:first-child//从已经获取的所有元素中提取他们的第一个子元素
:last-child//从已经获取的所有元素中提取他们的最后一个子元素
:nth-child//从已经获取的所有元素中提取他们的指定下标的子元素
// 筛选器方法
$().first()//从已经获取的元素集合中提取第一个元素
$().last()//从已经获取的元素集合中提取最后一个元素
$().eq()//从已经获取的元素集合中提取指定下标index对应的元素*/例子：
// $(".c1 li").css("color","red");
// $(".c1 li:first").css("color","red");
// $(".c1 li:last").css("color","red");
// $(".c1 li:eq(3)").css("color","red");
// $(".c1 li:gt(1)").css("color","red");
// $(".c1 li:lt(4)").css("color","red");
// $(".c1 li:even").css("color","red");
// $(".c1 li:odd").css("color","red");
var index = 2;
// $(".c1 li:eq(index)").css("color","red");
$(".c1 li").eq(index).css("color", "red");
$(".c1 li").first().css("color", "red");
$(".c1 li").last().css("color", "red");
2.2 导航查找
/*
// 查找子代标签：
$("div").children(".test") // 查找儿子标签
$("div").find(".test")//查找所有后代标签 // 向下查找兄弟标签
$(".test").next() // 下一个兄弟标签
$(".test").nextAll()//下边所有的兄弟标签
$(".test").nextUntil("#i1") // 查找.test所有的兄弟标签，直到#i1为止 // 向上查找兄弟标签
$("div").prev()
$("div").prevAll()
$("div").prevUntil() // 查找所有兄弟标签
$("div").siblings()// 查找父标签：
$(".test").parent()
$(".test").parents()
$(".test").parentUntil() */三、jQuery的事件绑定
/*
三种用法:
1. on 和 off
// 绑定事件
$().on("事件名",匿名函数)// 解绑事件,给指定元素解除事件的绑定
$().off("事件名")2. 直接通过事件名来进行调用
$().事件名(匿名函数)3. 组合事件,模拟事件
$().ready(匿名函数)// 入口函数
$(document).ready(function ()//等整个文档执行完了在执行read事件里边的代码);
$().hover(mouseover, mouseout)// 是onmouseover和 onmouseout的组合
$(".c1").hover(mouserover,mouserout);
function mouserover()
$(this).css("background-color","#6f5499")function mouserout()
$(this).css("background-color","#2b542c")$().trigger(事件名)// 用于让js自动触发指定元素身上已经绑定的事件，模拟用户操作*/四、jQuery的操作标签 4.1 文本操作
/*
$("选择符").html()// 读取指定元素的内容,如果$()函数获取了有多个元素,则提取第一个元素
$("选择符").html(内容) // 修改内容,如果$()函数获取了多个元素, 则批量修改内容$("选择符").text()// 效果同上,但是获取的内容是纯文本,不包含html代码
$("选择符").text(内容)// 效果同上,但是修改的内容中如果有html文本,在直接转成实体字符,而不是html代码
*/4.2 value操作
$().val() <
!DOCTYPE html>
<
html lang="en">
<
head>
<
meta charset="UTF-8">
<
title>
Title<
/title>
<
script src="https://www.songbingjia.com/android/jquery3.6.js">
<
/script>
<
script>
$(function () $("#i1").blur(function () // 获取jquery对象的value属性值
console.log(this.value);
console.log($(this).val());
// 设置value属性值
$(this).val("hello world"));
$("#i3").change(function ()
console.log(this.value);
console.log($(this).val());
$(this).val("guangdong");
);
console.log($("#i2").val());
console.log($("#i2").val("hello pig!")))<
/script>
<
/head>
<
body>
<
input type="text" id="i1">
<
selectid="i3">
<
option value="https://www.songbingjia.com/android/hebei">
河北省<
/option>
<
option value="https://www.songbingjia.com/android/hubei">
湖北省<
/option>
<
option value="https://www.songbingjia.com/android/guangdong">
广东省<
/option>
<
/select>
<
p>
<
textarea name="" id="i2" cols="30" rows="10">
123<
/textarea>
<
/p>
<
/body>
<
/html>
4.3 属性操作
/*
//读取属性值
$("选择符").attr("属性名");
// 获取非表单元素的属性值,只会提取第一个元素的属性值
$("选择符").prop("属性名");
// 表单元素的属性,只会提取第一个元素的属性值//操作属性
$("选择符").attr("属性名","属性值");
// 修改非表单元素的属性值,如果元素有多个,则全部修改
$("选择符").prop("属性名","属性值");
// 修改表单元素的属性值,如果元素有多个,则全部修改$("选择符").attr(属性名1:属性值1,属性名2:属性值2,.....)
$("选择符").prop(属性名1:属性值1,属性名2:属性值2,.....)
*/<
!DOCTYPE html>
<
html lang="en">
<
head>
<
meta charset="UTF-8">
<
title>
Title<
/title>
<
script src="https://www.songbingjia.com/android/jquery3.6.js">
<
/script>
<
/head>
<
body>
<
button class="select_all">
全选<
/button>
<
button class="cancel">
取消<
/button>
<
button class="reverse">
反选<
/button>
<
hr>
<
table border="1">
<
tr>
<
td>
选择<
/td>
<
td>
姓名<
/td>
<
td>
年龄<
/td>
<
/tr>
<
tr>
<
td>
<
input type="checkbox">
<
/td>
<
td>
张三<
/td>
<
td>
23<
/td>
<
/tr>
<
tr>
<
td>
<
input type="checkbox">
<
/td>
<
td>
李四<
/td>
<
td>
23<
/td>
<
/tr>
<
tr>
<
td>
<
input type="checkbox">
<
/td>
<
td>
王五<
/td>
<
td>
23<
/td>
<
/tr>
<
/table>
<
script>
$(".select_all").click(function ()
$("table input:checkbox").prop("checked",true);
);
$(".cancel").click(function ()
$("table input:checkbox").prop("checked",false);
);
$(".reverse").click(function ()
$("table input:checkbox").each(function ()
$(this).prop("checked",!$(this).prop("checked"))));
<
/script>
<
/body>
<
/html>
4.4 补充jQuery的each的循环
// 类方法，循环一个类
vararr = [11,22,33,444,555,666]$.each(arr,function (i,j)//会将arr数组的索引赋值给i,元素赋值给j
console.log(i,j))
//实力方法，循环一个具体的标签对象
<
ul>
<
li>
111<
/li>
<
li>
2222<
/li>
<
li>
33333<
/li>
<
/ul>
$("ul li").each(function () console.log(this)
)4.5 css样式操作
/*
获取样式
$().css("样式属性");
// 获取元素的指定样式属性的值,如果有多个元素,只得到第一个元素的值操作样式
$().css("样式属性","样式值").css("样式属性","样式值");
$().css("样式属性1":"样式值1","样式属性2":"样式值2",....)$().css("样式属性":function()// 其他代码操作
return "样式值";
);
*/4.5 class属性操作
$().addClass("class1class2 ... ...")// 给获取到的所有元素添加指定class样式
$().removeClass() // 给获取到的所有元素删除指定class样式
$().toggleClass() // 给获取到的所有元素进行判断,如果拥有指定class样式的则删除,如果没有指定样式则添加4.6 节点操作
/*
//创建一个jquery标签对象
$("<
p>
")//内部插入$("").append(content|fn)//追加到最后 $("p").append("<
b>
Hello<
/b>
");
$("").appendTo(content)//$("p").appendTo("div");
$("").prepend(content|fn)// 添加到最前面$("p").prepend("<
b>
Hello<
/b>
");
$("").prependTo(content)// $("p").prependTo("#foo");
//外部插入$("").after(content|fn)//添加到某个标签的后边("p").after("<
b>
Hello<
/b>
");
$("").before(content|fn)//添加到某个标签的前面$("p").before("<
b>
Hello<
/b>
");
$("").insertAfter(content)// $("p").insertAfter("#foo");
$("").insertBefore(content)// $("p").insertBefore("#foo");
//替换
$("").replaceWith(content|fn) // $("p").replaceWith("<
b>
Paragraph. <
/b>
");
//删除$("").empty()
$("").remove([expr])//复制
$("").clone([Even[,deepEven]])
*/4.7 事件委派【#yyds干货盘点#--30分钟上手jQuery】所谓事件委派就是在向一个父标签创建子标签的时候，新创建的标签会没有原有子标签的事件，这时候就需要通过事件委派将事件绑定到父标签上
标签克隆案例：<
div class="outer">
<
div class="item">
<
input type="button" value="https://www.songbingjia.com/android/+" class="add">
<
input type="text">
<
/div>
<
/div>
<
script src="http://img.readke.com/220531/200K13192-0.jpg">
<
/script>
<
script>
$(".add").click(function () var $clone=$(this).parent().clone()
$clone.children(".add").attr("value":"-","class":"rem")
$(".outer").append($clone);
);
$(.rem).click(function ()
$(this).parent().remove()
);
// 事件委派
$(".outer").on("click",".item .rem",function ()
$(this).parent().remove()
)<
/script>
4.8 jQuery的css尺寸
/*
$("").height([val|fn]) //获取盒模型内容的高度
$("").width([val|fn])//获取盒模型内容的宽度
$("").innerHeight()//获取盒模型的内边距和内容的高度
$("").innerWidth()//获取盒模型的内边距和内容的宽度
$("").outerHeight(true]) 加上true//获取整个模型的高度
$("").outerWidth(true)//获取整个模型的宽度
*/五、css位置
/*
$("").offset([coordinates])// 相对窗口偏移。
$("").position()// 相对于已经定位的父标签偏移
$("").scrollTop([val])// 获取匹配元素相对滚动条顶部的位置。加参数是设置位置
*/#例子：// offset:相对于窗口偏移position：相对于已经定位的父标签偏移量var $offset = $(".c2").offset();
var $position = $(".c2").position();
console.log("$offset top:",$offset.top);
console.log("$offset left:",$offset.left);
console.log("$position top:",$position.top);
console.log("$position left:",$position.left);
// 设置偏移量offset$(".c2").click(function () $(this).offset(top:500,left:500))
- 例子：返回顶部
<
!DOCTYPE html>
<
html lang="en">
<
head>
<
meta charset="UTF-8">
<
title>
Title<
/title>
<
style>
*
margin: 0;
.content
height: 2000px;
background-color: lightgray;
.return_top
width: 120px;
height: 50px;
background-color: lightseagreen;
color: white;
text-align: center;
line-height: 50px;
position: fixed;
bottom: 20px;
right: 20px;
.hide
display: none;
<
/style>
<
script src="https://www.songbingjia.com/android/jquery.js">
<
/script>
<
/head>
<
body>
<
div class="content">
<
h3>
文章...<
/h3>
<
/div>
<
div class="return_top hide">
返回顶部<
/div>
<
script>
console.log($(window).scrollTop());
$(".return_top").click(function () $(window).scrollTop(0));
$(window).scroll(function ()
console.log($(this).scrollTop());
var v =$(this).scrollTop();
if (v >
100)
$(".return_top").removeClass("hide");
else
$(".return_top").addClass("hide");
)
<
/script>
<
/body>
<
/html>
六、jQuery的动画效果
/*
//基本
show([s,[e],[fn]])显示元素
hide([s,[e],[fn]])隐藏元素//滑动
slideDown([s],[e],[fn])向下滑动
slideUp([s,[e],[fn]])向上滑动//淡入淡出
fadeIn([s],[e],[fn])淡入
fadeOut([s],[e],[fn])淡出
fadeTo([[s],opacity,[e],[fn]])让元素的透明度调整到指定数值//自定义
animate(p,[s],[e],[fn])自定义动画
stop([c],[j])暂停上一个动画效果,开始当前触发的动画效果*/<
!DOCTYPE html>
<
html lang="en">
<
head>
<
meta charset="UTF-8">
<
title>
Title<
/title>
<
style>
.c1
width: 250px;
height: 250px;
background-color: black;
.hide
display: none;
<
/style>
<
script src="https://www.songbingjia.com/android/jquery.js">
<
/script>
<
/head>
<
body>
<
p>
<
button class="show01">
显示<
/button>
<
button class="hide01">
隐藏<
/button>
<
/p>
<
p>
<
button class="show02">
显示<
/button>
<
button class="hide02">
隐藏<
/button>
<
/p>
<
p>
<
button class="show03">
显示<
/button>
<
button class="hide03">
隐藏<
/button>
<
/p>
<
p>
<
button class="show04">
显示<
/button>
<
button class="hide04">
隐藏<
/button>
<
/p>
<
hr>
<
div class="c1">
<
/div>
<
script>
// 自己实现的隐藏与显示$(".show01").click(function ()
$(".c1").removeClass("hide")
);
$(".hide01").click(function ()
$(".c1").addClass("hide")
);
// (1) show与hide方法$(".show02").click(function () $(".c1").show(1000,function ()
alert("显示成功")
);
);
$(".hide02").click(function () $(".c1").hide(1000,function ()
alert("隐藏成功")
));
// (2) slideDown与slideUp$(".show03").click(function () $(".c1").slideDown(1000,function ()
alert("显示成功")
);
);
$(".hide03").click(function () $(".c1").slideUp(1000,function ()
alert("隐藏成功")
));
// (3) fadeIn与fadeOut$(".show04").click(function () $(".c1").fadeIn(1000,function ()
alert("显示成功")
);
);
$(".hide04").click(function () $(".c1").fadeOut(1000,function ()
alert("隐藏成功")
));
<
/script>
<
/body>
<
/html>
- 自定义动画效果
$(".box").animate(动画最终效果,动画完成的时间,动画完成以后的回调函数) $(".animate").click(function () $(".c1").animate(
"border-radius":"50%",
"top":340,
"left":200
,1000,function ()
$(".c1").animate(
"border-radius":"0",
"top":240,
"left":120
,1000,function () $(".animate").trigger("click")
)
))
七、jQuery的扩展机制
- jQuery.extend(object)
扩展jQuery对象本身。用来在jQuery命名空间上增加新函数。 在jQuery命名空间上增加两个函数:<
script>
jQuery.extend(
min: function(a, b)return a <
b ? a : b;
,
max: function(a, b)return a >
b ? a : b;
);
$.min(2,3);
// =>
2
$.max(4,5);
// =>
5
<
/script>
- jQuery.fn.extend(object)
扩展 jQuery 元素集来提供新的方法（通常用来制作插件）增加两个插件方法：<
body>
<
input type="checkbox">
<
input type="checkbox">
<
input type="checkbox">
<
script src="https://www.songbingjia.com/android/jquery.min.js">
<
/script>
<
script>
jQuery.fn.extend(
check:function()
$(this).attr("checked",true);
,
uncheck: function()
$(this).attr("checked",false);
);
$(":checkbox").check() //调用自定义的checked方法
<
/script>
<
/body>
推荐阅读
- #yyds干货盘点#iOS 15 中的前端开发快捷方式
- #yyds干货盘点# Next.js通配符子域
- 处理电脑死机hdd灯不亮的原因
- 百度影音播放器在Win7下看视频缓冲不了怎样回事
- 自定义设置Win7纯净版系统“库”文件夹图标的办法
- taskmgr.exe是啥进程 Win7系统中的taskmgr.exe进程介绍
- 显示器驱动程序已停止响应导致Win7系统间歇性黑屏怎样办
- 系统设置实用程序应对灰鸽子木马病毒的攻略
- ie 浏览器设置改变Win7纯净版系统搜索提供者的办法