前端学习之 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
来源: http://www.bubuko.com/infodetail-3013917.html