JQuery --- 第二期 (jQuery属性操作)

程序员文章站 2022-05-29 12:04:12

个人学习笔记 1.JQuery的内容选择器 2. 属性和属性节点 3.JQuery-attr方法 4.JQuery-prop方法 5.attr和prop方法练习 6.JQuery相关类操作方法 7.JQuery文本值相关的方法 8.jQuery操作CSS样式的方法 9.JQuery位置和尺寸操作的方 ......

个人学习笔记

1.jquery的内容选择器

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>jquery的内容选择器</title>
        <script src="jquery-1.12.4.js"></script>
        <script>
            $(function () {
                //:contains(text)   作用:找到包含指定文本内容的指定元素
                var $div1 = $("div:contains('div')");
                console.log($div1);
                //:empty  作用:找到既没有文本内容,也没有子元素的指定元素
                var $div2 = $("div:empty");
                console.log($div2);
                //:has(selector)    作用:找到包含指定子元素的指定元素
                var $div3 = $("div:has('p')");
                console.log($div3);
                //:parent           作用:找到包含指定文本内容或子元素的指定元素
                var $div4 = $("div:parent");
                console.log($div4);
            });
        </script>
    <style>
        div{
            width: 100px;
            height: 100px;
            margin-top: 20px;
            background: green;
        }
    </style>
</head>
<body>
    <div></div>
    <div>div 1号</div>
    <div>div 2号</div>
    <div><p></p></div>
    <div><span></span></div>
</body>
</html>

2. 属性和属性节点

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>属性和属性节点</title>
        <script src="jquery-1.12.4.js"></script>
        <script>
                $(function () {
                    /*
                    什么是属性
                         对象身上的变量就是属性
                    如何操作属性
                         对象.属性名称 = 值
                         对象.属性名称
                         对象['属性名称'] = 值
                         对象['属性名称']
                    什么是属性节点
                        <span name="myspan"></span>
                        给html标签添加的属性就是属性节点
                        在浏览器找到span标签后,展开看到的就是属性
                        在attributes属性中的内容就是属性节点
                    如何操作属性节点使用get和set方法
                        var span = document.getelementsbytagname('span')[0];
                        span.setattribute("name","newspan");
                        console.log(span.getattribute("name"));
                    属性和属性节点的区别
                          任何元素都有属性,但是只有dom元素有属性节点
                     */
                    var span = document.getelementsbytagname('span')[0];
                    span.setattribute("name","newspan");
                    console.log(span.getattribute("name"));
                });
        </script>
</head>
<body>
    <span name="myspan"></span>
</body>
</html>

3.jquery-attr方法

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>jquery-attr方法</title>
        <script src="jquery-1.12.4.js"></script>
        <script>
                $(function () {
                    /**
                     * 获取或者设置或新增属性节点的值
                     *
                     * 传递一个参数:获得指定属性节点的值,无论找到多少个元素,只会返回第一个属性节点的值
                     * 传递两个参数:如果存在,就更改,不存在就新增.有多少元素就设置多少元素
                     */
                    console.log($('span').attr("class", "newspan1"));
                    console.log($('span').attr("new", "haha"));
                    console.log($('span').attr("new"));
                    /**
                     * 删除属性节点:会删除所有被找到的元素的属性节点
                     * 如果想要删除多个属性节点,直接敲一个空格就行了
                     */
                    $('span').removeattr("class new");
                    console.log($('span'));
                });
        </script>
</head>
<body>
    <span class="span1" name="第一个span"></span>
    <span class="span2" name="第二个span"></span>
</body>
</html>

4.jquery-prop方法

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>jquery-prop方法</title>
        <script src="jquery-1.12.4.js"></script>
        <script>
                $(function () {
                    //和attr方法基本一样
                    $('span').eq(0).prop("test","moti");
                    console.log($("span").prop("test"));
                    $('span').removeprop("class");
                    console.log($('span'));

                    /*
                    官方推荐在操作属性节点的时候,具有true和false两个属性的属性节点,
                    如checkbox,selected,或者disabled使用prop,
                    其他的时候attr()
                     */
                    console.log($('input').prop("checked"));//返回true和false
                    console.log($('input').attr("checked"));//返回checked和undefined
                });
        </script>
</head>
<body>
<span class="span1" name="第一个span"></span>
<span class="span2" name="第二个span"></span>
<input type="checkbox" checked>
</body>
</html>

5.attr和prop方法练习

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>attr和prop方法练习</title>
        <script src="jquery-1.12.4.js"></script>
        <script>

                $(function () {
                    //给button添加点击事件
                    var btn = document.getelementsbytagname("button")[0];
                    btn.onclick = function () {
                        //获取输入框的内容
                        var input = document.getelementsbytagname("input")[0];
                        var text = input.value;
                        //修改img的src属性
                        $('img').attr("src",text);//推荐
                        // $('img').prop("src",text);
                    }
                });
        </script>
</head>
<img>
    <input type="text"> <button>切换图片</button><br>
    <img src="https://www.baidu.com/img/bd_logo1.png?where=super">
</body>
</html>

6.jquery相关类操作方法

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>jquery相关类操作方法</title>
        <script src="jquery-1.12.4.js"></script>
    <style>
        .class1{
            background: rebeccapurple;
            width: 200px;
            height: 10px;
        }
        .class2{
            background: green;
            height: 100px;
        }
    </style>
        <script>
                $(function () {
                    var btn0 = document.getelementsbytagname("button")[0];
                    var btn1 = document.getelementsbytagname("button")[1];
                    var btn2 = document.getelementsbytagname("button")[2];
                    /**
                     * addclass:添加一个类,如果要添加多个,多个类名之间用空格隔开
                     */
                    btn0.onclick = function () {
                        $("div").addclass("class2 class1");
                    }
                    /**
                     *  removeclass:删除一个类,如果要删除多个,多个类名之间用空格隔开
                     */
                    btn1.onclick = function () {
                        $("div").removeclass("class2");
                    }
                    /**
                     *  toggleclass:切换类,有就删除,没有就添加
                     */
                    btn2.onclick = function () {
                        $("div").toggleclass("class2 class1");
                    }

                });
        </script>
</head>
<body>
    <button>添加类</button>
    <button>删除类</button>
    <button>切换类</button>
    <div></div>
</body>
</html>

7.jquery文本值相关的方法

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>jquery文本值相关的方法</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            width: 100px;
            height: 100px;
            border: 1px solid #000;
        }
    </style>
        <script src="jquery-1.12.4.js"></script>
        <script>
                $(function () {
                    var btn0 = document.getelementsbytagname("button")[0];
                    var btn1 = document.getelementsbytagname("button")[1];
                    var btn2 = document.getelementsbytagname("button")[2];
                    var btn3 = document.getelementsbytagname("button")[3];
                    var btn4 = document.getelementsbytagname("button")[4];
                    var btn5 = document.getelementsbytagname("button")[5];

                    btn0.onclick = function () {
                        $("div").html("<p>我是段落<span>我是span</span></p>")
                    };
                    btn1.onclick = function () {
                        console.log($("div").html());
                    };
                    btn2.onclick = function () {
                        $("div").text("我是文本内容");
                    };
                    btn3.onclick = function () {
                        console.log($("div").text());
                    };
                    btn4.onclick = function () {
                        $("input").val("请输入内容");
                    };
                    btn5.onclick = function () {
                        console.log($("input").val());
                    };
                });
        </script>
</head>
<body>
    <button>设置html</button>
    <button>获取html</button>
    <button>设置text</button>
    <button>获取text</button>
    <button>设置value</button>
    <button>获取value</button>
    <div></div>
    <input type="text">
</body>
</html>

8.jquery操作css样式的方法

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>jquery操作css样式的方法</title>
        <script src="jquery-1.12.4.js"></script>
        <script>
                $(function () {
                    /**
                     * 逐个设置
                     */
                    // $("div").css("width","100px");
                    // $("div").css("height","100px");
                    // $("div").css("background","green");
                    /**
                     * 链式设置
                     * 注意:链式操作如果大于三步,建议分开
                     */
                    $("div").css("width","100px").css("height","100px").css("background","red");
                    /**
                     * 批量设置
                     * (推荐)
                     */
                    $("div").css({
                        width:"100px",
                        height:"100px",
                        background:"blue"
                    });
                    /**
                     * 获取css样式值
                     */
                    console.log($("div").css("background"));
                });
        </script>
</head>
<body>
<div></div>
</body>
</html>

9.jquery位置和尺寸操作的方法

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>jquery位置和尺寸操作的方法</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .father{
            width: 200px;
            height: 200px;
            background: red;
            border: 20px solid #000;
            margin-left: 50px;
            position: relative;
        }
        .son{
            width: 100px;
            height: 100px;
            background: blue;
            position: absolute;
            left: 50px;
            top: 50px;

        }
    </style>
        <script src="jquery-1.12.4.js"></script>
        <script>
                $(function () {
                    var btn0 =document.getelementsbytagname("button")[0];
                    var btn1 =document.getelementsbytagname("button")[1];
                    /**
                     * 监听获取
                     */
                    btn0.onclick = function () {
                        //获取元素的宽度
                        console.log("father的宽度:",$(".father").width());
                        //获得元素距离窗口的偏移位
                        console.log("son距离窗口的左偏移位",$(".son").offset().left);
                        //获得元素距离定位元素的偏移位
                        console.log("son距离父元素的左偏移位",$(".son").position().left);
                    };
                    /**
                     * 监听设置
                     */
                    btn1.onclick = function () {
                        //设置元素的宽度
                        $(".father").width("500px")
                        //设置元素距离窗口的偏移位
                        $(".son").offset({
                            top:40
                        });
                        //注意position方法只能获取不能设置,可以使用css方法设置
                        $(".son").css({
                           left:"10px"
                        });
                    };
                });
        </script>
</head>
<body>
<div class="father">
    <div class="son"></div>
</div>
<button>获取</button>
<button>设置</button>
</body>
</html>

10.jquery-scrolltop方法

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>jquery-scrolltop方法</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .scroll{
            width: 100px;
            height: 200px;
            border: 2px solid #000;
            overflow: auto;
        }
    </style>
        <script src="jquery-1.12.4.js"></script>
        <script>
                $(function () {
                    var btn0 =document.getelementsbytagname("button")[0];
                    var btn1 =document.getelementsbytagname("button")[1];
                    /**
                     * 监听获取
                     */
                    btn0.onclick = function () {
                        //获取元素滚动的偏移位
                        console.log("scroll 的div滚动的偏移位:",$(".scroll").scrolltop());
                        //获取整个网页滚动的偏移位,为了保证浏览器兼容性,需要按照以下的写法
                        console.log("整个网页滚动的偏移位:",$("body").scrolltop() + $("html").scrolltop());
                    };
                    /**
                     * 监听设置
                     */
                    btn1.onclick = function () {
                        //设置元素滚动的偏移位
                        $(".scroll").scrolltop(200);
                        //设置整个网页的偏移位,为了保证浏览器兼容性,需要按照以下的写法
                        $("html,body").scrolltop(300);
                    };
                });
        </script>
</head>
<body>
<div class="scroll">
    我是莫提我是莫提我是莫提我是莫提我是莫提我是莫提
    我是莫提我是莫提我是莫提我是莫提我是莫提我是莫提
    我是莫提我是莫提我是莫提我是莫提我是莫提我是莫提
    我是莫提我是莫提我是莫提我是莫提我是莫提我是莫提
    我是莫提我是莫提我是莫提我是莫提我是莫提我是莫提
    我是莫提我是莫提我是莫提我是莫提我是莫提我是莫提
    我是莫提我是莫提我是莫提我是莫提我是莫提我是莫提
    我是莫提我是莫提我是莫提我是莫提我是莫提我是莫提
    我是莫提我是莫提我是莫提我是莫提我是莫提我是莫提
    我是莫提我是莫提我是莫提我是莫提我是莫提我是莫提
    我是莫提我是莫提我是莫提我是莫提我是莫提我是莫提
    我是莫提我是莫提我是莫提我是莫提我是莫提我是莫提
    我是莫提我是莫提我是莫提我是莫提我是莫提我是莫提
</div>
<button>获取</button>
<button>设置</button>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
</body>
</html>

上一篇： python自学之第一章——列表（一）

下一篇：网站PR值下降的16个原因分析

JQuery --- 第二期 (jQuery属性操作)

jquery中的过滤操作详细解析

jQuery获得内容和属性方法及示例

jquery登录的异步验证操作示例

jQuery对象的selector属性用法实例教程

jQuery的context属性用法实例教程

jQuery对象的length属性用法实例教程

jQuery DOM/属性/CSS操作

三个简单实用的用于 DOM 操作的 jQuery 方法讲解

jquery如何给对象动态添加属性以及选择器、事件的绑定？（代码教程）

jquery修改属性值实例代码(设置属性值)