jQuery选择器
2017-12-17 本文已影响0人
xin激流勇进
Microsoft CDN:
<head>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js">
</script>
</head>
提示：使用谷歌或微软的 jQuery，有一个很大的优势：
许多用户在访问其他站点时，已经从谷歌或微软加载过 jQuery。所有结果是，当他们访问您的站点时，会从缓存中加载 jQuery，这样可以减少加载时间。同时，大多数 CDN 都可以确保当用户向其请求文件时，会从离用户最近的服务器上返回响应，这样也可以提高加载速度。
jQuery<--->DOM对象
jquery对象[0] => Dom对象
Dom对象 => $(Dom对象)
直接找到某个或者某类标签（jQurey选择器）
1.id
$('#id')
2.class
<div class='c1'></div>
$('.cl')
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.组合
<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>a') 儿子
6.基本
:first
:last
:eq()
$('a:first')
7.属性
$('[alex]')
$('[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>
<button onclick="chooseAll();">全选</button>
<button onclick="reverseAll();">反选</button>
<button onclick="cancelAll();">取消</button>
<table border="1">
<thead>
<tr>
<th>选择</th>
<th>IP</th>
<th>Port</th>
</tr>
</thead>
<tbody>
<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 chooseAll() {
$('table :checkbox').prop('checked',true);
}
function cancelAll() {
$('table :checkbox').prop('checked',false);
}
function reverseAll() {
$('table :checkbox').each(function () {
// dom操作
// if(this.checked){
// this.checked = false;
// }else{
// this.checked = true;
// }
// jQuery对象操作
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>
jQurey筛选器
$('#i1').next()
$('#i1').nextAll()
$('#i1').nextUntil('#ii1')
$('#i1').prev()
$('#i1').prevAll()
$('#i1').prevUntil('#ii1')
$('#i1').parent()
$('#i1').parents()
$('#i1').parentsUntil()
$('#i1').children()
$('#i1').siblings()
$('#i1').find()
$('li:eq(1)')
$('li').eq(1)
first()
last()
hasClass(class)
实例 下拉菜单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#menu{
width: 100px;
height: 500px;
border: solid 1px bisque;
overflow: auto;
}
.item .header{
background-color: blue;
}
.hide{
display: none;
}
</style>
</head>
<body>
<div id="menu" style="text-align: center">
<div class="item">
<div class="header">菜单1</div>
<div class="content">
<div>内容1</div>
<div>内容2</div>
<div>内容3</div>
</div>
</div>
<div class="item">
<div class="header">菜单2</div>
<div class="content hide">
<div>内容1</div>
<div>内容2</div>
<div>内容3</div>
</div>
</div>
<div class="item">
<div class="header">菜单3</div>
<div class="content hide">
<div>内容1</div>
<div>内容2</div>
<div>内容3</div>
</div>
</div>
</div>
<script src="jquery-1.12.4.js"></script>
<script>
$('.header').click(function () {
// $(this).next().removeClass('hide');
// $(this).parent().siblings().find('.content').addClass('hide');
$(this).next().removeClass('hide').parent().siblings().find('.content').addClass('hide')
})
</script>
</body>
</html>
