jQuery
$("#1")
[div#1, context: document, selector: "#1"]
$("#1")[0]
<div id="i1">aaaaaaa</div>
注:[0]索引等于是把jquery对象转换成dom对象
d = document.getElementById("1")
<div id="1">123</div>
$(d)
[div#1, context: div#1]
注:$(d)将dom对象转换成jQuery对象
选择器:
1.id $(‘#xx’)
2.class $(‘.xx’)
3.标签 $(‘a’) 寻找所有的a标签
4.同时寻找a标签以及class c1 $(‘a,.c1’),也叫组合选择器
<div id="i10" class="c1">
<div>
<a>3</a>
</div>
<a>1</a>
<a>2</a>
<a>44</a>
</div>
$('#i10 a')
(3) [a, a, a, prevObject: jQuery.fn.init(1), context: document, selector: "#i10 a"]
$('#i10>a')
(3) [a, a, a, prevObject: jQuery.fn.init(1), context: document, selector: "#i10>a"]
$('#i10>a:first') # 输出第一个儿子,也就是1,last则是最后一个儿子
注:寻找c1样式表对应div标签下的所有a标签(子子孙孙),>号就是只找儿子,不找孙子44
$('#i10 a:eq(0)')
[a, prevObject: jQuery.fn.init(1), context: document, selector: "#i10 a:eq(0)"]0: acontext: documentlength: 1prevObject: [document, context: document]selector: "#i10 a:eq(0)"__proto__: Object(0)
$('#i10 a:eq(1)')
[a, prevObject: jQuery.fn.init(1), context: document, selector: "#i10 a:eq(1)"]
注:eq循环,加入索引取对应的值,也就是第一个匹配元素以及第二个匹配元素
$("#i10>a")
[a, prevObject: jQuery.fn.init(1), context: document, selector: "#i10>a"]
注:只找儿子,不继续往下找
$("#i10>a:last")
$("#i10>a:first")
$("#i10>a:eq(0)")
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="i10" class="c1">
<div>
<a>3</a>
</div>
<a>1</a>
<a>2</a>
<a>44</a>
<a alex="123">alex</a>
</div>
<script src="jquery-1.12.4.js">
</script>
</body>
</html>
$('[alex]')
[a, prevObject: jQuery.fn.init(1), context: document, selector: "[alex]"]
注:根据属性查找标签,如果是 ‘[alex=123]’ 那么只输出具有alex属性并且值是123的标签
<input type="text" disabled>
$(':disabled') # 寻找属性为disabled的input输入框
注:disabled的意思是不可编辑
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="button" value="全选" onclick="checkALL()">
<input type="button" value="反选" onclick="reverseALL()">
<input type="button" value="取消" onclick="cancelALL()">
<table border="1">
<!--表头-->
<thead>
<!--tr行-->
<tr>
<!--th列-->
<th>选项</th>
<th>IP</th>
<th>port</th>
</tr>
</thead>
<!--表内容-->
<tbody id="tb">
<tr>
<td><input type="checkbox"></td>
<td>1.1.1.1</td>
<td>80</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>1.1.1.1</td>
<td>80</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>1.1.1.1</td>
<td>80</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>1.1.1.1</td>
<td>80</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>1.1.1.1</td>
<td>80</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>1.1.1.1</td>
<td>80</td>
</tr>
</tbody>
</table>
<script src="jquery-1.12.4.js"></script>
<script>
function checkALL() {
$("#tb :checkbox").prop('checked', true);
}
function cancelALL() {
$("#tb :checkbox").prop('checked', false);
}
function reverseALL() {
$("#tb :checkbox").each(function () {
// if($(this).prop('checked')){
// $(this).prop('checked',false)
// }
// else{
// $(this).prop('checked',true)
// }
// 使用三元运算实现
var v = $(this).prop('checked') ? false : true;
$(this).prop('checked', v)
})
}
</script>
</body>
</html>
注:prop的作用是获取在匹配的元素集中的第一个元素的属性值;在这也就是设置全部元素(输入框)的属性,然后按照设置的属性设置成设置的值,each就是自动执行for循环(循环每个匹配到的元素)!
jQuery("#i1").text()
"asfasfsdfasfasfa"
jQuery("#i1").html()
"asfasf<a>sdfasfasfa</a>"
jQuery("#i1").text()
"asfasfsdfasfasfa"
jQuery("#i1").text("123123")
[div#i1, context: document, selector: "#i1"]
jQuery("#i1").text("123123").text()
"123123"
注:DOM不加参数获取文本内容,加参数设置文本内容
jQuery("#i2").val()
"1231231"
jQuery("#i2").val("bvbvvv")
[input#i2, context: document, selector: "#i2"]
jQuery("#i2").val("bvbvvv").val()
"bvbvvv"
注:jquery用法
$('#i1')[0]
<input id="i1" type="button" value="开关">
$('#i1').attr("id")
"i1"
$('#i1').attr("type")
"button"
$('#i1').attr("value")
"开关"
$('#i1').attr("name",'charlie')
[input#i1, context: document, selector: "#i1"]
$('#i1')[0]
<input id="i1" type="button" value="开关" name="charlie">
$('#i1').removeAttr("name")
[input#i1, context: document, selector: "#i1"]
$('#i1')[0]
<input id="i1" type="button" value="开关">
$("#i2").prop("checked",true)
[input#i2, context: document, selector: "#i2"]
$("#i2").prop("checked",false)
[input#i2, context: document, selector: "#i2"]