入口函数：ready()

当 DOM（文档对象模型） 已经加载，并且页面（包括图像）已经完全呈现时，会发生 ready 事件。

由于该事件在文档就绪后发生，因此把所有其他的 jQuery 事件和函数置于该事件中是非常好的做法。正如上面的例子中那样。

ready() 函数规定当 ready 事件发生时执行的代码。

ready() 函数仅能用于当前文档，因此无需选择器。

允许使用以下三种语法：

语法 1

$(document).ready(function)

语法 2

$().ready(function)

语法 3

$(function)

参数	描述
function	必需。规定当文档加载后要运行的函数。

例如，隐藏一个div盒子：

JQuery顶级对象$

定义及基本语法

$和JQuery用法相同，皆为JQuery选择器

jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作。

基础语法：

$(selector).action()

• 美元符号定义 jQuery
• 选择符（selector）"查询"和"查找" HTML 元素
• jQuery 的 action() 执行对元素的操作

实例：

• $(this).hide() - 隐藏当前元素
• $("p").hide() - 隐藏所有

  元素

• $("p.test").hide() - 隐藏所有 class="test" 的

  元素

• $("#test").hide() - 隐藏 id="test" 的元素

$选择器

jQuery的选择器包含CSS选择器和条件过滤选择器

CSS选择器

CSS选择器包含基本选择器、层次选择器、属性选择器

CSS选择器语法同CSS相同，可以参考我之前的文章，并且可以使用CSS3的选择器

语法	描述
$(this)	当前 HTML 元素
$("p")	所有 元素
$("p.intro")	所有 class="intro" 的 元素
$(".intro")	所有 class="intro" 的元素
$("#intro")	id="intro" 的元素
$("ul li:first-child")	每个 的第一个 元素
$("[href$='.jpg']")	所有带有以 ".jpg" 结尾的属性值的 href 属性
$("div#intro .head")	id="intro" 的 元素中的所有 class="head" 的元素

例如，选择所有偶数li设置背景颜色为天蓝色：

$也可以用Jquery代替，效果完全相同：

条件过滤选择器

语法与CSS选择器稍有不同，能更方便的选出元素。

元素，索引值从 0 开始，第一个元素是偶数 (0)，第二个元素是奇数 (1)，以此类推。 元素，索引值从 0 开始，第一个元素是偶数 (0)，第二个元素是奇数 (1)，以此类推。

语法	实例	描述
:first	$("p:first")	第一个 元素
:last	$("p:last")	最后一个 元素
:even	$("tr:even")	所有偶数
:odd	$("tr:odd")	所有奇数
:not(selector)	$("input:not(:empty)")	所有不为空的输入元素
:eq(index)	$("ul li:eq(3)")	列表中的第四个元素（index 值从 0 开始）
:gt(no)	$("ul li:gt(3)")	列举 index 大于 3 的元素
:lt(no)	$("ul li:lt(3)")	列举 index 小于 3 的元素
:header	$(":header")	所有标题元素 , ...
:focus	$(":focus")	当前具有焦点的元素

可见性过滤选择器

语法	实例	描述
:hidden	$("p:hidden")	所有隐藏的 元素
:visible	$("table:visible")	所有可见的表格

更多选择器

更多完整的选择器可以前往W3C或者菜鸟教程

https://www.runoob.com/jquery/jquery-ref-selectors.html

隐式迭代

jQuery获取的对象式一个伪数组形式，当获取到多个元素时，对该对象进行操作，会对数组中所有元素进行操作，例如：

将所有的li颜色变为红色：

    
    

        
123
        
123
        
123
        
123
        
123
        
123
    

jQuery筛选方法

语法	用法	说明
parent()	$('.son').parent()	查找直接父级，也就是最近一级的父级
parents()	$('.son').parents()	查找所有父级，直到查找到最大的父级对象html
children()	$('.grandpa').children()	查找最近一级的子节点
find(selector)	$('.grandpa').find('div')	查找该节点下的所有符合条件的节点，类似于后代选择器
siblings(*filter*)	$('.father').siblings()	查找该节点的兄弟节点，不包括自身，
nextAll(expr)	$('.two-father').nextAll()	查找该节点之后的所有同辈元素
next()	$('.two-father').next()	查找该节点后的一个同辈元素
prevAll(expr)	$('.three-father').prevAll()	查找该节点之前的所有同辈元素
prev()	$('.three-father').prev()	查找该节点前的一个同辈元素
hasClass()	$('div').hasClass('father')	检查当前元素是否含有某个特定的类，如果有，则返回true
eq(index)	$('div').eq(2)	选择第n个元素，index从0开始，注意该元素选择器不管父元素子元素，所有的符合条件的元素在一个队列里

Tips：

所有的选中多个元素的方法，例如parents()，children()，siblings()等等，括号内都可以跟筛选条件，可以根据该条件再进行筛选。比如：

$('.father').siblings('p')

就是选择.father类下所有的p元素

下面这个代码可以看出部分的选择器的特性：

DOM对象和jQuery对象

DOM对象是原生JS获取的对象，jQuery对象是通过$获取的对象，两者有着明显的差别

但有时候两者能相互转换

DOM对象转换为jQuery对象

一、DOM对象未被命名

直接用$选择对象

二、DOM对象被获取命名

用$选择对象，此时没有引号

jQuery对象转换为DOM对象

jQuery对象是以伪数组形式存储的，所以转换DOM对象只需以数组元素形式即可

jQuery链式编程

同一个对象的多个方法可以写在一行上，例如以下排他思想：

    按钮
    按钮
    按钮
    按钮
    按钮
    按钮
    

上述代码写成链式为：

    按钮
    按钮
    按钮
    按钮
    按钮
    按钮
    

链式编程需要注意的是方法应用的对象

jQuery操作样式

jQuery可以通过修改属性操作CSS样式，也可以通过类名操作CSS样式

一、通过CSS方法操作

1、参数为属性

参数只写属性名，返回的是属性值

//

2、参数为属性名，属性值

参数是属性名，属性值，用逗号分隔，是设置的一组样式，属性必须加引号，如果值是数字那么可以不加引号

3、参数为对象形式

参数可以是对象形式，方便设置多组样式，属性名和属性值用冒号隔开，属性可以不加引号

二、通过设置类样式

设置类有三种方式：

1、添加类：

$('div').addClass('current');

2、移除类：

$('div').removeClass('current');

3、切换类：

$('div').toggleClass('current')

下面这个代码诠释了这三个类的用法：

index()方法

index方法可以获取当前元素的索引号，索引号从0开始

    

        
123
    
        
123
    
        
123
    
        
123
    
        
123