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
领取专属 10元无门槛券
私享最新 技术干货