day16-Jquery样式及属性操作

一、前言

 　　之前我们就研究过jquery的样式，今天我们来复习一下，并且研究一下属性的操作。

二、jquery的样式

操作的html：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .hide{
            display: none;
        }
    </style>
</head>
<body>
    <input id="i2" type="checkbox"/>
    <input id="i1" type="button" value="开关"/>
    <div class="c1 hide">dwqbdwlqldq</div>
    <script src="jquery-1.12.4.js"></script>
    <script>
            //js代码
    </script>
</body>

2.1、addClass()和removeClass()

说明：添加样式和删除样式

1
2
3
4
5
6
$('#i1').click(function(){
    if($('.c1').hasClass("hide")){
        $('.c1').removeClass("hide");
    }else {
        $('.c1').addClass("hide");
    }

2.2、toggleClass()

说明：存在样式的话，我就给你去掉，不存在的话，我给你加上此样式。效果跟上面的一样的。

1
2
3
$('#i1').click(function(){
    $(".c1").toggleClass("hide");
        })

三、 属性操作

3.1、attr

说明：专门用于作自定义的属性

1
2
3
4
5
6
7
8
9
10
>>>$("#i1").attr("value") //获取属性value的值
"开关"
>>>$("#i1").attr("name","zhangqigao") //创建属相name，并赋值zhangqigao
jQuery.fn.init [input#i1]
>>>$("#i1")[0]
<input id=​"i1" type=​"button" value=​"开关" name=​"zhangqigao">​
>>>$("#i1").attr("name","sgg") //给属性name 重新赋值sgg
jQuery.fn.init [input#i1]
>>>$("#i1")[0]
<input id=​"i1" type=​"button" value=​"开关" name=​"sgg">​

3.2、removeAttr('n')

说明：删除某个属性

1
2
3
4
5
6
>>>$("#i1")[0]
<input id=​"i1" type=​"button" value=​"开关" name=​"sgg">​
>>>$("#i1").removeAttr('name');  //删除name属性
jQuery.fn.init [input#i1]
>>>$("#i1")[0]
<input id=​"i1" type=​"button" value=​"开关">​

3.3、prop

说明：专门用于checkbox，radio。

1
2
3
4
>>>$("#i2").prop("checked",true);
jQuery.fn.init [input#i2]
>>>$("#i2").prop("checked",false);
jQuery.fn.init [input#i2]

这边注意了，像 checkbox，radio。这一类的就不要用attr了，只用prop了，因为prop是针对这个的，因为attr这个在jquery3的版本下面有bug

posted @ 2018-05-23 16:02  东郭仔  阅读(101)  评论(0)    收藏  举报