前面学习了原生的DOM，现在看看如何使用JQuery。JQuery建议使用1.12的版本，这样对旧版本的IE兼容性比较好。
例1.添加，删除class
<script src=‘jquery-1.12.4.js></script>调用jquery
相对于Dom的document.getElementbyID(‘i1‘), JQuery直接使用$(‘#i1‘)；
addclass（‘hide’）直接给找到的标签添加一个样式class，无需使用classlist了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.hide{
display: none;
}
</style>
</head>
<body>
<input type="button" value="hide" onclick="hides();"/>
<div id="i1">
<div class="item"></div>
<div class="item">
<div class="c1">123</div>
<a>百度</a>
</div>
<div class="item"></div>
</div>
<div id="i2"></div>
<script src="jquery-1.12.4.js"></script>
<script>
flag=true;
function hides() {
if (flag==true){
$(‘#i1‘).addClass(‘hide‘);
console.log(flag)
flag=false;
}else{
$(‘#i1‘).removeClass(‘hide‘);
console.log(flag)
flag=true;
}
}
</script>
</body>
</html>点击hide按钮切换隐藏效果
例2 隐藏菜单
注意事项：
showmenu（this），这里$(this)就表示事件发生的jquery对象，然后可以通过parent和sibling来寻找其他标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<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标签对象（便利）
//$(ths)[0] // jQuery标签对象转换成Dom标签对象
$(ths).next().removeClass(‘hide‘);
$(ths).parent().siblings().find(‘.body‘).addClass(‘hide‘);
}
</script>
</body>
</html>例3. 复制，删除文本框
clone（）克隆标签
find（）查找标签
attr（）添加一个事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<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>效果：点击+自动复制一行，点击-删除自己所在
例4. 绑定事件-例2的升级版
例2里面我们需要给每个标签都手动的添加onclick事件，如果可以统一绑定事件，会省事很多。有两种方式，如下所示;
$(function){
....
}里面执行的...会在文档树加载之后自动执行，不会等待所有的图片内容的加载
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<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">菜单一</div>
<div class="body">
<p>内容一</p>
<p>内容一</p>
<p>内容一</p>
<p>内容一</p>
<p>内容一</p>
</div>
</div>
<div class="item">
<div class="title" >菜单二</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">菜单三</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(){
// // 当文档树加载完毕后，自动执行
// $(‘.item .title‘).click(function(){
// // this,$(this)
// $(this).next().removeClass(‘hide‘);
// $(this).parent().siblings().find(‘.body‘).addClass(‘hide‘);
// });
// });
//方法二
$(‘.item .title‘).bind(‘focus‘, function () {
$(this).next().removeClass(‘hide‘);
$(this).parent().siblings().find(‘.body‘).addClass(‘hide‘);
})
</script>
</body>
</html>例5 延迟绑定
比如通过javascript创建的新标签，如何让他自动绑定事件？可以通过delegate实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="button" onclick="Add();" />
<ul>
<li>123</li>
<li>456</li>
<li>789</li>
</ul>
<script src="jquery-1.12.4.js"></script>
<script>
$(function(){
/*
$(‘li‘).click(function () {
alert($(this).text());
});
*/
$("ul").delegate("li","click",function(){
alert($(this).text());
});
});
function Add(){
var tag = document.createElement(‘li‘);
tag.innerText = ‘666‘;
$(‘ul‘).append(tag);
}
</script>
</body>
</html>
本文出自 “麻婆豆腐” 博客，请务必保留此出处http://beanxyz.blog.51cto.com/5570417/1893396
原文：http://beanxyz.blog.51cto.com/5570417/1893396