模块五 前端jQuery基础

575 views

 ›
模块五 前端jQuery基础

jQuery介绍jQuery的优势jQuery下载和运行基础核心

    1. 代码风格
    1. 加载模式 入口函数
    1. 对象互换及处理多个库之间的冲突jQuery选择器

1 2 3 4

alert($);//返回jQuery对象⽅方法内部函数 2 alert($());//[object object]，返回jQuery对象 3 alert($("#box"));//[object object]，返回 jQuery对象 4 alert(document.getElementById("box")); //[object HTMLDivElement]，返回原⽣生DOM对象

| | |区别 window.onload
$(document).ready() 执行时机
必须等待网页全部加载完毕（包括图片等），然后再执行包裹代码
只需要等待网页中的DOM结构加载完毕，就能执行包裹的代码 执行次数
只能执行一次，如果第二次，那么第一次的执行会被覆盖
可以执行多次，第N次都不会覆盖上一次 简写方案
无

$(function () {});

| ------------ | ------------ | | | | | | |

基础选择器层次选择器过滤选择器 内容过滤选择器 属性过滤选择器 子元素过滤选择器表单过滤选择器 表单选择器 jQuery选择器完善的处理机制jQuery中的DOM操作

  1. HTML DOM 操作 插入节点删除节点 remove() detach() empty() 复制节点 其它方法
  2. CSSDOM操作

JQ中的事件 事件绑定合成事件 hover() toggle() 事件冒泡 阻止默认事件 事件对象的属性移除事件 one() 方法 jQuery中的动画动画队列 停止动画 判断元素是否处于动画状态延迟动画

jQuery介绍

官方介绍 1 jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript. 2 3 翻译： 4 jQuery是一个快速,小,功能丰富的JavaScript库。它使诸如HTML文档遍历和操作,事件处理、动画和Ajax更简单和易于使用的API,跨越多种浏览器。结合的通用性和可扩展性,jQuery已经改变了数百万人的方式编写JavaScript。

参考文档 write less,do more jQuery在线中文文档jQuery官方文档 jQuery的优势 jQuery 作为 JavaScript 封装的库，他的目的就是为了简化开发者使用 JavaScript。主要 功能有以下几点：

强大的选择器 像 CSS 那样访问和操作 DOM 修改 CSS 控制页面外观简化 JavaScript 代码操作事件处理更加容易 各种动画效果使用方便让 Ajax 技术更加完美基于 jQuery 大量插件自行扩展功能插件 出色的浏览器兼容链式操作方式 隐式迭代完善的文档开源 ..... jQuery 最大的优势，就是特别的方便。比如模仿 CSS 获取 DOM，比原生的 JavaScript 要方便太多。并且在多个 CSS 设置上的集中处理非常舒服，而最常用的 CSS 功能又封装到 单独的方法，感觉非常有心。 最重要的是 jQuery 的代码兼容性非常好，你不需要总是头疼着考虑不同浏览器的兼容问题。 jQuery下载和运行 下载

CDN下载 第一个jQuery程序

基础核心

  1. 代码风格 在jQuery程序中，不管是页面元素的选择，内置的功能函

数，都是美元符号

来开始的。而这个

就是jQuery当中

最红要且独有的对象:jQuery对象，所以我们在页面元素选择或执行功能函数的时候可以这样写：

由于$本身就是jQuery对象的缩写形式，那么也就是说上面的三段代码也可以写成如下形式：

并且，每次执行函数后，都会返回一个jQuery对象。如下：

  1. 加载模式 入口函数

我们在之前的代码一直在使用 这 段代码进行首尾包裹，那么为什么必须 要包裹这段代码呢？ 我们jQuery库文件是在body元素之前加载的，我们必须等待所有的DOM元素加载后，延迟支持DOM操作，

否则就无法获取到。使用待DOM加载完成就执行。

,只需要等

我们的原生Javascript也有一个延迟加载的方法 ，当网页内容全部加载完成后执行（例如图片等大文件未加载完成之前，JS功能处于假死状态）。 onload和ready区别

区别
window.onload
$(document).ready() 执行时机
必须等待网页全部加载完毕（包括图片等），然后再执行包裹代码
只需要等待网页中的DOM结构加载完毕，就能执行包裹的代码 执行次数
只能执行一次，如果第二次，那么第一次的执行会被覆盖
可以执行多次，第N次都不会覆盖上一次 简写方案
无

$(function () {});

  1. 对象互换及处理多个库之间的冲突 对象互换 首先我们先看一段代码

如何进行转换呢？

jQuery想要获取原生的DOM对象，可以这样处理

通过这个索引0可以看出jQuery 是可以进行批量处理DOM 的，这样可以在很多需要循环遍历的处理上更加得心应手。 当然要重新转化成jQuery对象的话，只需要使用$()包裹原生对象就可以了。

多个库之间的冲突

当一个项目中引入多个第三方库的时候，由于没有命名空 间的约束（命名空间就好比同 一个目录下的文件夹一样，名字相同就会产生冲突），库与库之间发生冲突在所 难免。 jQuery 只不过是 DOM 操作为主的库，方便我们日常Web 开发。但有时，我们的项目有更多特殊的功能需要引入其他的库，比如用户界面 UI 方面的库，游戏引擎方面的库等等一系列。

所以jQuery提供了一个方法： ： 将$符所有权剔除。

1 2 3

如果jQuery库在其它库之前导入 照常工作，不需要以上设置 jQuery选择器 基础选择器 模仿的是CSS选择器，只不过在使用jQuery选择器时，我 们首先必须使用“$()”函数来包装我们的 CSS 规则。 而CSS 规则作为参数传递到jQuery对象内部后，再返回包含页面中对应元素的 jQuery 对象。随后可以进行节点操作，例 如： 。

那么除了 ID 选择器之外，还有两种基本的选择器，分别为：元素标签名和类(class)：

选择器 描述 返回

id

根据给定的 ID 匹配一个元素 单个元素

.class
根据给定的类名匹配一个元素 集合元素

element 根据给定的元素名匹配一个元素（相当于tagName ） 集合元素

匹配所有元素 集合元素

select1,select2,select3 将每一个选择器匹配到的元素合并后一起返回 集合元素

我们可以采用jQuery核心自带的一个属性返回的元素个数。 层次选择器

来查看

选择器 描述 返回

ancestor descendant(空格) 选取 ancestor 元素里所有的 descendant（后代）元素 集合元素

parent > child

选取子元素 集合元素

prev + next 选取紧接在 prev 元素后面的 next 元素 集合元素

prev ~ siblings 选取 prev 元素之后的所有 siblings 元素 集合元素

过滤选择器

选择器 描述 返回

:first
选取第一个元素 单个元素

:last
选取最后一个元素 单个元素

:not(selector) 去除所有与给定选择器匹配的元素 集合元素

:even 索引为偶数（索引从 0 开始） 集合元素

:odd 索引为奇数（索引从 0 开始） 集合元素

:eq(index) 索引等于 index 的元素 （index 从 0 开始） 单个元素

:gt(index) 索引大于 index 集合元素

:lt(index) 索引小于 index 集合元素 内容过滤选择器

选择器 描述 返回

:contains(text) 查找文本中含有 “text” 的元素 集合元素

:empty 匹配所有不包含子元素或者文本的空元素 集合元素

:has(selector)
含有选择器所匹配的元素 集合元素

:hidden 选取所有不可见的元素 集合元素

:visible
选取所有可见的元素 集合元素

属性过滤选择器

选择器 描述 返回 示例

[attribute] 拥有此属性的元素 集合元素
$("div[id]") 选择所有拥有 id 属性的 div

[attribute=value]
属性的值为 value 的元素 集合元素
$("div[tittle = test]") 属性 title 为 test 的 div

[attribute!=value] 属性的值不为value 的元素 集合元素
$("div[tittle != test]") 属性 title 不为 test 的 div

[attribute^=value] 属性的值以 value 开始的元素 集合元素
$("div[tittle^ = test]") 属性 title 以 test 开始的 div

子元素过滤选择器

选择器 描述 返回

:nth- child(index)
选取每个父元素下的第 index 个子元素或者奇偶元素（index 从 1 开始） 集合元素

:first-child 选取每个父元素第一个子元素 集合元素

:last-child 选取每个父元素最后一个子元素 集合元素

:only-child 如果某个元素是它父元素中唯一的子元素，则会被匹配 集合元素

表单过滤选择器

选择器 描述 返回

:enabled
选取所有可用元素 集合元素

:disable
选取所有不可用元素 集合元素

:checked 选取所有被选中元素（复选框、单选框） 集合元素

:selected 选取所有被选中元素（下拉列表） 集合元素

表单选择器

选择器 描述 返回

:input
选取所有的