jQuery 选择样式效果

1. jQuery 介绍

---

1.1 Js 库

即 library，是一个封装好的特定的集合（方法和函数）

从封装一大堆函数的角度理解库，就是在这个库中，封装了很多预先定义好的函数在里面，比如动画 animate、hide、show，比如获取元素等

简介： 一个 JS 文件里面对原生 js 代码进行了封装，这样就可以快速高效的使用这些封装好的功能了

常见的 JavaScript 库：jQuery、Prototype、YUI、Dojo、Ext JS、移动端的 zepto 等，这些库都是对原生 JavaScript 的封装，内部都是用 JavaScript 实现的

---

1.2 jQuery 概念

• jQuery 是一个快速、简洁的 JavaScript 库，其设计的宗旨是“write Less, Do More”，即倡导写更少的代码，做更多的事情
• j 就是 JavaScript； Query 查询； 意思就是查询js，把js中的DOM操作做了封装，可以快速的查询使用里面的功能
• jQuery 封装了 JavaScript 常用的功能代码，优化了 DOM 操作、事件处理、动画设计和 Ajax 交互
• 学习jQuery本质： 就是学习调用这些函数（方法）
• jQuery 出现的目的是加快前端人员的开发速度，我们可以非常方便的调用和使用它，从而提高开发效率

---

1.3 jQuery 优点

• 支持插件扩展开发：有着丰富的第三方的插件，如：树形菜单、日期控件、轮播图等
• 轻量级：核心文件才几十kb，不会影响页面加载速度
• 对事件、样式、动画支持，大大简化了DOM操作
• 跨浏览器兼容：基本兼容了现在主流的浏览器
• 链式编程、隐式迭代
• 免费、开源

---

2. jQuery 基本使用

---

2.1 jQuery 下载

官网，各个版本下载

版本介绍：

• 1x ：兼容 IE 678 等低版本浏览器， 官网不再更新
• 2x ：不兼容 IE 678 等低版本浏览器， 官网不再更新
• 3x ：不兼容 IE 678 等低版本浏览器， 官方主要更新维护的版本

---

2.2 体验 jQuery

1. 引入 jQuery文件
2. 在文档最末尾插入 script 标签，书写体验代码
3. 可以试试隐藏盒子：$("div").hide()

---

2.3 jQuery 入口函数

等 DOM 结构渲染完毕即可执行内部代码，不必等到所有外部资源加载完成

相当于原生 js 中的 DOMContentLoaded

// 第一种：简单易用（推荐）
$(function() {
    ...  // 代码
})
// 第二种: 繁琐，但是也可以实现
$(document).ready(function(){
    ...  // 代码
});

---

2.4. jQuery中的顶级对象 $

• $ 是 jQuery 的别称，在代码中可以使用 jQuery 代替，但一般为了方便，通常都直接使用 $

• $ 是 jQuery 的顶级对象，相当于原生JavaScript中的 window。把元素利用 $ 包装成 jQuery 对象，就可以调用 jQuery 的方法

---

2.5 jQuery 对象和 DOM 对象

使用 jQuery 方法和原生 JS 获取的元素是不一样的：

• 用原生 JS 获取来的对象就是 DOM 对象
• jQuery 方法获取的元素就是 jQuery 对象

jQuery 对象本质： 利用 $ 对DOM 对象包装后产生的对象（伪数组形式存储）

注意：只有 jQuery 对象才能使用 jQuery 方法，DOM 对象则使用原生的 JavaScirpt 方法

---

2.6. jQuery 对象和 DOM 对象转换

因原生 js 比 jQuery 更大，一些属性和方法 jQuery 没有封装，使用这些属性和方法需要把 jQuery对象转换为 DOM对象 才能使用

• DOM 对象转换成 jQuery 对象：$(DOM对象);

var div = document.querySelector('div');  // 获取DOM
var jQueryObject = $(div); // 转换为 jQuery 对象

• jQuery 对象转换为 DOM 对象有两种方法

  • jQuery对象[索引值]

    例：var Object1 = $('div')[0]

  • jQuery对象.get(索引值)

    例：var Object1 = $('div').get(0)

总结：较常用的是把 DOM 对象转换为 jQuery 对象，这样能够调用功能更加强大的 jQuery 中的方法

---

3. jQuery 选择器

原生 JS 获取元素方式很多杂，而且兼容性情况不一致，因此 jQuery 做了封装，使获取元素统一标准

---

3.1 基础选择器

语法：$("选择器")

• 选择器：同 CSS 选择器格式，注意加引号

名称	示例
ID选择器	$("#id")
全选选择器	$('*")
类选择器	$(".class")
标签选择器	$("div")
并集选择器	$("div.p,li")
交集选接器	$("li.current")

---

3.2 层级选择器

• 子代选择器：$('ul>li')
• 后代选择器：$('ul li')

---

3.3 筛选选择器

在所有的选项中选择满足条件的进行筛选选择

示例	描述
$('li:first')	获取第一个 li 元素
$('li:last')	获取最后一个 li 元素
$("li:eq(2)")	获取 li 元素中索引号为 2 的元素
$("li:odd")	获取 li 元素中索引号为奇数的元素
$("li:even")	获取 li 元素中索引号为偶数的元素

注意：索引号从 0 起始

---

3.4 复合选择器

jQuery中还有一些筛选方法，类似DOM中的通过一个节点找另外一个节点，父、子、兄

名称	语法	描述
父级	parent()	最近一层父级
祖先	parents(selector)	指定某个祖先
子级	children(selector)	最近一层子级
后代	find([selector])	不写默认所有后代，可指定
兄弟	siblings(selector)	所有兄弟，不包括自己本身
弟	nextAll([expr])	自己之后的同辈
兄	prevtAll([expr])	自己之前的同辈
查类	hasClass(class)	判断元素是否含有某个类
索引	eq(index)	选索引为第几个的元素

• selector：选择器，如 $("div")
• class：类名（不加点）
• index：整数

例：$("div").parents(".abc")

返回当前元素索引值：$(this).index();

---

3.5 知识铺垫

• 排他思想（jQuery 里的）

  多选一的效果：当前元素设置样式，其余的兄弟元素清除样式

$(this).css(“color”,”red”); // 当前被点击的元素变化背景颜色
$(this).siblings(). css(“color”,””); // 其余的兄弟去掉背景颜色

• 隐式迭代

  遍历内部 DOM 元素（伪数组形式存储）的过程就叫做隐式迭代

  简介：给匹配到的所有元素进行循环遍历，执行相应的方法，而不用我们再进行循环，简化我们的操作，方便我们调用

  例：$('div').hide(); （所有的div全隐藏，不用循环操作）

• 链式编程

  链式编程是为了节省代码量，看起来更优雅

  例：$(this).css('color', 'red').sibling().css('color', '');

---

4. jQuery 样式操作

---

4.1 操作 css 方法

修改简单元素样式，用于样式少时操作

语法：$("选择器").css("属性名", ["属性值"])

• 只写属性名，则是返回属性值（带单位）

• 属性值必须加引号，如果值是数字可以不用加单位和引号

• 参数可以是对象形式（可不加引号，但非数字的值需加引号）

  例：$(this).css({ color:"white", font-size:20});

---

4.2 操作类方法

可以操作类样式（不加点），适合样式多时操作

1. 添加类：$("选择器").addClass("类名");
2. 删除类：$("选择器").removeClass("类名");
3. 切换类：$("选择器").toggleClass("类名");

原生 JS 中 className 会覆盖元素原先里面的类名，jQuery 里面类操作只是对指定类进行操作，不影响原先的类名

---

5. jQuery 效果

---

5.1 常见效果

1. 显示隐藏

   • 显示：show()
   • 隐藏：hide()
   • 切换：toggle()

2. 滑入滑出

   • 滑入：slideDown()
   • 滑出：slideUp()
   • 切换：slideToggle()

3. 淡入淡出

   • 淡入：fadeIn()
   • 淡出：fadeOut()
   • 切换：fadeToggle()
   • 透明度：fadeTo(speed, opacity)
     • opacity：透明度（0~1之间相当于百分比）

4. 参数

例：show([speed], [fn])（以上动画都有相同参数）

• speed：动画速度（毫秒），亦可有三种字符串：
  • slow：慢的（600）
  • normal：正常（默认）
  • fast：快速（200 ）
• fn：回调函数（每个元素执行一次）
• 参数都可以省略，无动画直接显示

建议：平时一般不带参数，直接显示隐藏

$("div").show(1000, function() {
        alert(666);
    });
}); // 动画速度一秒，完成后弹出666

---

5.2 自定义动画

自定义动画非常强大，通过参数的传递可以模拟以上所有动画

语法：animate (params, [speed], [fn])

• params：想更改的样式和属性，以对象形式传递，属性名可不用带引号，非数值的值需加引号（复合属性用驼峰命名法）

$("div").animate({
    left: 500, // css 需加定位
    opacity: .4,
    width: 500
}, 500);

---

5.3 停止动画排队

动画或者效果一旦触发就会执行，如果多次触发，就造成多个动画或者效果排队执行

语法：stop().动画

用于停止动画或效果，写到动画或者效果的前面， 相当于停止结束上一次的动画

例：$(this).stop().show();

---

5.4 事件切换

功能类似 css 中的伪类 :hover

语法：hover([over,]out)

• over：鼠标经过元素触发的函数（同mouseenter）
• out：鼠标离开元素触发的函数（同mouseleave）
• 如果只写一个函数，则鼠标经过和离开都会触发它

---