时间戳

首页 > 技术文章 > jQuery属性操作

jQuery属性操作

yaya625202 2018-06-19 14:08 原文

编辑本博客

  • HTML属性操作：对HTML文档的属性进行读取，设置和移除操作。如attr(),removeAttr()
  • DOM属性操作：对DOM元素的属性进行读取，设置和移除操作。如prop(),removeProp()
  • 类样式操作：对DOM属性className进行添加，移除操作。如addClass(),removeClass(),toggleClass()
  • 值操作：对DOM属性value进行读取和设置操作。如html(),text(),val()

HTML属性操作

attr()有一个参数，表示获取值

<script type="text/javascript">
    $(function () {
        //jQuery的属性操作，html属性操作attr()
        $("button").click(function () {
            $("#box p").text($("#box").attr("id"))
        })
    })
</script>
View Code

attr()有两个参数，表示设置值

<script type="text/javascript">
    $(function () {
        $("button").click(function () {
            $("#box p").attr("class","foo");
        })

    })
</script>
View Code

设置多个值，通过对象方式。如果同时设置多个类名，不能用attr()

<script type="text/javascript">
    $(function () {
        //jQuery的属性操作，html属性操作attr()
        $("button").click(function () {
        //同时设置多个值，用对象方式
        $("button").click(function () {
            $("#box p").attr({"class":"foo","name":"luffy"});
        })

    })
</script>
View Code

removeAtt()删除一个属性

DOM属性操作

对dom对象操作，在html上体现不出来

<script type="text/javascript">
    $(function () {
        //获取的是第一个元素的class
        console.log($("li").prop("class"));
        //设置一个值
        $('li').first().prop("name","app")
        //设置多个值
        $('li').first().prop({"name":"app","name2":"app2","name3":"app3"})
        //删除DOM对象的属性
        $('li').first().removeProp("name2")
    })
</script>
View Code

多个删除直接用空格分开“name1 name2”

类样式操作

给标签添加或移除多个类

addClass()

removeClass()

开关案例

<script type="text/javascript">
    $(function () {
        //添加类属性
        $("span").addClass('span1 span2');
        //移除类属性
        $("span").removeClass('span3');
        //动态添加和删除属性，达到开关效果
        var isBig=true;
        $("span").click(function () {
            if(isBig){
                $(this).addClass("active");
                isBig=false;
            }else {
                $(this).removeClass("active");
                isBig=true;
            }
        })
    })
</script>
View Code

值操作

text(),html(),val()

text()：拿到标签内所有的文本值，包含内嵌标签的字符串。设置值的时候会将里面所有的内容进行替换，包括html元素都将替换掉。如果内容是html标签元素，将不会进行渲染

html()：获取所有的内容，包含文本和html元素。将html元素渲染到现有的html元素中去

vl()：获取或设置input元素的value值

<script type="text/javascript">
    $(function () {
        //值操作
        console.log($("#box2").text());
        //替换掉所有的内容
        $("#box2").text("嘿嘿嘿");
        console.log($("#box2").html());
        //获取值
        $("input").val();
        //设置值
        $("input").val("娃哈哈");
    })
</script>
View Code

监听input值的变化（非实时监听）

<script type="text/javascript">
    $(function () {
        //监听input标签的值
        $("input").change(function () {
            console.log($("input").val())
        })
    })
</script>
View Code

表单控件操作

根据元素类型获取对应元素

<script type="text/javascript">
    $(document).ready(function () {
        //:类型，根据input类型获取元素
        $(":radio");
        $(":checkbox");
        $(":button");
        $(":text");
        $(":submit");
        $(":disabled");
    })
</script>
View Code

获取单选框中的值

//先通过属性选择器选择，再通过类选择器进行过滤。获取单选框中的value值
$("input[type=radio]:checked").val();

获取被选中的多选框的值，注：只获取到了第一个的值

//获取被选中的多选框的值，仅仅获取的第一个值
$("input[type=checkbox]:checked").val()

获取下拉列表被选中的值，option为后代选择器，selected属性

//下拉列表被选中的值,option为后代选择器，再通过selected属性过滤被选中的标签:
$("#timespan option:selected").val()

设置表单控件值

单选按钮的值，即根据value值进行选中操作

//设置单选按钮的值，即将单选按钮给选中
$("input[type=radio]").val(["12"])

设置复选框的值

//根据复选框的val选中对应复选框
$("input[type=checkbox]").val(["a","c"])

下拉列表选择，不能设置多个

//设置下拉列表，必须用select。不能设置多个
 $("selecte").val(["3"])

文本框设置

//文本框设置
$("input[type=text]").val("新的值")

推荐阅读