jQuery 简介
jQuery 是一个快速、小型且丰富的 JavaScript 库。
jQuery 设计的宗旨是“write less,do more”,即倡导写更少的代码,做更多的事情jQuery 并不是代替 JavaScript,在 jQuery 的内部仍然是调用 JavaScript 实现的jQuery 的优势:
轻量级:jQuery 非常轻巧。
强大的选择器:jQuery 几乎支持所有的 CSS 选择器,以及 jQuery 自定义的选择器
出色的 DOM 操作封装:jQuery 封装了大量常用的 DOM 操作,开发者无需关心实现的细节就可以轻松上手使用。
可靠的事件处理机制:jQuery的事件处理机制吸收了JavaScript 中事件处理函数的精华,使得jQuery 在处理事件绑定时更为可靠。
出色的浏览器兼容:jQuery 能够在几乎所有的浏览器中正常运行,同时修复了一些浏览器之间的差异。
链式操作方式:jQuery支持链式操作,无需重复获取对象便可直接进行连写。
丰富的插件支持:jQuery 已经获得了成百上千官方插件的支持。
完善的文档:jQuery 提供完善的中文文档和英文文档,学习成本低。
开源: jQuery 是一个开源的产品,任何人都可以自由地使用。
搭建 jQuery 开发环境
jQuery 不需要安装,只需要把 jQuery 的文件放到项目中,并使用<script〉标签引入。jQuery 的下载:jQuery
production:即生产版 jquery-xxx.min.js,经过工具压缩或经过服务器开启 Gzip 压缩,主要应用于发布的产品和项目。
development:即开发版 jquery-xxx.js,完整无压缩版本,主要用于测试、学习和开发。
在前端项目中,可以使用不同的方式引入jquery.js。
jQuery 初体验
在 jQuery 中,$(document).ready()与原生 JavaScript 的 window.onload 类似。
区别 window.onload $(document).ready()
执行时机 必须等待网页中所有内容加载完毕才 网页中所有 DOM 元素加载完毕后执行。
能执行,包括视频、图片等。
编写个数 一个页面只能编写一个。 一个页面可以编写多个。
jQuery 语法结构
jQuery 的基本用法
$(选择器).方法();
jquery(选择器).方法();
$(选择器).方法()方法();
jQuery 的代码风格:
$ 等同于 jQuery。
链式操作。
隐式迭代。
DOM 对象与 jQuery 对象
DOM 对象是直接使用 JavaScript 获取的节点对象。
jQuery 对象是使用 jQuery 包装 DOM 对象后产生的对象,它能够使用 jQuery 中的方法DOM 对象与 jQuery 对象之间可以相互转化。
DOM 对象与 jQuery 对象相互转化的基本用法:
// DOM对象转jquery对象
var $jquery对象 =$(DOM对象);
// jQuery对象转DOM对象
var DoM对象=$jQuery对象.get(0);
6var DoM对象= $jQuery对象[0];
jQuery 选择器
基础选择器
jQuery 常见的基础选择器
类型 选择器 描述
id选择器 #id 根据指定的 id 匹配单个元素。
类选择器 .class 根据指定的类名匹配元素集合。
标签选择器 element 根据指定的 HTML 标签名匹配元素集合。
全局选择器 * 匹配所有元素集合。
selectorl, 将每个选择器匹配到的元素合
并集选择器 selectorN 并后一起返回元素集合
层次选择器
jQuery 常见的层次选择器
类型 选择器 描述
后代选择器 root siblings 匹配root 元素里所有的siblings 后代元素集合
子选择器 parent>child 匹配 parent 元素里所有的child 子元素集合。
相邻兄弟选择器 prev+next 匹配紧邻 prev元素的后面的同级的单个next 元素。
通用兄弟选择器 prev siblings 匹配 prev元素后面的同级的所有siblings 元素集合。
属性选择器
jQuery 常见的属性选择器
选择器 描述
[attr] 匹配包含 attr属性的元素集合。
attr=yal 匹配包含 attr属性且 attr属性的值为 val的元素集合。
Lattr =val 匹配 attr属性以 val开头的元素集合。
Lattr$=val 匹配 attr属性以 val 结尾的元素集合,
Lattr*=val 匹配 attr属性包含 val的元素集合。
过滤选择器
jQuery 常见的过滤选择器
选择器 描述
:first 选取第一个元素。
:last 选取最后一个元素。
:not(selector) 选取除给定选择器以外的所有元素集合。
:even 选取索引值为偶数的元素集合。
:odd 选取索引值为奇数的元素集合选取索引值等于index的单个元素。
:eq(index) 选取索引值大于 index的元素集合。
:gt(index) 选取索引值小于index的元素集合
:lt(index) 选取所有的标题元素集合,如<h1>~<h6>。
:header 选取当前获取焦点的元素集合。
:focus 选取所有动画元素集合。
:anlmated 选取所有可见的元素。
:visible 选取所有隐藏的元素
:hidden 选取所有隐藏的元素
jQuery 库冲突
jQuery 让渡
jQuery 不是唯一使用 $的脚本库,项目中有其他同样使用 $的脚本库时就会引起冲突,。
jQuery 定义了 jQuery.noConflict()方法,放弃对 $ 的使用权,以免与其他脚本库冲突。
jQuery 让渡的基本用法
// 重新指定一个替代符号,让渡$使用权,并指定用$代替$1
var $j = jQuery.noconflict();
$j(document).ready();