jQuery基础知识梳理

「爱情、让人受尽委屈。」 2024-04-20 11:27 61阅读 0赞

## 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>
     
     <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>
     
     <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、选择器筛选

> 在选择器匹配的元素中根据特定的筛选条件（索引、属性）更灵活的选择要操作的元素

<table> 
 <thead> 
  <tr> 
   <th>选择器筛选语法</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>$("selector: first ")</td> 
   <td>匹配selector选择的元素集合中的第⼀个</td> 
  </tr> 
  <tr> 
   <td>$("selector: last ")</td> 
   <td>匹配selector选择的元素集合中的最后⼀个</td> 
  </tr> 
  <tr> 
   <td>$("selector: odd ")</td> 
   <td>匹配selector选择的元素集合中索引为奇数的元素(1,3,5,7,…)</td> 
  </tr> 
  <tr> 
   <td>$("selector: even ")</td> 
   <td>匹配selector选择的元素集合中索引为偶数的元素(0,2,4,6,…)</td> 
  </tr> 
  <tr> 
   <td>$("selector: eq(index) ")</td> 
   <td>匹配selector选择的元素集合中索引为index的元素</td> 
  </tr> 
  <tr> 
   <td>$("selector: lt(index) ")</td> 
   <td>匹配selector选择的元素集合中索引⼩于index的元素</td> 
  </tr> 
  <tr> 
   <td>$("selector: gt(index) ")</td> 
   <td>匹配selector选择的元素集合中索引⼤于index的元素</td> 
  </tr> 
  <tr> 
   <td>$("selector [attrName=attrValue] ")</td> 
   <td>匹配selector选择的元素集合中attrName属性值为attrValue</td> 
  </tr> 
  <tr> 
   <td>$("selector [attrName!=attrValue] ")</td> 
   <td>匹配selector选择的元素不是集合中attrName属性值为attrValue</td> 
  </tr> 
 </tbody> 
</table>

#### 3、筛选函数 ####

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

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

#### 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 设置数据是
        否压缩传输（⽂件上传设置为false）
        success: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");