JQuery常用和骚操作

jezael-melgoza-0kIdrNdFJqs-unsplash

代替js字符拼接

1
2
3
4
$('<div/>',{
text: 'Div text',
class: 'className'
}).appendTo('#parentDiv');

设置radio选中用法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<input type="radio" name="sex" id="man_radio" value="1" />男
<input type="radio" name="sex" id="woman_radio" value="0" />女

// 通过 id 找到 radio 并将其选中男
$('#man_radio').attr(checked, true);

// 通过 name 找到 radio 并将其选中男
$("input[name=sex]:eq(0)").attr("checked",true);

// 通过 name 和 value 找到 radio 并将其选中男
$("input[name=sex][value=# ").attr("checked",true);

// 如果想取消选中的话、只需要把 true 改为 false
// 通过属性 checked 来判断
$("#man_radio").attr("checked","checked");//选中
$("#man_radio").removeAttr("checked");//不选中

// 获取选中的值
// 通过选中的 radio 来获取
$(input:radio:checked).val();

// 通过 type 来获取
$("input[type=radio]:checked").val();

// 通过 name 来获取
$("input[name=rd]:checked").val();

// 判断 radio 是否选中
// 这里我用一个循环来判断是否选中
$("input[name=sex]").attr("cheked")

// 参考[1]

获取checkbox的属性

jQuery中的attr()与prop()设置属性、获取属性的区别

获取checkbox的属性或者设置checkbox选中或不选中

1
2
3
4
5
6
7
8
9
10
11
12
13
$("#editForm").find("input[type='checkbox']").prop("checked"false);  
//设置选中,推荐写法

$("#editForm").find("input[type='checkbox']").prop("checked"true); 
//设置取消选中,推荐写法

// 区别
// attr() 获取的是初始状态的值,即使取消了选中,也不会改变。
// prop() 获取的值已经发生变化,是实时状态的值。

// 总结建议:
// 获取和设置disabled、selected、checked这些属性时,使用prop()方法
// 能够用prop()操作的尽量用prop()操作,不要用attr()操作。参考[2]

jQuery将模板转换成dom对象

1
2
3
// 使用jQuery将模板转换成dom对象 
// get(0)==>dom对象
var dom = $(html).get(0);

参考

  1. https://blog.51cto.com/caixia/1734341
  2. https://blog.csdn.net/chenchunlin526/article/details/77426796
  3. https://unsplash.com/photos/0kIdrNdFJqs