您的位置：首页 > Web前端 > JQuery

JQuery的学习

2013-08-31 08:53 274 查看

jQuery优势：

•轻量级

•强大的选择器

•出色的浏览器兼容性（!）

•链式操作方式

•隐式迭代

•行为层与结构层的分离

•丰富的插件支持

•开源(!)

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



<script type="text/jscript" src="js/jquery-1.4.1.js"></script>

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程序：



<script type="text/jscript" src="js/jquery-1.4.1.min.js"></script>

<script type="text/javascript">

        // 等待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>


<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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航