jQuery
模块：Dom和JavaScript
版本：1.12.x兼容IE9以下的浏览器
2.x不兼容IE9
一、查找
1.选择器
- #id选择器
- 标签选择器
- 类型选择器
- 组合选择器
- 层级选择器
2.筛选器
示例：多级菜单显示隐藏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<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: #2459a2;
color: white;
}
</style>
</head>
<body>
<div class="menu">
<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 hide">
<p>内容二</p>
<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 hide">
<p>内容三</p>
<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) {
// console.log(ths); // Dom中的标签对象
// $(ths) // Dom标签对象转换成jQuery标签对象（jQuery应用更便利）
// $(ths)[0] // jQuery标签对象转换成Dom标签对象
// 删除本身内的hide隐藏
$(ths).next().removeClass(‘hide‘);
// 查找父类的兄弟标签内为body的样式为body的标签，增加hide样式
$(ths).parent().siblings().find(‘.body‘).addClass(‘hide‘);
}
</script>
</body>
</html>
3.Dom标签对象与jQuery标签对象转换
console.log(ths); // Dom中的标签对象 $(ths) // Dom标签对象转换成jQuery标签对象（jQuery应用更便利） $(ths)[0] // jQuery标签对象转换成Dom标签对象
二、操作
1.CSS操作
2.属性操作
3.文本操作
示例：jQery全选/取消/反选
示例：clone实现搜索条件+-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>
<p>
<a onclick="Add(this);">+</a>
<input type="text" />
</p>
</div>
<script src="jquery-1.12.4.js"></script>
<script>
function Add(ths) {
var p = $(ths).parent().clone();
p.find(‘a‘).text(‘-‘);
p.find(‘a‘).attr(‘onclick‘, ‘Remove(this);‘);
$(ths).parent().parent().append(p);
}
function Remove(ths) {
$(ths).parent().remove();
}
</script>
</body>
</html>
三、事件
1.如何使用jQuery绑定
2.当文档加载完毕后，自动执行
$(function(){
......
});
3.延迟绑定
四、扩展
1.自定义模块
2.Form表单验证
五、jQuery循环
.each()
时间： 2024-10-17 10:36:05