当前位置: 首页 > 图文教程 > 网络编程 > Javascript > 最简单的jQuery程序 入门者学习

Javascript
二级连动的另一个不错的实现方法
键盘元素的控制小方块的移动效果
如何丰富alt属性的显示效果
鼠标移动到某个单元格上后，整个列都变色的实现方法
用JavaScript实现字符串切分功能
通过JAVAScript实现页面自适应
短信提示使用 特效
一个多次搜索+多次传值的解决方案
javascript读取RSS数据
WEB泡泡堂2.0（图形界面+电脑对玩）(javascript)
ＪＳ＋ＦＬＡＳＨ幻灯片播放图片脚本，整理了代码，使得调用更加方便！
利用javascript中的call实现继承
javascript 中对象的继承〔转贴〕
float ad浮动广告代码
showModalDialog 和 showModelessDialog
Ajax::prototype 源码解读
深入认识JavaScript中的函数
Javascript技术技巧大全（五）
通过MSXML2自动获取QQ个人头像及在线情况(给初学者)
用正则xmlHttp实现的偷(转)

No. « 44 45 46 47 »

技术文章搜索

关键字

Javascript 中的 最简单的jQuery程序 入门者学习

出处:互联网   整理: 软晨网（RuanChen.com）   发布: 2009-10-12   浏览: 149 ::
收藏到网摘: n/a

用jQuery写的一个简单的程序,用于入门练习,发给大家,希望初学者有用.
复制代码 代码如下:

<HTML>
<HEAD>
<STYLE type='text/css'>
.css1{
display:block;
width:100px;
height:100px;
background-color:blue;
}
.css2{
display:block;
width:100px;
height:100px;
background-color:red;
}
</STYLE>
</HEAD>
<BODY>
<a href='#' class='css1' id=freee>tt</a>
<script src='jquery-1.3.2.js'>
</script>
<script>
$(document).ready(function(){
$("#freee").hover(function(){
$(this).addClass("css2");
}, function(){
$(this).removeClass("css2");
});
});
</script>
</BODY>
</HTML>

Find me:使用选择器和事件
jQuery提供两种方式来选择html的elements，第一种是用CSS和Xpath选择器联合起来形成一个字符串来传送到jQuery的构造器（如：$("div > ul a")）；第二种是用jQuery对象的几个methods(方法)。这两种方式还可以联合起来混合使用。
为了测试一下这些选择器，我们来试着在我们starterkit.html中选择并修改第一个ordered list.
一开始，我们需要选择这个list本身，这个list有一个ID叫“orderedlist”，通常的javascript写法是document.getElementById("orderedlist").在jQuery中，我们这样做：
$(document).ready(function() {
$("#orderedlist").addClass("red");
});这里将starterkit中的一个CSS样式red附加到了orderedlist上(译者Keel注：参考测试包中的css目录下的core.css，其中定义了red样式)。因此，在你刷新了starterkit.html后，你将会看到第一个有序列表(ordered list )背景色变成了红色，而第二个有序列表没有变化.
现在，让我们添加一些新的样式到list的子节点.
$(document).ready(function() {
$("#orderedlist > li").addClass("blue");
});这样，所有orderedlist中的li都附加了样式"blue"。
现在我们再做个复杂一点的，当把鼠标放在li对象上面和移开时进行样式切换，但只在list的最后一个element上生效。
$(document).ready(function() {
$("#orderedlist li:last").hover(function() {
$(this).addClass("green");
}, function() {
$(this).removeClass("green");
});
});还有大量的类似的CSS和XPath例子，更多的例子和列表可以在这里找到。（译者Keel注：入门看此文，修行在个人，要想在入门之后懂更多，所以这段话的几个链接迟早是要必看的！不会又要翻译吧...^_^!）
每一个onXXX事件都有效，如onclick,onchange,onsubmit等，都有jQuery等价表示方法（译者Keel注：jQuery不喜欢onXXX，所以都改成了XXX，去掉了on）。