jQuery是一个JavaScript第三方模块（第三方类库）。
1.应用jQuery
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1 id="txt">人工智能</h1>
<script src="static/jquery.min.js"></script>
<script type="text/javascript">
//利用jQuery中的功能去实现某些效果
// 1.找到id=txt的标签 // 2.内容修改 -->使用jQuery更便捷。
<!-- document.getElementById('txt').innerText = "中国华为";-->
$("#txt").text("中国华为");
</script>
</body>
</html>2.寻找标签
（1）ID选择器
<h1 id="txt">中国华为</h1>
<h1>人工智能</h1>
<h1>智能驾驶</h1>$("txt")（2）样式选择器
<h1 class="c1">华为</h1>
<h1 class="c2">人工智能</h1>
<h1 calss="c3">智能驾驶</h1>$(".c1")（3）标签选择器
<h1 class="c1">华为</h1>
<div class="c1">智能驾驶</h1>
<h1 class="c2">人工智能</h1>$("h1")(4)层级选择器
<h1 class="c1">华为</h1>
<div class="c1">
<div class="c2">
<span></span>
<a></a>
</div>
</h1>
<h1 class="c2">人工智能</h1>$(".c1 .c2 a")(5)多选择器
<h1 class="c1">华为</h1>
<div class="c1">
<div class="c3">
<span></span>
<a></a>
</div>
</h1>
<h1 class="c2">人工智能</h1>
<ul>
<li>xx</li>
<li>xx</li>
</ul>$("#c3,#c2,li")(6)属性选择器
<input type="text" name="n1" />
<input type="text" name="n1" />
<input type="text" name="n2" />
$("input[name='n1']")3.间接寻找
（1）找到兄弟
<div>
<div>北京</div>
<div id='c1'>上海</div>
<div>深圳</div>
<div>广州</div>
</div>$("#c1").prev() //上一个
$("#c1")
$("#c1").next //下一个
$("#c1").next().next() //下一个的下一个
$("#c1").siblings() //所有的兄弟（2）找父子
<div>
<div>
<div>北京</div>
<div id="c1">
<div>青浦区</div>
<div class="p10">宝山区</div>
<div>浦东新区</div>
</div>
<div>深圳</div>
<div>广州</div>
</div>
<div>
<div>陕西</div>
<div>山西</div>
<div>河北</div>
<div>河南</div>
</div>
</div>$("#c1").parent() // 父亲(一整个上级的div)
$("#c1").parent().parent() // 父亲的父亲(一整个上上级的div)
$("#c1").children() // 所有的儿子(c1包含的所有div)
$("#c1").children(".p10") // 所有的儿子中寻找class=p10
$("#c1").find(".p10") // 去所有子孙中寻找class=p10
$("#c1").find(".div") // 去所有子孙中寻找div
案例：菜单的切换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.menu{
width: 200px;
height: 800px;
border: 1px solid red;
}
.menus .header{
background-color: gold;
padding:10px 5px;
border-bottom: 1px dotted #dddddd;
cursor: pointer;
}
.menus .content a{
display: block;
padding: 5px 5px;
border-bottom: 1px dotted #dddddd;
}
.hide{
display: none; <!--隐藏-->
}
</style>
</head>
<body>
<div class="menus">
<div class="item">
<div class="header" onclick="clickMe(this);">上海</div>
<div class="content hide">
<a>宝山区</a>
<a>青浦区</a>
<a>浦东新区</a>
<a>普陀区</a>
</div>
</div>
<div class="item">
<div class="header" onclick="clickMe(this);">北京</div>
<div class="content hide">
<a>海淀区</a>
<a>朝阳区</a>
<a>大兴区</a>
<a>昌平区</a>
</div>
</div>
<div class="item">
<div class="header" onclick="clickMe(this);">武汉</div>
<div class="content hide">
<a>江岸区</a>
<a>武昌区</a>
<a>江汉区</a>
<a>东西湖区</a>
</div>
</div>
<div class="item">
<div class="header" onclick="clickMe(this);">杭州</div>
<div class="content hide">
<a>上城区</a>
<a>拱墅区</a>
<a>西湖区</a>
<a>滨江区</a>
</div>
</div>
<script src="static/jquery.min.js"></script>
<script>
function clickMe(self){
<!-- //$(self) ->表示当前点击的那个标签。-->
<!-- //$(self).next() 下一个标签-->
<!-- //$(self).next().removeClass("hide"); 删除样式。我们只点击标签后进入下一个标签后，我们只有删除hide才能显示出菜单。-->
<!-- var hasHide = $(self).next().hasClass("hide");-->
<!-- //判断是否已经去掉了hide-->
<!-- if(hasHide){-->
<!-- $(self).next().removeClass("hide");-->
<!-- }else{-->
<!-- $(self).next().addClass("hide");-->
<!-- }-->
//构造4个菜单，每次菜单切换时其余打开的菜单自动收起
//让自己下面的功能展示出来
$(self).next().removeClass("hide");
//找父亲，然后找父亲的所有兄弟，再去每个兄弟的子孙中寻找class=content的标签，添加hide。即使本身就有hide也没关系。
$(self).parent().siblings().find(".content").addClass("hide");
}
</script>
</div>
</body>
</html>4.操作样式
（1）addClass
（2）removeClass
（3）hasClass
5.值的操作
（1）
<div id='c1'>内容</div>$("#c1").text() //获取文本内容
$("#c1").text("休息") //设置文本内容（2）
<input type="text" id="c2" />$("#c2").val() // 获取用户输入的值
$("#c2").val("哈哈哈") // 设置值案例：动态创建数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="text" id="txtUser" placeholder="用户名">
<input type="text" id="txtEmail" placeholder="邮箱">
<input type="button" value="提交" onclick="getInfo()" />
<ul id="view">
</ul>
<script src="static/jquery.min.js"></script>
<script>
function getInfo(){
//1.获取用户输入的用户名和密码
var username = $("#txtUser").val();
var email = $("#txtEmail").val();
var dataString = username + "-" + email;
//2.创建li标签，并在li标签的内部写入内容
var newLi = $("<li>").text(dataString);
//3.把新创建的li(newLi)标签添加到ul(#view)里面
$("#view").append(newLi);
}
</script>
</body>
</html>
6.事件
<input type="button" value="提交" onclick="getInfo()"/>
<script>
function getInfo(){
}
</script><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<ul>
<li>百度</li>
<li>谷歌</li>
<li>搜狗</li>
</ul>
<script src="static/jquery.min.js"></script>
<script>
$("li").click(function(){
var text = $(this).text();
console.log(text);
});
</script>
</body>
</html>在jQuery中可以删除某一个标签。
<div id='c1'>内容</div>
$("#c1").remove();<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<ul>
<li>百度</li>
<li>谷歌</li>
<li>搜狗</li>
</ul>
<script src="static/jquery.min.js"></script>
<script>
$("li").click(function(){
<!-- var text = $(this).text();-->
$("li").remove();
console.log(text);
});
</script>
</body>
</html>当页面框架加载完成之后执行的代码（更快执行）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<ul>
<li>百度</li>
<li>谷歌</li>
<li>搜狗</li>
</ul>
<script src="static/jquery.min.js"></script>
<script>
$(function(){
//当页面的框架加载完成之后，自动就执行。
$("li").click(function(){
$(this).remove();
});
});
<!-- $("li").click(function(){-->
<!--<!– var text = $(this).text();–>-->
<!-- $("li").remove();-->
<!-- console.log(text);-->
<!--});-->
</script>
</body>
</html>案例：表格操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<table border="1">
<thead>
<tr>
<th>ID</th>
<th>姓名</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>武汉市</td>
<td>
<input type="button" value="删除" class="delete" />
</td>
</tr>
<tr>
<td>2</td>
<td>武汉市</td>
<td>
<input type="button" value="删除" class="delete"/>
</td>
</tr>
<tr>
<td>3</td>
<td>武汉市</td>
<td>
<input type="button" value="删除" class="delete"/>
</td>
</tr>
<tr>
<td>4</td>
<td>武汉市</td>
<td>
<input type="button" value="删除" class="delete"/>
</td>
</tr>
</tbody>
</table>
<script src="static/jquery.min.js"></script>
<script>
$(function(){
//找到所有class=delete的标签，锁定事件。
$(".delete").click(function(){
//删除当前行的数据
$(this).parent().parent().remove();
})
})
</script>
</body>
</html>
631
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
