jQuery
可以按照网站进行查看
http://jquery.cuishifeng.cn/
jQuery
模块 《=》类库
DOM/BOM/JavaScript的类库
一 查找元素
jQuery:
选择版本
1.0
2.0
3.0
可以选择1.0最新版本 兼容性比较好 IE 线上环境选择压缩版本
1.1 引入jQuery
一般放在html末尾 <script src="jquery-2.1.4.min.js"></script>
调用jQuery
jQuery == $ 一般写$
1.2 jQuery转换：
DOM对象与jQuery对象转换
jquery对象[0] => Dom对象
Dom对象 ==> $(Dom对象)
1.3 选择器
直接找到某个或者某类标签
1.id $('#id') 2.class <div class='c1'></div> $('.c1') 3 标签 <div id="10" 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')
如果
筛选
二 操作元素
===》 实例:
基本选择器
筛选器
案例
用到的知识
基本选择器及筛选器
<!DOCTYPE html>
<html lang="en">
<head>
<script src="jquery-2.2.3.js"></script>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
.menu{
float: left; 10%;height: 500px;background-color: aqua
}
.content {
float: left; 90%;height: 500px;background-color: darkolivegreen;
}
.title{
background-color: black;
color: white;
height: 50px;
line-height: 50px;
}
.hide{
display: none;
}
</style>
<body>
<div>
<div class="menu">
<div class="item">
<div class="title" onclick="Func(this);">菜单一</div>
<div class="body ">
<div>1.1</div>
<div>1.2</div>
<div>1.3</div>
</div>
</div>
<div class="item">
<div class="title" onclick="Func(this);">菜单二</div>
<div class="body hide">
<div>2.1</div>
<div>2.2</div>
<div>2.3</div>
</div>
</div>
<div class="item">
<div class="title" onclick="Func(this);">菜单三</div>
<div class="body hide">
<div>3.1</div>
<div>3.2</div>
<div>3.3</div>
</div>
</div>
</div>
<div class="content">
</div>
</div>
<script>
function Func(ths) {
$(ths).next().removeClass('hide');
$(ths).parent().siblings().find('.body').addClass('hide');
}
</script>
</body>
</html>
属性
attr：
可以适用与所有的标签，初了checkbox，radios
案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-2.2.3.js"></script>
<style>
.tab-box .box-menu{
background-color: #dddddd;
border: 1px solid #dddddd;
line-height: 33px;
}
.box-menu a{
}
.tab-box .box-body{
border: 1px solid #dddddd;
}
.hide {
display: none;
}
.current{
background-color: red;
color: white;
}
</style>
</head>
<body>
<div class="tab-box">
<div class="box-menu">
<!--所有菜单-->
<a alex="c1" onclick="ChangeTab(this)" class="current">菜单一</a>
<a alex="c2" onclick="ChangeTab(this)">菜单二</a>
<a alex="c3" onclick="ChangeTab(this)">菜单三</a>
</div>
<div class="box-body">
<!--所有内容-->
<div id="c1">内容一</div>
<div id="c2" class="hide">内容二</div>
<div id="c3" class="hide">内容三</div>
</div>
</div>
<script>
function ChangeTab(ths){
$(ths).addClass('current').siblings().removeClass('current')
//获取当前点击的标签
var contentId = $(ths).attr('alex')
//$('#c1')
var temp = "#" + contentId;
$(temp).removeClass('hide').siblings().addClass('hide');
//获取当前标签的属性
//值$('#xx')显示，其它兄弟隐藏
}
</script>
</body>
</html>
checkbox属性
$('').prop('checked',true) 选上
$('').prop('checked',false) 取消
案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input id="c1" type="checkbox" />
<input id="c3" type="checkbox" checked="checked">
<div>
<input type="button" value="全选" onclick="SelectAll()" />
<input type="button" value="取消" onclick="ClearAll()" />
</div>
<div>
<table border="1">
<tr>
<td><input type="checkbox"></td>
<td>123</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>123</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>123</td>
</tr>
</table>
</div>
<script src="jquery-2.2.3.js"></script>
<script>
function SelectAll() {
//table标签中的所有input
//$('table:checkbox') 找到了所有的input,checkbox
$('table :checkbox').prop('checked',true);
}
function ClearAll() {
$('table :checkbox').prop('checked',false);
}
</script>
</body>
</html>
for循环
案例：
function ReverseAll() { //i 下标索引 //item 循环元素 var userList = [11,22,33,44] $.each(userList,function (i,item) { console.log(i,item) });
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input id="c1" type="checkbox" />
<input id="c3" type="checkbox" checked="checked">
<div>
<input type="button" value="全选" onclick="SelectAll()" />
<input type="button" value="取消" onclick="ClearAll()" />
<input type="button" value="反选" onclick="ReverseAll()" />
</div>
<div>
<table border="1">
<tr>
<td><input type="checkbox"></td>
<td>123</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>123</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>123</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>123</td>
</tr>
</table>
</div>
<script src="jquery-2.2.3.js"></script>
<script>
function SelectAll() {
//table标签中的所有input
//$('table:checkbox') 找到了所有的input,checkbox
$('table :checkbox').prop('checked',true);
}
function ClearAll() {
$('table :checkbox').prop('checked',false);
}
function ReverseAll() {
$('table :checkbox').each(function () {
//每一个循环都执行该方法体
//$(this)表示当前循环的元素
var isChecked = $(this).prop('checked');
if (isChecked){
$(this).prop('checked',false);
}else {
$(this).prop('checked',true);
}
})
}
</script>
</body>
</html>