配制jQuery环境

进入jQuery官网：http://jquery.com

image.png

$(document).ready()与window.onload

上面代码中的$(document).ready类似于传统JavaScript中的onload()方法，它是jQuery中页面载入事情的方法。二者的异同如下所示

image.png

例：

image.png
document指的用jquery方法，onload指的js方法。

jQuery语法结构

Query语句主要包含三大部分:$()、document和ready().这三部分分别被称为工厂函数、选择器和方法。将其语法化后，结构如下：

image.png

工厂函数$()

(1) .在jQuery中，美元符号()=jQuery();
(2) .$()的作用将DOM对象转化为jQuery对象，只有将DOM对象转发为jQuery对象后，才能使用jQuery的方法。

选择器selector

jQuery支持CSS1.0到CSS3.0规则中几乎所有的选择器，如标签选择器、类选择器和ID选择器和后代选择器。

示例: image.png

方法action()

jQuery中提供的方法，其中包括绑定事件处理的方法，比如点击事件click().

jQuery操作页面元素

1.使用addClass( )方法为元素添加样式

案例： image.png
代码：

$(document).ready(function(){
        $("li").click(function(){
            $("#current").addClass("current");
        });
});

语法说明
addClass()是jQuery中用于进行CSS操作的方法之一，它的作用是向被选元素添加一个或多个类样式。

image.png

其中，样式名可以是一个，也可以多个，多个样式名需要用空格隔开。
需要注意的是，与使用选择器获取DOM元素不同，获取id为current的元素时，”current”前需要加id的符号”#”，而使用addClass()方法添加class为current的类样式时，该类名前不带类符号“.”。

使用css( )方法设置元素样式、使用show( )、hide( ) 方法设置元素的显示和隐藏

案例： image.png
案例代码： image.png

css()方法

css()方法是jQuery中用于进行css操作的另一种方法，它的作用是为匹配的元素添加CSS样式。
语法格式

image.png
例： image.png
页面中<p>的文本的颜色为蓝色
css()和addClass的区别：
(1) .css()方法为所匹配的元素设置给定的CSS样式

(2) .addClass()方法向所匹配的元素添加一个或多个类，该方法不会删除已存在的类，仅在原有基础上追加新的类样式；
(3) .建议使用addClass()方法为元素添加样式

css（）指的是没有css方法下在js状态自己加css，addclass表示在原有css中选择方法。

使用css（）可以直接用$（this）.css

show()、hide()方法

使用show( )、hide( ) 方法设置元素的显示和隐藏;
children()方法是jQuery中遍历后代的一种方式，用作查找被选元素的所有直接子元素。

mouseover表示鼠标移上去

mouseout表示鼠标移走