jQuery知识点总结

素颜马尾好姑娘i 2022-09-11 01:20 136阅读 0赞

## 1.jQuery ##

是一个快速小巧、功能丰富的第三方JavaScript库

功能：

1.选取HTML元素

2.操作元素

3.CSS操作

4.操作HTML事件

…

使用：引入链接到需要的HTML文件中

1.直接引入网络资源

2.将网络资源下载到本地去引入

## 2.jQuery的使用 ##

### 2.1$(选择器) ###

*  普遍选择器 选取所有元素
    
        console.log($("*"));
 *  标签名选择器 选取的为数组
    
        console.log($("p"));
 *  根据类名选择
    
        console.log($(".p3"));
 *  组合选择器
    
        console.log($("p.p3"));
 *  根据属性选择器\[\] 选取带有某些属性的元素
    
        console.log($("[class='p3']"));
 *  后代和子代选择器
    
        console.log($("div p")[0]);
        console.log($("div>div")[0]);

### 2.2$(html(片段)) ###

将HTML片段转换成Element元素，然后再用jQuery进行封装

### 2.3$(Element元素) ###

将Element元素转换成Jquery

### 2.4$(匿名函数) ###

匿名函数 会在文档在在完成之后执行

防止文档没有加载完成就运行jQuery代码

// 文档就绪事件
            $(document).ready(function() { 
                $("p").click(function() { 
                    $(this).hide();
                });
            });

//匿名函数
    $(function(){ 
    
    })

## 3.jQuery事件 ##

**click ：当用户点击某个元素时，触发事件**

$(document).ready(function() { 
                $("div").click(function() { 
                    alert("点我");
                });
            });

$(".p1").mouseenter(function() { 
                    alert("已经点到我了");
                })

//bind() 方法为被选元素添加一个或多个事件处理程序，并规定事件发生时运行的函数。
    $("button").bind("click",function(){ 
      $("p").slideToggle();
    });

//当输入域失去焦点 (blur) 时改变其颜色：
    $("input").blur(function(){ 
      $("input").css("background-color","#D6D6FF");
    });
    //获取焦点
     $("input").focus(function() { 
                    // $(this).hide();
                    $(this).css("background-color", "red");
                });

/*当元素的值发生改变时，会发生 change 事件。 该事件仅适用于文本域（text field），以及 textarea 和 select 元素。 change() 函数触发 change 事件，或规定当发生 change 事件时运行的函数。 注释：当用于 select 元素时，change 事件会在选择某个选项时发生。当用于 text field 或 text area 时，该事件会在元素失去焦点时发生。*/
    
    
    $(".field").change(function(){ 
      $(this).css("background-color","#FFFFCC");
    });

//当点击鼠标时，隐藏或显示 p 元素：
    
    $("div").delegate("button","click",function(){ 
      $("p").slideToggle();
    });

//isDefaultPrevented() 方法返回指定的 event 对象上是否调用了 preventDefault() 方法。
    //例题 防止链接打开 URL，并声明来自 isDefaultPrevented() 的结果：
    $("a").click(function(){ 
    event.DefaultPrevented();
    alert("已经阻止a的默认行为了");
    })

<table> 
 <thead> 
  <tr> 
   <th>方法</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><a href="https://www.w3school.com.cn/jquery/event_bind.asp" rel="nofollow">bind()</a></td> 
   <td>向匹配元素附加一个或更多事件处理器</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.w3school.com.cn/jquery/event_blur.asp" rel="nofollow">blur()</a></td> 
   <td>触发、或将函数绑定到指定元素的 blur 事件</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.w3school.com.cn/jquery/event_change.asp" rel="nofollow">change()</a></td> 
   <td>触发、或将函数绑定到指定元素的 change 事件</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.w3school.com.cn/jquery/event_click.asp" rel="nofollow">click()</a></td> 
   <td>触发、或将函数绑定到指定元素的 click 事件</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.w3school.com.cn/jquery/event_dblclick.asp" rel="nofollow">dblclick()</a></td> 
   <td>触发、或将函数绑定到指定元素的 double click 事件</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.w3school.com.cn/jquery/event_delegate.asp" rel="nofollow">delegate()</a></td> 
   <td>向匹配元素的当前或未来的子元素附加一个或多个事件处理器</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.w3school.com.cn/jquery/event_die.asp" rel="nofollow">die()</a></td> 
   <td>移除所有通过 live() 函数添加的事件处理程序。</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.w3school.com.cn/jquery/event_error.asp" rel="nofollow">error()</a></td> 
   <td>触发、或将函数绑定到指定元素的 error 事件</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.w3school.com.cn/jquery/event_isdefaultprevented.asp" rel="nofollow">event.isDefaultPrevented()</a></td> 
   <td>返回 event 对象上是否调用了 event.preventDefault()。</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.w3school.com.cn/jquery/event_pagex.asp" rel="nofollow">event.pageX</a></td> 
   <td>相对于文档左边缘的鼠标位置。</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.w3school.com.cn/jquery/event_pagey.asp" rel="nofollow">event.pageY</a></td> 
   <td>相对于文档上边缘的鼠标位置。</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.w3school.com.cn/jquery/event_preventdefault.asp" rel="nofollow">event.preventDefault()</a></td> 
   <td>阻止事件的默认动作。</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.w3school.com.cn/jquery/event_result.asp" rel="nofollow">event.result</a></td> 
   <td>包含由被指定事件触发的事件处理器返回的最后一个值。</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.w3school.com.cn/jquery/event_target.asp" rel="nofollow">event.target</a></td> 
   <td>触发该事件的 DOM 元素。</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.w3school.com.cn/jquery/event_timeStamp.asp" rel="nofollow">event.timeStamp</a></td> 
   <td>该属性返回从 1970 年 1 月 1 日到事件发生时的毫秒数。</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.w3school.com.cn/jquery/event_type.asp" rel="nofollow">event.type</a></td> 
   <td>描述事件的类型。</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.w3school.com.cn/jquery/event_which.asp" rel="nofollow">event.which</a></td> 
   <td>指示按了哪个键或按钮。</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.w3school.com.cn/jquery/event_focus.asp" rel="nofollow">focus()</a></td> 
   <td>触发、或将函数绑定到指定元素的 focus 事件</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.w3school.com.cn/jquery/event_keydown.asp" rel="nofollow">keydown()</a></td> 
   <td>触发、或将函数绑定到指定元素的 key down 事件</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.w3school.com.cn/jquery/event_keypress.asp" rel="nofollow">keypress()</a></td> 
   <td>触发、或将函数绑定到指定元素的 key press 事件</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.w3school.com.cn/jquery/event_keyup.asp" rel="nofollow">keyup()</a></td> 
   <td>触发、或将函数绑定到指定元素的 key up 事件</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.w3school.com.cn/jquery/event_live.asp" rel="nofollow">live()</a></td> 
   <td>为当前或未来的匹配元素添加一个或多个事件处理器</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.w3school.com.cn/jquery/event_load.asp" rel="nofollow">load()</a></td> 
   <td>触发、或将函数绑定到指定元素的 load 事件</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.w3school.com.cn/jquery/event_mousedown.asp" rel="nofollow">mousedown()</a></td> 
   <td>触发、或将函数绑定到指定元素的 mouse down 事件</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.w3school.com.cn/jquery/event_mouseenter.asp" rel="nofollow">mouseenter()</a></td> 
   <td>触发、或将函数绑定到指定元素的 mouse enter 事件</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.w3school.com.cn/jquery/event_mouseleave.asp" rel="nofollow">mouseleave()</a></td> 
   <td>触发、或将函数绑定到指定元素的 mouse leave 事件</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.w3school.com.cn/jquery/event_mousemove.asp" rel="nofollow">mousemove()</a></td> 
   <td>触发、或将函数绑定到指定元素的 mouse move 事件</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.w3school.com.cn/jquery/event_mouseout.asp" rel="nofollow">mouseout()</a></td> 
   <td>触发、或将函数绑定到指定元素的 mouse out 事件</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.w3school.com.cn/jquery/event_mouseover.asp" rel="nofollow">mouseover()</a></td> 
   <td>触发、或将函数绑定到指定元素的 mouse over 事件</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.w3school.com.cn/jquery/event_mouseup.asp" rel="nofollow">mouseup()</a></td> 
   <td>触发、或将函数绑定到指定元素的 mouse up 事件</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.w3school.com.cn/jquery/event_one.asp" rel="nofollow">one()</a></td> 
   <td>向匹配元素添加事件处理器。每个元素只能触发一次该处理器。</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.w3school.com.cn/jquery/event_ready.asp" rel="nofollow">ready()</a></td> 
   <td>文档就绪事件（当 HTML 文档就绪可用时）</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.w3school.com.cn/jquery/event_resize.asp" rel="nofollow">resize()</a></td> 
   <td>触发、或将函数绑定到指定元素的 resize 事件</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.w3school.com.cn/jquery/event_scroll.asp" rel="nofollow">scroll()</a></td> 
   <td>触发、或将函数绑定到指定元素的 scroll 事件</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.w3school.com.cn/jquery/event_select.asp" rel="nofollow">select()</a></td> 
   <td>触发、或将函数绑定到指定元素的 select 事件</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.w3school.com.cn/jquery/event_submit.asp" rel="nofollow">submit()</a></td> 
   <td>触发、或将函数绑定到指定元素的 submit 事件</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.w3school.com.cn/jquery/event_toggle.asp" rel="nofollow">toggle()</a></td> 
   <td>绑定两个或多个事件处理器函数，当发生轮流的 click 事件时执行。</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.w3school.com.cn/jquery/event_trigger.asp" rel="nofollow">trigger()</a></td> 
   <td>所有匹配元素的指定事件</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.w3school.com.cn/jquery/event_triggerhandler.asp" rel="nofollow">triggerHandler()</a></td> 
   <td>第一个被匹配元素的指定事件</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.w3school.com.cn/jquery/event_unbind.asp" rel="nofollow">unbind()</a></td> 
   <td>从匹配元素移除一个被添加的事件处理器</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.w3school.com.cn/jquery/event_undelegate.asp" rel="nofollow">undelegate()</a></td> 
   <td>从匹配元素移除一个被添加的事件处理器，现在或将来</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.w3school.com.cn/jquery/event_unload.asp" rel="nofollow">unload()</a></td> 
   <td>触发、或将函数绑定到指定元素的 unload 事件</td> 
  </tr> 
 </tbody> 
</table>

## 4.效果 ##

### 4.1隐藏/显示 ###

**hide（）：隐藏HTML元素**

参数：两个可选

1.速度 数字类型的 毫秒 string类型(fast/slow)

2.函数 是一个回调函数，回调完成之后的操作

$("#hide").click(function() {
                    $(this).hide(1000, function() {
                        alert("我已经隐藏");
                    });
                    $("p").hide(1000);
                    $("#show").show(1000);
                });

**show()：显示HTML元素**

参数：两个可选

1.速度 数字类型的 毫秒 string类型(fast/slow)

2.函数 是一个回调函数，回调完成之后的操作

$("#show").click(function() {
                    $(this).hide(1000);
    
                    $("p").show(1000);
                    $("#hide").show(1000);
                });

**toggle():显示被隐藏的元素，并隐藏已显示的元素**

参数：两个可选

1.速度 数字类型的 毫秒 string类型(fast/slow)

2.函数 是一个回调函数，回调完成之后的操作

$("#btn").click(function() { 
                    $("p").toggle(1000, function() { 
                        alert("状态被切换");
                    });
                });

### 4.2淡入淡出 ###

**fadeIn():将已经隐藏的元素慢慢淡入**

//可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
    
    //可选的 callback 参数是 fading 完成后所执行的函数名称。

$("#btn").click(function() { 
                    $("div").fadeIn(3000, function() { 
                        alert("我已经显示");
                    });
    
                });

**fadeOut():将显示的元素慢慢淡出**

$("#div2").fadeOut(3000, function() { 
                        alert("我正在慢慢消失");
                    });

**fadeTo():渐变给定不透明值**

// 将div3渐变给定不透明值
      // $(selector).fadeTo(speed,opacity,callback);
                    $("#div3").fadeTo("fast", 0.15, function() { 
                        $("#div3").text("我已经在慢慢变淡了");
                    });

### 4.3滑动 ###

**slideDown()：用于向下滑动元素**

语法：`$(selector).slideDown(speed,callback);`

参数：speed（效果时长）与callback（回调函数）

$(".btn2").click(function() { 
            $(".app2").slideDown(3000, function() { 
                $(".app2").css("background", "pink");
            });

**slideUp()：用于向下滑动元素**

$(".btn1").click(function() { 
            $(".app1").slideUp();
        });

**slideToggle()：该方法可以在slideDown()与slideUp()之间进行切换**

$(".btn3").click(function() {
            $(".app1").slideToggle();
            $(".app2").slideToggle();
        });

### 4.4动画 ###

**animate()：用于创建自定义动画**

语法：`$(selector).animate({params},speed,callback);`

如需对位置进行操作，要记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute

当使用 animate() 时，必须使**用 Camel 标记法书**写所有的属性名，比如，必须使用 **paddingLeft** 而不是 padding-left，使用 **marginRight** 而不是 margin-right

$("button").click(function() { 
            $("div").animate({ 
                left: '250px',
                top: '50px',
                opacity: '0.2',
                width: '100px',
                height: '100px'
    
            });
        });

### 4.5停止效果或动画 ###

**stop()：用于在动画或效果完成前对它们进行停止。**

`$(selector).stop(stopAll,goToEnd);`

$("#stop").click(function(){ 
      $("#panel").stop();
    });

### 4.6链式调用 ###

**通过 jQuery，您可以把动作/方法链接起来。**

**Chaining 允许我们在一条语句中允许多个 jQuery 方法（在相同的元素上）。**

$(document).click(function() { 
                //链式调用
                $("#div1").css("color", "red").slideUp(2000)
                    .slideDown(2000)
                    .fadeIn(2000)
                    .fadeOut(2000);
            });

## 6.操作dom节点 ##

### 6.1获取节点 ###

$(选择器)

### 6.2获取内容 ###

**.text()：强行获取文本** `console.log($("#app").text());`

.html()：获取文本和标签 `console.log($("#app").html());`

**.val()：获取输入框中的值**

$("#btn").click(function() {
            // 设置input内容框中的值
            $("input").val("999");
            console.log($("#input").val());
        });

**.attr()：获取属性** `console.log($("a").attr("href"));`

### 6.3设置内容 ###

**text():** `console.log($("#app").text("设置"));`

**html():** `console.log($("#app").html("<p>hdhhdhdh</p>"));`

**val():** `设置input输入框中的值 $("input").val("999");`

**attr():**

// 设置a的属性
        $("a").attr("href", "http://taobao.com");
        $("a").attr({
            "name": "username",
            "title": "sss"
        });

### 6.4回调函数： ###

参数：两个

被选中元素列表中 当前元素的下标

text是旧文本

return作为函数的返回值 会作为元素内部显示的新内容

// 回调函数 i是被选中元素的下标
        $("#app").text(function(i, text) { 
            console.log(i);
            console.log(text);
            return "123";
        });

\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vmMS2Num-1631259909607)(D:\\typora\\ajax\\img\\image-20210910152927790.png)\]

### 6.5添加元素 ###

#### 6.5.1 append方法 ####

**append：在被选元素的结尾插入内容,在元素内部添加**

$("#div1").append("追加文本");
     var p1 = "<p>p1</p>";
        var p2 = "<p>p2</p>";
        $("#div1").append(p1, p2);

#### 6.5.2 prepend方法 ####

**prepend：在被选元素的开头插入内容，在元素内部插入**

$("#div1").prepend("在开头添加文本");
        var p1 = "<p>p1</p>";
        var p2 = "<p>p2</p>";
        $("#div1").prepend(p1, p2);

#### 6.5.3 after方法 ####

**after：在被选元素之后插入内容**

// 在当前元素外部
        $("#div1").after(p1, p2);

6.5.4 before方法

before：在被选元素之前插入内容

$("#div1").before(p1, p2);

### 6.6删除元素 ###

remove: 删除被选元素（及其子元素）

empty():从被选元素中删除子元素

// 删除所有的div及它的子元素
         $("div").remove();
    
    
        // 删除id为app的div元素
        $("div").remove("#app");
        $("#div1").empty();

### 6.7静态方法 ###

each:对当前元素结果进行遍历

// 可以进行遍历
        $("div").each(function(index, element) { 
            console.log($(this));
            console.log($(index));
            console.log($(element));
        });

map

toArray

### 6.8css ###

**css能够对元素进行设置效果**

`$("p").css("background-color");`