jQuery 01

Jquery (JavaScript框架)

CSS透明样式:opacity:值0-1浮点数;

使用步骤***

下载Jquery.js

在HTML文件中引如Jquery.js

开始使用Jquery的api

Jquery中的onload写法

格式:

$(function(){

//当网页加载完毕,自动执行!

});

Jquery对象

Jquery给我们提供的一个DOM对象的集合!

是Jquery封装好的一个具备各种功能的对象

Jquery对象无法使用原生DOM对象API,原生dom对象也无法使用Jquery对象的API

DOM对象与Jquery对象互相转换

DOM对象转换为Jquery对象

格式: var$obj = $(DOM对象或DOM对象数组);

案例:

function hide(){

var img = document.getElementById("i1");

var$img = $(img);

$img.fadeOut(5000);

}

function show(){

var img = document.getElementById("i1");

var$img = $(img);

$img.fadeIn(5000);

}

显示

隐藏

Jquery对象转换为DOM对象

格式: var dom = $obj.get(下标);

案例:

function hide(){

var img = document.getElementById("i1");

var$img = $(img);

$img.fadeOut(5000);

$img.get(0).src="images/13.jpg";

}

function show(){

var img = document.getElementById("i1");

var$img = $(img);

$img.fadeIn(5000);

$img.get(0).src="images/13.jpg";

}

显示

隐藏

选择器

Jquery中查找一个或一组元素的方式,不是通过document.getElementByxx的方式.

而是通过CSS的选择器技术来完成的(CSS中的选择器,在Jquery中都可以使用)

通过选择器,在Jquery中得到的对象不是DOM对象,而是Jquery对象!

选择器如何使用

使用格式: var $obj = $("选择器");

基本选择器***

lid选择器格式:var $obj = $(" id值");

l类选择器格式:var $obj = $(".class值");

l标签名称选择器格式:var $obj = $("标签名称");

四、Jquery对象的样式函数***

格式:

$obj.css(JSON对象);

例如:

修改所有div的文本颜色为红色,字体大小为16px

$("div").css({

"color":"red",

"font-size":"16px"

});

Jquery对象的隐藏与显示函数:

$obj.hide(毫秒) //隐藏

$obj.show(毫秒) //显示

$obj.fadeIn(毫秒) //淡入

$obj.fadeOut(毫秒) //淡出

Jquery 02

筛选选择器

基本筛选选择器熟悉

格式

:firs

t:匹配第一个元素

:last:匹配最后一个元素

:not(条件选择器):排除符合条件选择器的元素!

:even:匹配偶数下标元素

:odd:匹配奇数下标元素

:eq(下标):取出指定下标元素

:gt(下标):取出大于指定下标的元素

:lt(下标):取出小于指定下标的元素

案例:

$(function(){

$("button").bind("click",x1);

});

functionx1(){

vartext = $("span").html();

varnum = new Number(text);

num--;

$("span").html(num);

if(num==1){

$("button").unbind("click");

$("button").css({"color":"999"});

}

}

-10