jquery的属性和样式

1.attr 和prop

attr 设置或返回被选元素的属性值

attr(属性名) 获取属性

attr(属性名,属性值) 设置属性

$("span").attr("data-id","1002");//data-id="1001"

console.log($("span").attr("id")); //获取id

console.log($("span").attr("data-id")); //获取data-id

<span id="span" data-id="1001">姓名</span>

prop 获取在匹配的元素集中的第一个元素的属性值。

prop(属性名) 获取属性

prop(属性名,属性值) 设置属性

attr和prop的区别：

prop(属性名)，选中复选框为true，没选中为false

attr(属性名)，选中返回checked，否则返回undefined

var chk=$("#sex").prop("checked");
console.log(chk);  //返回true false
var chk2=$("#sex").attr("checked");
console.log(chk2);  //选中返回checked，否则返回undefined

<input type="checkbox" name="sex" id="sex">
<label for="sex">全选/全不选</label>

全选和全不选

//$(":checkbox").attr("checked",true); 全选中
//$(":checkbox").prop("checked",true); 全选中
$("#sex").change(function(){ //$("#sex")获取id为sex的input标签
       $(":checkbox").prop("checked",true);
       var chk1=$(this).prop("checked"); //获取当前checked属性true或false
       $(":checkbox").prop("checked",chk1); //让当前checked属性值来控制
       console.log(chk1);
});
$("#sex2").change(function(){
       //each(function(index,item){}对于每个匹配的元素所要执行的函数
  $(":checkbox:not([id])").each(function(index,item){  
       //index:选择器的 index 位置 从0开始;item:当前的选择器
       //console.log(item); 所有不包含id的所有类型为checkbox的标签
       var ck=$(item).prop("checked");
       $(item).prop("checked",!ck); //取相反的checked值
       //console.log(ck)； //获取checked的值

}) });

<form action="#">
   <span id="span" data-id="1001">姓名</span>
   <input type="text" name="name" id="">
   <br>
   <input type="checkbox" name="sex" id="sex">
   <label for="sex">全选/全不选</label>
   <input type="checkbox" name="sex" id="sex2">
   <label for="sex">反选</label>
</form>
<input type="checkbox" name="">
<input type="checkbox" name="">
<input type="checkbox" name="">

2.jquery的样式

$("div").css("color","red"); //设置div的颜色为红色

var width=$("div").width();
console.log(width);//获取div的宽度(width)
var width2=$("div").css("width");
console.log(width2);//获取div的宽度(width)
//两者一样

3.HTML代码/文本/值

没有参数时获取，带参数时设置
html 包含html（子元素）标签的的代码 div<span>span</span>
text 纯文本 divspan
val  交互控件（表单控件）的值 ""
在设置时，html会解析其中的标签，text不会解析，只是原样输出
var html=$("div").html();
var text=$("div").text();
var val=$("div").val();
console.log(html,text,val);

4.js扩展（优先级）

把优先级提到最高：
在style中样式的最后添加一个!important

#div{
    background-color: #777 !important;
}

<div id="div" style="background-color: red;">div标签</div>

5.split()和join()

split():切割成数组的形式支持正则表达式

join():将数组转换成字符串

jquery的属性和样式

推荐阅读