关于jQuery--属性操作

1.属性

<!--测试代码-->
<input type="text" value="1">
<input type="text" value="2">

(1) attr(name|pro|key,val|fn)

• 获取元素属性 $("input:text").attr("value");

• 设置元素属性值
  单个：$("input:text").attr("value","hello");
  多个：$("input:text").attr({ value:"你好", name:"12" });

• 设置自定义属性（会显示在页面）$("input:text").attr("data-time","ff");

• 回调函数

$("input:text").attr("value", function (index, oldvalue) {
            console.log(index, oldvalue);
          });

(2) removeAttr(name)
可以移除自带的属性，也可以移除自定义属性 ，且移除的是属性。
$("input:text").removeAttr("value");

$("input:text").removeAttr("data-time");

(3) prop(n|p|k,v|f)

• 获取元素属性 $("input:text").prop("value");

• 设置元素属性值
  单个：$("input:text").prop("value","hello");
  多个：$("input:text").prop({ value:"你好", name:"12" });

• 设置自定义属性（不显示 可以获取出来 类似data)
  $("input:text").prop("data-time",2);
$("input:text").data("data-time",2);

• 回调函数

$("input:text").prop("value", function (index, oldvalue) {
            console.log(index, oldvalue);
          });

(4) removeProp(name)
可以移除自带的属性，也可以移除自定义属性 ，且移除的是属性值，测试得到属性值变为underfined ，编译器里没有变化
$("input:text").removeProp("value");
$("input:text").removeProp("data-time");
测试方法：
console.log($("input").prop("data-time"));

2.CSS 类

(1) addClass(class|fn) 添加类
写法一：$("input").addClass("txt").addClass("num");//jQuery 隐式迭代 可以连点
写法二：$("input").addClass("txt num");

回调函数：

$("input").addClass(function(index,classname){
            console.log(index,classname);
        }); 

(2) removeClass([class|fn]) 移除类
精确移除：$("input").removeClass("txt");
全部移除：$("input").removeClass();

回调函数：

$("input").removeClass(function(index,classname){
            console.log(index,classname);
        }); 

(3) toggleClass(class|fn[,sw]) 切换类

$("input").toggleClass("a");//有了删没了加

回调函数：

$("input").toggleClass(function(index,classname){
            console.log(index,classname);
        }); 

3.HTML代码/文本/值

类似js里面的innerHTML，innerText ，value

<!--测试文本-->
<input type="text" value="1">
<P>你好</P>
<div><span>haha</span></div>

(1) html([val|fn])

• 获取：$("p").html();
• 设置：$("p").html("<i>hi</i>");（可以自动解析标签）

结果截图：

• 回调函数：

  $("p").html(function(index,old){
            console.log(index, old);
        });

(2) text([val|fn])

• 获取：$("div").text();
• 设置：$("p").html("<i>hi</i>");（不可以自动解析标签）

结果截图：

• 回调函数：

  $("div").text(function(index,old){
            console.log(index, old);
        });

(3) val([val|fn|arr])

• 获取：$("input").val();
• 设置：$("input").val("1");
• 回调函数：

 $("input").val(function(index,old){
            console.log(index, old);
        });