jQuery从入门到精通之属性相关
沉沙 2018-07-24 来源 : 阅读 272 评论 0

摘要:本篇jQuery教程探讨了属性相关的相关内容,希望阅读本篇文章以后大家有所收获,帮助大家对jQuery的理解更加深入。

属性和属性节点

· 什么是属性?

o 属性就是对象身上的变量

o 只要对象身上都可以添加属性(无论是自定义对象,还是DOM对象)

<script>

            // 1.自定义一个对象

            var obj = {};

            console.log(obj);

            // 2.动态给自定义对象添加属性

            obj.name = "lnj"; // name就是对象obj的一个属性

            obj.age = 33; // age就是对象obj的一个属性

            console.log(obj);</script>

 

image.png

· 什么是属性节点?

o 在html中编写的所有标签,里面的属性都是属性节点

§ <span nj = '666'></span> // 这里的class和nj就是属性节点

 

image.png

· 如果操作属性?

o 添加或修改属性(没有就会添加,有就会修改)

§ 对象.属性名称 = 值;

§ 对象["属性名称"] = 值;

o 获取属性

§ 对象.属性名称

§ 对象["属性名称"]

· 如何操作属性节点?

o 获取属性节点

§ DOM对象.getAttribute("属性节点名称")

o 设置属性节点

§ DOM对象.setAttribute("属性节点名称", "值");

 

jQuery中的attr和prop方法

· attr(name|pro|key,val|fn)方法

o 用于设置或获取属性节点的值

<script>

        $(function () {

            // 1.获取指定属性节点值

            var $res = $(".span1").attr("nj");

            console.log($res);

            // 2.设置属性节点

            $(".span1").attr("nj", "666");

            $(".span2").attr("id", "box1 box2");

 

            // 3.注意点:

            // 3.1.获取属性节点时,只会获取找到所有元素中第一个元素的属性节点

            $res = $("span").attr("class");

            console.log($res);

             $("span").attr("class", "lnj");

        });</script>

· removeAttr(name)方法

o 用于删除指定属性节点

<script>

        $(function () {

            // 1.设置属性节点时,会给所有找到元素设置属性节点

            $("span").attr("test", "jonathan");

            // 2.删除属性节点时,会删除所有找到元素的属性节点

            $("span").removeAttr("test");

        });</script>

· prop(n|p|k,v|f)方法

o 用于设置或者获取元素的属性值

<script>

        $(function () {

            // 1.设置属性

            // 1.1.设置属性时,会设置所有找到元素的属性

            $("span").prop("demo", "lnj");

            // 2.获取属性

            // 2.1.获取属性时,只会获取找到第一个元素的属性

            console.log($("span").prop("demo"));

        });</script>

· removeProp(name)方法

<script>

        $(function () {

            // 删除所有找到元素的demo属性

            $("span").removeProp("demo");

        });</script>

· attr方法和prop方法区别

o 既然所有的DOM对象,都有一个attributes属性,而prop可以操作属性,所以也可以操作属性节点

o 官方推荐在操作属性节点时,具有 true 和 false 两个属性的属性节点,如 checked, selected 或者 disabled 使用prop(),其他的使用 attr()

o 因为如果具有 true 和 false 两个属性的属性节点,如果没有编写默认attr返回undefined,而prop返回false

<script>

        $(function () {

            // 1.可以通过prop获取属性节点

            console.log($("input").prop("class"));

            // 2.可以通过prop设置属性节点

            $("input").prop("class", "tag");

 

            // 3.如果没有默认值,那么attr获取返回undefined//            console.log($("input[type=checkbox]").attr("checked"));

            // 4.如果没有默认值,那么prop获取返回false

            console.log($("input[type=checkbox]").prop("checked"));

            // 5.通过attr设置选中//            $("input[type=checkbox]").attr("checked", true);

            

            // 6.通过prop设置选中

            $("input[type=checkbox]").prop("checked", true)

 

        });</script>

jQuery增删Class

· jQuery CSS类相关方法都是用于操作DOM对象的class属性节点的值

· addClass(class|fn)

o 给元素添加一个或多个类

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

    <meta charset="UTF-8">

    <title>08-jQueryCSS类</title>

    <style>

        .class1{

            width: 200px;

            height: 200px;

            background-color: red;

        }

        .class2{

            border: 5px solid #000;

        }

    </style>

    <script src="代码/js/jquery-1.12.4.js"></script>

    <script>

        $(function () {

           $("button").eq(0).click(function () {

               // 1.添加一个类//               $("div").addClass("class1");

               // 2.再添加一个类//               $("div").addClass("class2");

               // 3.一次性添加多个类(用空格隔开)

               $("div").addClass("class1 class2");

           });

        });

    </script></head><body><button>添加</button><button>删除</button><button>切换</button><div></div></body></html>

· removeClass([class|fn])

o 删除元素的一个或多个类

<script>

        $(function () {

            $("button").eq(1).click(function () {

                // 4.删除一个类//                $("div").removeClass("class2");

                // 5.再删除一个类//                $("div").removeClass("class1");

                // 6.一次性删除多个类(用空格隔开)

                $("div").removeClass("class1 class2");

 

            });

        });</script>

· toggleClass(class|fn[,sw])

o 添加或删除一个类(存在就删除不存在就添加)

<script>

        $(function () {

            $("button").eq(2).click(function () {

                // 7.切换一个类//                $("div").toggleClass("class2");

                // 8.切换多个类

                $("div").toggleClass("class1 class2");

            });

        });

    </script>

 

jQuery代码/文本/值

· html([val|fn])

o 添加或获取元素中的HTML

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

    <meta charset="UTF-8">

    <title>09-jQuery代码文本值</title>

    <script src="代码/js/jquery-1.12.4.js"></script>

    <script>

        $(function () {

            var $btns = $("button");

            var $div = $("div");

            $btns.eq(0).click(function () {

                // 1.添加html, 相当于innerHTML//                $div.html("<p>我是p标签</p>");//                $div.html("<p><span>我是span标签</span></p>");

                $div.html("我是文本");

            });

            $btns.eq(1).click(function () {

                // 2.获取html

                console.log($div.html());

            });

        });

    </script></head><body><button>添加html</button><button>获取html</button><button>添加文本</button><button>获取文本</button><div></div></body></html>

· text([val|fn])

o 添加或获取元素中的文本

o text方法能做的html方法都能做,所以一般使用html方法即可

<script>

        $(function () {

            $btns.eq(2).click(function () {

                // 3.添加文本, 相当于innerText

                // 如下内容不会被转换为标签//                $div.text('<p>我是段落</p>');

               $div.text('我是文本');

            });

            $btns.eq(3).click(function () {

                // 4.获取文本

                console.log($div.text());

            });</script>

· val([val|fn|arr])

o 添加或获取元素value属性的值

<script>

        $(function () {

            $btns.eq(4).click(function () {

                // 4.添加value值

                $("input").val("我是一个输入框");

            });

            $btns.eq(5).click(function () {

                // 4.获取value值

                console.log($("input").val());

            });

        });</script>

 

本文由职坐标整理发布,学习更多的jQuery相关知识,请关注职坐标WEB前端jQuery频道!

本文由 @沉沙 发布于职坐标。未经许可,禁止转载。
喜欢 | 0 不喜欢 | 0
看完这篇文章有何感觉?已经有0人表态,0%的人喜欢 快给朋友分享吧~
评论(0)
后参与评论

您输入的评论内容中包含违禁敏感词

我知道了

助您圆梦职场 匹配合适岗位
验证码手机号,获得海同独家IT培训资料
选择就业方向:
人工智能物联网
大数据开发/分析
人工智能Python
Java全栈开发
WEB前端+H5

请输入正确的手机号码

请输入正确的验证码

获取验证码

您今天的短信下发次数太多了,明天再试试吧!

提交

我们会在第一时间安排职业规划师联系您!

您也可以联系我们的职业规划师咨询:

小职老师的微信号:13167058313
小职老师的微信号:13167058313

版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
 沪公网安备 31011502005948号    ICP许可  沪B2-20190160

站长统计