jQuery基础

最新推荐文章于 2024-06-07 23:26:45 发布

WangZhang_521

最新推荐文章于 2024-06-07 23:26:45 发布

阅读量465

点赞数

分类专栏： jQuery 文章标签： jquery javascript 前端

本文链接：https://blog.csdn.net/WangZhang_521/article/details/124610472

版权

jQuery 专栏收录该内容

4 篇文章 2 订阅

订阅专栏

01-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="jquery.min.js"></script>
</head>

<body>
    <a href="https://www.baidu.com/" title="都挺好">都挺好</a>
    <input type="checkbox" name="" id="" checked>
    <div index="1" data-index="2">我是div</div>
    <span>123</span>
    <script>
        $(function() {
            // 1.element.prop()   获取或设置元素固有的属性
            console.log($("a").prop("href"));
            $("a").prop("title", "我们都挺好")
            $("input").change(function() {
                console.log($(this).prop("checked"));
            })

            // 2.设置或获取元素自定义的属性 attr()  index就是自定义属性
            console.log($("div").attr("index"));
            $("div").attr("index", 4)
            console.log($("div").attr("data-index"));
            // 3.数据缓存 data()  在指定的元素上存取数据，并不会修改DOM元素结构，一旦页面刷新。之前存放的数据都将被移除    
            $("span").data("uname", "andy")
            console.log($("span").data("uname"));
            // data() 还可以获取H5自定义的属性 data-index 开头的，第一个不用写data- 而且返回的是数字型的
            console.log($("div").data("index"));


        })
    </script>
</body>

</html>

02-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="jquery.min.js"></script>
</head>

<body>
    <div>
        <span>我是内容</span>
    </div>
    <input type="text" value="请输入内容">
    <script>
        // 1.获取设置文本框内容 html()   相当于原生js里的innerHTML
        // console.log($("div").html());
        // $("div").html("123")

        // 2.获取设置元素文本内容 text()    只获取文字内容，忽略标签之类的，相当于原生js里的innerText
        console.log($("div").text());
        $("div").text(123)

        // 3.获取设置表单值 val()
        console.log($("input").val());
        $("input").val(123)
    </script>
</body>

</html>

03-返回指定祖先元素

<!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="jquery.min.js"></script>
</head>

<body>
    <div class="one">
        <div class="two">
            <div class="three">
                <div class="four"></div>
            </div>
        </div>
    </div>
    <script>
        // parents() 可以返回指定的祖先元素
        console.log($(".four").parents(".one"));
        console.log($(".four").parents(".two"));
        console.log($(".four").parents(".three"));
        console.log($(".four").parents("body"));
    </script>
</body>

</html>

04-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="jquery.min.js"></script>
</head>

<body>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <script>
        $(function() {
            // 1.想要给相同元素做相同的操作 用隐式迭代
            // $("div").css("color", "pink")

            // 2.想要给相同元素做不同的操作 需要用到遍历
            var sum = 0;
            // (1) each()方法遍历元素  用于遍历DOM对象
            var arr = ["red", "green", "blue"];
            $("div").each(function(index, domEle) {
                    // 回调函数第一个参数一定是索引号 可以自己指定索引号名称
                    // console.log(index);
                    // 回调函数第二个参数一定是DOM对象 不能使用jQuery方法 使用的话需要转换为jQuery对象
                    //  console.log(domEle);
                    $(domEle).css("color", arr[index]);
                    sum = sum + parseInt($(domEle).text()); //      $(domEle).text() 输出是 0123  div元素里面的值是字符型的，需要转换
                })
                // console.log(sum);
                // (2) $.each()方法遍历元素 主要用于遍历数据，处理数据 用于遍历数组和对象
                // $.each($("div"), function(i, ele) {
                //     //  console.log(i);
                //     // console.log(ele);
                // })
                // $.each(arr, function(i, ele) {
                //     console.log(i);
                //     console.log(ele);
                // })
            $.each({
                name: "andy",
                age: 18
            }, function(i, ele) {
                console.log(i);
                console.log(ele);
            })



        })
    </script>
</body>

</html>

05-创建添加删除元素

<!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="jquery.min.js"></script>
</head>

<body>
    <ul>
        <li>原先的li</li>
    </ul>
    <div class="test">原先的div</div>
    <script>
        $(function() {
            // 1.创建元素
            var li = $(" <li>我是后来创建的li</li>");

            // 2.添加元素

            // (1) 内部添加
            //  $("ul").append(li); // 把小li放在ul里面，原先小li的后面
            $("ul").prepend(li); // 把小li放在ul里面，原先小li的前面

            // (2) 外部添加
            var div = $("<div>我是后来创建的div</div>");
            // $(".test").after(div);  外部添加，添加到后面
            $(".test").before(div); // 外部添加，添加到前面

            // 3.删除元素 
            // (1) 元素.remove() 删除元素本身
            // $("ul").remove()

            // (2) 元素.empty()  删除元素里所有的子节点
            // $("ul").empty();

            // (3) 元素.html("")  删除元素里面的内容
            $("li").html("");
        })
    </script>
</body>

</html>

06-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>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            padding: 10px;
            border: 15px solid red;
            margin: 20px;
        }
    </style>
    <script src="jquery.min.js"></script>
</head>

<body>
    <div></div>
    <script>
        $(function() {
            // 1. width() / height()   获取或设置元素的宽和高
            //  console.log($("div").width()); // 获取div的宽度 200
            // console.log($("div").height()); // 获取div的高度 200
            // $("div").width(300); // 修改div的宽度
            // $("div").height(300); // 修改div的高度


            // 2. innerWidth() / innerHeight()    获取或设置元素的宽和高 包含padding 
            console.log($("div").innerWidth()); // 220

            // 3. outerWidth() / outerHeight()    获取或设置元素的宽和高 包含padding 和 border
            console.log($("div").outerWidth()); // 250


            // 4. outerWidth(true) / outerHeight(true)    获取或设置元素的宽和高 包含padding,border和margin
            console.log($("div").outerWidth(true)); // 290

        })
    </script>
</body>

</html>

07-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>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        
        .father {
            width: 400px;
            height: 400px;
            background-color: pink;
            margin: 100px;
            overflow: hidden;
            position: relative;
        }
        
        .son {
            width: 150px;
            height: 150px;
            background-color: purple;
            position: absolute;
            top: 10px;
            left: 10px;
        }
    </style>
    <script src="jquery.min.js"></script>
</head>

<body>
    <div class="father">
        <div class="son"></div>
    </div>
    <script>
        $(function() {
            // 1.获取设置距离文档的位置(偏移)  offset() 跟父级没有关系
            //  console.log($(".son").offset()); // 输出的是个对象
            // offset().top 获取设置元素对于文档顶部的距离
            // offset().left 获取设置元素对于文档左侧的距离
            // offset({top:10px,left:10px}) 设置修改元素相对于文档的距离 以对象的形式修改
            // console.log($(".son").offset().top); 
            // $(".son").offset({
            //     top: 200,
            //     left: 200
            // }); 


            // 2.获取元素距离带有定位父级的位置(偏移) position() 如果没有带定位的父级，则以文档为准
            console.log($(".son").position()); // 只能获取，不能设置和修改

        })
    </script>
</body>

</html>

08-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>
    <style>
        .back {
            display: none;
            position: absolute;
            left: 1160px;
            top: 1000px;
            width: 80px;
            height: 50px;
            background-color: pink;
            text-align: center;
            line-height: 50px;
        }
        
        .container {
            margin: 100px auto;
            width: 800px;
            height: 1200px;
            background-color: purple;
        }
    </style>
    <script src="jquery.min.js"></script>
</head>

<body>
    <div class="back">返回顶部</div>
    <div class="container"></div>
    <script>
        $(function() {
            $(document).scrollTop(100); //页面一加载滚动条就在100的位置
            // 被卷去的头部  scrollTop()   被卷去的左侧 scrollLeft()
            // 注册页面滚动事件
            var boxTop = $(".container").offset().top;
            $(window).scroll(function() {
                //  console.log(1);
                //  console.log($(document).scrollTop());
                if ($(document).scrollTop() >= boxTop) {
                    // $(".back").show()
                    $(".back").fadeIn()
                } else {
                    $(".back").fadeOut()
                }

                // 返回顶部 
                $(".back").click(function() {
                    // $(document).scrollTop(0); // 没有动画效果
                    $("body,html").stop().animate({
                            scrollTop: 0
                        })
                        // $(document).stop().animate({
                        //     scrollTop: 0
                        // }) 不能是文档，而是body 和 html 元素做动画
                })
            })



        })
    </script>
</body>

</html>

WangZhang_521

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery基础

01-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"> &
复制链接

扫一扫