JQuery的学习

来源：互联网发布：阿里云静态页面托管编辑：程序博客网时间：2024/06/17 16:35

jQuery优势：

•轻量级
•强大的选择器
•出色的浏览器兼容性（!）
•链式操作方式
•隐式迭代
•行为层与结构层的分离
•丰富的插件支持
•开源(!)

下载jQuery库：http://docs.jquery.com/Downloading_jQuery

Eclipse插件

1、在线安装：Help->Install New Software...->Add...->Name: “Aptana” Location:http://download.aptana.com/tools/studio/plugin/install/studio下载完毕重启Eclipse,Aptana插件安装成功,支持javascript智能提示功能,但还不支持jQuery智能提示,需要再安装支持jQuery智能提示的插件。

2、 Window->My Studio打开Aptana的首页,单击首页上面的Plugins,选择Ajax下面的jQuery Support,单击Get It即可安装jQuery智能提示的插件。

3、新建一个js文件就会有jQuery智能提示了。

核心函数jQuery，简写为$

window.onload VS $(document).ready()

window.onload

$(document).ready()

执行时机

必须等待网页中所有内容加载完毕后(包括图片)才能执行

网页中所有DOM结构绘制完毕后就执行，可能DOM元素关联的东西并没有加载完

编写个数

不能同时编写多个

后面的方法会覆盖前面的

参照示例：jQuery_ch01_VS(js).htm

能同时编写多个

参照示例：jQuery_ch01_VS(jQuery).htm

简化写法

无

$(function(){

});

第一个jQuery程序：

// 等待DOM元素加载完毕

$(function () {

// 弹出提示对话框

alert("Hello World!");

});

</script>

基本选择器：

• #id 根据ID取得元素

例：$(“#test”)

• element 根据标签名取得一组元素

例：$(“div”)

• .class 根据样式名取得一组元素

例：$(“.highlight”)

• 事件语法

• jQuery对象.事件名(function(){

• …

• });

// 为按钮btnTest添加点击事件

$(“#btnTest”).click(function(){

…

});

// 为所有层添加点击事件

$(“div”).click(function(){

…

});

• hover(over, out)

一个模仿悬停事件（鼠标移动到一个对象上面及移出这个对象）的方法。

• toggle(fn1, fn2, …)

每次点击后依次调用函数。

• 显示/隐藏（show/hide）

• 滑动(slideDown/slideUp)

• 淡入淡出(fadeIn/fadeOut)

jQuery中$.trim()用于去除字符串两端空格

defaultValue可以获取文本框的默认值

JQuery的第一章学习：

<html><head><script src="jquery-1.4.1.js" type="text/javascript"/></script><script type="text/javascript">//$(function (){alert('第一个jQuery函数');});//$(document).ready(function(){alert('jQuery允许执行ready事件');});//$(function(){//$("#but").click(function(){alert('通过jquery对象给标签添加事件');});//$("div").click(function (){alert('给DIV添加事件');});////}//);$(document).ready(function(){$("#but1").click(function(){alert('通过jquery对象给标签添加事件');});$("#but").toggle(function(){alert('A')},function(){alert('B')});$("#but1").hover(function(){$("div").text("SSSSSSSSSSSSSSSSS");},function(){$("div").text("BBBBBBBBBBBBBBBBBB");});//显示/隐藏效果 slow=600  normal=400  fast=200$("#p1").show("normal",function(){$("#p1").text("----------------");});$("#p2").hide(3000);//滑动$("#but2").toggle(function(){$("#p3").slideUp("4000",function(){$("#p3")});},function(){$("#p3").slideDown("2000",function(){alert('***********')});});$("img").hover(function(){$(this).slideUp("2000");},function(){$(this).slideDown("2000");});//淡入淡出$("#but3").toggle(function(){$("#p4").fadeOut("slow")},function(){$("#p4").fadeIn("slow")});$("ul > li").css({color: "#ff0011", background: "blue",float:"left",width:"100px"});$("ul > li").hover(function(){$(this).stop().animate({top:"50px"},400);},function(){$(this).stop().animate({top:"0px"},400);});});</script></head><body><input id="but" type="button" value="测试按钮"/><input id="but1" type="button" value="测试按钮1"/><input id="but2" type="button" value="滑动效果"/><input id="but3" type="button" value="淡入淡出"/><div width="200" >-----------</div><!--<div style="height:30px;"><img  src="1.jpg" width="100" height="30"/><img  src="1.jpg" width="100" height="30"/><img  src="1.jpg" width="100" height="30"/><img  src="1.jpg" width="100" height="30"/><img  src="1.jpg" width="100" height="30"/><img  src="1.jpg" width="100" height="30"/></div> <HR><p  id="p1" style="display: none">Hello</p><p id="p2" style="display: inline">Hello</p>--><p id="p3" style="display: inline">滑动效果</p><p id="p4" style="display: inline">淡入淡出</p><hr><ul><li>系统管理</li><li>商品管理</li><li>销售管理</li><li>报表展示</li></ul></body></html>