jQuery基础及选择器

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();