jQuery属性操作

最新推荐文章于 2021-12-14 20:39:50 发布

我可能是个假开发

最新推荐文章于 2021-12-14 20:39:50 发布

阅读量610

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/CSDN_GIA/article/details/70307808

版权

前端专栏收录该内容

47 篇文章 0 订阅

订阅专栏

jQuery属性操作

属性attr操作

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>属性操作_attr</title>
        <script type="text/javascript" src="../../js/jquery-1.11.0.min.js" ></script>
        <script>
            /**
             * 需求：
             *  1.获取图片的路径
             *  2.设置图片的高度属性
             *  3.给图片设置多个属性(宽度和高度)
             *  4.移出图片的高度属性
             */

            /**
             * 方法分析：
             *  1.attr(name):读(获)取属性的值
             *  2.attr(key,value)：设置属性值
             *  3.attr(properties)：同时设置多个属性
             *  4.removeAttr(name)：删除某个属性
             * 
             * 所有方法注意查看运行显示结果，查看其中的某个方法时，请注释其它方法，后面的案例不再说明！
             */

            /*
             * 代码实现
             */
            $(function(){
                //1.attr(name):该方法用于获取属性的值(根据属性的名称)
                var srcEle = $("img").attr("src");
                alert(srcEle);//输出结果为该图片的路径：../../img/1.jpg

                //2.attr(key,value):该方法用于设置属性和值
                $("img").attr("height","800px");//设置该图片的高度属性，注意观察图片的高度变化

                //3.attr(properties)：同时设置多个属性值
                //$("img").attr({"width":"1300px","height":"300px"});//注意观察图片发生的变化(宽高都改变)

                //4.removeAttr(name)：删除某个属性和值
                $("img").removeAttr("width");//清除width属性后，图片变回其自身原有的大小

            });
        </script>
    </head>
    <body>
        <img src="../../img/1.jpg"  width="800px" />
    </body>
</html>

CSS类操作

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>属性操作_CSS类</title>
        <style type="text/css">
            .divclass {
                color: red;
            }

            .div1 {
                background-color: yellow;
            }

            #div1 {
                border: 1px solid black;
                width: 400px;
                height: 250px;
                margin: auto;
            }

            #father {
                border: 1px solid white;
                width: 450px;
                height: 300px;
                margin: auto;
                text-align: center;
            }
        </style>
        <script type="text/javascript" src="../../js/jquery-1.11.0.min.js"></script>
        <script>
            /**
             * 需求：
             * 1.点击button，使一个div的背景颜色变为 黄色
             * 2.点击button，清空之前设置的背景颜色
             * 3.通过toggleClass(class) 实现点击字体变为紅色，再点击样式还原
             */

            /**
             * 方法分析：
             *  1.addClass(class) 添加一个class属性
             *  2.removeClass([class]) 移除一个class属性
             *  3.toggleClass(class) 如果存在(不存在)就删除(添加)一个类
             */

            /**
             *代码实现 
             */
            $(function() {
                // 1.点击button，使一个div的背景颜色变为黄色
                $("#button1").click(function() {
                    $("#div1").addClass("div1");
                });

                // 2.点击button，清空之前设置的背景颜色
                $("#button2").click(function() {
                    $("#div1").removeClass("div1");
                });

                // 3.通过toggleClass(class) 实现点击字体变为紅色，再点击样式还原
                $("#button3").click(function() {
                    $("#div1").toggleClass("divclass");
                });
            });
        </script>
    </head>

    <body>
        <div id="father">
            <div id="div1">AAAAAA</div><br />
            <input type="button" value="背景颜色变为黄色" id="button1" />
            <input type="button" value="背景颜色清空" id="button2" />
            <input type="button" value="字体颜色开关" id="button3" />
        </div>
    </body>

</html>

HTML代码操作

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>属性操作_html代码</title>
        <script type="text/javascript" src="../../js/jquery-1.11.0.min.js"></script>
        <script>
            /**
             * 需求：
             *  1.点击按钮获取div中 html
             *  2.点击按钮设置div中html
             */

            /**
             * 方法分析
             *  1.html()方法用于读取innerHTML
             *  2.html(val)方法用于设置innerHTML
             */

            /**
             *代码实现 
             */

            $(function(){
                //1.点击按钮获取div中 html
                $("#btn1").click(function(){
                    var divEle = $("div").html();
                    alert(divEle);//<p>CSDN</p>
                });

                //2.点击按钮设置div中html
                $("#btn2").click(function(){
                    $("div").html("Java学院");//覆盖之前此位置的内容
                });

            })
        </script>
    </head>

    <body>
        <div><p>CSDN</p></div>
        <input type="button" value="获取html" id="btn1" />
        <input type="button" value="设置html" id="btn2" />
    </body>

</html>

文本text操作

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>属性操作_文本text</title>
        <script type="text/javascript" src="../../js/jquery-1.11.0.min.js"></script>
        <script>
            /**
             * 需求：
             *  1.点击按钮获取div中text
             *  2.点击按钮设置div中text
             */

            /**
             * 方法分析
             *  1.text()方法用于读取文本内容
             *  2.text(val)方法用于设置文本内容
             */

            /**
             *代码实现 
             */

            $(function(){
                //1.点击按钮获取div中 text
                $("#btn1").click(function(){
                    var divEle = $("div").text();
                    alert(divEle);//CSDN
                });

                //2.点击按钮设置div中text
                $("#btn2").click(function(){
                    $("div").text("Java学院");//覆盖之前此位置的内容
                });

            })
        </script>
    </head>

    <body>
        <div><p>CSDN</p></div>
        <input type="button" value="获取text" id="btn1" />
        <input type="button" value="设置text" id="btn2" />
    </body>
</html>

值val操作

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>属性操作_值val</title>
        <script type="text/javascript" src="../../js/jquery-1.11.0.min.js"></script>
        <script>
            /**
             * 需求：
             *  1.点击按钮获得文本框、下拉框、单选框选中的value
             *  2.点击按钮设置用户名的默认值为“老王”
             */

            /**
             * 方法分析
             *  1.val()方法用于读取元素value属性
             *  2.val(val)方法用于设置元素value属性
             */

            /**
             *代码实现 
             */

            $(function(){
                //1.点击按钮获得文本框、下拉框、单选框选中的value
                $("#btn1").click(function(){
                    alert($("#username").val());
                    alert($("#city").val());
                    alert($("input[type='radio']:checked").val());
                });

                //2.点击按钮设置用户名的默认值为“老王”
                $("#btn2").click(function(){
                    $("#username").val("老王");
                });
            })
        </script>
    </head>

    <body>
        用户名 <input type="text" id="username" /> <br/> 
        性别 <input type="radio" name="gender" value="男" />男
            <input type="radio" name="gender" value="女" checked="checked"/> 女<br/> 
        城市
            <select id="city">
                <option value="北京">北京</option>
                <option value="上海">上海</option>
                <option value="广州">广州</option>
            </select> <br/>
            <input type="button" value="获取val" id="btn1" />
            <input type="button" value="设置val" id="btn2" />
    </body>

</html>