jQuery 文档操作

Posted 2020-12-06 竹石2020

属性操作

 1 attr(attrName)// 返回第一个匹配元素的属性值
 2 attr(attrName, attrValue)// 为所有匹配元素设置一个属性值
 3 attr({k1: v1, k2:v2})// 为所有匹配元素设置多个属性值
 4 removeAttr(attrName)// 从每一个匹配的元素中删除一个属性
 5 
 6 示例:
 7     设置单个属性
 8         $(‘.c1‘).attr(‘xx‘,‘oo‘);
 9     设置多个属性
10         $(‘.c1‘).attr({‘age‘:‘18‘,‘sex‘:‘alex‘});
11     查看属性
12         $(‘.c1‘).attr(‘属性名‘);
13         $(‘.c1‘).attr(‘xx‘);
14     删除属性
15         $(‘.c1‘).removeAttr(‘xx‘);
16 
17 prop -- 针对的是checkedselecteddisabled..
18 
19 查看标签是否有checked属性,也就是是否被选中
20         attr $(‘:checked‘).attr(‘checked‘); //checked -- undefined
21         prop $(‘:checked‘).prop(‘checked‘); //true  -- false
22         
23         通过设置属性的方式来设置是否选中:
24             $(‘:radio‘).eq(2).prop(‘checked‘,true);  true和false不能加引号
25             $(‘:radio‘).eq(2).prop(‘checked‘,false);
26 
27 简单总结:
28     1.对于标签上有的能看到的属性和自定义属性都用attr
29     2.对于返回布尔值的比如checkbox、radio和option的是否被选中或者设置其被选中与取消选中都用prop。
30     具有 true 和 false 两个属性的属性，如 checked, selected 或者 disabled 使用prop()，其他的使用 attr()

文档处理

 1 添加到指定元素内部的后面
 2     $(A).append(B)// 把B追加到A
 3     $(A).appendTo(B)// 把A追加到B
 4     #添加字符串照样能识别标签  *****
 5     $(‘#d1‘).append(‘<a href="http://www.jd.com">京东</a>‘);
 6 添加到指定元素内部的前面
 7     $(A).prepend(B)// 把B前置到A
 8     $(A).prependTo(B)// 把A前置到B
 9     示例
10         $(‘a‘).prependTo($(‘div‘));
11 
12 添加到指定元素外部的后面
13     $(A).after(B)// 把B放到A的后面
14     $(A).insertAfter(B)// 把A放到B的后面
15 
16 添加到指定元素外部的前面
17     $(A).before(B)// 把B放到A的前面
18     $(A).insertBefore(B)// 把A放到B的前面
19     
20 移除和清空元素
21     remove()// 从DOM中删除所有匹配的元素。
22     empty()// 删除匹配的元素集合中所有的子节点，包括文本被全部删除，但是匹配的元素还
23     $(‘div‘).remove();
24     $(‘div‘).empty();
25 
26 替换
27     replaceWith()
28     replaceAll()
29     示例:
30         var a = document.createElement(‘a‘)
31         a.href = ‘http://www.baidu.com‘;
32         a.innerText = ‘xxx‘;
33         
34         $(‘span‘).replaceWith(a);
35         $(a).replaceAll(‘span‘);
36         
37 clone()克隆
38     <button class="btn">屠龙宝刀,点击就送!</button>    
39 
40     $(‘.btn‘).click(function () {
41         // var a = $(this).clone(); //克隆标签
42         var a = $(this).clone(true);  //连带事件一起克隆
43         $(this).after(a);
44 
45     })