jQuery是一个优秀的javascript框架，封装了javascript和DOM
一、查找
选择器
id选择器 #1
标签选择器 element
类选择器 .class
组合选择器 c1,c2,c3
层级选择器 #1 c1
筛选器
查找部分需要掌握的内容如下：
以下截图均来自 http://www.php100.com/manual/jquery/
二、操作
操作CSS
操作html属性
文本操作
三、事件
优化
四、扩展
$.login
Form表单验证
五：Ajax
偷偷发请求
示例1 ：左侧菜单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style>
.hide{
display: none;
}
.menu{
width: 200px;
height: 600px;
border: 1px solid #dddddd;
overflow: auto; /*超过一个屏幕则加滚动条*/
}
.menu .item .title{
height: 40px;
line-height: 40px; /*字体居中*/
background-color: cornflowerblue;
color: white;
}
</style>
<body>
<div class="menu">
<div class="item">
<!--当点击当前标签时执行ShowMenu函数，this表示当前标签-->
<div class="title " onclick="ShowMenu(this)">菜单一</div>
<div class="body">
<p>内容一</p>
<p>内容一</p>
<p>内容一</p>
<p>内容一</p>
<p>内容一</p>
</div>
</div>
<div class="item">
<div class="title" onclick="ShowMenu(this)">菜单二</div>
<div class="body">
<p>内容二</p>
<p>内容二</p>
<p>内容二</p>
<p>内容二</p>
<p>内容二</p>
</div>
</div>
<div class="item">
<div class="title" onclick="ShowMenu(this)">菜单三</div>
<div class="body">
<p>内容三</p>
<p>内容三</p>
<p>内容三</p>
<p>内容三</p>
<p>内容三</p>
</div>
</div>
</div>
<script src="jquery-1.12.4.js"></script>
<script>
function ShowMenu(ths){
// ths 是DOM中的标签对象
// $(ths) 将DOM标签对象转换成jQuery标签对象
//$(ths)[0] 将jQuery标签对象转换成DOM标签对象
$(ths).next().removeClass(‘hide‘); //javascript中的语句以分号结束
$(ths).parent().siblings().find(‘.body‘).addClass(‘hide‘);
}
</script>
</body>
</html>
示例2：全选反选
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="button" value="全选" onclick="CheckAll();"/>
<input type="button" value="取消" onclick="CancleAll();"/>
<input type="button" value="反选" onclick="ReverseAll();"/>
<table border="1">
<thead>
<tr>
<th>序号</th>
<th>用户</th>
<th>年龄</th>
</tr>
</thead>
<tbody id="tb">
<tr>
<td><input type="checkbox" /></td>
<td>11</td>
<td>11</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>22</td>
<td>22</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>33</td>
<td>33</td>
</tr>
</tbody>
</table>
<script src="jquery-1.12.4.js"></script>
<script>
function CheckAll(){
//#tb是id选择器 input[type="checkbox"]是属性选择器 #tb input[type="checkbox"]是层级选择器
$(‘#tb input[type="checkbox"]‘).prop("checked",true);
}
function CancleAll(){
$(‘#tb input[type="checkbox"]‘).prop("checked",false);
}
function ReverseAll(){
//each用于循环 function (){}是无名函数
$(‘#tb input[type="checkbox"]‘).each(function (i){
//this 当前标签DOM对象
// $(this) 当前标签jQuery对象
if($(this).prop("checked")){ //获取"checked"属性的值，prop专门用于这种是否选中
$(this).prop("checked",false); //设置"checked"属性的值
}
else{
$(this).prop("checked",true);
}
});
}
</script>
</body>
</html>
时间： 2024-10-03 08:10:38