相信很多java程序员用过jQuery,知道jQuery使用起来很便利,但, 熟悉使用 jQuery是个什么概念呢?
今天,总结一下 jQuery的相关知识,目的,很简单,看看熟练运用 jQuery这个要求具体怎么才能达标。
学习 jQuery,W3school是个好去处。
一、 jQuery是什么
jQuery 是一个 JavaScript 库。
jQuery 极大地简化了 JavaScript 编程。
jQuery 很容易学习。
二、jQuery能做什么
jQuery 是一个 JavaScript 函数库。
jQuery 库包含以下特性:
HTML 元素选取
HTML 元素操作
CSS 操作
HTML 事件函数
JavaScript 特效和动画
HTML DOM 遍历和修改
AJAX
Utilities
三、如何使用jQuery
通过一行简单的标记被添加到网页中
例如:
3.1 jQuery 选择器
$("p").css("background-color","red");//把所有 p 元素的背景颜色更改为红色
3.2 jQuery 事件
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").hide();//隐藏所有 <p> 元素
});
});
</script>
</head>
<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Click me</button>
</body>
</html>
3.3 jQuery 效果
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#hide").click(function(){
$("p").hide();
});
$("#show").click(function(){
$("p").show();
});
});
</script>
</head>
<body>
<p id="p1">如果点击“隐藏”按钮,我就会消失。</p>
<button id="hide" type="button">隐藏</button>
<button id="show" type="button">显示</button>
</body>
</html>
3.4 jQuery 动画
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#start").click(function(){
$("#box").animate({height:300},"slow");
$("#box").animate({width:300},"slow");
$("#box").animate({height:100},"slow");
$("#box").animate({width:100},"slow");
});
});
</script>
</head>
<body>
<p><a href="#" id="start">自定义动画</a></p>
<div id="box"
style="background:#98bf21;height:100px;width:100px;position:relative">
</div>
</body>
</html>
3.5 jQuery Callback 函数
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").hide(1000,function(){
alert("The paragraph is now hidden");
});
});
});
</script>
</head>
<body>
<button type="button">Hide</button>
<p>This is a paragraph with little content.</p>
</body>
</html>
3.6 jQuery HTML 操作
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").html("W3School");
});
});
</script>
</head>
<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button type="button">更改标签内容(innerHtml)</button>
</body>
</html>
3.7 jQuery AJAX 函数
jQuery 的 load 函数是一种简单的(但很强大的)AJAX 函数。
目的,写的更少,做的更多
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#b01").click(function(){
$('#myDiv').load('/jquery/test1.txt');
});
});
</script>
</head>
<body>
<div id="myDiv"><h2>通过 AJAX 改变文本</h2></div>
<button id="b01" type="button">改变内容</button>
</body>
</html>
四、如何学习jQuery
看了上面的例子之后,应该清楚了吧,jQuery就是让开发人员写的更少,而做的更多。
如何学习,很简单,首先是想到要实现什么效果,然后查询jQuery 参考手册 ,然后就去实现。
有空的时候,可以自己实现实现更多的效果。
慢慢的,就熟悉了,也就能熟练运用jQuery。
五、后记
任何一种语言、框架、开发模式、开发组件,对于一个程序员来说,都可以视之为图书馆里陈列的书籍。选择喜欢的,然后阅读,然后整理,然后运用,最后,就是自己的知识了,懂的越多,能够创造的也就越多了。
dml@2012.12.4