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”的元素
- 当然也可以叠加使用
- selector代表要选的元素
- 属性选择器
- $(“[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);