爱站程序员基地1.jQuery的入口函数
- 第一种
$(document).ready(function(){});
- 第二种
$(function(){});
这两种入口函数相当于原生js中的DOMContentLoaded
2.jQuery对象和DOM对象
- 原生js获取过来的对象是DOM
- jQuery方法获取的元素是jQuery对象
- jQuery对象的本质是：利用$对DOM对象包装后产生的对象（维数组形式存储）
- 只有jQuery对象才能使用jQuery方法，DOM对象则使用原生JavaScript方法
3.jQuery对象与DOM对象的转换
- DOM对象转换为jQuery对象 $(DOM对象)
- jQuery对象转换为DOM对象
方式一 $(“div”)[index] index是索引号
方式二 $(“div”).get(index) index是索引号
4.jQuery选择器
(1) 基础选择器
| 名称 | 用法 | 描述 |
|---|---|---|
| ID选择器 | $(\”#id\”) | 获取指定id的元素 |
| 类选择器 | $(\”.class\”) | 获取同一类class的元素 |
| 标签选择器 | $(“div”) | 获取同一类标签的元素 |
| 并集选择器 | $(“div,p,li”) | 获取多个元素 |
| 交集选择器 | $(“li.current”) | 交集元素 |
| 全选选择器 | $(\”*\”) | 匹配所有元素 |
(2)层级选择器
最常用是：子代选择器和后代选择器
| 名称 | 用法 | 描述 |
|---|---|---|
| 子代选择器 | $(“ul>li”) | 获取亲儿子层级的选择器， 注意,并不会获取孙子层级的元素 |
| 后代选择器 | $(“ul li”) | 使用空格代表后代选择器，获取ul元素下面的所有li，包括孙子等 |
(3)筛选选择器
| 名称 | 用法 | 描述 |
|---|---|---|
| :first | $(“li:first”) | 获取第一个li元素 |
| :last | $(“li:last”) | 获取最后一个li元素 |
| :eq(index) | $(“li:eq(2)”) | 获取到的li元素中，选择索引号为2的li元素，index从0开始 |
| :odd | $(“li:odd”) | 获取到的li元素中，选取索引号为奇数元素 |
| :even | $(“li:even”) | 获取到的li元素中，选取索引号为偶数元素 |
(4)节点筛选方法
| 语法 | 用法 | 说明 |
|---|---|---|
| parent() | $(“li”).parent() | 查找父级 |
| children(selector) | $(“ul”).children(“li”) | 相当于$(“ul>li”) ,查找最近一级(亲儿子) |
| find(selector) | $(“ul”).find(“li”) | 相当于$(“ul li”) 后代选择器 |
| siblings(selector) | $(\”.first\”).siblings(“li”) | 查找兄弟节点，不包括自己本身 |
| eq(index) | $(“li:eq(2)”) | 相当于$(“li:eq(2)”) index从0开始 |
5.jQuery的样式操作
方法一：操作css方法
// 1.参数只写属性名，则是返回属性值var strColor = $(this).css(\'color\');// 2. 参数是属性名，属性值，逗号分隔，是设置一组样式，属性必须加引号，值如果是数字可以不用跟单位和引号$(this).css(\"color\", \"red\");// 3. 参数可以是对象形式，方便设置多组样式。属性名和属性值用冒号隔开， 属性名可以不用加引号$(this).css({ \"color\":\"white\",\"font-size\":\"20px\"});
方法二：设置类样式方法
// 1.添加类$(\"div\").addClass(\"current\");// 2.删除类$(\"div\").removeClass(\"current\");// 3.切换类$(\"div\").toggleClass(\"current\");
原生 JS 中 className 会覆盖元素原先里面的类名，jQuery 里面类操作只是对指定类进行操作，不影响原先的类名。
6.jQuery效果
- 显示隐藏：show() / hide() / toggle();
- 滑入滑出：slideDown() / slideUp() / slideToggle();
- 淡入淡出：fadeIn() / fadeOut() / fadeToggle() / fadeTo();
- 自定义动画：animate() ;
以上()里面有三个参数，可以省略不写
(speed,easing,fn)
1.speed:三种预定速度之一的字符串(“slow\”or\”normal\”or\”fast”)或表示动画时长的毫秒数值（如：1000）
2.easing：用来指定切换效果，默认是swing，可用参数linear
3.fn：回调函数。在动画完成时执行的函数，每个元素执行一次
fadeTo(speed,opacity,easing,fn) 渐进方式调整到指定的不透明度
1.opacity 透明度必须写，取值0~1之间
2.speed:三种预定速度之一的字符串(“slow\”or\”normal\”or\”fast”)或表示动画时长的毫秒数值（如：1000）必须写
3.easing：用来指定切换效果，默认是swing，可用参数linear
4.fn：回调函数。在动画完成时执行的函数，每个元素执行一次
animate(params,speed,easing,fn) 自定义动画
1.params：想要更改的样式属性，以对象形式传递，必须写。属性名可以不用带引号，如果是复合属性则需要采用驼峰命名法。其余参数都可以省略
2.speed:三种预定速度之一的字符串(“slow\”or\”normal\”or\”fast”)或表示动画时长的毫秒数值（如：1000）必须写
3.easing：用来指定切换效果，默认是swing，可用参数linear
4.fn：回调函数。在动画完成时执行的函数，每个元素执行一次
7.停止动画队列
动画或者效果一旦触发就会执行，如果多次触发，就造成多个动画或者效果排队执行。
停止动画排队的方法为：stop() ;
- stop() 方法用于停止动画或效果。
- stop() 写到动画或者效果的前面， 相当于停止结束上一次的动画。
总结: 每次使用动画之前，先调用 stop() ,在调用动画。
8.事件切换
jQuery中为我们添加了一个新事件 hover() ; 功能类似 css 中的伪类 :hover 。介绍如下
语法
hover([over,]out) // 其中over和out为两个函数
- over:鼠标移到元素上要触发的函数（相当于mouseenter）
- out:鼠标移出元素要触发的函数（相当于mouseleave）
- 如果只写一个函数，则鼠标经过和离开都会触发它
9.知识扩展
- jQuery 里面的排他思想
// 想要多选一的效果，排他思想：当前元素设置样式，其余的兄弟元素清除样式。$(this).css(“color”,”red”);$(this).siblings(). css(“color”,””);
- 隐式迭代 :遍历内部DOM元素(伪数组形式存储)的过程
/ 遍历内部 DOM 元素（伪数组形式存储）的过程就叫做隐式迭代。// 简单理解：给匹配到的所有元素进行循环遍历，执行相应的方法，而不用我们再进行循环，简化我们的操作，方便我们调用。$(\'div\').hide(); // 页面中所有的div全部隐藏，不用循环操作
- 链式编程
// 链式编程是为了节省代码量，看起来更优雅。$(this).css(\'color\', \'red\').sibling().css(\'color\', \'\');
