首页 前端知识 jQuery基础知识梳理

jQuery基础知识梳理

2024-05-27 10:05:22 前端知识 前端哥 681 253 我要收藏

jQuery基础知识梳理

一、jQuery简介

1.web前端的知识回顾

HTML 决定了⽹⻚的内容

CSS 决定了标签的样式

JavaScript 决定了⽹⻚的功能:对标签属性、样式的操作、DOM节点操作、ajax异步交互

◦ 在使⽤JS完成对应功能时,需要程序员⾃⾏完成代码的编写,开发相对还是⽐较繁琐的

2.jQuery是什么

jQuery就是⼀个JavaScript的框架,简化了JS的语法和操作,定义了HTML属性操作、样式操作、

DOM操作等相关函数,实现了对ajax异步请求封装。

jQuery就是⼀个提供了很多预定义函数的JS⽂件。

3.jQuery⼊⻔使⽤

1、下载jQuery函数库

官⽹:https://jquery.com/

下载:https://jquery.com/download/

2.在⽹⻚中引⼊jQuery⽂件

1、本地⽂件引⼊

• 先下载jquery.js⽂件

• 将jquery.js⽂件拷⻉粘贴到web项⽬中

• 在html⽂件或者jsp⽂件,通过script标签引⼊jQuery⽂件

<!DOCTYPE html>
 <html>
 <head>
<meta charset="utf-8">
<title></title>
 <!-- 引⼊jQuery -->
 <script type="text/javascript" src="js/jquery-3.6.0.js"></script
 </head>
 <body>

 </body>
 </html>    

2.CDN引⼊

CDN 内容分发⽹络,将jQuery.js⽂件提前部署到⼀个服务器,我们可以通过jquery⽂件在服务器上

的访问路径来引⼊此jquery.js⽂件:

• jQuery官⽅提供的CDN地址:

◦ http://code.jquery.com/jquery-3.6.0.js

◦ http://code.jquery.com/jquery-3.6.0.min.js

• 在html、jsp⽂件中,通过script标签直接引⼊jquery的cdn地址即可

<!DOCTYPE html>
 <html>
 <head>
 <meta charset="utf-8">
 <title></title>
 <!-- 引⼊jQuery -->
 <script type="text/javascript" src="http://code.jquery.com/jquer
 </head>
 <body>

 </body>
 </html

使⽤⽰例:点击按钮隐藏图⽚

<!DOCTYPE html>
 <html>
 <head>
 <meta charset="utf-8">
 <title></title>
 <!-- 引⼊jQuery -->
 <script type="text/javascript" src="http://code.jquery.com/jquer
 </head>
 <body>
 <img id="img1" src="imgs/img01.png" height="200"/><br/>
 <button id="btn">测试</button>
 <script type="text/javascript">
 //点击按钮隐藏图⽚
 $("#btn").click(function(){
 $("#img1").hide();
 });
 </script>
 </body>
 </html>

二、jQuery核⼼函数

https://www.94xh.com/index.html

1、核⼼函数

jQuery() 函数,选择器函数, ⽤于获取HTML⽂档中的元素 ,简写为 $()

jQuery([selector,[context]]) 根据特定的规则从HTML⽂档中获取元素(特定的规则:选择器语法)

 $("#btn"); //获取当前⽂档中id=btn的元素
 $(".inputStyle"); //获取当前⽂档中class=inputStyle的元素

jQuery(html,[ownerDocument]) 创建⼀个新的HTML元素

 $("<textarea></textarea>")

jQuery(fn) 表⽰当⽹⻚⽂档加载完毕执⾏fn, 等价于 jQuery(document).ready(fn);

 $(function(){
 //给id=btn的按钮绑定点击事件
 $("#btn").click(function(){
 alert(111);
 });
 });

$(selector).事件(fn): 当选择器选择的元素发⽣对应的事件就执⾏fn

 //1.当前⽂档加载完毕执⾏fn
 $(document).ready(fn);

 //2.当id=btn的元素发⽣点击事件,就执⾏fn
 $("#btn").click(fn);

2、选择器

在 jQuery() 函数的参数中传递不同的选择器表达式,就可以获取⽹⻚⽂档中不同的元素

1、基本选择器

ID选择器: $(“#id”)

// 获取⽹⻚⽂档中id=btn的元素,相当于 document.getElementById("id")
$("#btn")

标签选择器: $(“tagName”)

// 获取⽹⻚⽂档中所有的img标签元素,相当于 document.getElementsByTagName("tagName");
$("img")

class选择器: $(“.class”)

//获取⽹⻚⽂档中所有class=inputStyle的元素,相当于 document.getElementsByClassName("i
$(".inputStyle")

2、复合选择器

复合选择器:将多个基本选择器通过特定的符号进⾏连接,以实现更为精确的选择

• $(“selector1 selector2”) 选择所有selector1 匹配的元素 ⾥⾯ 的匹配selector2的元素

• $(“selector1,selector2”) 选择所有匹配selector1 和 selector2的元素(并集)

• $(“selector1 > selector2”) 选择匹配selector1元素的 ⼦标签中 匹配selector2的元素

• $(“selector1 + selector2”) 匹配所有 紧接 在 selector1 元素后的 selector2元素

• $(“selector1 ~ selector2”) 匹配所有在 selector1 元素后的 selector2元素

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 [attrName=attrValue] ")匹配selector选择的元素集合中attrName属性值为attrValue
$("selector [attrName!=attrValue] ")匹配selector选择的元素不是集合中attrName属性值为attrValue

3、筛选函数

jQuery中提供了⼀些函数,对选择器匹配的元素集合进⾏筛选

筛选函数说明
$(“selector”). first()从选择器匹配的元素集合中选择第⼀个元素
$(“selector”). last()从选择器匹配的元素集合中选择最后⼀个元素
$(“selector”). eq(index)匹配selector选择的元素集合中索引为index的元素
$(“selector1”). filter(“selector2”)从selector1匹配的元素集合中选择匹配selector2的元素
$(“selector”). is(tag)判断选择器选择的元素是否为指定的标签
$(“selector1”). find(selector2)从selector1匹配的元素集合中的元素⾥⾯,选择匹配

4、属性操作函数

jQuery提供了⼀组函数⽤于对HTML标签进⾏属性操作

attr() : 获取/设置元素属性

//1.获取元素属性值
var v1 = $("img").attr("src");
var v2 = $("img").attr("width");

//2.设置元素属性
 $("img").attr("src","imgs/img02.png");
 $("img").attr("width",200);

val() :获取/设置元素的value属性值

 //1.获取元素value属性值
 var v3 = $("#userName").val();

 //2.设置元素的value属性值
 $("#userName").val("这是设置的值");

removeAttr(‘属性名’) :移除元素属性

 //removeAttr() 移除元素属性
 $("img").removeAttr("width");

prop({}) :同时设置元素的多个属性

$("#img2").prop({width:200,src:"imgs/img03.png",alt:"看不到吗?"});

addClass(styleName)、removeClass(styleName)、toggleClass(styleName) 操

作标签class属性值

 //addClass() 为元素class属性添加⼀个样式名
 $("#div1").addClass("style1");

 //removeClass() 删除元素class属性中指定的样式名
 $("#div1").removeClass("style2");

 //toggleClass 从元素的class属性中添加/移除指定的样式名
 $("#div1").toggleClass("style1");

text() 、 html() 相当于innerHTML操作

text(“”) : 将参数以⽂本的形式设置到选择器匹配元素的⾥⾯,即使设置的内容是HTML标签,也

不会当成标签解析

html(“”) : 将参数以HTML标签的形式设置到匹配的元素⾥⾯,参数内容会被浏览器解析为

HTML标签,显⽰对应的标签效果。

$("#div2").html("<img src='imgs/img02.png' height='80'/>"); //会在div中显⽰⼀张图
 $("#div2").text("<img src='imgs/img02.png' height='80'/>"); //会将参数直接以⽂本形

5、样式操作函数

css() 设置/获取元素的样式属性

 //1.设置标签的样式
 $("#div1").css("width","200px");
 $("#div1").css("height","200px");
 $("#div1").css("border","1px red solid");
 //多个样式也可以⼀起设置
 $("#div1").css({width:"100px",height:"100px",background:"#ff0000"});

 //2.获取标签指定的样式
 var v = $("#div1").css("height");

position() 获取元素的位置信息

 var position = $("#div1").position();
 console.log(position.top);
 console.log(position.left);

获取尺⼨的函数:

◦ width() / height();

◦ innerWitdh() / innerHeight();

◦ outerWidth()/ outerHeight();

三、jQuery进阶—ajax技术

1、⽂档处理函数

1、添加⼦节点

• append

• appendTo

// parent.append(child) : 在⽗节点中拼接⼦节点 (⼦节点会添加到⽗节点中的最后)
 // child可以是⼀个HTML标签字符串,表⽰新建⼀个HTML元素拼接到parent
 // child也可以是通过选择器选择的当前⽂档中的元素(被选择的元素发⽣移动)
 $("#div1").append("<img src='imgs/img03.png' height='100'/>");

 // child.appendTo(parent) : 将⼦节点拼接到⽗节点⾥⾯
 $("<img src='imgs/img03.png' height='100'/>").appendTo($("#div1"));

2、插⼊节点

• before

• insertBefore

// node1.before(node2): 在node1的前⾯插⼊node2
 $("#img2").before("<img src='imgs/img03.png' height='100'/>");

 // node2.insertBefore(node1): 将node2插⼊到node1之前
 $("<img src='imgs/img03.png' height='100'/>").insertBefore($("#img2"));

• after

• insertAfter

 // node1.after(node2) : 在node1的后⾯插⼊node2
//$("#img1").after("<img src='imgs/img03.png' height='100'/>");

 node2.insertAfter(node1): 将node2插⼊到node1的后⾯
 $("<img src='imgs/img03.png' height='100'/>").insertAfter($("#img1"));

3、替换节点

• replaceWith

 // node1.replaceWith(node2) : 使⽤node2替换node1
 $("#img2").replaceWith("<img src='imgs/img03.png' height='100'/>");

4、删除节点

• empty

 //parent.empty():清楚当前标签中所有的⼦标签
 $("#div1").empty();
 $("body").empty();

• remove

 // node.remove() :删除当前节点
 $("#img1").remove();

5、节点包裹

• wrap

• unwrap

 //node1.wrap(node2) : 使⽤node2将node1包裹起来
 $("#img3").wrap("<div style='border:2px pink solid'></div>")

 //node.unwrap() : 删除当前标签的⽗标签
 $("#img4").unwrap();

2、事件函数

⽤于为⻚⾯中的元素绑定事件

元素事件绑定语法:

$("selector").事件函数(fn);

 //例如: 当id=btn的元素发⽣点击事件时,就执⾏对应的fn
 $("#btn").click(function(){

 });

1、⽂档加载事件

ready() ⽂档加载完毕时触发

 $(document).ready(function(){
 //alert(1);
 });

2、焦点事件

• blur() 元素失去焦点时触发

$("#userName").blur(function(){
 console.log("---输⼊框失去焦点");
 });

• focus() 元素获得焦点时触发

$("#userName").focus(function(){
 console.log("---输⼊框获得焦点");
 });

3、⿏标事件

• mousedown() ⿏标左键按下

• mouseup() ⿏标左键松开

• mouseenter() ⿏标指针穿过• mouseleave() ⿏标离开 (与 mouseout 事件不同,只有在⿏标指针离开被选元素时,才会触发

mouseleave 事件。如果⿏标指针离开任何⼦元素,同样会触发 mouseout 事件)

• mouseout() ⿏标离开

• mouseover() ⿏标指针移到元素上

• mousemove() ⿏标指针在元素上移动

4、键盘事件

• keydown() 按键按下

• keyup() 按键松开

5、点击事件

• click() ⿏标单击事件

• dbclick() ⿏标双击事件

6、内容改变

• change() 输⼊框或下拉菜单等内容被改变

 <select id="city">
 <option value="北京">北京</option>
 <option value="上海">上海</option>
 <option value="武汉">武汉</option>
 </select>
 <script type="text/javascript">
 //输⼊框 和 下拉菜单 等内容可被改变的元素
 $("#city").change(function(){
 console.log("内容被改变了");
 });
 </script>

7、关闭/打开事件

• off(“事件名称”) 关闭元素的事件

• on(“事件名称”,fn) 重新打开/绑定元素的事件

 <button id="btn2">关闭事件</button>
 <button id="btn3">打开事件</button>

 <select id="city">
 <option value="北京">北京</option>
 <option value="上海">上海</option>
 <option value="武汉">武汉</option>
 </select>

 <script type="text/javascript">
 //输⼊框 和 下拉菜单 等内容可被改变的元素
 $("#city").change(function(){
 console.log("内容被改变了");
 });

 //关闭事件
 $("#btn2").click(function(){
 $("#city").off("change");
 });

 //重新打开事件
 $("#btn3").click(function(){
 $("#city").on("change",function(){
 console.log("重新被打开的change事件");
 });
 });
 </script>

8、获取事件对象

• 在事件函数的参数fn添加⼀个参数,可以获取当前事件的event对象

 $("#city").change(function(event){
 //event表⽰事件对象
 console.log(event);
 //$(this)表⽰发⽣事件的元素
 });

3、效果函数

• 元素的隐藏与显⽰

• 动画

1、隐藏与显⽰

以下显⽰与隐藏的函数都可以设置⼀个时间参数,⽤于设置显⽰隐藏的速度

• 时间参数可以是 slow / normal / fast 单词

• 也可以是具体的数值,单位是ms

• show/hide/toggle

 <img src="imgs/img01.png" height="200" />
<img src="imgs/img02.png" height="200" />
 <img src="imgs/img03.png" height="200" />

 <hr>
 <button id="btn1">测试hide()</button>
 <button id="btn2">测试show()</button>
 <button id="btn3">测试toggle()</button>

 <script type="text/javascript" src="js/jquery-3.6.0.js"></script>
 <script type="text/javascript">
 // hide() 隐藏
 $("#btn1").click(function(){
 $("img").hide();
 // show() 显⽰
 $("#btn2").click(function(){
 $("img").show();
 });
 // toggle() 如果原来显⽰就执⾏隐藏,如果原来隐藏就执⾏显⽰
 $("#btn3").click(function(){
 $("img").toggle();
 });
 </script>

• slideDown/slideUp/slideToggle

放⼤缩⼩的显⽰与隐藏

 <button id="btn4">测试slideUp()</button>
 <button id="btn5">测试slideDown()</button>
 <button id="btn6">测试slideToggle()</button>

 <script type="text/javascript" src="js/jquery-3.6.0.js"></script>
 <script type="text/javascript">
 // slideUp() 缩起来
 $("#btn4").click(function(){
 $("img").slideUp();
 });
 // slideDown() 展开
 $("#btn5").click(function(){
 $("img").slideDown();
 });
 // slideToggle() 如果原来显⽰就执⾏隐藏,如果原来隐藏就执⾏显⽰
 $("#btn6").click(function(){
 $("img").slideToggle();
 });
 </script>

• fadeOut/fadeIn/fadeToggle/fadeTo

淡⼊淡出的显⽰与隐藏

 <button id="btn7">测试fadeOut()</button>
 <button id="btn8">测试fadeIn()</button>
 <button id="btn9">测试fadeToggle()</button>
 <button id="btn10">测试fadeTo()</button>

 <script type="text/javascript" src="js/jquery-3.6.0.js"></script>
 <script type="text/javascript">
 //fadeOut 淡出
 $("#btn7").click(function(){
 $("img").fadeOut();
 });
 //fadeIn 淡⼊
 $("#btn8").click(function(){
 $("img").fadeIn();
 });
 //fadeToggle
 $("#btn9").click(function(){
 $("img").fadeToggle();
 });
 //fadeTo 将元素的透明度改变到指定的值
 // 参数1:速度
 // 参数2:透明度
 $("#btn10").click(function(){
 $("img").fadeTo(3000,0.5);
 });
 </script>

2、动画播放与停⽌

• animate

• stop

 <img src="imgs/img01.png" id="img4"
 style="width: 200px; height: 200px; border-radius: 50%" />
 <button id="btn11">测试动画</button>
 <button id="btn12">停⽌动画</button>

 <script type="text/javascript">
 //params:⼀组包含作为动画属性和终值的样式属性和及其值的集合
 //speed:三种预定速度之⼀的字符串("slow","normal", or "fast")或表⽰动画时⻓的毫秒
数值(如:1000)
 //easing:要使⽤的擦除效果的名称(需要插件⽀持).默认jQuery提供"linear" 和 "swing".
 //fn:在动画完成时执⾏的函数,每个元素执⾏⼀次。
 $("#btn11").click(function(){
     $("#img4").animate({width:"300px",height:"300px"},5000);
     $("#img4").animate({width:"100px",height:"100px"},5000);
     });
 $("#btn12").click(function(){
     //在动画完成之前执⾏stop,,就让动画停⽌下来,保持当前状态
     $("#img4").stop();
 });
 </script>

4、AJAX (重要)

1、ajax()函数
$.ajax({
    url:"请求url?param1=v1", //url ajax请求的⽬
    标服务器地址
    type:"get|post", //type 指定请求
    ⽅式(get|post)
    headers:{ //headers
    设置请求头参数
    key1:"value1",
    key2:"value2"
    },
    data:{ //data
    传递的参数
    userName:"zhangsan",
    userPwd:"123456"
    },
    contentType:"application/json", //contentType 请求信息的转码⽅式
    processData:false, //processData 设置数据是
    否压缩传输(⽂件上传设置为falsesuccess:function(res){ //success ajax请求成功之后执⾏的回调函数,参数res
    就是服务器返回的数据
    },
    error:function(e){ //error ajax请求出现错误执⾏的回调函数,参数
    e表⽰异常信息对象
    }
})
2、jQuery的异步交互实例

验证⽤⼾是否可⽤

regist.jsp

 <%@ page contentType="text/html;charset=UTF-8" language="java" %>
 <html>
 <head>
     <title>$Title$</title>
     <script type="text/javascript" src="js/jquery-3.6.0.js"></script>
 </head>
 <body>
     <h3>⽤⼾注册</h3>
         <form action="" method="post">
             <p>
             帐号:<input type="text" id="userName"/><label id="tipsLabel"></label>
             	  <input type="button" value="检测" id="checkBtn"/>
             </p>
             <p>密码:<input type="password"/></p>
             <p>确认密码:<input type="password"/></p>
             <p>姓名:<input type="text"/></p>
             <p>电话:<input type="text"/></p>
             <p><input type="submit" value="提交注册"/></p>
         </form>
     <script type="text/javascript">
     $("#checkBtn").click(function(){
         //发送ajax请求,验证⽤⼾名是否可⽤
         var name = $("#userName").val();
         $.ajax({
             url:"CheckUserNameServlet?userName="+name, //url传递⽤⼾名
             type:"get",
             success:function(res){
             if(res.code == 1000){
             $("#tipsLabel").replaceWith("<label id='tipsLabel' style='color:green'>⽤⼾名可⽤!</label>");
             }else{
             $("#tipsLabel").replaceWith("<label id='tipsLabel' style='color:red'>⽤⼾名不可⽤!</label>");
             }
             }
         });
     });
     </script>
     </body>
 </html>
  1. CheckUserNameServlet
@WebServlet("/CheckUserNameServlet")
public class CheckUserNameServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp)throws ServletException, IOException {
        doPost(req, resp);
    }
    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse
    response) throws ServletException, IOException {
        //1.接收⽤⼾名
        String name = request.getParameter("userName");
        //2.判断是否可⽤
        boolean b = !name.startsWith("admin");
        //3.响应ajax请求
        response.setContentType("application/json;charset=utf-8");
        response.setCharacterEncoding("UTF-8");
        String jsonStr = b ? "{\"code\":1000,\"msg\":\"success\"}":"
        {\"code\":1001,\"msg\":\"fail\"}";
        // {"code":1000,"msg":"success"} {"code":1001,"msg":"fail"}
        PrintWriter out = response.getWriter();
        out.println(jsonStr);
        out.flush();
        out.close();
     }
}

3、get(url,params,fn,type)

发送get⽅式的异步请求

// 参数1:请求的url
// 参数2:传递的参数
// 参数3:回调函数
// 参数4:服务器返回的数据的格式 (json,html,text,xml)
$.get("CheckUserNameServlet",{userName:name},function(res){
    if(res.code == 1000){
    $("#tipsLabel").replaceWith("<label id='tipsLabel'>⽤⼾名可⽤!
    </label>");
    }else{
    $("#tipsLabel").replaceWith("<label id='tipsLabel'>⽤⼾名不可⽤!
    </label>");
    }
	},
   "json");
4、post(url,params,fn,type)

发送post⽅式的异步请求

// 参数1:请求的url
// 参数2:传递的参数
// 参数3:回调函数
// 参数4:服务器返回的数据的格式 (json,html,text,xml)
$.post("CheckUserNameServlet",{userName:name},function(res){
    if(res.code == 1000){
    $("#tipsLabel").replaceWith("<label id='tipsLabel'>⽤⼾名可⽤!
    </label>");
    }else{
    $("#tipsLabel").replaceWith("<label id='tipsLabel' >⽤⼾名不可⽤!
    </label>");
    }
    },"json");
转载请注明出处或者链接地址:https://www.qianduange.cn//article/9745.html
标签
intellij-idea
评论
发布的文章
大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!