jQuery设置特殊属性

jQuery的属性

使用attr()方法读取或设置元素的属性,对于jQuery没有封装的属性(所有浏览器没有差异的属性)用attr进行操作

使用removeAttr删除属性。删除的属性在源代码中看不到,这是和清空属性的区别。attr(‘name‘,‘‘)

示例:操作属性

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <title>jQuery测试</title>
    <style type="text/css">
        .cls{
            background-color: fuchsia;
        }
    </style>
    <script type="text/javascript" src="js/jquery-1.12.3.js"></script>
    <script type="text/javascript">
        $(function () {
            $(‘#btnAdd‘).click(function(){
                $(‘#dv‘).attr(‘class‘,‘cls‘);
            });
            $(‘#btnClear‘).click(function(){
                $(‘#dv‘).attr(‘class‘,‘‘);//属性还有,值没了
            });
            $(‘#btnRemove‘).click(function(){
                $(‘#dv‘).removeAttr(‘class‘);//属性没有了。有属性就要占用内存。
            });
        });
    </script>
</head>
<body>
    <input type="button" id="btnAdd" value="添加样式"/>
    <input type="button" id="btnClear" value="清空样式"/>
    <input type="button" id="btnRemove" value="移除样式"/>
    <div id="dv" style="width:300px;height:50px;border: solid 1px red;"></div>
</body>
</html>

效果图

示例:全选不选反选

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <title>jQuery测试</title>
    <style type="text/css">
        .cls{
            background-color: fuchsia;
        }
    </style>
    <script type="text/javascript" src="js/jquery-1.12.3.js"></script>
    <script type="text/javascript">
        $(function () {
            $(‘#btnAll‘).click(function(){
                $(‘:checkbox‘).prop("checked",true);
            });
            $(‘#btnNone‘).click(function(){
                $(‘:checkbox‘).prop("checked",false);
            });
            $(‘#btnReverse‘).click(function(){
                $(‘:checkbox‘).each(function (k,v) {
                    $(v).prop("checked",!$(v).is(":checked"));
                });
            });
        });
    </script>
</head>
<body>
    <input type="button" id="btnAll" value="全选"/>
    <input type="button" id="btnNone" value="不选"/>
    <input type="button" id="btnReverse" value="反选"/>
    <input id="ch_swimming" type="checkbox"/><label for="ch_swimming">游泳</label>
    <input id="ch_basketball" type="checkbox"/><label for="ch_swimming">篮球</label>
    <input id="ch_football" type="checkbox"/><label for="ch_swimming">足球</label>
</body>
</html>

效果图

参考:

http://lsieun.blog.51cto.com/9210464/1836298

http://lsieun.blog.51cto.com/9210464/1790722

RadioButton操作

取得RadioButton的选中值,被选中的radio只有一个值,所以直接用val()

显示单选按钮中哪些内容被选中了,注意多个单选按钮不在同一组中

设置RadioButton的选中值

.attr(‘checked‘,true);

$(‘input[name=gender]‘).val(["女"]); 或 $(‘:radio[name=gender]‘).val(["女"]);

注意:val中参数的[]不能省略,val()的参数必须是一个数组

时间: 2024-10-05 05:31:32

jQuery设置特殊属性的相关文章

jquery设置href属性值

jquery设置href属性值:有时候往往要动态设置链接的href属性值,下面就简单介绍一下.方法十分的简单,直接上代码了: $('#link').attr('href','http://www.softwhy.com'); 更多相关内容可以参阅jQuery的attr()方法一章节 原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=8124 更多内容可以参阅:http://www.softwhy.com/jquery/

使用jQuery设置disabled属性与移除disabled属性

Readonly只针对input和textarea有效,而disabled对于所有的表单元素都有效,下面为大家介绍下使用jQuery设置disabled属性 表单中readOnly和disabled的区别: Readonly只针对input(text/ password)和textarea有效,而disabled对于所有的表单元素都有效,包括select,radio, checkbox, button等. 但是表单元素在使用了disabled后,当我们将表单以POST或GET的方式提交的话,这个

JQuery设置input属性(disabled、enabled)

document.getElementById("removeButton").disabled = false; //普通Js写法 $("#removeButton").removeAttr("disabled");// Enable,JQuery写法 $("#removeButton").attr("disabled","disabled");// disabled JQuery设置

jQuery设置disabled属性

先比较下readOnly和disabled: readOnly 只针对input(text/ password)和textarea有效: disabled 对于所有的表单元素都有效,包括select,radio, checkbox, button等. 但是表单元素在使用了disabled后,当我们将表单以POST或GET的方式提交的话,这个元素的值不会被传递出去,而readonly会将该值传递出去(这种情况出现在我们将某个表单中的textarea元素设置为disabled或readonly,但是

jQuery 设置内容和属性

设置内容 - text().html() 以及 val() 我们将使用前一章中的三个相同的方法来设置内容: text() - 设置或返回所选元素的文本内容 html() - 设置或返回所选元素的内容(包括 HTML 标记) val() - 设置或返回表单字段的值 下面的例子演示如何通过 text().html() 以及 val() 方法来设置内容: 实例 $("#btn1").click(function(){  $("#test1").text("Hel

jquery设置和获取元素的属性

jquery设置和获取元素的属性: 使用jquery可以方便的设置指定元素的属性,下面就以div元素为例子做一下简单介绍. 代码实例如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.51texiao.cn/" /> <title>蚂蚁

[ jquery 方法 removeAttr(name) | removeProp(name) ] 此方法用来删除对应的由.attr() | .prop()方法设置的属性集

用来删除由.attr() | .prop()方法设置的属性集: 随着一些内置属性的DOM元素或window对象,如果试图将删除该属性,浏览器可能会产生错误.jQuery第一次分配undefined值的属性,而忽略了浏览器生成的任何错误 实例: <!DOCTYPE html> <html lang='zh-cn'> <head> <title>Insert you title</title> <meta http-equiv='descrip

jQuery - 设置获取内容和属性

获取选中select :$("#id option:selected").val(); 自定义radio:    $("input[name=sex][value="+data.sex+"]").attr("checked",true); 获取radio:           $("input[name='sex']:checked").val() 设置input不能编辑:$("#cashNum&

jquery中的属性和样式设置

添加属性 $target.attr({"title":"one piece","name":"solgan"}); 为目标元素添加title和name属性 添加之前: <div class="second"> <p>我是路飞,要成为海贼王的男人.</p> </div> 添加之后: <div class="second"> <