1.在html中引入css和jQuery
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css文件"> #引入css文件
</head>
<body>
<script src="jquery-1.12.4.js"></script>#引入jQuery文件，src为路径
</body>
</html>
2.jQuery对象与DOM对象互相转化
将jQuery转化为DOM： $("#i1")[0] = dom
将DOM转化为jQuery： $(dom) = jQuery
$(dom)=jquery
【$(‘<div id=‘i1‘>123</div>‘) = [div#i1]或
d=‘<div id=‘i1‘>123</div>‘
$(d) = [div#i1]】
3.jQuery查找元素，选择器
- id
<div id=‘i1‘>ww</div>
$(‘#i1‘)
- class
<div class=‘c1‘>123</div>
$(‘.c1‘)
- 标签
<div class=‘c1‘>
<a>f</a>
<a>f</a>
</div>
$(‘a‘)找到所有的a标签
- 多选择器组合查找
$(‘#i1,.c1,a‘)
- 层级选择器
$(‘#i1 a‘) 找div id=‘i1’内的所有a标签，包括子子孙孙
$(‘#i1 > a‘) 只找div id=‘i1‘内的所有子a标签，不包括孙a标签，所谓的孙a标签就是子div下的a标签
$(‘#i1 + a‘) 找div i1的下一个a标签，此a标签跟i1是同一级的
$(‘#i1 ~ a‘) 找div i1下边的所有兄弟标签，i1上边的就不找，此a标签跟i1是同一级的
$(‘#i1 a:first‘) 找div id=‘i1‘内的第一个a标签 【还有last找最后一个】
$(‘#i1 a:eq(0)‘) 找div id=‘i1‘内的所有a标签的第0个a标签【eq是等于的意思，0是索引，还有lt小于，gt大于 】
$(‘#i1‘).text() 获取div id=‘i1‘内的内容
$(‘#i1‘).next() 找div id=‘i1‘的下一个兄弟标签
$(‘#i1‘).prev() 找div id=‘i1‘的上一个兄弟标签
$(‘#i1‘).parent() 找div id=‘i1‘的父标签
$(‘#i1‘).children() 找div id=‘i1‘的所有孩子标签
$(‘#i1‘).siblings() 找div id = ‘i1‘的所有兄弟标签
$(‘#i1‘).find(‘.c1‘) 找div id=‘i1‘内的所有class为‘c1’的标签
$(‘#i1‘).addClass(‘.c1‘) 找到div id=‘i1‘并给该div添加class ‘.c1‘
$(‘#i1‘).removeClass(‘.c1‘) 找到div id=‘i1‘并给该div去掉class ‘.c1‘
- 属性选择器
$(‘[alex]‘) 找所有属性为alex的标签。【<a alex=‘123‘></a> <p alex=‘456‘></p>,会找到这两个属性为alex的a、p标签】
$(‘[alex="123"]‘) 找属性为alex="123"的标签，注意引号的不同
$(‘:disabled‘) 找到所有不可编辑的标签【<input type=‘text‘ disabled />,disabled表示该输入框不可输入内容，enabled表示可以输入内容】
4.实现全选反选取消框
$(‘#tb:checkbox‘).prop(‘checked‘); 获取值
$(‘#tb:checkbox‘).prop(‘checked‘, true); 设置值
-
jQuery方法内置循环：
- $(‘#tb:checkbox‘).each(function(){
// this，在DOM中指代当前循环的元素
})
- var v = 条件 ? 真值 : 假值
<!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="cancle()" />
<table border="1">
<thead>
<tr>
<th>选项</th>
<th>选项</th>
<th>选项</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>2.2.2.2</td>
<td>80</td>
</tr>
</tbody>
</table>
<script src="jquery-1.12.4.js"></script>
<script>
function checkAll() {
$(‘#tb :checkbox‘).prop(‘checked‘,true);
}
</script>
<script>
function reverseAll() {
$(‘#tb :checkbox‘).each(function () {
//each()函数会循环遍历jQuery找到的所有标签，并给这些标签执行某函数
//this指代当前正在循环的标签（是DOM对象）
/* dom实现方式
if(this.checked){ //表示如果this.checked为true，不要写成this.checked = true
this.checked = false;
}else {
this.checked = true;
}
*/
/*jQuery实现方式*/
if($(this).prop(‘checked‘)){ //若果checkbox被选中，则$(this).prop(‘checked‘)返回true
$(this).prop(‘checked‘,false);
}else {
$(this).prop(‘checked‘,true);
}
})
}
</script>
<script>
function cancle() {
$(‘#tb :checkbox‘).prop(‘checked‘,false);
}
</script>
</body>
</html>
5.jQuery支持链式编程
菜单栏显示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.header{
background-color: black;
color: wheat;
}
.content{
min-height: 50px;
}
.hide{
display: none;
}
</style>
</head>
<body>
<div style="height:400px;width: 200px;border: 1px solid #dddddd">
<div class="item">
<div class="header">标题一</div>
<div id="i1" class="content hide">内容</div>
</div>
<div class="item">
<div class="header">标题二</div>
<div class="content hide">内容</div>
</div>
<div class="item">
<div class="header">标题三</div>
<div class="content hide">内容</div>
</div>
</div>
<script src="jquery-1.12.4.js"></script>
<script>
$(‘.header‘).click(function(){
//jQuery支持链式编程，可以一直点下去
$(this).next().removeClass(‘hide‘).parent().siblings().find(‘.content‘).addClass(‘hide‘)
})
</script>
</body>
</html>