jQuery

最新推荐文章于 2024-07-23 23:43:36 发布

s_yqb

最新推荐文章于 2024-07-23 23:43:36 发布

阅读量123

点赞数

分类专栏：前端基础文章标签： jquery html html5

本文链接：https://blog.csdn.net/qq_39037116/article/details/120401270

版权

前端基础专栏收录该内容

5 篇文章 0 订阅

订阅专栏

jQuery对象

jQuery 是一个 JavaScript 库，极大地简化了 JavaScript 编程。它对javascript中的很多功能都进行了包装。在javascript中 HTML 标签对象会被包装成DOM对象，而在jQuery中会被包装成 jQuery 对象。用jQuery提供的API创建的对象、查询的对象、以及将DOM对象转换后，得到的都是 jQuery 对象。

而 jQuery 对象本质上是 DOM对象的数组 + jQuery提供的一些列函数。例如 $button 是我们获得的jQuery 对象，那么 $button[0] 就是DOM对象

jQuery 和 DOM各有各的属性和方法，不能混用

jQuery 和 DOM对象可以互相转换：jQuery对象[下标] 取出来的就是DOM对象，$(DOM对象)就是jQuery对象

jQuery核心函数

window.jQuery = window.$ = jQuery;
$ 是 jQuery 中的核心函数，其实也就是jQuery，能实现很多功能。$()就是调用这个函数
1、传入参数为函数时，表示页面加载完成之后
2、传入参数为 HTML字符串时，会创建这个HTML对象。我们可以将这个对象加入到原来的HTML中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文档标题</title>
    <script type="text/javascript" src="jquery-3.6.0.js"></script>
    <script type="text/javascript">
        $(function (){
            $("<span>我我我</span>").appendTo("body");
        })
    </script>
</head>
<body>
</body>
</html>

3、传入参数为选择器字符串时，
$("#id属性值") 根据id查询对象
$(“标签名”) 根据标签名查询对象
$(".class属性值") 根据class查询对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文档标题</title>
    <script type="text/javascript" src="jquery-3.6.0.js"></script>
    <script type="text/javascript">
        <!--表示页面加载完成-->
        $(function (){
            //获取jquery对象
            var $button = $("#button")
            //绑定单击事件
            $button.click(function (){
                alert("jquery");
            })
        })
    </script>
</head>
<body>
<button id="button">按钮</button>
</body>
</html>

4、传入参数为 DOM对象时，会将DOM对象转化为jQuery对象

jQuery选择器

基本选择器

在这里插入图片描述

按id： $ ("#id")
按element：$ (“div”)
按class：$ (".类名")
匹配所有元素：$ ("*")
将每一个选择器匹配到的元素合并后一起返回：$(“div, span, p.myClass”)
注意：查询到的元素顺序跟元素在HTML中的顺序有关

层级选择器

在这里插入图片描述
后代选择器 $(“div input”)
子代选择器
下一个同辈元素选择器
下面所有同辈元素选择器

过滤选择器

对已经匹配到的结果进行筛选过滤。使用时用冒号

基本过滤

在这里插入图片描述
:first 就是对匹配到的结果，选取第一个
:first 就是对匹配到的结果，选取索引值为偶数的元素，从0开始计数
:eq(index) 选取给定索引值的元素
:header 选出标题元素
:animated 选正在执行动画的元素

内容过滤

在这里插入图片描述
:contains 匹配包含给定文本的元素
:empty 匹配所有不包含子元素或者文本的空元素
:parent 匹配含有子元素或者文本的元素
:has(selector) $(“div:has(h1)”)

属性过滤

在这里插入图片描述

$(“input[id][name $= ‘man’]”) 匹配input，且有id属性，且name属性以man结尾

表单过滤

在这里插入图片描述
匹配相应的表单元素，文本输入框、密码、单选框等等

元素筛选

使用时用 .，与选择器很相似
在这里插入图片描述

$(“p”).eq(1)

属性操作

在这里插入图片描述
html 可以设置和获取起始标签和结束标签中的内容
text 可以设置和获取起始标签和结束标签中的文本
val 可以设置和获取表单项的value属性值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文档标题</title>
    <script type="text/javascript" src="jquery-3.6.0.js"></script>
    <script type="text/javascript">
        $(function (){
            $("button").click(function (){
                //获取
                alert($("#text").val());
                //设置
                $("#text").val("设置")
            })
        })
    </script>
</head>
<body>
    用户名：<input type="text" id="text"/>
    <button>按钮</button>
</body>
</html>

val还可以同时设置多个表单项的选中状态

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文档标题</title>
    <script type="text/javascript" src="jquery-3.6.0.js"></script>
    <script type="text/javascript">
        $(function (){
            $(":checkbox").val(["checkbox1","checkbox2"])
        })
    </script>
</head>
<body>
    <input type="checkbox" value="checkbox1"/>第一个
    <input type="checkbox" value="checkbox2"/>第二个
    <input type="checkbox" value="checkbox3"/>第三个
</body>
</html>

attr可以获取或者设置属性值（包括自定义属性），不推荐checked、readonly、selected、disabled等
prop只推荐checked、readonly、selected、disabled等
对于这些固有属性，当我们没有设置时，attr会返回undefined，而prop会返回boolean，因此更推荐prop

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文档标题</title>
    <script type="text/javascript" src="jquery-3.6.0.js"></script>
    <script type="text/javascript">
        $(function (){
            //获取
            $(":checkbox").attr("value");
            //设置
            $(":checkbox").attr("value","checkbox3");
            //attr获取checked属性
            alert($(":checkbox").attr("checked"));
            //prop获取checked属性
            alert($(":checkbox").prop("checked"));
            //prop设置checked属性
            $(":checkbox").prop("checked",true);
        })
    </script>
</head>
<body>
    <input type="checkbox" value="checkbox1"/>第一个
</body>
</html>

元素的增删改

不存在的元素可以用 $(HTML代码) 创建，存在的元素可以用选择器查询。

内部插入：
a.appendTo(b) 把a插入到b的子元素的末尾，成为最后一个子元素
a.prependTo(b) 把a插入到b的子元素的前面，成为第一个子元素

外部插入：
a.insertAfter(b) 把a插到b的后面
a.insertBefore(b) 把a插到b的前面

替换：
a.replaceWith(b) 用b替换a
a.replaceAll(b) 把b都替换成a

删除：
a.remove() 删除a标签
a.empty() 清空a标签的内容

    <script type="text/javascript">
        $(function (){
            $("div").replaceWith( $("<h1>我是标题</h1>") );
        })
    </script>

CSS样式操作

CSS样式操作，其实就是给标签添加class属性。CSS样式可以事先在 < style>中设置好

1、addClass()
添加某个或者几个class属性

2、removeClass()
添加某个、几个或者所有class属性

3、toggleClass()
添加或者移除class属性

4、offset()
获得第一个匹配元素的位置或者修改元素位置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文档标题</title>
    <style>
        div.widthstyle{
            width: 100px;
            height: 100px;
        }
        div.borderstyle{
            border: red 2px solid;
        }
        div.backgroundstyle{
            background: blue;
        }

    </style>
    <script type="text/javascript" src="jquery-3.6.0.js"></script>
    <script type="text/javascript">
        $(function (){
            $("div").addClass("widthstyle borderstyle backgroundstyle")
            $("div").offset({
                top:100,
                left:100
            })
        })
    </script>
</head>
<body>
    <div></div>
</body>
</html>

动画

基本动画：
show() 显示
hidden() 隐藏
toggle() 显示或隐藏
第一个参数：动画执行时间，以ms为单位
第二个参数：传入函数，动画结束后自动执行

淡入淡出动画：
fadeIn() 淡入
fadeOut() 淡出
fadeTo() 在指定时长内，将透明度修改到指定的值。0透明，1完全可见
fadeToggle() 淡入或淡出

jQuery事件操作

页面加载后

jQuery的页面加载后

 $(function (){   })

跟原生的JS页面加载有一些区别
1、触发时刻不同：jQuery的页面加载完成之后是浏览器内核解析完页面标签，创建完DOM对象就会立马执行；JS的除了要等DOM对象创建好，还要等标签显示需要的内容都加载好才会执行。比如要从网络抓取图片等等。因此jQuery的会先执行，JS的
2、执行次数：当有多个页面加载完成的代码时(多个 $(function (){ }))，jQuery会把所有的依次顺序执行完，JS只会执行最后一个

其他常见事件

在这里插入图片描述
click() 有function参数时，表示注册绑定。没有时表示执行此单击事件

<head>
    <meta charset="UTF-8">
    <title>文档标题</title>
    <script type="text/javascript" src="jquery-3.6.0.js"></script>
    <script type="text/javascript">
        $(function (){
            $("h4").click(function (){
                alert("我是jQuery");
            })
            $("button").click(function (){
                $("h4").click();
            })
        })
    </script>
</head>
<body>
    <h4 style="background: red">我是jQuery</h4>
    <button>按钮</button>
</body>

bind()可以一次绑定多个单击事件

$(function (){
    $("button").bind("mouseover mouseout", function (){
        alert("我是bind绑定的");
    })
})

one()跟bind用法一样，但是它绑定的事件只会响应一次，一次响应完就不会再响应了

事件冒泡

当父子元素同时监听同一事件，子元素事件触发后，父元素也会被触发，这就是事件冒泡

<head>
    <meta charset="UTF-8">
    <title>文档标题</title>
    <script type="text/javascript" src="jquery-3.6.0.js"></script>
    <script type="text/javascript">
        $(function (){
            $("div").click(function (){
                alert("我是div");
            })
            $("span").click(function (){
                alert("我是span");
            })

        })
    </script>
</head>
<body>
    <div>
        div上<br/>
        <span>我是span</span><br/>
        div下
    </div>
</body>

如何阻止事件冒泡？在子元素事件函数体内 return false，即可阻止

事件对象

事件对象是封装有触发事件信息的javascript对象，对于鼠标点击事件，它里面有点击时鼠标的位置等等

如何获取？我们只需要在事件的function参数列表中添加一个参数，这个参数一般取作event，这个event就是我们要的事件对象

原生JS：

window.onload = function (){
    var dom = document.getElementsByTagName("button");
    dom[0].onclick = function (event){
        console.log(event);
    }
}

jQuery：

$(function (){
    $("button").click(function (event){
        console.log(event);
    })
})

当用jQuery中的bind同时绑定多个事件时，通过event的type属性可以判断当前触发的是哪个事件

$(function (){
    $("button").bind("mouseover mouseout", function (event){
        if (event.type=="mouseover"){
            alert("鼠标移入");
        }else{
            alert("鼠标移出");
        }
    })
})