jQuery的学习笔记

最新推荐文章于 2024-01-02 00:15:00 发布
最新推荐文章于 2024-01-02 00:15:00 发布
阅读量1k 收藏 6
点赞数 2
文章标签： jquery javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qi_bai_jin/article/details/127705897
版权

前言

本篇博客内容学习自李立超老师的课程

目录

前言

一、jQuery简介

1.1 jQuery是什么

1.2 jQuery学习资源

1.3学习jQuery的作用

1.4下载与引入jQuery

1) 脚本引入

2) CDN

1.5 使用jquery

 二、jQuery的核心函数

 2.1 将函数作为参数

2.2 将选择器作为参数 

2.3将对象作为参数

2.4将html代码作为参数

三、jQuery使用

3.1 引入

3.2操作Class

1）addClass()

2）hasClass()

3）removeClass()

4）toggleClass()

3.3 对象复制

1）clone()

3.4 添加容器

1）unwrap()  

2）wrap()

3）wrapAll()

4）wrapInner()

 3.5 添加子元素

1）append()

2）appendTo()

3）prepend()

4）prependTo()

5）html()(尽量不要使用)

6）text()

7）after()

8）insertAfter()

9）before()

10）insertBefore()

3.6删除与替换元素 

1）empty()

2）detach()

3）remove()

4）replaceAll()

5）replaceWith()

3.7属性 

1）attr()

2）prop()

3）removeAttr()

4）removeProp()

5）val()

3.8操作css

1）css()

2）其余 

3.9筛选jQuery对象

1) eq()

2) filter()

3) slice()

3）其余

3.10jQuery事件处理

1） on()

 2）off

 3) focus()

4)blur() 

5）change()

6）click()

7）dblclick()

8）keydown()

其余更多：

一、jQuery简介

1.1 jQuery是什么

jQuery是一个快速，小型且功能丰富的JavaScript库。它使HTML文档遍历和操作，事件处理，动画和Ajax之类的事情变得更加简单，并且易于使用的API可以在多种浏览器上运行。凭借多功能性和可扩展性的结合，jQuery改变了数百万人编写JavaScript的方式。

1.2 jQuery学习资源

jQuery官网

李立超老师的博客

1.3学习jQuery的作用

        jQuery解决的问题主要有两个：简化DOM操作、解决浏览器兼容问题。然而随着前端的发展、DOM标准的更新、IE的消亡。DOM操作和浏览器兼容性早已不是什么大问题了，再加上React、Vue、Angular这些大型框架的出现，在实际项目中使用jQuery的机会可以说是少之又少。可以说我们不需要去学习jQuery，但是出于学习来说，学习jQuery也有好处，jQuery的学习不会占用很多时间并且jQuery是我们从原生JS步入JS库的一个过渡，可以帮助我们理解库的作用。

1.4下载与引入jQuery

我们可以采用两种形式，一是引入jQuery的脚本文件，二是通过cdn引入。

1) 脚本引入

打开官网，jQuery官网,点击Download jQuery

点击下方两个圈红色的链接，点进去后将内容复制到我们js文件中

我们将内容引入下方两个文件中。 

 再通过script文件引入jQuery文件，上面两个文件都可以使用，选择其中一个就好。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/jquery-3.6.1.js"></script>
</head>
<body>
</body>
</html>

2) CDN

通过直接在scr引入下方的链接即可完成引入。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/jquery/3.6.0/jquery.js"></script>
    <!-- 或者下方链接 -->
    <!-- <script src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/jquery/3.6.0/jquery.min.js"></script> -->
</head>
<body>
</body>
</html>

1.5 使用jquery

我们可以检测我们是否引入成功，引入jQuery后，它会自动在全局作用域添加一个名为jQuery的新函数，新函数还有一个别名$。我们通过打印console.log($);出现以下类似内容表示引入成功。

 二、jQuery的核心函数

        我们引入jQuery实际上就是使用他的函数库，也就是向网页中添加了一个新的函数 $ ,$就是jQuery的核心函数，jQuery的所有功能都是通过该函数来进行的。因为$符号比较短，这就会出现命名冲突的问题，所以我们可以使用jQuery这个名字，与使用$符号的效果是一样的。

        我们使用jQuery有两种作用，1将他当作工具类使用，jQuery为我们提供了多个工具，第二个就是当作函数使用。以下形式则可以看到原生js与jQuery的区别，也就是jQuery就是封装了函数供我们使用。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/jquery-3.6.1.js"></script>
</head>
<body>
    <script>
        var num = 10
        console.log($.isFunction(num))
        var fn = function (){}
        console.log(typeof fn === "function")
    </script>
</body>
</html>

 2.1 将函数作为参数

        当我们用函数作为$()的参数时，这个函数会在文档加载完毕之后执行，也就是下列代码，会先显示核心函数外部，再在浏览器中显示核心函数。相当于document.addEventListener("DOMContentLoaded", function() {}) 

        $(function () {
            alert("核心函数")
        })
        alert('核心函数外部')

 

2.2 将选择器作为参数 

当将选择器作为参数时，jQuery自动去网页中按照选择器查找元素，返回查询到的结果，类似document.querySelectorAll('...')

如果不会选择器可以看这篇复习一下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/jquery-3.6.1.js"></script>
</head>
<body>
    <button id="btn"></button>
    <script>
        $(function () {
            $('#btn').click = function () {
                alert("点了一下")
            }
        })
    </script>
</body>
</html>

 注意:通过jQuery核心查询的函数不是原生DOM对象，而是一个经过jQuery包装后的新对象，我们叫做jQuery对象，比如原生dom不能直接.click，而是采用 onclick，但是jQuery直接采用click。因为与原生对象有区别，所以我们通常对jQuery对象命名时，在名字前面加$符号。

2.3将对象作为参数

将对象作为参数会将原生对象转换成jQuery对象，从而使用jQuery的方法。

2.4将html代码作为参数

用html代码作为参数，将创建一个元素，且该元素可以使用jQuery方法。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/jquery-3.6.1.js"></script>
</head>
<body>
    <button id="btn"></button>
    <script>

        $(function () {
            $('#btn').click = function () {
                var $div1 = $("<div>盒子</div>")//创建一个元素
                alert($div1)
            }
        })
    </script>
</body>
</html>

三、jQuery对象

3.1 引入

        如上所述，通过jQuery核心函数获取到的对象就是jQuery对象，jQuery中新定义的对象，它像是一个用来存储DOM对象的数组（类型并不是Array）我们可以理解为DOM的升级版。可以通过length来获取其中DOM元素的数量，也可以通过索引来获取其中的某个元素。jQuery对象为我们提供了简易使用的方法，帮助简化DOM操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src = './js/jquery-3.6.1.js'></script>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
    <script>
        var $li = $('li')
        console.log($li.length)
        console.log($li[0])
        console.log($li[1])
        console.log($li[2].textContent)
    </script>
</body>
</html>

        使用jQuery对象进行DOM操作时，无需再调用原生DOM的方法，直接调用jQuery对象的方法即可。通过jQuery对象进行修改操作时，会同时修改jQuery对象中的所有DOM对象，举个例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src = './js/jquery-3.6.1.js'></script>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
    <script>
        var $li = $('li')
        console.log($li.length)
        console.log($li[0])
        console.log($li[1])
        console.log($li[2].textContent)
        $li.text('hahaha')
    </script>
</body>
</html>

         这一特性被称为隐式迭代，隐式迭代的存在使得我们在修改多个DOM元素使用一个方法即可修改所有元素。

        jQuery对象的大部分方法都会将jQuery对象自身作为返回值，这意味着通过jQuery对象调用方法后，可以继续调用其他的方法，比如这样： 

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <script src="./script/jquery/jquery-3.6.1.min.js"></script>
    </head>
    <body>
        <ul>
            <li>孙悟空</li>
            <li>猪八戒</li>
            <li>沙和尚</li>
            <li>唐僧</li>
        </ul>
        <script>
            $("li").text("新的内容").css({color:"red"})
        </script>
    </body>
</html>

$("li").text("新的内容").css({color:"red"})在修改文本后继续修改jQuery对象的样式，这一特性被称为链式调用，通过链式调用可以一次性对jQuery对象做多个操作。 

3.2操作Class

1）addClass()

  • 为jQuery对象添加一个或多个class
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/jquery-3.6.1.js "></script>
    <style>
        .box1{
            width:100px;
            height: 100px;
            background-color: skyblue;
        }
        .box2{
            border:10px red solid;
        }
        .box3{
            background-color: red;
        }
    </style>
    <script>
        $(function(){
            $('#btn').click(function(){
                //为box1添加class
                $(".box1").addClass("box2")
                //添加多个类
                //$(".box1").addClass(["box2","box3"])
            })
        })
    </script>
</head>
<body>
    <button id="btn">点我</button>
    <hr>
    <div class="box1">
    </div>
</body>
</html>

addClass()的参数还可以传递一个回调函数，可以让我们对不同的DOM做不同的操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/jquery-3.6.1.js "></script>
    <style>
        .box1{
            width:100px;
            height: 100px;
            background-color: skyblue;
        }
        .box2{
            border:10px red solid;
        }
        .box3{
            background-color: red;
        }
    </style>
    <script>
        $(function(){
            $('#btn').click(function(){
                //为box1添加class
                $(".box1").addClass(function(index,className){
                    if(index%2==0){
                        //这部分this所指向的不是一个jQuery对象，可以用console.log(this)看看这个是啥
                        // 所以使用$(this)将转换为jQuery对象，再通过jQuery对象使用函数
                        $(this).addClass("box2")
                        //return "box2"
                    }else{
                        $(this).addClass("box3")
                        //return "box3" 用返回值返回与上行代码效果实现一样
                    }
                });
            })
        })
    </script>
</head>
<body>
    <button id="btn">点我</button>
    <hr>
    <div class="box1"></div>
    <div class="box1"></div>
    <div class="box1"></div>
</body>
</html>

2）hasClass()

  • 检查jQuery对象是否含有某个class

3）removeClass()

  • 删除jQuery对象的指定class

4）toggleClass()

  • 切换jQuery对象的指定class

3.3 对象复制

1）clone()

  • 复制jQuery元素

我们看如下列例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src = "./js/jquery-3.6.1.js"></script>
    <script>
        $(function(){
            var $swk = $("#list1 li:nth-child(1)")
            var $list2 = $("#list2")
            $("#btn").click(function() {
                $list2.append($swk)
            })
        })
    </script>
</head>
<body>
    <button id="btn">点我</button>
    <ul id="list1">
        <li>孙悟空</li>
        <li>猪八戒</li>
    </ul>
    <ul id="list2">
        <li>唐僧</li>
        <li>沙和尚</li>
    </ul>
</body>
</html>

我们通过点击按钮，实现了上放的这个孙悟空移动至了下面的list中 。

 但是我们想实现的是孙悟空在list1中仍然存在，所以我们可以使用clone(),将上述代码修改一句。

var $swk = $("#list1 li:nth-child(1)").clone()

3.4 添加容器

我们以下列代码为例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src = "./js/jquery-3.6.1.js"></script>
    <script>
        $(function(){
            $("#btn").click(function() {
            })
        })
    </script>
</head>
<body>
    <button id="btn">点我</button>
    <ul id="list1">
        <li>孙悟空</li>
        <li>猪八戒</li>
    </ul>
    <ul id="list2">
        <li>唐僧</li>
        <li>沙和尚</li>
    </ul>
</body>
</html>

1）unwrap()  

点击按钮后，打开控制台将会出现以下效果

$(function(){
   $("#btn").click(function() {
       $("#list1 li").unwrap()
   })
})

2）wrap()

  • 添加父元素
$(function(){
   $("#btn").click(function() {
        $("#list1 li").wrap("<div/>")
   })
})

 

3）wrapAll()

  • 添加父元素
$(function(){
   $("#btn").click(function() {
        $("#list1 li").wrapAll("<div/>")//给所有li套一个父元素
   })
})

4）wrapInner()

  • 在元素内部增加一层

 3.5 添加子元素

1）append()

  • 在父元素里面添加子元素
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/jquery-3.6.1.js "></script>
    <style>
        #box1{
            width:300px;
            height: 300px;
            background-color: skyblue;
        }
        #box2{
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
    <script>
        $(function(){
            $('#btn').click(function(){
                //为box1添加class
                $("#box1").append("<div id='box2'/>");
            })
        })
    </script>
</head>
<body>
    <button id="btn">点我</button>
    <hr>
    <div id="box1"></div>
</body>
</html>

2）appendTo()

  • 将子元素添加到父元素
$(function(){
    $('#btn').click(function(){
        //为box1添加class
        $("<div id='box2'/>").appendTo("#box1");
    })
})

3）prepend()

  • 向父元素的最前添加子元素
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/jquery-3.6.1.js "></script>
    <style>
        #box1{
            width:300px;
            height: 300px;
            background-color: skyblue;
        }
        #box2{
            width: 100px;
            height: 100px;
            background-color: red;
        }
        #box3{
            width: 100px;
            height: 100px;
            background-color: yellow;
        }
    </style>
    <script>
$(function(){
    $('#btn').click(function(){
        //为box1添加class
        $("#box1").prepend("<div id='box2'/>");
    })
})
    </script>
</head>
<body>
    <button id="btn">点我</button>
    <hr>
    <div id="box1">
        <div id="box3"></div>
    </div>
</body>
</html>

 

4）prependTo()

  • 将子元素添加到父元素前，使用方法同上appendTo

5）html()(尽量不要使用)

  • 读取或设置html代码

6）text()

  • 读取或设置文本内容
  • 为text()表示获取该dom的文本内容，为text("你好")表示将dom的文本内容修改为你好

7）after()

  • 向后边添加兄弟元素

8）insertAfter()

  • 将元素添加到某元素的后边

9）before()

  • 向前边添加兄弟元素

10）insertBefore()

  • 将元素添加到某元素的前边

3.6删除与替换元素 

1）empty()

  • 删除所有子元素 语法：父元素.empty()
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src = "./js/jquery-3.6.1.js"></script>
    <script>
        $(function(){
            var $list2 = $("#list2")
            $("#btn").click(function() {
                $list2.empty();
            })
        })
    </script>
</head>
<body>
    <button id="btn">点我</button>
    <ul id="list1">
        <li>孙悟空</li>
        <li>猪八戒</li>
    </ul>
    <ul id="list2">
        <li>唐僧</li>
        <li>沙和尚</li>
    </ul>
</body>
</html>

2）detach()

  • 移除指定的元素（会保留元素上的事件）

3）remove()

  • 删除指定元素，该元素的事件都会消失 

4）replaceAll()

  • 替换某个元素

5）replaceWith()

  • 被某个元素替换

3.7属性 

1）attr()

  • 设置/获取元素的指定属性
  • 专门操作属性值为非布尔值的属性
<p id="content" title="我是段落标题">我是段落</p>

$('#content').attr('title', '我是修改后的段落标题');
console.log($('#content').attr('title'));//读取该属性值

2）prop()

  • 设置/获取元素的指定属性
  • 专门操作属性值为布尔值的属性（复选框，单选框的checked属性）
<input type="checkbox">
$(':checkbox').prop('checked', 'true');
console.log($(':checkbox').prop('checked'));//读取属性值

3）removeAttr()

  • 移除属性

4）removeProp()

  • 移除属性

5）val()

  • 设置/获取元素的value属性
<input type="text">
 $(':text').val('设置value');
 console.log($(':text').val());//读取value值

3.8操作css

我们使用下列例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/jquery-3.6.1.js "></script>
    <style>
        #box1{
            width:300px;
            height: 300px;
            background-color: skyblue;
        }
        #box2{
            width: 100px;
            height: 100px;
            background-color: red;
        }
        #box3{
            width: 100px;
            height: 100px;
            background-color: yellow;
        }
    </style>
    <script>
$(function(){
    $('#btn1').click(function(){
    })
    $('#btn2').click(function(){
    })
    $('#btn3').click(function(){        
    })
})
    </script>
</head>
<body>
    <button id="btn1">点我1</button>
    <hr>

    <div id="box1"></div>

    <button id="btn2">点我1</button>
    <hr>
    <button id="btn3">点我1</button>
</body>
</html>

1）css()

  • 读取/设置元素的css样式,获取匹配元素集合中的第一个元素的样式属性的计算值或设置每个匹配元素的一个或多个CSS属性。

设置一个属性

$('#btn1').click(function(){
   var $width = $('#box1').css("width")
    console.log($width)//获取width属性
   $('#box1').css("width","200px")//设置width属性
})

 设置多个属性

$('#box1').css({width:300,height:500,backgroundColor:skyblue})

2）其余 

1）height()

  • 读取/设置元素的高度

3）width()

  • 读取/设置元素的宽度

4）innerHeight()

  • 读取/设置元素的内部高度

5）innerWidth()

  • 读取/设置元素的内部宽度

6）outerHeight()

  • 读取/设置元素可见框的高度

7）outerWidth()

  • 读取/设置元素可见框的宽度

8）offset()

  • 读取/设置元素的偏移量

9）position()

  • 读取元素相当于包含块的偏移量

10）scrollLeft()

  • 读取/设置元素水平滚动条的位置

11）scrollTop()

  • 读取/设置元素垂直滚动条的位置

3.9筛选jQuery对象

我们用以下例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src = "./js/jquery-3.6.1.js"></script>
    <style>
        .box1{
            float:left;
            width:100px;
            height: 100px;
            border:1px solid black;
            margin:10px;
        }
    </style>
    <script>
        $(function() {
            $('#btn1').click(function() {
                $('.box1').css("backgroundColor","#bfa")
            })
        })
    </script>
</head>
<body>
    <button id="btn1">点我</button>

    <hr>

    <div class="box1"></div>
    <div class="box1"></div>
    <div class="box1"></div>
    <div class="box1"></div>
    <div class="box1"></div>
    <div class="box1"></div>
    <div class="box1"></div>
    <div class="box1"></div>
</body>
</html>

 

 假如我们只想修改第一个元素，我们就可以使用eq()

1) eq()

  • 获取指定索引的元素
$('.box1').eq(0).css("backgroundColor","#bfa")

2) filter()

  • 筛选元素
    <div class="box1"></div>
    <div class="box1 box2"></div>
    <div class="box1"></div>
    <div class="box1"></div>
    <div class="box1 box2"></div>
    <div class="box1"></div>
    <div class="box1"></div>
    <div class="box1"></div>
$('.box1').filter(".box2").css("backgroundColor","#bfa")

3) slice()

  • 截取元素（切片）,传入参数（1，3）获取的范围为[1，3）
$('.box1').slice(1,3).css("backgroundColor","#bfa")

3）其余

even()  获取索引为偶数的元素

odd()  获取索引为奇数的元素

first()  获取第一个元素

last()  获取最后一个元素

has() 获取含有指定后代的元素

is() 检查是否含有某元素

可以自己试试

end() 将筛选过的列表恢复到之前的状态

not() 从列表中去除符合条件的元素

map() 获取对象中的指定数据

add() 创建包含当前元素的新的jQuery对象

addBack() 将之前操作的集合中的元素添加到当前集合中

contents() 获取当前jQuery对象的所有子节点（包括文本节点）

3.10jQuery事件处理

1） on()

在选定的元素上绑定一个或多个事件处理函数。

$('btn1').on("click",function(){
    console.log("点击")
})

 2）off

在选定的元素上解除事件处理函数。

$('btn1').on("click",function(){
    console.log("点击")
})
$('button').off('click');
//现在点击就没反应了

 3) focus()

表单事件，当获取焦点时触发所绑定的函数。

<input type="text">

$(':text').focus(function () {
    $(this).css('width', '100');
});

4)blur() 

表单事件，当失去焦点时触发所绑定的函数。

5）change()

当内容改变时触发所绑定的函数

6）click()

鼠标点击时触发绑定函数

7）dblclick()

鼠标双击时触发绑定函数

8）keydown()

当键盘按键按下的时候，输出当前的按键

其余更多：

children()        获取子元素

closest()        获取离当前元素最近的指定元素

find()        查询指定的后代元素

next()        获取后一个兄弟元素

nextAll()        获取后边所有的兄弟元素

nextUntil()        获取后边指定位置的兄弟元素

offsetParent()        获取定位父元素

parent()        获取父元素

parents()        获取所有的祖先元素

parensUntil()        获取指定的祖先元素

prev()        获取前边的兄弟元素

prevAll()        获取前边所有的兄弟元素

prevUntil()        获取指定的兄弟元素

siblings()        获取所有的兄弟元素

 查看jQueryAPI文档

齐白在学习
关注
  • 2
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JQuery菜鸟教程笔记，难道前端真的凉了
m0_60388216的博客
03-28 1007
选取带有 href 属性的元素选取所有 target 属性值等于 “_blank” 的元素选取所有 target 属性值不等于 “_blank” 的 元素选取所有 type=”button” 的 元素 和 元素选取偶数位置的 元素选取奇数位置的 元素事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。方法：允许我们在文档完全加载完后执行函数click() 方法是当按钮点击事件被触发时会调用一个函数});
jQuery 学习笔记 黑马
HGKIVD的博客
10-31 209
jQuery学习笔记
jQuery——jQuery学习笔记(完整版）
Bonsoir777的博客
09-16 1227
本文主要介绍有关jQuery的相关知识点
jquery学习笔记
Python_Ghost的博客
05-02 630
jquery一个高效的，精简的且功能丰富的JavaScript工具库，满足了各种浏览器的兼容问题web应用发展的过程中，jquery起到了不可或缺的推动作用当下框架流行的时代，jquery不再那么适用使用jquery感受，简单简洁，链式调用，读写一体表单在网页中主要负责数据采集的功能，HTML中的form标签，主要用于采集用户输入的信息，并通过form标签的提交操作，把采集到的信息提交到服务器端进行处理如果两个页面的协议 (http) ，域名(www.xxx.com) 和端口（80）
jQuery学习
dcw93178的博客
10-26 101
jquery简介 jquery 相当于一个模块 查找标签 操作标签 jquery的版本 那个系列都可以用 推进使用1系列的最新版本 兼容性更好 1.x 兼容性更好 2.x 忽略IE的低版本 3.x 现在用的是 jquery-1.12.4.js 测试就用这个 可以看到源码 如果是时候生产环境用的话 就用带min字样的压缩版 引入jquery模块/文...
jQuery学习笔记
weixin_52467050的博客
10-10 182
jQuery学习笔记
【前端】JQuery（学习笔记）
最新发布
wmh的博客
01-02 1010
JQuery：一个JavaScript框架。简化JS开发JavaScript框架：本质上就是一些js文件，封装了js的原生代码选择器：筛选具有相似特征的元素(标签)
Jquery学习笔记分享
11-24
第1章. JQuery概述 2 1. Jquery基本作用 2 2. 优点 2 3. 引入JQuery 2 4. 代码风格 2 5. 其他 JavaScript 库 3 6. 多个库之间的冲突 3 7. jQuery对象和DOM对象 3 第2章. jQuery选择器 4 1. jQuery优点 4 2. 基本选择...
jquery 学习笔记一
10-29
jquery是javascript的类库，提供了大量的javascript的类库和API，方便javascript开发。
jquery读书笔记
03-30
NULL 博文链接：https://wzt7576.iteye.com/blog/1313721
jQuery学习笔记（一）
07-13
NULL 博文链接：https://goyourauntie.iteye.com/blog/745626
jquery笔记大全
12-21
jQuery笔记，包含了jQuery基本介绍、选择器、jQuery操作样式，还有一些小demo
jquery完全笔记 带目录 高清 经典前端js笔记 前端必看
08-07
jQuery笔记，个人总结的jQuery全部特性，可以作为参考手册，可以作为学习笔记，其中源码本人在springmvc全部测试通过
Jquery 学习笔记（二）
10-29
在本篇 jQuery 学习笔记（二）中，我们将重点探讨 jQuery 中的选择器，这部分内容深受 CSS 选择器的影响。 首先，jQuery 的选择器系统与 CSS 的选择器体系非常相似，允许开发者高效地选取页面中的特定元素。CSS ...
网络安全——HTML基础
W981113的博客
12-04 3150
1.漏洞 通用型：第三方软件、应用、系统对应的漏洞，每个使用这个软件或者应用系统的用户都存在这个漏洞，发现一个 漏洞可以封杀n多个网站 事件型：非通用型漏洞，主要指互联网上一个应用的具体漏洞，如具体到某个站点 2.同源 协议 主机 端口都相同 3.提交方式method 两种方法 Get ：url中直接显示，可直接看到 Post ：表单方式提交，嵌套在页面内，起到保密作用 4.windows系统日志中 4624 登陆成功 4625 审核失败 5.Linux日志 最后一次登录的日志 ┌──
【jQuery】jQuery官方基本教程的学习笔记1-核心Core
阿来小同学的博客
12-21 845
前言： 基本概念就不介绍了
jQuery学习笔记——事件
06-08
好的，关于 jQuery 的事件，我可以和你分享一些学习笔记。 1. 绑定事件 在 jQuery 中，我们可以通过以下方式来绑定事件： ``` $(selector).event(function(){ // 事件处理程序 }) ``` 其中，`selector` 表示要...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值