JavaScript基础（四）jQuery（一）

JavaScript基础（四）jQuery（一）

本文参考了w3schoolhttp://www.w3school.com.cn/jquery/

什么是jQuery

jQuery是一个非常强大、非常非常好用的JavaScript库

可以极大地简化JavaScript编程

如何使用jQuery

在jQuery.com网站下载并添加到项目中去，在js中引入

可以直接从谷歌或微软提供的文件中从网络获取，直接添加网络中的路径

这样有一个好处是很多用户都已经加载过jQuery核心库了，不需要重新加载

！！！！注意！！！！

国内的网络大部分上不了谷歌，但是校园网可以，校园网开发者需要考虑到其他开发者无法下载

建议从微软上加载核心库

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs
/jquery/1.4.0/jquery.min.js"></script>

<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery
/jquery-1.4.min.js"></script>

基本语法

$(selector).action()

$代表jQuery，如果和已有的其他库的重复，可以用jQuery的onconfilct()来更改

selector代表要选的元素

this代表本元素（注意：没有引号）

“p”代表所有段落

“.demo”代表所有class=“demo”的元素

“#demo”代表所有id=“demo”的元素

当然也可以叠加使用

action代表操作

选择器

接上一条的selector

元素选择器

selector代表要选的元素

$(this)代表本元素（注意：没有引号）

$(“p”)代表所有段落

$(“.demo”)代表所有class=“demo”的元素

$(“#demo”)代表所有id=“demo”的元素

当然也可以叠加使用

属性选择器

$(“[href]”)所有带有属性href的元素

$(“[href=’apple.jpg’]”)所有带有href属性而且href的值为apple.jpg的元素

$(“[href!=’apple.jpg’]”)所有带有href属性而且href的值 不是 apple.jpg的元素

("[href=’.jpg’]”)所有带有href属性而且href的后缀为.jpg的元素

css选择器

$(this).css(“backgroung-color”, “red”)

事件

jQuery有很强的事件处理能力

$(document).ready(function(){

//文档加载时粗体就隐藏
$(b).hide();

//点击id=“button1”时段落隐藏
$(#button1).click(function(){
$(p).hide();
});

//双击id=“button2”时斜体隐藏
$(#button2).dblclick(function(){
$(i).hide();
});

//input获得焦点时段落隐藏
$(input).focus(function(){
$(p).hide();
});

//鼠标悬停在button3上段落隐藏
$(#button3).mouseover(function(){
$(p).hide();
});
});

效果

隐藏、显示

可以用于设置“刷新”、“进入”、“删除”等的效果

$(selector).hide(speed, callback);     //隐藏
$(selector).show(speed, callback);     //显示
$(selector).toggle(speed, callback);   //切换（原状态隐藏则显示，原状态显示则隐藏）

speed为变换速度，可以为一下几个值

不写：一瞬间完成

“fast”：快速完成（引号不能省）

“slow”：缓慢完成

1000：1000毫秒完成

callback：执行完隐藏或显示后执行的函数

淡入淡出

可以用于设置“刷新”、“进入”、“删除”等的效果

$(selector).fadeIn(speed,callback);            //淡入
$(selector).fadeOut(speed, callback);      //淡出
$(selector).fadeToggle(speed, callback);   //切换（原状态隐藏则淡入，原状态显示则淡出）
$(selector).fadeTo(speed,opacity,callback);    //淡出到某一透明度或淡入到某一透明度

opacity为透明度，0-1之间

滑动

可以用于“显示更多”和“收起”按钮的设置

$(selector).slideDown(speed, callback);        //滑下展开
$(selector).slideUp(speed, callback);      //滑上收起
$(selector).slideToggle(speed, callback);  //切换（原状态隐藏则滑下展开，原状态显示则滑上收起）

动画

可以对css参数进行调整形成动画

$(selector).animate({params},speed,callback);

{params}为参数列表

例如{left:’250px’}是距左端250px

例如{left:’+=250px’}是距现在位置的左端250px（反复点击会反复右移）

但是在标记属性名的时候必须用Camel标记法

必须使用 paddingLeft 而不是 padding-left

动画队列

可以反复调用animate函数，会按顺序执行

停止动画

停止指定动画

$(selector).stop(stopAll,goToEnd);

stopAll

false（默认）不清空之后的动画队列

true 清空之后的队列

goToEnd：

false（默认）本动画停在此位置

true本动画停在最终应该结束的位置

链接

多个动作指令可以跟在一个对象后面，依次进行

$("#p1").css("color","red").slideUp(2000).slideDown(2000);