day16-jQuery样式以及属性操作

最新推荐文章于 2024-08-20 16:48:16 发布

weixin_34311757

最新推荐文章于 2024-08-20 16:48:16 发布

阅读量59

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/zhangqigao/articles/8386121.html

版权

一、前言

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

二、jquery的样式

操作的html：

<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()

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

$('#i1').click(function(){
    if($('.c1').hasClass("hide")){
        $('.c1').removeClass("hide");
    }else {
        $('.c1').addClass("hide");
    }

2.2、toggleClass()

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

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

三、属性操作

3.1、attr

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

>>>$("#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')

说明：删除某个属性

>>>$("#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。

>>>$("#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。

转载于:https://www.cnblogs.com/zhangqigao/articles/8386121.html

weixin_34311757

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
day16-jQuery样式以及属性操作

一、前言　　之前我们就研究过jquery的样式，今天我们来复习一下，并且研究一下属性的操作。二、jquery的样式操作的html：<head> <meta charset="UTF-8"> <title>Title</title> <style> .hide{ ...
复制链接

扫一扫