JQuery
1.介绍
1.1web前端知识点回顾
- HTML决定了网页的内容
- CSS决定了网页样式
- JavaScript决定了网页的功能
- 标签属性,样式的操作
- DOM节点的操作
- 异步交互的操作
- 但是在使用JS完成对应的功能时,需要程序员自己完成代码的编写,开发相对来说函数比较繁琐的,所以引入了JQuery的概念
1.2JQuery是什么?
- JQuery是一个JavaScript的框架,简化了JS的语法和操作
- 定义了HTML属性操作,样式操作,DOM操作等相关函数
- 实现了对Ajax异步请求的封装
- JQuery提供了很多预定义函数的JS文件
2.入门示例
2.1下载JQuery函数库
-
打开JQuery官网:https://jquery.com/
-
点击下载
-
选择下载的版本
-
选一个点击
-
Ctrl+s保存
2.2y引入
2.2.1本地文件引入(需要下载jQuery文件)
-
将jQuery文件粘贴到web项目中
-
在html(jsp)文件中通过script标签引入jQuery文件
<!--src="jQuery文件路径"--> <script type="text/javascript" src="jQuery/jquery-3.6.1.js"></script>
2.2.2CDN引入(不需要下载jQuery文件,需要联网)
-
CDN内容分发网络,将jQuery.js文件提前部署到一个服务器,我们可以通过jQuery文件在服务器上的访问路径来引入此jQuery.js文件
-
jQuery官方提供的CDN地址
-
非压缩版本:https://code.jquery.com/jquery.版本号.js
例: https://code.jquery.com/jquery-3.6.1.js -
压缩版本:https://code.jquery.com/jquery.版本号.min.js
例: https://code.jquery.com/jquery-3.6.1.min.js -
在html(jsp)文件中通过script标签引入jQuery文件
<!--src="jQuery文件地址"--> <script type="text/javascript" src="https://code.jquery.com/jquery-3.6.1.js"></script>
2.3示例
-
<%@ page contentType="text/html;charset=UTF-8" %> <html> <head> <title>JQuery</title> <%--引入jQuery--%> <script type="text/javascript" src="jquery-3.6.1.js"></script> </head> <body> <%--隐藏按钮--%> <button id="bt">点击我就消失</button> <script type="text/javascript"> //点击按钮隐藏按钮 $("#bt").click(function (){ $("#bt").hide(); }); </script> </body> </html>
3.API
3.1核心函数
-
jQuery可以简写为$
-
jQuery():用于获取HTML文档中的元素
-
jQuery([selector],[context]]):根据特定的选择器从HTML文档中获取元素
jQuery("#xx"); id选择器:获取当前文档id=xx的元素jQuery(".xx"); 类选择器:获取当前文档class=xx的元素 -
jQuery(html,[ownerCocument]):创建一个新的HTML元素
jQuery("<button>创建一个按钮</button>">; -
jQuery(fn):表示当html文档加载完毕再执行fn,等价于jQuery(document).ready(fn)
jQuery(function(){ alter("你好"); }); 网页文档加载完毕之后跳出一个弹窗显示你好
-
-
$(selector).事件(fn):当选择器选择的元素发生事件就执行fn//当前文档加载完毕执行fn $(document).ready(fn); //当id=bt的元素发生点击事件就执行fn ${"#bt").click(fn);
3.2选择器
3.2.1基本选择器
-
$("#xx"):id选择器
//获取当前文档id=btn的元素 $("#but") -
$(".xx"):类选择器
//获取当前文档class=ims的元素 $(".imgs") -
$("标签"):标签选择器
-
//获取当前文档标签为img的元素 $("img)
-
3.2.2复合选择器
-
多个基本选择器通过特定的符号进行连接,以实现更为精准的选择
-
$("selector1 selector2"):选择所有selector1匹配的元素里面的匹配selector2的元素
$("input .input2");获取input标签中class为input2的元素 -
$("selector1,selector2"):选择所有匹配selector1和selector2的元素
$("input,img");获取所有的input标签和img标签的元素 -
$("selector1>selector2"):选择selector1元素的子标签selector2
//例 <form action=""> <input type="text" name="input1"> <input type="text" name="input2"> </form> $("form>input");获取form标签下的直接子标签input元素 结果:获取input1元素 input2是input1的子标签,是form的孙子标签,所以不能获取 -
$("selector1+selector2"):选择所有紧挨着在selector1后面的selector2元素
<label ></label> <input name="input1"> <label ></label> <input name="input2"> <label ></label> <p></p> <input name="input3"> $("label+input");获取所有label标签后面紧挨着的input标签 结果:获取input1和input2元素 input3不在label后面紧挨着,所以不能获取 -
$("selector1~selector2"):选择所有在selector1后面的selector2元素
<label ></label> <input name="input1"> <label ></label> <input name="input2"> <label ></label> <p></p> <input name="input3"> $("label+input");获取所有label标签后面的input标签 结果:所有input的标签都能获取 跟+的唯一区别就是不用紧挨着
3.2.3选择器筛选
-
在选择器匹配的元素中,根据特点的筛选条件(索引,属性)更灵活的选择要操作的元素
语法 说明 $("selector:first") 匹配selector选择的所有元素中的第一个 $("selector:last") 匹配selector选择的所有元素中的最后一个 $("selector:odd") 匹配selector选择的所有元素中的索引为奇数(1,3,5,7...)的元素 $("selector:even") 匹配selector选择的所有元素中的索引为偶数(0,2,4,6...)的元素 $("selector:eq(index)") 匹配selector选择的所有元素中的索引为index的元素 $("selector:lt(index)") 匹配selector选择的所有元素中的索引小于index的元素 $("selector:gt(index)") 匹配selector选择的所有元素中的索引大于index的元素 $("selector[属性名=属性值]") 匹配selector选择的所有元素中属性名等于属性值的元素 $("selector[属性名!=属性值]") 匹配selector选择的所有元素中属性名不等于属性值的元素 $("selector[属性名!=属性值]"); <input name="input1"> <input name="input1"> <input name="input2"> $("input[name!=input1]"); 匹配所有input标签中name不等于input1的元素 结果:获取了input2元素
3.3筛选函数
-
选择器筛选的函数化
-
筛选函数 说明 $("selector").first() 相当于$("selector:first") $("selector").last() 相当于$("selector:last") $("selector").eq(index) 相当于$("selector:eq(index)") $("selector").hasClass("class元素名") 判断当前文档中的selector中是否有class元素名这个元素 $("selector").is(tag) 判断当前文档中的selector是否指定为tag元素
3.4属性操作函数
-
对HTML标签进行属性操作的一组函数
-
attr():获取/设置元素的属性值(不能获取value的属性值)
//只有一个参数时为获取 例:$("img").attr("src"); 获取img标签中src的属性值 //两个参数时为设置(更改) 例:$("img").attr("src","img02.png"); 将img标签中src的属性值改为img02.png -
val():获取/设置value的属性值
//没有参数时为获取 例:$("input").val(); 获取input标签中value的属性值 //一个参数时为设置(更改) 例:$("input").attr("按钮"); 将input标签中value的属性值改为按钮 -
removeAttr():移除元素的属性值
例:$("img").removeAttr("src"); 移除img标签中src的属性值 -
prop{}:批量设置元素的属性值
例:$("img").prop{src:"img02.png",width:200,alt:"批量设置"); 可以批量设置元素的属性值(用大括号括起来) -
addClass():为元素class属性添加一个样式名
例:<div id="d" class="style2 style3">JQ</div> 可以使用addClass函数再添加class属性(在css中定义好的) $("#d").addClass("style1"); 结果:class属性中有style1,2,3三个css定义好的样式 -
removeClass():删除元素class属性中指定的样式名
例:<div id="d" class="style2 style3">JQ</div> 可以使用removeClass函数删除指定的class属性(在css中定义好的) $("#d").removeClass("style2"); 结果:class属性中只剩下style3这一个css定义好的样式 -
toggleClass():从元素的属性中添加/移除指定的样式名(有则删,无则加)
例:<div id="d" class="style2 style3">JQ</div> 可以使用toggleClass函数删除/添加指定的class属性(在css中定义好的) $("#d").toggleClass("style2"); 结果:如果class中有style2这个样式名,则移除这个样式,如果没有,则添加 -
text():将参数以文本的形式设置到选择器匹配的元素的里面(不会识别HTML标签)
-
html():将参数以HTML标签的形式设置到选择器匹配的元素的里面,并且参数的内容会被浏览器解析为HTML标签,显示对应的标签效果
3.5CSS操作函数
-
css():获取/设置标签的样式
//设置单个标签 例:$("#div").css("width","200px"); //设置多个标签(用逗号隔开) 例:$("#div").css({width:"100px",height:"100px"}); //获取属性的属性值 例:$("#div").css("width"); -
position():获取标签的位置信息
//获取全部位置信息 例:var 对象名 = $("#div").position(); 获取id为div的标签的全部位置信息 //获取顶部位置信息(需要获取全部位置信息并且接收返回值) 例:对象名.top 获取id为div的标签的top位置信息 //获取左边位置信息(需要获取全部位置信息并且接收返回值) 例:对象名.left 获取id为div的标签的left位置信息 -
获取尺寸的函数
-
width()/height()
-
innerWidth()/innerHeight()
-
outerWidth()/outerHeight()
-
3.6文档处理函数
- DOM操作
3.6.1添加子节点
-
parent.append(child)/child.appendTo(parent):在父节点(parent)中拼接子节点(child),子节点会添加到父节点中的最后
child可以是一个HTML标签字符串,表示新建一个HTML元素拼接到parent child也可以通过选择器选择当前文档中的元素(被选择的元素会发生移动) 例:$("#div").append("<img src="img02.png"); 等价于$("<img src="img02.png">.appendTo($("#div"));
3.6.2插入节点
-
before/insertBefore:在某个元素前插入另外一个元素
div1.before(div2);在div1的前面插入div2 等价于div2.insertBefore(div1);将div2插入到div1之前 -
after/insertAfter:在某个元素后插入另外一个元素
div1.after(div2);在div1的后面插入div2 等价于div2.insertAfter(div1);将div2插入到div1的后面
3.6.3替换节点
- div1.replaceWith(div2):将div1的元素替换为div2
3.6.4删除节点
- parent.empty():清空parent节点下的所有子节点
- node.remove():清除当前(node)节点
3.6.5节点包裹
- node1.wrap(node2):使用node2将node1包裹起来
- node.unwrap():删除node的父节点
3.7事件函数
- 为页面中的元素绑定事件
3.7.1ready
- ready():HTML文档加载完毕触发执行
3.7.2焦点事件
-
blur(): 元素失去焦点时触发
例:鼠标点击输入框(元素)然后移除输入框,即元素失去焦点,触发blur事件
-
focus(): 元素获取焦点时触发
例:鼠标点击输入框(元素),即元素获取焦点,触发focus事件
3.7.3鼠标事件
- mouseDown():鼠标左键点击时触发
- mouseUp():鼠标左键松开时触发
- mouseEnter():鼠标指针穿过元素时触发
- mouseLeave():鼠标离开元素时触发(离开元素的子元素不会触发)
- mouseOut():鼠标离开元素时触发(离开元素的子元素同样也会触发)
- mouseOver():鼠标指针移到元素上时触发
- mouseMove():鼠标指针在元素上移到时触发
3.7.4键盘事件
- keyDown():按键按下时触发
- keyUp():按键松开时触发
3.7.5点击事件
- click():鼠标单击元素时触发
- dbclick():鼠标双击元素时触发
3.7.6内容改变
- change():内容被改变时触发
3.7.7打开/关闭事件
-
off("事件名称"):关闭元素的事件
-
on("事件名称"):重新打开元素的事件
重新打开的事件需要编写打开的事件 例:重新打开change事件 $("#div").on("change",function(){ 重新打开事件的事件 )};
3.7.8获取事件对象
- 每个事件对象的function都可以有参数,将参数打印即可得到事件的对象
- $(this):表示发生事件的元素
3.8效果函数
- 显示与异常或者动画效果
3.8.1显示与隐藏
- 以下函数都可以设置参数(速度的快慢)
- 参数可以为fast,slow,normal等单词
- 也可以是具体的毫秒值等
- 瞬间效果的隐藏和显示
- hide():隐藏元素
- show():显示元素
- toggle():如果是显示则隐藏,如果是隐藏则显示(具有瞬间效果)
- 有缩放效果的显示和隐藏
- slideUp():显示元素(向上缩小,直到没有)
- slideDown():隐藏元素(向下放大)
- slideToggle():如果是显示则隐藏,如果是隐藏则显示(具有缩放效果)
- 淡化效果的显示和隐藏
- fadeIn():显示元素(从没有到模糊再到清晰)
- fadeOut():隐藏元素(从清晰到模糊再到没有)
- fadeToggle():如果是显示则隐藏,如果是隐藏则显示(具有淡化效果)
- fadeTo():将元素的透明度改变到指定的值
- 参数一:速度的快慢
- 参数二:透明度
3.8.2动画
- animate():让一个元素通过改变属性值来改变效果
- 参数一:params:一组包含作为动画属性的最终样式属性和值的集合
- 参数二:speed:转换到最终动画的时间
- 参数三:easing:使用擦除效果的名次(需要插件支持),默认jQuery提供的linear和swing
- 参数四:fn:动画完成时执行的函数,每个元素执行一次
- stop():让执行中的动画停止,并且保留当前的状态
3.9Ajax函数
- ajax()
- url:Ajax请求的目标服务器地址
- type:指定请求的方式
- heades:设置请求头的参数
- data:传递的参数(post方法才可以使用,相当于send中的post)
- contentType:请求信息的转码方式
- processData:设置数据是否压缩传输
- success:function(res):Ajax请求成功之后执行的回调函数
- res表示服务器返回的数据
- error:function(res):Ajax请求出现错误执行的回调函数
- res表示服务器返回的异常信息对象
- get/post():发送get/post方式提交的Ajax请求
- 参数一:url
- 参数二:传递的参数
- 参数三:回调函数
- 参数四:服务器返回的数据的格式