web前端-JavaScript笔记-jQuery部分

jQuery的简单使用

引入jQuery

到https://jquery.com下载 Download the compressed, production jQuery 3.7.1
通过<script src=“”></script> 即可引入

其他

页面加载

// 入口函数:等待页面加载完毕之后再执行 == load
$(document).ready(function(){
    $("div").css("color","pink")
})
// DOMContentLoaded
$(function(){
    $("div").css("color","pink")
})

$的含义

$是jQuery的顶级对象，也是jQuery的别称 $==jQuery
jQuery对象只能使用jQuery方法，不能使用原生JS的方法；原生也不能使用jQuery的方法
某些情况可以转换:$(dom对象) === jQuery对象

CSS选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jquery-3.7.1.min.js"></script>
</head>
<body>
    <div>111</div>
    <div>222</div>
    <div>333</div>
    <div>444</div>

    <div class="box1">
        <ul>
            <li>1</li>
            <li>2</li>
            <li class="li3">3</li>
            <li>4</li>
            <li>5</li>
        </ul>
    </div>

    <button>点击</button>

    <script>
        // $("选择器")
        $("div").css("color","yellow")
        // jQuery存在隐式迭代，会遍历选择器内部的元素

        // 筛选器：
        console.log($("li:first"))
        console.log($("li:last"))
        console.log($("li:eq(2)")) //相当于nth-child()
        console.log($("li:odd"))
        console.log($("li:even"))
        console.log($("ul").parent)
        console.log($(".box1").children()) //相当于子代选择器
        console.log($(".box").find("li")) 
        console.log($(".li3").siblings("li")); //查找兄弟节点，返回不包括自身的数组
    </script>
</body>
</html>

CSS的样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jquery-3.7.1.min.js"></script>

    <style>
        div{
            width: 100px;
            height: 100px;
            background-color: blanchedalmond;
        }
        .div_style2{
            width: 200px;
            height: 200px;
            background-color: aquamarine;
        }
    </style>
</head>
<body>
    <div>111</div>

    <script>
        $("div").css({"color":"red","backgroundColor":"green"})
        // 添加class
        $("div").addClass("div_style2")
        // 移除class
        $("div").removeClass("div_style2")
        // 切换class
        $("div").toggleClass("div_style2")
    </script>
</body>
</html>

jQuery效果

可以在 jQuery API 中文文档查询更多

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../../../../../文件/云计算/web前端/jquery-3.7.1.min.js"></script>

    <style>
        .box1{
            width: 100px;
            height: 100px;
            background-color: aquamarine;
        }
    </style>
</head>
<body>
    <button>显示</button>
    <button>隐藏</button>
    <button>切换</button>

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

    <script>
        $("button:eq(0)").click(function(){
            $("div").show()
        })
        $("button:eq(1)").click(function(){
            $("div").hide()
        })
        $("button:eq(2)").click(function(){
            $("div").toggle()
        })
    </script>
</body>
</html>

动画

animate(形参,speed,fun()),可以调整属性的位置
按钮点击div的显示隐藏即动画跳过
在这里插入图片描述

.stop()：停止所有在指定元素上正在运行的动画,可以传参
.finish()：停止目前正在运行的动画，立刻跳转到该动画的结果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./jquery-3.7.1.min.js"></script>
    <style>
        div{
            width: 500px;
            height: 500px;
            background-color: bisque;
            opacity: 0;
        }
    </style>
</head>
<body>
    <button>显示</button>
    <button>隐藏</button>
    <button>跳过</button>
    <div></div>

    <script>
        $("button:eq(0)").click(function(){
            $("div").stop().animate({
                opacity: .7,
                width:500,
                heigth:500
            },3000,function(){
                console.log("wan");
            })
        })

        $("button:eq(1)").click(function(){
            $("div").stop().animate({
                opacity: 0,
                width:300,
                heigth:300
            },3000,function(){
                console.log("wan");
            })
        })

        $("button:eq(2)").click(function(){
            $("div").finish()
        })
    </script>
</body>
</html>

属性

prop

prop可以获取匹配元素的指定属性的属性值，也可以修改属性值
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./jquery-3.7.1.min.js"></script>
</head>
<body>
    <form action="" method="get">
        <input type="checkbox" name="hobby" value="1">1
        <input type="checkbox" name="hobby" value="2">2
        <input type="checkbox" name="hobby" value="3">3
        <input type="checkbox" name="hobby" value="4">4
    </form>

    <script>
    // prop:可以获取及修改对象的属性，无法获得自定义属性
    console.log($("input:eq(1)").prop("value"));
    $("input:eq(1)").prop("value","更改")
    console.log($("input:eq(1)").prop("value"))
    </script>
</body>
</html>

attr

attr除了可以获取对象原本的属性外，还可以获取自定义属性

自定义属性
1.通过.setAttribute(“属性名”,“属性值”)来设置

<body>
	<form>
		<button>点击</button>
	</form>
	<script>
		const btn = document.querySelector("button")
		btn.setAttribute("tip","tiptip")
		console.log(btn);
	</script>
</body>

在这里插入图片描述
2.通过data-属性名 = “属性值” 来设置

<body>
	<form>
		<button data-tip="tiptip2">点击</button>
	</form>
	<script>
		const btn = document.querySelector("button")
		console.log(btn);
	</script>
</body>

在这里插入图片描述