2023 12.19笔记

最新推荐文章于 2024-06-21 16:09:36 发布

KALAXK

最新推荐文章于 2024-06-21 16:09:36 发布

阅读量355

点赞数 7

文章标签：笔记

本文链接：https://blog.csdn.net/KALAXK/article/details/135132158

版权

1.jQuery



<!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.min.js"></script>
    <script>
        // $("button").click(function () {
        //     alert("666")
        // })
        // 入口函数：等待页面加载完毕后进行执行
        // 1
        // $(document).ready(function () {
        //     $("button").click(function () {
        //         alert("666")
        //     })
        // })


        // 2
        $(function () {
            jQuery("button").click(function () {
                alert("666")
            })
        })

        // $:顶级对象，是jQuery的别称，相当于原生js中的window，对元素进行包装，使其成为jquery对象，从而可以调用jquery的方法

        // jquery对象和dom对象的区别



    </script>
</head>


<body>
    <button>点击</button>

    <script>
        let btn = document.querySelector("button")
        // let btn2 = $("button")

        // console.log(btn)
        // console.log(btn2)
        // jquery只能用jquery方法，不能使用原生js的方法
        // btn2.style.backgroundColor = "pink"

        // 把jquery转换成dom对象
        $("button")[0].style.backgroundColor = "pink"
    </script>
</body>

</html>

入口函数：等待页面加载完毕后进行执行

$: 顶级对象，是jQuery的别称，相当于原生js中的window，对元素进行包装，使其成为jquery 对象，从而可以调用jquery的方法

jquery对象和dom对象的区别 query只能用jquery方法，不能使用原生js的方法

2.jQuery选择器

$("选择器")

$("选择器").css("属性名","属性值") //

例子：$("div").css("color", "pink")

     隐式迭代
     console.log($("div"))
     $("div").css("color", "pink")

3.筛选选择器

<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
    </ul>
    <script>
        console.log($("ul li:first"))
        console.log($("ul li:last"))
        console.log($("ul li:eq(2)")) //获取到的li元素中，索引下标为2的li
        $("ul li:odd").css("backgroundColor", "pink")
        $("ul li:even").css("backgroundColor", "red")

    </script>

</body>

</html>

odd	奇数
even	偶数
eq()最为重要	在元素中索引下标

4.筛选的方法

<body>
    <div class="father">
        111
        <div class="son">222</div>
        <div class="son">3333
            <div>ncjdcd</div>
        </div>
        <li>ncjdnjc</li>

    </div>
    <script>
        // $(".son").parent()
        // $(".father").children(".son")、、子代选择器
        // $(".father").find("div").css("color", "red")  //后代选择器

        $("li").siblings("div").css("color", "red")

    </script>

</body>

</html>

父代选择器	$(".son").parent()$(".son").parent()
子代选取器	$(".father").children(".son")
后代选择器	$(".father").find("div").css("color", "red")
兄弟选择器	$("li").siblings("div").css("color", "red")

5.更改样式


<!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.min.js">

    </script>
    <style>
        div {
            width: 300px;
            height: 300px;
            background-color: pink;
        }

        .pink {
            background-color: rgb(13, 12, 12);
        }
    </style>
</head>

<body>
    <div>
        cbdhcd
    </div>

    <script>
        // $("div").css("backgroundColor", "red")

        // $("div").css({ "color": "pink", "backgroundColor": "green" })
        // 对类名进行添加
        $("div").addClass("pink")
        // 移除
        // $("div").removeClass("pink")

        // 切换
        $("div").toggleClass("pink")


        hide()
        show()
    </script>

</body>

</html>

addClass	对类名进行添加
removeClass	移除
toggleClass	切换

6.显示和隐藏


<!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.min.js"></script>
    <style>
        div {
            width: 300px;
            height: 300px;
            background-color: pink;
            display: none;
        }
    </style>
    <script>
        $(function () {
            $("button").eq(0).click(function () {
                $("div").show(2000, function () {
                    console.log("显示按钮的点击事件执行结束了")
                })//显示
            })
            $("button").eq(1).click(function () {
                $("div").hide(2000)//隐藏
            })
            $("button").eq(2).click(function () {
                $("div").toggle()//切换
            })
        })
    </script>
</head>

<body>
    <button>显示</button>
    <button>隐藏</button>
    <button>切换</button>

    <div>

    </div>

</body>

</html>

show ()	显示
hide ()	隐藏
toggle（）	切换

7.滑动


<!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.min.js"></script>
    <style>
        div {
            width: 300px;
            height: 300px;
            background-color: pink;
            display: none;
        }
    </style>
</head>

<body>
    <button>划入</button>
    <button>划出</button>
    <button>切换</button>
    <div></div>
    <script>
        $(function () {
            $("button").eq(0).click(function () {
                $("div").slideDown(2000, function () {
                    console.log("显示按钮的点击事件执行结束了")
                })//显示
            })
            $("button").eq(1).click(function () {
                $("div").slideUp(2000)//隐藏
            })
            $("button").eq(2).click(function () {
                $("div").slideToggle()//切换
            })
        })
    </script>


</body>

</html>

slideDown()	滑动显示
slideUp()	滑动隐藏
slideToggle()	滑动切换

8.淡入淡出


<!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.min.js"></script>
    <style>
        div {
            width: 300px;
            height: 300px;
            background-color: pink;
            display: none;
        }
    </style>
</head>

<body>
    <button>淡入</button>
    <button>淡出</button>
    <button>切换</button>
    <div></div>
    <script>
        $(function () {
            $("button").eq(0).click(function () {
                $("div").stop().fadeIn(2000, function () {
                    console.log("显示按钮的点击事件执行结束了")
                })//显示
            })
            $("button").eq(1).click(function () {
                $("div").stop().fadeOut(2000)//隐藏
            })
            $("button").eq(2).click(function () {
                $("div").stop().fadeToggle()//切换
            })
        })
    </script>


</body>

</html>

stop()	暂停
fadeIn()	显示
fadeOut()	隐藏
fadeToggle()	切换

9.自定义动画


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            position: absolute;
            width: 300px;
            height: 300px;
            background-color: pink;
        }
    </style>
    <script src="./jquery.min.js"></script>
</head>

<body>
    <button>点击</button>
    <div></div>
    <script>
        // animate(想要更改的样式属性,[speed],[easing],[fn])
        $(function () {
            $("button").click(function () {
                $("div").animate({
                    left: 150,
                    top: 500,
                    opacity: .4,
                    width: 10
                }, 1500)

            })

        })

    </script>
</body>

</html>

animate(想要更改的样式属性,[speed],[easing],[fn])

speed	速度
easing	缓动效果
fn	函数

KALAXK

关注

7
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
2023 12.19笔记

: 顶级对象，是jQuery的别称，相当于原生js中的window，对元素进行包装，使其成为jquery 对象，从而可以调用jquery的方法。jquery对象和dom对象的区别 query只能用jquery方法，不能使用原生js的方法。animate(想要更改的样式属性,[speed],[easing],[fn])例子：$("div").css("color", "pink")$("选择器").css("属性名","属性值") //2.jQuery选择器。
复制链接

扫一扫