初学Jquery

最新推荐文章于 2021-09-28 17:39:11 发布

DeeLu

最新推荐文章于 2021-09-28 17:39:11 发布

阅读量158

点赞数

分类专栏： Javascript 文章标签： jQuery Ajax JavaScript CSS IE ViewUI

Javascript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

知道Jquery已经很长时间了，但从来没有应用过，今天打算学习一些简单的功能以及在日常项目中经常使用的效果。

官方网站：http://jquery.com/ 下载地址：http://code.google.com/p/jqueryjs/downloads/detail?name=jquery-1.3.2.min.js&downloadBtn=

其宗旨是——WRITE LESS,DO MORE,写更少的代码,做更多的事情。

[b][size=medium]1、首先来看一个click点击实例：[/size][/b]

[b]html code:[/b]

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#divclick").click(function(){alert("hello jquery");});
});
</script>
</HEAD>
<BODY>
<div id="divclick">1、鼠标点击时触发——点击此处</div>
<hr />
</BODY>
</HTML>

分析一下：

$(document).ready(function(){}); 当文档对象载入完成后的事件。相当于我们以往在body标签的写onload(function(){})。

$("#divclick").click(function(){alert("hello jquery");}); 对ID为divclick的对象的一个鼠标点击事件进行了处理，$("#divclick")等价于document.getElementById("divclick")。

跟以往的对比，1、获取一个对象不用document.getElementById("divclick")这样长的方法，只需$("#divclick").2、以往事件总是与函数放在dom对象里面写的如：<div id=”divclick” οnclick=”a()”>点击</div> 现在只需$("#divclick").click()，对对象的事件处理放在javascript代码里，实现了javascrīpt代码与html代码分离。
[img]http://images.cnblogs.com/cnblogs_com/liping19851014/WindowsLiveWriter/Jquery_A74E/image_2.png[/img]

[b][size=medium]2、动态为对象增加样式[/size][/b]

[b]css code:[/b]

<style>
.red{
color:red;
}
</style>

[b]javascript code:[/b]

<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#divcssclass").click(function(){$("#divcssclass").addClass("red");});
});
</script>

[b]dom code:[/b]

<div id="divcssclass">2、点击后字体颜色变成红色——点击</div>
[img]http://images.cnblogs.com/cnblogs_com/liping19851014/WindowsLiveWriter/Jquery_A74E/image_4.png[/img]

[b][size=medium]3、对象效果，show()、hide()方法[/size][/b]

show():显示隐藏的匹配元素

hide():隐藏所有匹配的元素

例如：

[b]javascript code:[/b]

<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#divclickshow").click(function(){$("#divshow").show();});
$("#divclickhide").click(function(){$("#divshow").hide();});
});
</script>

[b]dom code:[/b]

<span id="divshow" style="display:none">3、显示隐藏的匹配元素</span>
<span id="divclickshow">显示</span>
<span id="divclickhide">隐藏</span>

如果还想在显示或隐藏的时候来点动画的话：可以用show("slow")和hide("slow")看看效果。

[img]http://images.cnblogs.com/cnblogs_com/liping19851014/WindowsLiveWriter/Jquery_A74E/image_6.png[/img]

对象的效果还有toggle()、slideDown(speed, [callback])、fadeIn(speed, [callback])等等。。。。在jquery的API手册里都有。

[b][size=medium]4、利用Jquery实现的菜单[/size][/b]

先来认识将要用到的知识：

1、$("#mainNav > li")，匹配ID为mainNav的对象下面所有的子元素li。结果是一个数组对象。

2、li.each(function(i){})，上面说到获得的li是一个数组对象，此方法为遍历这个对象，function(i){}中的i为遍历对象的索引。

3、li.eq(i).hover()，当li数组成员索引为i时调用hover方法。

4、hover(over, out),鼠标移动到一个对象上面及移出这个对象的方法,over是鼠标移动到该对象时调用的方法，out是鼠标离开该对象时调用的方法。

[b]css code:[/b]
<style type="text/css">
*{ margin:0px; padding:0px; list-style:none; }
body{ font-size:12px; }
.nav{ float:left; clear:both; margin:100px; display:inline; }
.nav li{ float:left; position:relative; }
.nav li a{ display:block; width:60px; padding:8px 0px 6px; text-align:center; color:#000; background:#ccc; text-decoration:none; }
.nav li a:hover { background:#666; color:#fff; }
.nav li ul{ position:absolute; display:none; }
.nav li ul li { float:none; }
.nav li ul li a{ background:#eee; }
</style>

[b]javascript code:[/b]
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var li = $("#mainNav > li"); //找到#mainNav中子元素li,得到数组li；
li.each(function(i){ //循环每一个LI
li.eq(i).hover(
function(){
$(this).find("ul").show(); //鼠标移到到上面时找到li里面的ul元素设置为显示
},
function(){
$(this).find("ul").hide(); //鼠标离开时找到li里面的ul元素设置为隐藏
}
)
})
})
</script>
[b]dom code:[/b]

<BODY>
<ul id="mainNav" class="nav" >
<li><a href="#">首页</a></li>

<li><a href="#">公司简介</a>
<ul>
<li><a href="#">员工介绍</a></li>
</ul>
</li>

<li><a href="#" >部门情况</a>
<ul>
<li><a href="#">技术部</a></li>
<li><a href="#">运维部</a></li>
</ul>
</li>
</ul>
</BODY>
[img]http://images.cnblogs.com/cnblogs_com/liping19851014/WindowsLiveWriter/Jquery_A74E/image_8.png[/img]

[b][size=medium]5、Jquery实现ajax[/size][/b]

如果手动创建XMLHttpRequest对象发送异步请求，过去我们要写一大段代码，如：

<script type="text/javascript">
var req = null;
function processReqChange() {
if (req.readyState == 4 && req.status == 200 ) {
var dobj = document.getElementById( 'htmlDiv' );
dobj.innerHTML = req.responseText;
}
}

function loadUrl( url ) {
if(window.XMLHttpRequest) {
try { req = new XMLHttpRequest();
} catch(e) { req = false; }
} else if(window.ActiveXObject) {
try { req = new ActiveXObject('Msxml2.XMLHTTP');
} catch(e) {
try { req = new ActiveXObject('Microsoft.XMLHTTP');
} catch(e) { req = false; }
} }
if(req) {
req.onreadystatechange = processReqChange;
req.open('GET', url, true);
req.send('');
}
}
loadUrl( “aaa.html”);

</script> ——最后将异步执行的结果，赋到id为htmlDiv元素之上。

因为jquery底层已经对ajax进行了现实，大多数情况下你无需直接操作XMLHttpRequest对象，在高层你只需调用$.get, $.post 等。如：

[b]javascript code:[/b]

<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#divclickajax").click(function(){
$.get("aaa.html",function(text){
alert(text);
});
});
})
</script>

[b]dom code:[/b]

<div id="divclickajax">点击执行ajax请求</div>

aaa.html 内容：

ajax text!

[img]http://images.cnblogs.com/cnblogs_com/liping19851014/WindowsLiveWriter/Jquery_A74E/image_10.png[/img]

jquery为我们的应用程序编写js脚本提供了许多方便，并且很好的现实了html代码与js分离，在用jquery的时候，我确实感觉到了它的优雅。