jQuery笔记

46214241

已于 2024-03-16 15:59:44 修改

阅读量1.8k

点赞数 31

文章标签： jquery 笔记前端

于 2024-03-09 11:41:00 首次发布

本文链接：https://blog.csdn.net/qq_46214241/article/details/136577328

版权

1、jQuery是干什么的？能做什么？

（1）它是由JS封装的一个JS库。

（2）JQuery是一个快速、小型且功能丰富的JavaScript库，它使HTML文档遍历和操作、事件处理、动画和Ajax之类的事情变得更加简单。

（3）它具有易于使用的API，可在多种浏览器中使用。

2、jQuery的基本使用

中文手册：https://jquery.cuishifeng.cn/index.html

3、jQuery中的顶级对象$

（1）$是jQuery 的别称，在代码中可以使用 jQuery 代替，但一般为了方便，通常都直接使用 $ 。

（2）$是jQuery的顶级对象，相当于原生JavaScript中的 window。把元素利用$包装成jQuery对象，就可以调用jQuery 的方法。

4、jQuery中常见的两种入口函数：

介绍：我们知道 JavaScript 中的函数方法需要在 HTML 文档渲染完成后才可以使用，如果没有渲染完成，此时的 DOM 树是不完整的，这样在调用一些 JavaScript 代码时就可能报出"undefined"错误。

（1）比较繁琐，但也可以实现

$(document).ready(function(){
    ...//此处是页面DOM加载完成的入口
});

（2）简单易用

$(function () {  
   ...  // 此处是页面 DOM 加载完成的入口
}) ;

注意：

等着 DOM 结构渲染完毕即可执行内部代码，不必等到所有外部资源加载完成，jQuery 帮我们完成了封装。
相当于原生 js 中的 DOMContentLoaded。 DOMContentLoaded只要等到DOM树加载完毕以后就可以调用了
不同于原生 js 中的 window.load 事件是等页面文档、外部的 js 文件、css文件、图片所有资源加载完毕才执行内部代码。
更推荐使用第二种方式。

4、jQuery 对象和 DOM 对象的区别

使用 jQuery 方法和原生JS获取的元素是不一样的，总结如下 :

用原生 JS 获取来的对象就是 DOM 对象
jQuery 方法获取的元素就是 jQuery 对象。
jQuery 对象本质是：利用$对DOM 对象包装后产生的对象（伪数组形式存储）。

注意：只有 jQuery 对象才能使用 jQuery 方法，DOM 对象则使用原生的 JavaScirpt 方法。

5、jQuery 对象和 DOM 对象转换

1.DOM对象转换成jQuery对象:

//$(DOM对象)
var box = document.getElementById('box');  // 获取DOM对象
var jQueryObject = $(box);  // 把DOM对象转换为 jQuery 对象

2.jQuery 对象转换为 DOM 对象有两种方法：

$('div')[index]       index 是索引号
或者
$('div').get(index)   index 是索引号
// jQuery对象[索引值]
var domObject1 = $('div')[0];

// jQuery对象.get(索引值)
var domObject2 = $('div').get(0);

6、jQuery 选择器

原生 JS 获取元素方式很多，很杂，而且兼容性情况不一致，因此 jQuery 给我们做了封装，使获取元素统一标准。

基础选择器

$("CSS选择器") 里面选择器直接写 CSS 选择器即可，但是要加引号

名称	用法	描述
ID选择器	$("#id")	获取指定ID的元素
全选选择器	$("*")	匹配所有元素
类选择器	$(".class")	获取同一类class的元素
标签选择器	$("div")	获取同一类标签的所有元素
并集选择器	$("div,p,li")	获取多个元素
交集选择器	$("li.current")	交集元素

层级选择器

层级选择器最常用的两个分别为：后代选择器和子代选择器。

名称	用法	描述
子代选择器	$("ul>li")	使用>号,获取亲儿子层级的元素;注意,并不会获取孙子层级的元素
后代选择器	$("ul li")	使用空格,代表后代选择器,获取ul下的所有li元素,包括孙子等

CSS3属性选择器

什么是属性选择器？

属性选择器它是与标签的属性名和属性值有关。

属性选择器是通过标签的属性名和属性值来匹配元素。

attr是英文单词"attribute"的简写, 中文意思属性" 属性名

val是英文单词"value"的简写, 中文意思是"值" 属性值

jQuery属性选择器

$('[type=email]') // 含有type属性,并且属性值为email的元素
$('input[checked]') // 获取有checked属性的input元素
$('input[name="first_name"]') // name属性为first_name 的 input元素
$('input[name!="first_name"]') // name属性不等于first_name的元素
$('input[name^="first"]') // name属性以first开头的元素
$('input[name$="name"]') // name属性以name结尾的元素
$('input[name*="name"]') // name属性包含name的元素

表单选择器

$(":input") ：匹配所有 input, textarea, select 和 button 也就是所有的表单元素
$("input") ：匹配所有 input标签元素
$(":text") ：匹配所有的单行文本框
$(":password")：匹配所有密码框
$(":radio")：匹配所有单选按钮
$(":checkbox")：匹配所有复选按钮
$(":file")：匹配所有上传框
$(":submit")：匹配所有提交按钮
$(":reset")：匹配所有重置按钮
$(":button")：匹配所有button按钮标签
$(":checked"): 查找所有选中的单选,复选框以及option元素
$(":selected"): 匹配所有选中的option元素
$(":disabled"): 匹配所有不可用元素,也就是被禁用的元素

可见性选择器

:hidden：匹配所有不可见元素

:visible：匹配所有可见元素

注意：

可以将元素视为隐藏的原因有几个：它们的CSS样式中 display值为none、它们是的构成元素、input标签type=“hidden”、祖先元素被隐藏，因此该元素未显示在页面上。
带有visibility: hidden或的元素opacity: 0被认为是可见的，因为它们仍然占用布局中的空间。

筛选方法(重点) 要记

另: jQuery中还有一些筛选方法，类似DOM中的通过一个节点找另外一个节点，父、子、兄以外有所加强。

语法	用法	说明
parent( [selector] )	$("li").parent();	查找父级
children([selector])	$("ul").children("li")	相当于$("ul>li")，最近一级(亲儿子)
find( selector )	$("ul").find("li");	相当于$("ul li"),后代选择器
siblings( [selector] )	$(".first").siblings("li");	查找兄弟节点，不包括自己本身
nextAll( [selector] )	$(".first").nextAll()	查找当前元素之后所有的同辈元素
prevAll( [selector] )	$(".last"). prevAll()	查找当前元素之前所有的同辈元素
hasClass( "类名" )	$('div').hasClass("abc" )	检查当前的元素是否含有某个特定的类,如果有,则返回true
eq( index )	$("li").eq(2);	相当于$("li:eq(2)"), index从0开始, 并且n支持负数（表示从后面查找）

重要记住: parent() 、children() 、find() 、siblings() 、eq()

筛选选择器

筛选选择器，顾名思义就是在所有的选项中选择满足条件的进行筛选选择。

语法	用法	描述
:first	$("li:first")	获取第一个li元素
:last	$("li:last")	获取最后一个li元素
:eq(index)	$("li:eq(2)")	获取索引号为2的li元素,索引号index从0开始
:odd	$("li:odd")	获取索引号为奇数的li元素,索引号index从0开始
:even	$("li:even")	获取索引号为偶数的li元素,索引号index从0开始

上下文选择器了解

$()方法可以接受第二个参数作为当前jQuery选择器的上下文环境原则指定元素

语法：$( selector, context )

比如:
var banner = $('.banner')
$('p',banner) // 获取banner元素内部的所有p元素

7、文档遍历和操作：

1）获取页面标签：使用$(选择器)

    // 获取目标元素的所有子元素
    // var $child = $(".list").children();

    // 获取目标元素的父元素
    // var $parent = $(".aaa").parent();
    //parent()  // 得到当前元素的直接父元素
    //parents() // 得到所有的父辈元素
    //parents("选择器") // 得到指定的父辈元素

    // 获取目标元素的兄弟元素
    // var $bro = $(".aaa").siblings();

    // 获取目标元素相邻的下一个元素
    // var $next = $(".aaa").next();

    // 获取目标元素相邻的上一个元素
    // var $prev = $(".aaa").prev();

    // 找到ul标签下的.aaa标签
    // var $aaa = $(".list").find(".aaa");

2）设置标签的样式

    // 2）设置标签的样式
    // 问题: 为什么不用循环li标签数组就可以给所有li标签设置字体颜色?
    // 回答: 在封装css方法的过程中已经循环了,叫做内部循环, 隐式迭代
    // 写法1:
    // $("ul li").css("color","red");

    // 写法2:
    // $(".box").css({width:100,height: 100,backgroundColor:"blue"})

3）添加类名、移除类名

// 1.添加类
$("div").addClass("current");
// 2.删除类
$("div").removeClass("current");
// 3.切换类
$("div").toggleClass("current");

注意：

设置类样式方法比较适合样式多时操作，可以弥补css()的不足。
原生 JS 中 className 会覆盖元素原先里面的类名，dom对象的classList方法和 jQuery 里面类操作只是对指定类进行操作，不影响原先的类名。

4）设置标签的文本

    // 3）设置标签的文本
    // 纯文本
    // $("#demo").text("abc");
    // $("#demo").text("<span>abc</span>");

    // 超文本
    // $("#demo").html("abc");
    // $("#demo").html("<span>abc</span>");
    $("#demo").html("<i>abc</i>");//可以用于渲染html字符串
    // 不传递参数,表示获取该标签的超文本
    // var v2 = $("#demo").html();
    

    // 获取输入框的值
    // var v1 = $("input").val();

5）设置标签的属性

    // 4）设置标签的属性
    // class  id  src   title  href 
    var s1 = "https://gw.alicdn.com/imgextra/i3/O1CN01uRz3de23mzWofmPYX_!!6000000007299-2-tps-143-59.png"
    var s2="https://img10.360buyimg.com/img/jfs/t1/192028/25/33459/5661/63fc2af2F1f6ae1b6/d0e4fdc2f126cbf5.png"
    $(".picture").attr("src", s2);// 设置标签属性
    var v3 = $(".picture").attr("src");// 获取标签属性
    // $(".picture").removeAttr("src");// 删除标签属性

6）删除标签、添加标签

    // 5）删除标签、添加标签
    // 往目标元素的尾部追加渲染字符串
    $(".box").append("<h3 class='tit1'>7</h3>");
    $(".box").append("<h3>8</h3>");
    $(".box").append("<h3>9</h3>").css("color","red");// 链式编程

    // 往目标元素的首位添加渲染字符串
    // $(".box").prepend("<h3>7</h3>");
    // $(".box").prepend("<h3>8</h3>");
    // $(".box").prepend("<h3>9</h3>");

    // 删除标签
    // $(".tit1").remove();
    // $(".box").html("");
    // $(".box").empty();

8、jQuery事件注册

jQuery 为我们提供了方便的事件注册机制，是开发人员抑郁操作优缺点如下：

优点: 操作简单，且不用担心事件覆盖等问题。
缺点: 普通的事件注册无法实现事件解绑, 无法给未来新增的元素绑定事件。

单个事件注册语法

(1)jquery对象.不带on的事件名(function(){})

//方法1：常用的
$("div").click(function(){})

//方法2：这个方法可以绑定多个行为
$dom.bind("click",function(){})
//比如：
$("div").bind("click mouseenter", function () {
    ...//此处编写执行的代码块
})

//方法3：可以事件委托
$(".container").delegate("div", "click", function () {
 ...//此处编写执行的代码块
 })

（2）带on 推荐使用

//方法1：
$(".container button").on("click", function () {
    ...//此处编写执行的代码
})

//方法2  事件委托 (可以动态绑定事件)
$(".container").on("click", "button",function (event) {
    ...//此处编写执行的代码
})

事件切换hover()方法

jQuery中为我们添加了一个新事件 hover() ; 功能类似 css 中的伪类 :hover 。介绍如下

语法

hover([over,]out) // 其中over和out为两个函数

over : 鼠标移到元素上要触发的函数
out : 鼠标移出元素要触发的函数
如果只写一个函数，则鼠标经过和离开都会触发它

one()方法绑定事件

注意: 如果有的事件只想触发一次，可以使用 one() 来绑定事件, one()的使用参数跟on()参数用法一样

off()解绑事件

当某个事件上面的逻辑，在特定需求下不需要的时候，可以把该事件上的逻辑移除，这个过程我们称为事件解绑。jQuery 为我们提供了多种事件解绑方法：die() / undelegate() / off() 等，甚至还有只触发一次的事件绑定方法 one()，在这里我们重点讲解一下 off() ;

off() 方法可以移除通过 on() 方法添加的事件处理程序。

语法：

$("p").off() // 解绑p元素所有事件处理程序

$("p").off( "click") // 解绑p元素上面的点击事件
$("p").off("mouseover mouseout");// 解绑p身上的指定多个事件  空格隔开事件名称即可
            
$("ul").off("click", "li"); // 解绑事件委托

9、jQuery的动画

预定义CSS属性的动画函数

（1）显示隐藏 show()、hide()、toggle()

语法规范：

show( [speed,[easing,[fn]] ] )

hide( [speed,[easing,[fn]] ] )

toggle( [speed,[easing,[fn]] ] )

1)没有动画效果
     // $(".btn-enter").on("click",function(){
        //     $(".box").show();
     // })
     // $(".btn-leave").on("click",function(){
         //     $(".box").hide();
     // })
2)有动画效果    给show 或 hide 传递参数，毫秒值 / slow | fast
// 主要是控制标签的宽度 高度 透明度 最后dispay为none
$(".btn-enter").on("click", function () {
        // $(".box").show(5000);
        // 动画结束就执行function
        $(".box").show(1000, function () {
            console.log("显示标签的动画完成")
        });
})
$(".btn-leave").on("click", function () {
        // $(".box").hide(1000);
      $(".box").hide("fast");
 })

    // 原状态是显示的，调用这个api就隐藏； 否则反之
$(".btn-open-or-close").on("click", function () {
       $(".box").toggle(1000);
})

（2）淡入淡出 fadeIn()、fadeOut()、fadeToggle()、fadeTo()

语法规范：

fadeIn( [speed,[easing,[fn]] ] )

fadeOut( [speed,[easing,[fn]] ] )

fadeTo( speed ,opacity, [easing] ,[fn] ])

fadeToggle( [speed,[easing,[fn]] ] )

// 3）给fadeIn 或 fadeOut 传递参数，毫秒值
    // 主要是控制标签的透明度 最后dispay为none
    $(".btn-fade-in").on("click", function () {
        // 显示
        $(".box").fadeIn(5000);
    })
    $(".btn-fade-out").on("click", function () {
        // 隐藏
        $(".box").fadeOut(5000);
   })

（3）滑动 slideDown() slideUp() slideToggle()

语法规范：

slideDown( [speed,[easing,[fn]] ] )

slideUp( [speed,[easing,[fn]] ] )

slideToggle( [speed,[easing,[fn]] ] )

 // 3）给slideDown或 slideUp 传递参数，毫秒值
    // 主要是控制标签的高度 最后dispay为none
    $(".btn-slide-down").on("click", function () {
        // 显示
        $(".box").slideDown(5000);
    })
    $(".btn-slide-up").on("click", function () {
        // 隐藏
        $(".box").slideUp(5000);
    })

自定义CSS属性的动画函数

语法规范：

自定义动画：animate( params,[speed],[easing],[fn] )

// CSS属性可以自定义的动画
    $(".btn-start").on("click",function(){
        // 执行动画
        $(".box").animate({
            marginLeft: 500,
            width: 200,
            height: 200,
            borderRadius: "50px"
        },3000)
    })

停止动画：stop()

动画默认效果一旦触发就会执行，如果多次触发，就造成多个动画或者效果排队执行。

停止动画排队的方法为：stop() ;

注意:

stop() 方法用于停止动画或效果。
stop() 写到动画或者效果的前面，相当于停止结束上一次的动画。

总结: 每次使用动画之前，先调用 stop() ,再调用动画。

  $(".btn-stop").on("click",function(){
        // 停止动画
        $(".box").stop();
    })

10、jQuery遍历元素

语法1 jQuery对象.each()方法遍历匹配每一个元素,主要用于DOM处理

$("div").each( function(index, domElement ) { xxxx;} )

1. each()方法遍历匹配每一个元素,主要用于DOM处理; each中文意思是每一个
2. 里面的回调函数有2个参数: index是每个元素的索引号; domElement是每个DOM元素对象 ,不是jquery对象
3. 所有要想使用jquery方法,需要给这个dom元素转换为jquery对象 $(domElement)

注意：此方法用于遍历 jQuery 对象中的每一项，回调函数中元素为 DOM 对象，想要使用 jQuery 方法需要转换。

语法2 $.each()方法遍历元素主要用于遍历数据,处理数据

$.each( object , function( index , element ) {xxx;} )

1. $.each()方法可用于遍历任何对象.主要用于数据处理,比如数组,对象
2. 里面的函数有2个参数: index是每个元素的索引号,element遍历内容

注意： 此方法用于遍历 jQuery 对象或者数组或者对象中的每一项，如果遍历的是jQuery对象,那么回调函数中元素为 DOM 对象，想要使用 jQuery 方法需要转换。

11、jQuery中插件扩展机制

介绍：

我们去工作中发现我们需要实现某一个功能，需要用到一个方法但是jQuery并没有给我们进行封装这个方法！，供jquery对象使用

jQuery它给我们预留了一个扩展方法的接口！

在jQuery原有的基础上添加API的意思.

格式：

$.fn.extend(object)或jQuery.fn.extend(object)

语法：

$.fn.extend({
    方法名:function(){},
    方法名:function(){ this // jquery对象},
    ......
});

// 在jquery对象的原型上添加方法
    $.fn.foo = function(){
        console.log("test");
    }

    $.fn.myRadius = function(){
        $(this).css("borderRadius","50%");
    }
    // 通过jquery对象调用foo方法
    $(".box").foo();
    $(".box").myRadius();

注意：

在整个jQuery中除了扩展机制里面的方法this是指向的jQuery对象 ，其它的地方都是指向的DOM对象

12、jQuery拓展

(1)jQuery替换元素

jQuery对象.replaceWith(提供的 content ) 用提供的内容替换集合中所有匹配的元素并且返回被删除元素的集合。

replaceWith( content ) 也即是将所有匹配的元素替换成指定的HTML或DOM元素。

语法：

jQuery对象.replaceWith(content) content接受一个用来插入的内容，可以是HTML字符串，DOM元素，或者jQuery对象。

比如:   $('div.second').replaceWith('<h2>New heading</h2>');

(2)$.map()

概念：在不修改原数组的前提下将一个数组中的所有元素转换到另一个数组中

jQuery.map( arrayOrObject, callback( value, indexOrKey ) ) 方法接受两个参数：
参数一,待转换数组或对象。

参数二,处理每一个元素的函数。这个函数的第一个参数是数组中元素或对象的值，
第二个参数是该元素在数组中的索引值或该对象的键。该函数可以返回任何值，该返回值会被添加到数组中。

注意： 在函数内部， this指的是（window）对象。若函数返回值是数组，则会将该数组拆分后将其中的元素添加到最终的结果数组中。

var arr = [ "a", "b", "c", "d", "e" ];
var arr2 = $.map( arr, function( item , index ){   
    return item.toUpperCase()+index;
});
console.log( arr2 );// ["A0", "B1", "C2", "D3", "E4"]

var arr3 = $.map( arr, function( item , index ){   
    return [ item+index , item.toUpperCase()+index ];
});
console.log( arr3 );// ["a0", "A0", "b1", "B1", "c2", "C2", "d3", "D3", "e4", "E4"]

(3)jQuery对象.map()

概念：通过一个函数匹配当前集合中的每个元素,产生一个包含新的jQuery对象。

语法：

jQuery对象.map( function(index, domElement){

} ) 
一个函数对象，会在处理集合中的每个元素时被调用。

注意：

在回调函数中，this指向每次迭代中的当前DOM元素。
该函数可以返回一个单独的数据或数据数组，并在结果集合中插入。
如果返回数组，数组中会被拆分将其元素插入到集合。
如果函数返回null或undefined ，没有元素将被插入。
由于返回值是一个jQuery包裹的数组，所以通常会使用 get()方法将其转换成普通的数组。
.map()方法特别适用于获取或设置元素集合中的值。
如果你想处理一个简单的数组或对象中，使用$.map()代替



$("button").click(function () {
        // 我们能够获得选中复选框 ID 组成的逗号分隔的列表
        var res = $(':checked').map(function () {
            return this.id;
        }).get().join(',');
        console.log( res );
 })

(4) jQuery事件对象

jQuery 对DOM中的事件对象 event 进行了封装，兼容性更好，获取更方便，使用变化不大。事件被触发，就会有事件对象的产生。

（1）阻止默认行为

（2）阻止冒泡

语法：

element.on(events,[selector],function(event) {})

阻止默认行为：event.preventDefault() 或者 return false
阻止冒泡： event.stopPropagation()

(5)trigger()与triggerHandler() 手动触发事件

有些时候，在某些特定的条件下，我们希望某些事件能够自动触发, 比如轮播图自动播放功能跟点击右侧按钮一致。可以利用定时器自动触发右侧按钮点击事件，不必鼠标点击触发。由此 jQuery 为我们提供了两个自动触发事件 trigger() 和 triggerHandler() ;

第一种触发模式：

jQuery对象.click() // 第一种简写形式

第二种触发模式 trigger()

jQuery对象.trigger("不带on事件类型") // 第二种自动触发模式

第三种触发模式 triggerHandler()

jQuery对象.triggerHandler("不带on事件类型") // 第三种自动触发模式

注意: triggerHandler模式不会触发元素的默认行为，这是和前面两种的区别

(6)jQuery拷贝(合并)对象

如果想要把某个对象拷贝（合并）给另外一个对象使用，此时可以使用 $.extend() 方法

语法:

$.extend([deep], target, object1, [objectN])

参数说明:
1. deep: 如果设为true 为深拷贝， 默认省略该参数的时候, 为浅拷贝
2. target: 要拷贝的目标对象
3. object1:待拷贝到第一个对象的对象。
4. objectN:待拷贝到第N个对象的对象。
5. 浅拷贝目标对象引用的被拷贝的对象地址，修改目标对象会影响被拷贝对象。
6. 深拷贝，前面加true， 完全克隆，修改目标对象不会影响被拷贝对象。

举例: 使用jQuery中的$.extend方法拷贝对象

// 1. 如果目标对象targetObj中是空对象
// 2. 如果目标对象targetObj中不是空对象,有自己的属性,拷贝以后,会覆盖targetObj里面原来的数据
// 3. 浅拷贝目标对象引用的被拷贝的对象地址，修改目标对象会影响被拷贝对象。
// 4. 深拷贝，前面加true， 完全克隆，修改目标对象不会影响被拷贝对象。

46214241

关注

31
点赞
踩
42

收藏

觉得还不错? 一键收藏
3
评论
jQuery笔记

（1）显示隐藏 show()、hide()、toggle()1)没有动画效果// })// })2)有动画效果给show 或 hide 传递参数，毫秒值 / slow | fast// 主要是控制标签的宽度高度透明度最后dispay为none// 动画结束就执行functionconsole.log("显示标签的动画完成")});})})// 原状态是显示的，调用这个api就隐藏；否则反之})
复制链接

扫一扫