配制jQuery环境
进入jQuery官网:http://jquery.com
$(document).ready()与window.onload
上面代码中的$(document).ready类似于传统JavaScript中的onload()方法,它是jQuery中页面载入事情的方法。二者的异同如下所示
例:
document指的用jquery方法,onload指的js方法。
jQuery语法结构
Query语句主要包含三大部分:$()、document和ready().这三部分分别被称为工厂函数、选择器和方法。将其语法化后,结构如下:
工厂函数$()
(1) .在jQuery中,美元符号()=jQuery();
(2) .$()的作用将DOM对象转化为jQuery对象,只有将DOM对象转发为jQuery对象后,才能使用jQuery的方法。
选择器selector
jQuery支持CSS1.0到CSS3.0规则中几乎所有的选择器,如标签选择器、类选择器和ID选择器和后代选择器。
方法action()
jQuery中提供的方法,其中包括绑定事件处理的方法,比如点击事件click().
jQuery操作页面元素
1.使用addClass( )方法为元素添加样式
代码:
$(document).ready(function(){
$("li").click(function(){
$("#current").addClass("current");
});
});
语法说明
addClass()是jQuery中用于进行CSS操作的方法之一,它的作用是向被选元素添加一个或多个类样式。
其中,样式名可以是一个,也可以多个,多个样式名需要用空格隔开。
需要注意的是,与使用选择器获取DOM元素不同,获取id为current的元素时,”current”前需要加id的符号”#”,而使用addClass()方法添加class为current的类样式时,该类名前不带类符号“.”。
使用css( )方法设置元素样式、使用show( )、hide( ) 方法设置元素的显示和隐藏
案例:案例代码:
css()方法
css()方法是jQuery中用于进行css操作的另一种方法,它的作用是为匹配的元素添加CSS样式。
语法格式
例:
页面中<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中遍历后代的一种方式,用作查找被选元素的所有直接子元素。