jQuery是一个快速、简洁的JavaScript框架，简化了JavaScript的开发。它提供了丰富的选择器用于高效地操作DOM，包括基本、子代、后代、组合、过滤等选择器。jQuery还支持DOM操作如添加、删除和修改元素，以及事件绑定和动画效果，如淡入淡出、滑动和自定义动画。
jquery
什么是jquery
快速入门
选择器
dom操作
jquery对象和js对象的转换
事件
动画
ajax(了解)
jquery是什么
jquery是一套基于js开发的面向对象的框架，这个框架主要简化js的开发工作
jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（框架）于2006年1月由[John Resig](https://baike.baidu.com/item/John Resig/6336344)发布。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
jquery本质上还是js，所以要学jquery，需要先去学js
理论上来说，js能做的事情，jquery都能做
jquery下载
下载jquery可以去官网 https://jquery.com
jquery的版本主要分为三个：
1.x 的版本是基本上能够兼容所有的浏览器，包括IE6,7,8；功能不再更新，一般的项目可以使用这个版本
2.x的版本不兼容IE6,7,8，使用的人较少，功能也不再更新了；不建议使用
3.x的版本不兼容IE6,7,8 ，支持所有最新的浏览器，很多老的插件不再支持，官方在持续的开发中，可以选择使用
当从官网下载了压缩包以后，解压里面的内容可以看到两个文件
jquery-x.x.x.js 开发版本，程序员可以看懂里面的代码，一般建议开发的时候使用
jquery-x.x.x.min.js 压缩版本，里面的代码无缩进，变量名变成了a,b,c等名，体积更小，一般建议生产环境使用
如果使用cdn 可以选择
快速入门
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jquery快速入门</title>
<script src="../js/jquery-3.6.0.js"></script>
</head>
<body>
<div>1111111</div>
<div>1111111</div>
<div>1111111</div>
<div>1111111</div>
<div>1111111</div>
<div>1111111</div>
<div>1111111</div>
<div>1111111</div>
<div>1111111</div>
<div>1111111</div>
<script>
/*$("div:odd").css("background-color","lightpink");
$("div:even").css("background-color","lightblue");*/
var divs = document.querySelectorAll("div");
for(let i = 0 ; i < divs.length;i++){
if(i % 2 == 0){
divs[i].style.backgroundColor = "lightpink";
}else{
divs[i].style.backgroundColor = "lightblue";
}
}
</script>
</body>
</html>
选择器
jq的选择器是非常重要的一部分内容，所有使用jq来查找标签都会使用到选择器，选择器使用的很熟悉后能够减少很多代码
分类
基本选择器
$("*") 通配符选择器 返回所有的元素(jquery的对象)
$("div") 标签选择器 根据指定的标签名去匹配所有的标签
$(".myClass") 类选择器 根据指定的类名去匹配所有的标签 如果一个标签有多个类也可以匹配
$("#myId") id选择器 根据指定的id名去匹配元素 如果id的值中有特殊符号 是需要转义的 比如: id="foo[bar]" 就需要进行转义 $("#foo\\[bar\\]")
子代选择器
$("选择器1 > 选择器2") 在选择器1匹配的元素中去找匹配选择器2的子标签
后代选择器
$("选择器1 选择器2") 在选择器1匹配的元素中去找匹配选择器2的所有后代标签
组合选择器
$("选择器1,选择器2") 将每一个选择器匹配到的元素都返回回来 只要有一个能匹配都可以
相邻兄弟选择器
$("选择器1 + 选择器2") 匹配紧跟着选择器1的匹配选择器2的元素
属性选择器
$("div[id]") 找到有id属性的div标签
$("div[id=a]") 找到id的值为a的div标签
$("div[id!=a]") 找到id的值不为a的div标签
$("div[id^=a]") 找到id的值以a开头的div标签
$("div[id$=a]") 找到id的值以a结尾的div标签
$("div[id*=a]") 找到id的值包含a的div标签
过滤选择器
$("选择器:first") 返回所有匹配元素中的第一个
$("选择器:last") 返回所有匹配元素中的最后一个
$("选择器1:not(选择器2)") 匹配选择器1不匹配选择器2 $("input:not(:checked)") 找到未选中的input
$("选择器1:has(选择器2)") 匹配选择器1还匹配选择器2
$("选择器:even") 所有元素从0开始计数的所有偶数的元素
$("选择器:odd") 所有元素从0开始计数的所有奇数的元素
$("选择器:eq(0)") 所有元素从0开始计数的 指定索引的元素
$("选择器:lt(3)") 所有元素从0开始计数的 小于指定索引的元素
$("选择器:gt(0)") 所有元素从0开始计数的 大于指定索引的元素
$(":header") 匹配所有的h1-h6标签
$("选择器:contains(text)") 选择器匹配后 标签中的内容包含指定内容的元素
$("选择器:empty") 选择器匹配后 不包含子元素或者内容为空的元素
表单过滤选择器
:input 所有的表单元素 包含 textarea select button等
:text type=text的元素
:password 密码框
:radio 单选框
:checkbox 复选框
:submit 提交按钮
:reset 重置按钮
:file 文件选择器
:hidden 隐藏域
:checked 选择的 radio或者checkbox被选中的
:selected select中被选中的option
:enabled 可用的
:disabled 不可用的
:image 图片提交按钮
:nth-child 匹配其父元素下的指定的子元素
<ul>
<li>1111</li>
<li>222</li>
<li>333</li>
<li>444</li>
</ul>
<ul>
<li>555</li>
<li>666</li>
<li>777</li>
<li>888</li>
</ul>
$("li:nth-child(2)") 返回的是 [<li>333</li>,<li>777</li> ]
也可以写 $("li:nth-child(odd)")
:first-child 匹配其父元素下的第一个子元素
:last-child 匹配其父元素下的最后一个子元素
:only-child 匹配其父元素下的只有一个子元素的
dom操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jq_dom操作</title>
<script src="../js/jquery-3.6.0.js"></script>
</head>
<body>
<p>啊啊啊啊啊啊</p>
<input type="text">
<script>
//创建一个对应的标签对象
let div = $("<div></div>");
//添加到body中
//父级去添加子级
// $("body").append(div);
//子级添加到父级中
// div.appendTo($("body"))
//添加到前面去
// $("body").prepend(div)
// div.prependTo($("body"))
//兄弟关系添加
// $("p").after(div);
// $("p").before(div);
// div.insertAfter($("p"))
// div.insertBefore($("p"))
//克隆对象
var clone = div.clone();//返回新的对象
//删除
// $("p").remove();
//清空标签里面的内容
// $("p").empty();
//修改
//内容修改
//有参数的时候是设置内容 不识别html
$("p").text("<b>bbbbbbbbbbbbb</b>");
//没有参数的时候是返回内容
var text = $("p").text();
//设置内容 识别html标签
$("p").html("<b>bbbbbbbbbbbbb</b>");
//不设置参数是获取里面的内容
var text = $("p").html();
//表单元素
$("input").val("aaaa");
//获取表单元素的内容
var val = $("input").val();
//属性修改
$("p").attr("id","aa");
$("p").prop("class","aa");
//传一个参数就是获取
var attr = $("p").attr("class");
var attr = $("p").prop("id");
//建议如果操作的属性是元素的固有属性建议使用prop 如果是自定义属性建议使用attr
//针对class有专门的方法
$("p").addClass("a");//
$("p").removeClass("a")
$("p").toggleClass("a");//原本如果有就删除 如果没有就添加
//样式操作
$("p").css("color","red");//设置样式
let color = $("p").css("color");//设置样式
//同时设置多个样式
$("p").css({
"color":"blue",
"font-size":"50px"
});
//查询就是选择器
width();//设置或者获取宽
height();//设置或获取高
innerWidth() 包含补白区域 不包含边框的宽
innerHeight() 包含补白区域 不包含边框的高
outerWidth() 包含补白区域 包含边框的宽
outerHeight() 包含补白区域 包含边框的高
scrollTop() 设置或返回垂直滚动条距离顶部的偏移量
scrollLeft() 设置或返回水平滚动条距离左侧的偏移量
$(document).scrollTop(1000) //设置文档的垂直滚动条偏移
// alert(color);
// alert(val)
</script>
</body>
</html>
js对象和jq对象的转换
var p = document.querySelector("p");
//把js的对象转换成jq的对象
var $1 = $(p);
$1.text("qqqqqqq");
//jq对象转成js的对象
$1[0].innerText = "wwwwwwwwww";
jquery事件
jq的标准事件绑定
对象.事件方法(function....)
注意: 如果事件方法没有传回调函数进去，那么就是触发这个事件
//回调函数
$("input").click(function (){
// $("div").toggle(500);
// $("div").slideToggle(500);
$("div").fadeToggle(500);
/*var val = $(this).val();
if(val == "显示"){
// $("div").css("display","block")
// $("div").show(500);
// $("div").slideDown(500);
// $("div").fadeIn(500);
$(this).val("隐藏")
}else{
// $("div").css("display","none")
// $("div").hide(500);
// $("div").slideUp(500);
// $("div").fadeOut(500);
$(this).val("显示")
}*/
})
$("input").click();//相当于这个按钮被点击了一次
on方法绑定事件
在一个元素上可以绑定一个或多个事件监听器
对象.on("事件名称",function ...)
对象.on("事件名称",参数,function ...)
对象.on("事件名称1 事件名称2",function ...)
$("input").on("click",function (){
// $("div").toggle(500);
// $("div").slideToggle(500);
$("div").fadeToggle(500);
/*var val = $(this).val();
if(val == "显示"){
// $("div").css("display","block")
// $("div").show(500);
// $("div").slideDown(500);
// $("div").fadeIn(500);
$(this).val("隐藏")
}else{
// $("div").css("display","none")
// $("div").hide(500);
// $("div").slideUp(500);
// $("div").fadeOut(500);
$(this).val("显示")
}*/
})
$("input").on("click",{a:b},function (event){
alert(event.data.a);//打印参数的值
})
off 方法移除事件
在指定的元素上移除一个或多个事件
对象.off("事件名称") 如果没有参数 那就是移除全部事件
触发事件 trigger
对象.trigger("事件名称") 触发指定类型的事件
遍历
在jq中有自己的一套遍历的方法
js for.. for..in
jq的遍历
1. 对象.each(回调函数)
这个对象是 通过选择器找到多个标签后，需要遍历的这个对象
回调函数 这个回调函数可以有两个参数 index 表示元素在数组中的索引值 dom 元素的js对象
可以有返回值 返回true代表 continue 返回false代表 break
$("td").each(function (index,dom){
// this 和dom其实是同一个对象 注意都是js对象
alert($(this).text());
})
2. $.each(数组,function(index,ele){
// index 代表下标
// ele 代表数组中的每一个元素
})
动画
在jq中内置了一些动画的操作，主要针对的是显示和隐藏
三种显示和隐藏的方式
下面的方法都有三个参数
1. speed 动画的速度 单位是毫秒
2. easing 动画的效果
3. fn 动画执行完成后的回调函数
show()
hide()
toggle()
slideDown()
slideUp()
slideToggle()
fadeIn()
fadeOut()
fadeToggle()
自定义动画 animate方法
语法: $("选择器").animate({params},speed,function(){})
params 参数 定义动画形成的css属性
并不是所有的css都支持动态变化 一般来说支持的
可能的 CSS 样式值（提供实例）：
backgroundPosition
borderWidth
borderBottomWidth
borderLeftWidth
borderRightWidth
borderTopWidth
borderSpacing
margin
marginBottom
marginLeft
marginRight
marginTop
outlineWidth
padding
paddingBottom
paddingLeft
paddingRight
paddingTop
height
width
maxHeight
maxWidth
minHeight
minWidth
font
fontSize
bottom
left
right
top
letterSpacing
wordSpacing
lineHeight
textIndent
可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是动画完成后所执行的函数名称。
自定义动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动画</title>
<style>
*{
font-size: 12px;
margin: 0px;
padding: 0px;
}
div{
width: 100px;
height: 100px;
background-color: #21ffac;
}
</style>
<script src="../js/jquery-1.11.2.js"></script>
</head>
<body>
<div></div>
<script>
$("div").animate({
width:"200px",
height:"200px",
marginLeft:"1700px",
fontSize:"20px"
},2000)
$("div").animate({
width:"200px",
height:"200px",
marginLeft:"1700px",
marginTop:"880px",
fontSize:"20px"
},2000)
$("div").animate({
width:"200px",
height:"200px",
marginLeft:"0px",
marginTop:"880px",
fontSize:"20px"
},2000)
$("div").animate({
width:"200px",
height:"200px",
marginLeft:"0px",
marginTop:"0px",
fontSize:"20px"
},2000,function (){
alert("动画执行完成");
})
</script>
</body>
</html>
扫一扫
263
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
