前端学习之jquery：
jQuery：一个库
Jquery的基础语法: $(selector).action()
基本选择器：
<script> //基本选择器 //$("*") $("#id") $("div") $("p") $("element") $(".class") //层级选择器 //$("*") $("*") $("*") $("*") $("*") <!--层级选择器--> // $(".outer p").css("color","red") //后代选择器 // $(".outer>p").css("color","red") //子代选择器 // $(".outer+p").css("color","red") //紧挨着的？？？ // $(".outer~p").css("color","red") // //基本筛选器 $(".li:first").css("color","red") // $(".li:eq(1)").css("color","red") //选择第几个~~ $(".li").eq(2).css("color","red") //效果同上 但方便遍历哦 $(".li:odd").css("color","red") //控制奇数偶数行 $(".li:gt(2)").css("color","red") //gt lt 大于或者小于xx行执行 //属性选择器 $("[alex = 'sb'][id = p1]").css("color","red") //一个不够选两个属性 //表单属性选择器 $("[type = 'text']").css("width","200px") // $(":text").css("width","200px") //input表单的标签才可以这样哦 //一堆筛选器 $(".outer").children.css('color','red') //son $(".outer").find.css('color','red') //子代中 $(".li").eq(2).nextAll().css('color','red') $(".li").eq(2).nextUntil("#end").css('color','red') //直到id end $(".li").eq(2).prev().css('color','red') $(".li").eq(2).prevAll().css('color','red') $(".li").eq(2).prevUntil('li:eq(0)').css('color','red') console.log($(".outer .inner p").parent().html()) //第一个父亲 $(".outer .inner p").parent().css('color','red') //全红！ $(".outer .inner p").parentsUntil("body").css('color','red') //直到 全红！ $(".outer").siblings().css('color','red') //同胞 </script>
例子 左侧菜单例子：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .outer{ height: 1000px; width:100%; } .menu{ float:left; background-color: green; width: 30%; height: 500px; } .content{ float:left; background-color: red; width: 70%; height: 500px; } .title{ background-color: burlywood; line-height: 40px; } .hide{ display: none; } </style> </head> <body> <div class = "outer"> <div class = "menu"> <div class = "item"> <div class = "title" onclick="show(this)">菜单1</div> <div class = "con"> <div>111</div> <div>211</div> <div>311</div> </div> </div> <div class = "item"> <div class = "title" onclick="show(this)">菜单2</div> <div class = "con hide"> <div>222</div> <div>222</div> <div>222</div> </div> </div> <div class = "item"> <div class = "title" onclick="show(this)">菜单3</div> <div class = "con hide"> <div>333</div> <div>333</div> <div>333</div> </div> </div> </div> <div class = "content"></div> </div> <script src = "jquery-3.1.1.js"></script> <script> function show(self) { $(self).next().removeClass("hide") $(self).parent().siblings().children(".con").addClass("hide") } </script> </body> </html>
