四、jQuery属性和CSS - 《jQuery 学习笔记》

一、属性操作
二、CSS操作
- 2-1 CSS样式操作
- 2-2 Class类操作

一、属性操作

1-1 attr操作

设置单个属性

// 第一个参数：需要设置的属性名
// 第二个参数：对应的属性值
$obj.attr(name, value);
// 用法举例
$('img').attr('title','哎哟，不错哦');
$('img').attr('alt','哎哟，不错哦');

设置多个属性

// 参数是一个对象，包含了需要设置的属性名和属性值
$obj.attr(obj)
// 用法举例
$('img').attr({
  title:'哎哟，不错哦',
  alt:'哎哟，不错哦',
  style:'opacity:.5'
});

获取属性

// 传需要获取的属性名称，返回对应的属性值
$obj.attr(name)
// 用法举例
var oTitle = $('img').attr('title');
alert(oTitle);

移除属性

// 参数：需要移除的属性名，
$obj.removeAttr(name);
// 用法举例
$('img').removeAttr('title');

1-2 prop操作

在jQuery1.6之后，对于checked、selected、disabled这类boolean类型的属性来说，不能用attr方法，只能用prop方法。
```
// 设置属性
$(':checked').prop('checked',true);
// 获取属性
$(':checked').prop('checked');// 返回true或者false
```

<input id="chk1" type="checkbox" />是否可见
<input id="chk2" type="checkbox" checked="checked" />是否可见
$("#chk1").prop("checked") == false
$("#chk2").prop("checked") == true
$("#chk1").attr("checked") == undefined
$("#chk2").attr("checked") == "checked"

示例：

全选全不选

<input type="button" value="全选" id="btnAll"/>
<input type="button" value="全不选" id="btnNoAll"/>
<div id="dv">
    <input type="checkbox" value="1"/>吃饭
    <input type="checkbox" value="2"/>睡觉
    <input type="checkbox" value="3"/>打豆豆
    <input type="checkbox" value="4"/>打篮球
    <input type="checkbox" value="5"/>打足球
    <input type="checkbox" value="6"/>打铅球
    <input type="checkbox" value="7"/>打桌球
</div>
<script>
    //两个按钮:1按钮全选,2全不选
    $(function () {
        //获取第一个按钮,点击---全选
        $("#btnAll").click(function () {
            $("#dv :checkbox").prop("checked",true);
        });
        //获取第二个按钮,点击---全不选
        $("#btnNoAll").click(function () {
            $("#dv :checkbox").prop("checked",false);
        });
    });
</script>

1-3 val()/text/()html()

$obj.val()        获取或者设置表单元素的value属性的值
$obj.html()     对应innerHTML
$obj.text()        对应innerText/textContent，处理了浏览器的兼容性。注意点：如果获取jquery对象text属性的时候jquery对象是一个数组，那么此时会把数组中所有元素的文本都获取到
                <  &lt;    &  &amp;    >  &lt;      &nbsp;

//使用未满18岁文本测试text  html
alert($("div").text());     //获取文本值，将标签过滤
alert($("div").html());     //获取网页内容，包含html标签
$("div").text("<a>你好啊</a>");   
$("div").html("<a>你好啊</a>");   //解析<a>标签

二、CSS操作

2-1 CSS样式操作

//<xxx style="key:value; key:value; ">
css(name)                  获得指定名称的css值
css(name ,value)     设置一对值
css(prop)                 设置一组值

功能：设置或者修改样式，操作的是style属性。

操作单个样式

//给未满18岁添加样式
$("div").css("border","1px solid red");

设置多个样式

//给未满18岁添加样式
$("div").css({
  "width":"300px",
  "height":"50px",
  "font-size":"60px",
  "color":"blue"
});

获取样式

// 案例
$('div').css('background-color');
注意点:
//1. 设置样式操作的时候，如果是多个元素，那么给所有的元素设置相同的值
//2. 获取样式操作的时候，如果是多个元素，那么只会返回第一个元素的值。

2-2 Class类操作

<xxx class="a">
addClass("my")     追加一个类
removeClass("my")  将指定类移除
toggleClass("my")  如果有my将移除，如果没有将添加。
hasClass("my")     用于判断是否含有指定样式，返回值为true false
// 例子，判断第一个div是否有one的样式类
$('div').hasClass('one');

$("button[type='button']").click(function(){
    $("[name='username']").toggleClass("textClass");
});