jQuery阶段总结

属性

功能

案例

controls

添加播放、暂停、音量控制等视频控制界面

<video src="video.mp4" controls></video>

width/ height

设置视频播放器的宽度和高度

<video src="video.mp4" width="640" height="360"></video>

autoplay

视频在页面加载后自动播放

<video src="video.mp4" autoplay></video>

loop

视频播放结束后自动循环播放

<video src="video.mp4" loop></video>

muted

设置视频静音播放

<video src="video.mp4" muted></video>

poster

指定视频在播放前显示的海报图像的路径

<video src="video.mp4" poster="poster.jpg"></video>

preload

规定视频在页面加载时的预加载方式，可选值有 `none`（不预加载）、metadata（仅预加载视频的元数据，如时长、尺寸等）、auto（浏览器自行决定是否预加载）

<video src="video.mp4" preload="metadata"></video>

文件名称

功能

用处

自己理解

jquery - 1.7.1.js

包含 jQuery 1.7.1 完整功能，如 DOM 操作、事件处理等

开发阶段使用，含注释易理解，便于调试和书写代码

容易看，想要增加功能的时候方便进行改变

jquery - 1.7.1.min.js

对 jquery - 1.7.1.js 压缩混淆，功能相同

生产环境使用，节省流量，加快加载，保护代码逻辑

节省

jquery - 1.7.1.intellisense.js

提供智能感知，编写时自动提示方法、属性和参数

开发时提高效率，避免拼写与使用错误，提升代码质量

只能提示，提高效率，类似于插件

对比

jQuery 对象

DOM 对象

概念

jQuery 库包装 DOM 对象形成的集合对象

文档对象模型中的单个页面元素

访问方式

使用$()

函数结合选择器，如$('div')

使用原生 JavaScript 方法，如document.getElementsByTagName('div')

方法调用

调用 jQuery 库提供的方法，如.hide()

调用自身的属性和方法，如style.display = 'none'

相互转换

DOM 对象转 jQuery 对象：$(domObj)

jQuery 对象转 DOM 对象：jQueryObj[0]

或jQueryObj.get(0)

特性

有链式调用，简化代码操作

功能更基础，适合处理单个元素的底层操作

语法

用法

描述

:first

$('li:first')

获取第一个 li 元素

:last

$('li:last')

获取最后一个 li 元素

:eq(index)

$("li:eq(2)")

获取到的 li 元素中，选择索引号为 2 的元素，索引号 index 从 0 开始

:odd

$("li:odd")

获取到的 li 元素中，选择索引号为奇数的元素

:even

$("li:even")

获取到的 li 元素中，选择索引号为偶数的元素

:not(selector)

$('li:not(selector)')

获取不匹配 selector 的元素

:gt(index)

$("li:gt(index)")

获取索引大于 index 的元素

:lt(index)

$("li:lt(index)")

获取索引小于 index 的元素

语法

用法

说明

parent()

$("li").parent();

查找父级

children(selector)

$("ul").children("li")

相当于 $("ul>li")，最近一级（亲儿子）

find(selector)

$("ul").find("li");

相当于 $("ul li")，后代选择器

siblings(selector)

$(".first").siblings("li");

查找兄弟节点，不包括自己本身

nextAll([expr])

$(".first").nextAll()

查找当前元素之后所有的同辈元素

prevAll([expr])

$(".last").prevAll()

查找当前元素之前所有的同辈元素

hasClass(class)

$("div").hasClass("protected")

检查当前的元素是否含有某个特定的类，如果有，则返回 true

eq(index)

$("li").eq(2);

相当于 $("li:eq (2)")，index 从 0 开始

first()

$("li").first();

获取匹配元素集合中的第一个元素

last()

$("li").last();

获取匹配元素集合中的最后一个元素

filter(selector)

$("li").filter(".active");

筛选出匹配指定选择器的元素

add(selector)

$("li").add(".newLi");

将匹配的元素添加到当前元素集合中

not(selector)

$("li").not(".hidden");

从匹配元素集合中删除与指定选择器匹配的元素