一 . jQuery
是一个快速的javaScript库，使用户能更方便地处理HTMLdocuments、events、实现动画效果，并且方便地为网站提供AJAX交互。它的文档说明很全，而且各种应用也详细，jQuery 对象就是通过jQuery包装DOM对象后产生的对象。
jQuery 语法：$("selector").action("color","red");
二 . jQuery各种查找选择器,只要掌握好方法和CSS之前的基础，就信手捏来了
<script>
// 一 基本选择器
//$(".c1").css("color","red");
//$(".c3").css("color","red");
//$(".c3:first").css("color","red");
//$(".c3:last").css("color","red");
//$(".c3:eq(3)").css("color","yellow");
//$(".c3:even").css("color","yellow");
//$(".c3:odd").css("color","yellow");
//$(".c3:gt(2)").css("color","yellow");
//$(".c3:lt(2)").css("color","yellow");
//$("[gongfu=666]").css("color","red");
//$("[gongfu=678]").css("color","yellow");
//$("[gongfu=666][Ajing=233]").css("color","yellow");
//$("[type=checkbox]").attr("checked","checked");
//$(":checkbox").attr("checked","checked");
// 二 进阶筛选器
//$(".c5:checkbox");
//$(".c3").first().css("color","red");
//var index=3;
//$(".c3:"+"eq("+index+")").css("color","yellow");
//$(".c3").eq(index).css("color","yellow");
//判断某个标签是否拥有某个class名
//console.log($("#i1").hasClass("c2"));
//console.log($("[yuan]").hasClass(""));
//导航选择器
//查找兄弟标签
//$("#i2").next().css("color","yellow");
//$("#i2").nextAll().css("color","yellow");
//$("#i2").nextUntil(".c8").css("color","yellow");
//$("#i2").prev().css("color","yellow");
//$("#i2").prevAll().css("color","yellow");
//$("#i2").prevUntil("#i3").css("color","yellow");
//$("#i2").siblings().css("color","yellow");
//查找子孙标签
//$(".p1").children().css("color","blue");
//$(".p1").children(":first").css("color","yellow");
//$(".p1").children().first().css("color","yellow");
//$(".c9").children("p").css("color","yellow");
//$(".c9").find("p").css("color","red");
//查找父标签
//$(".c10").parent()
//$(".c10").parents()
//$(".c10").parentsUntil()
</script>
三.事件绑定语法及 操作
$(function () {
// $().事件(function(){})
/*
$("ul li").click(function () {
// this: 当前触发的标签,即一个DOM对象
// alert(this.innerHTML)
alert($(this).html())
});
*/
$("ul").on("click", "li", function () {
alert($(this).html())
});
$(".add").click(function () {
$(".box").append("<li>789</li>")
})
})
四 . jQuery操作
/*
1.文本操作
$("").html()
$("").text()
$("").html("参数")
$("").text("参数")
2.属性操作
$().attr("")
$().attr("","")
$("p").attr("gongfu")
$("p").attr("gongfu","niubi")
3.class 操作
$("p").addClass("c1")
$("p").removeClass("c1")
*/
五 . jQuery实现菜单栏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
.left{
15%;
height: 600px;
float: left;
background-color: wheat;
}
.right{
float: left;
85%;
height: 600px;
background-color: lightgray;
}
.title{
text-align: center;
line-height: 30px;
background-color: #0e90d2;
color: white;
}
.item{
padding: 10px;
}
.hide{
display: none;
}
</style>
<script src="jquery-3.3.1.js"></script>
</head>
<body>
<div class="outer">
<div class="left">
<div class="item">
<div class="title">菜单一</div>
<ul class="con hide">
<li>111</li>
<li>111</li>
<li>111</li>
</ul>
</div>
<div class="item">
<div class="title">菜单二</div>
<ul class="con hide">
<li>222</li>
<li>222</li>
<li>222</li>
</ul>
</div>
<div class="item">
<div class="title">菜单三</div>
<ul class="con hide">
<li>333</li>
<li>333</li>
<li>333</li>
</ul>
</div>
</div>
<div class="right"></div>
</div>
<script>
$(".title").click(function () {
//$(this).next().removeClass("hide");
//$(this).parent().siblings().children(".con").addClass("hide");
//jquery链式操作
$(this).next().removeClass("hide").parent().siblings().children(".con").addClass("hide");
})
</script>
</body>
</html>
2333 总之多敲多练，触类旁通，带脑子去玩代码，而不让代码去玩你.
详情见：https://www.cnblogs.com/yuanchenqi/articles/6936986.html