jQuery
参考网址
模块 《=》类库
DOM/BOM/JavaScript的类库
转换：
jquery对象[0] ??=> Dom对象
Dom对象 ????????=> $(Dom对象)
一、查找元素
DOM：
有十个左右
1、找到标签
获取单个元素 document.getElementById(‘i1‘)
获取多个元素（列表）document.getElementsByTagName(‘div‘)
获取多个元素（列表）document.getElementsByClassName(‘c1‘)
a. 直接找
document.getElementById 根据ID获取一个标签
document.getElementsByName 根据name属性获取标签集合
document.getElementsByClassName 根据class属性获取标签集合
document.getElementsByTagName 根据标签名获取标签集合
b. 间接
tag = document.getElementById(‘i1‘)
parentElement // 父节点标签元素
children // 所有子标签
firstElementChild // 第一个子标签元素
lastElementChild // 最后一个子标签元素
nextElementtSibling // 下一个兄弟标签元素
previousElementSibling // 上一个兄弟标签元素
jQuery：
选择器，直接找到某个或者某类标签
1. id
$(‘#id‘)
2. class
<div class=‘c1‘></div>
$(".c1")
3. 标签
<div id=‘i10‘ class=‘c1‘>
<a>f</a>
<a>f</a>
</div>
<div class=‘c1‘>
<a>f</a>
</div>
<div class=‘c1‘>
<div class=‘c2‘> </div>
</div>
$(‘a‘)
4. 组合a
<div id=‘i10‘ class=‘c1‘>
<a>f</a>
<a>f</a>
</div>
<div class=‘c1‘>
<a>f</a>
</div>
<div class=‘c1‘>
<div class=‘c2‘> </div>
</div>
$(‘a‘)
$(‘.c2‘)
$(‘a,.c2,#i10‘)
5. 层级
$(‘#i10 a‘) 找到#i10 下面的子子孙孙
$(‘#i10>a‘) 找到#i10 下面的儿子
6. 基本
:first $(‘#id>a:first‘) 找到#id下面的第一个a标签
:last $(‘#id>a:last‘) 找到#id下面的最后一个a标签
:eq() $(‘#id a:eq(0)‘) 根据a的索引找到第几个a标签 （从0开始）
7. 属性
$(‘[alex]‘) ??????具有alex属性的所有标签
$(‘[alex="123"]‘) alex属性等于123的标签
<input type=‘text‘/>
<input type=‘text‘/>
<input type=‘file‘/>
<input type=‘password‘/>
$("input[type=‘text‘]")
$(‘:text‘)
实例：
多选，反选，全选
<!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="cancleAll();"/> ???<table border="1"> ???????<thead> ???????????<tr> ???????????????<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> ???????</tbody> ???</table> ???<script src="jquery-1.12.4.js"></script> ???<script> ???????function checkAll() { ???????????$(‘#tb :checkbox‘).prop(‘checked‘,true); ???????} ???????function cancleAll() { ???????????$(‘#tb :checkbox‘).prop(‘checked‘,false); ???????} ???????function reverseAll() { ???????????$(‘:checkbox‘).each(function(k){ ???????????????// this,代指当前循环的每一个元素 ???????????????// Dom ???????????????/* ???????????????if(this.checked){ ???????????????????this.checked = false; ???????????????}else{ ???????????????????this.checked = true; ???????????????} ???????????????*/ ???????????????/* ???????????????if($(this).prop(‘checked‘)){ ???????????????????$(this).prop(‘checked‘, false); ???????????????}else{ ???????????????????$(this).prop(‘checked‘, true); ???????????????} ???????????????*/ ?????????????// 三元运算var v = 条件? 真值：假值 ???????????????var v = $(this).prop(‘checked‘)?false:true; ???????????????$(this).prop(‘checked‘,v); ???????????}) ???????} ???</script></body></html>
- 选择权
-
$(‘#tb:checkbox‘).prop(‘checked‘); ???????获取值
$(‘#tb:checkbox‘).prop(‘checked‘, true); ?设置值
-
jQuery方法内置循环： $(‘#tb:checkbox‘).xxxx
- $(‘#tb:checkbox‘).each(function(k){
// k当前索引
// this，DOM，当前循环的元素 $(this)
})
- var v = 条件 ? 真值 : 假值
jQuery
原文地址：https://www.cnblogs.com/King-of-Knight/p/9180517.html