this指的是原生js的DOM对象
.css（“”）：只写一个值是取值，写俩值是赋值
window.onload === $(document).ready();
$(“”):获取元素 标签名、.类名、#id
jQuery特点
- 链式编程
- jq.shou（3000）.html（内容）
- 相当于
- jq.shou（3000）
- jq.gtml（内容）
- 隐式迭代
- 隐式实用for循环、迭代
如何使用jQuery - 引包
- 一定要在使用之前
- <script src = ‘’><>
- 入口函数
- $（document）.ready（function（｛｝））
- 绑定时间
- 事件源.事件（function（）｛事件驱动函数｝）
jQuery入口函数 - 文档加载完毕，图片未加载的时候执行函数
- $（document）.ready（function（｛｝））
- $(function(){})
- 文档和图片都加载完毕执行函数
- $(window).reday(function(){})
- JS入口只能有一次，多次会覆盖
- jqery可有多个入口函数
- $ === jQuery
jQuery和DOM对象的区别 - jQuery对象是一个数组，包含原生jsDOM对象
- 原生js对象是一个原生对象
- jQuery对象名 = $（js对象名）
- js对象转换为jQuery对象
- jquery对象名[索引值]
- jquery对象名.get(wwm索引值）
- 不同的对象有不同的方法
- JQuery对象方法包含原生js对象方法.
- jQuery对象.length的返回值是元素个数
jQuery选择器
- 基本：#id、.类、标签名、
- *通配符选择器
- 层级选择器
- 子代选择器 >
- 后代选择器 空格隔开
- 基本过滤选择器
- ： eq（index）遍历元素数组
- ：odd 获取偶数位索引的元素
- ：even获取奇数位索引值的元素
- 筛选选择器
- find（selector）：找到父元素的素所有子元素
- 父元素.find（‘要查找的子元素’）
- 查找所有后代子元素
- children：亲儿子
- 父元素.children（‘要查找的子元素’）
- 仅查找子元素
- ：eq（index）
- next（）；下一个兄弟节点
- parent（）：获取该元素的父元素
- siblings：所有的兄弟节点（不包括本身）
手风琴案例<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style type="text/css"> * {padding: 0;margin: 0;} ul { list-style-type: none;} .parentWrap { 200px; text-align:center; } .menuGroup { border:1px solid #999; background-color:#e0ecff; } .groupTitle { display:block; height:20px; line-height:20px; font-size: 16px; border-bottom:1px solid #ccc; cursor:pointer; } .menuGroup > div { height: 200px; background-color:#fff; display:none; } </style> <script src="jquery-1.11.1.min.js"></script> <script> $(function () { //需求：鼠标点击span，让他下面的div显示出来。让其他的div隐藏。 $(".parentWrap span").click(function () { // $(this).next().show(); // //让其他的隐藏 // //点击的span的父亲li，的所有的兄弟元素li，的孩子元素div全部隐藏。 // $(this).parent("li").siblings("li").children("div").hide(); //连式编程 $(this).next().show().parent("li").siblings("li").find("div").hide(); }); }) </script> </head> <body> <ul class="parentWrap"> <li class="menuGroup"> <span class="groupTitle">标题1</span> <div>我是弹出来的div1</div> </li> <li class="menuGroup"> <span class="groupTitle">标题2</span> <div>我是弹出来的div2</div> </li> <li class="menuGroup"> <span class="groupTitle">标题3</span> <div>我是弹出来的div3</div> </li> <li class="menuGroup"> <span class="groupTitle">标题4</span> <div>我是弹出来的div4</div> </li> </ul> </body> </html>
