06 Jquery 基础
生活随笔
收集整理的這篇文章主要介紹了
06 Jquery 基础
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
06 Jquery 基礎
前端學習之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> View Code例子 左側菜單例子：
<!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> View Code?
posted on 2019-04-06 21:49 TTNTONZES 閱讀(...) 評論(...) 編輯 收藏轉載于:https://www.cnblogs.com/louzhiyuan/p/10662961.html
總結
以上是生活随笔為你收集整理的06 Jquery 基础的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： NDK学习笔记-JNI的引用
- 下一篇： python中argv的用法