jQuery知识点总结

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的默认行为了");
})

方法	描述
bind()	向匹配元素附加一个或更多事件处理器
blur()	触发、或将函数绑定到指定元素的 blur 事件
change()	触发、或将函数绑定到指定元素的 change 事件
click()	触发、或将函数绑定到指定元素的 click 事件
dblclick()	触发、或将函数绑定到指定元素的 double click 事件
delegate()	向匹配元素的当前或未来的子元素附加一个或多个事件处理器
die()	移除所有通过 live() 函数添加的事件处理程序。
error()	触发、或将函数绑定到指定元素的 error 事件
event.isDefaultPrevented()	返回 event 对象上是否调用了 event.preventDefault()。
event.pageX	相对于文档左边缘的鼠标位置。
event.pageY	相对于文档上边缘的鼠标位置。
event.preventDefault()	阻止事件的默认动作。
event.result	包含由被指定事件触发的事件处理器返回的最后一个值。
event.target	触发该事件的 DOM 元素。
event.timeStamp	该属性返回从 1970 年 1 月 1 日到事件发生时的毫秒数。
event.type	描述事件的类型。
event.which	指示按了哪个键或按钮。
focus()	触发、或将函数绑定到指定元素的 focus 事件
keydown()	触发、或将函数绑定到指定元素的 key down 事件
keypress()	触发、或将函数绑定到指定元素的 key press 事件
keyup()	触发、或将函数绑定到指定元素的 key up 事件
live()	为当前或未来的匹配元素添加一个或多个事件处理器
load()	触发、或将函数绑定到指定元素的 load 事件
mousedown()	触发、或将函数绑定到指定元素的 mouse down 事件
mouseenter()	触发、或将函数绑定到指定元素的 mouse enter 事件
mouseleave()	触发、或将函数绑定到指定元素的 mouse leave 事件
mousemove()	触发、或将函数绑定到指定元素的 mouse move 事件
mouseout()	触发、或将函数绑定到指定元素的 mouse out 事件
mouseover()	触发、或将函数绑定到指定元素的 mouse over 事件
mouseup()	触发、或将函数绑定到指定元素的 mouse up 事件
one()	向匹配元素添加事件处理器。每个元素只能触发一次该处理器。
ready()	文档就绪事件（当 HTML 文档就绪可用时）
resize()	触发、或将函数绑定到指定元素的 resize 事件
scroll()	触发、或将函数绑定到指定元素的 scroll 事件
select()	触发、或将函数绑定到指定元素的 select 事件
submit()	触发、或将函数绑定到指定元素的 submit 事件
toggle()	绑定两个或多个事件处理器函数，当发生轮流的 click 事件时执行。
trigger()	所有匹配元素的指定事件
triggerHandler()	第一个被匹配元素的指定事件
unbind()	从匹配元素移除一个被添加的事件处理器
undelegate()	从匹配元素移除一个被添加的事件处理器，现在或将来
unload()	触发、或将函数绑定到指定元素的 unload 事件

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");

​

​