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


Posted in Javascript onJuly 09, 2009
<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)。

Javascript 相关文章推荐
从阿里妈妈发现的几个不错的表单验证函数
Sep 21 Javascript
基于JQuery框架的AJAX实例代码
Nov 03 Javascript
javascript判断office版本示例
Apr 11 Javascript
jquery+php随机生成红包金额数量代码分享
Aug 27 Javascript
JS实现仿Windows经典风格的选项卡Tab切换代码
Oct 20 Javascript
将鼠标焦点定位到文本框最后(代码分享)
Jan 11 Javascript
JS实现根据密码长度显示安全条功能
Mar 08 Javascript
ES6中的class是如何实现的(附Babel编译的ES5代码详解)
May 17 Javascript
node学习笔记之读写文件与开启第一个web服务器操作示例
May 29 Javascript
使用webpack/gulp构建TypeScript项目的方法示例
Dec 18 Javascript
keep-alive不能缓存多层级路由菜单问题解决
Mar 10 Javascript
如何在vue中使用jointjs过程解析
May 29 Javascript
Jquery 组合form元素为json格式,asp.net反序列化
Jul 09 #Javascript
JS 巧妙获取剪贴板数据 Excel数据的粘贴
Jul 09 #Javascript
JavaScript 继承的实现
Jul 09 #Javascript
jquery text,radio,checkbox,select操作实现代码
Jul 09 #Javascript
javascript 字符 Escape,encodeURI,encodeURIComponent
Jul 09 #Javascript
jQuery 1.3 和 Validation 验证插件1.5.1
Jul 09 #Javascript
javascript xml为数据源的下拉框控件
Jul 07 #Javascript
You might like
smarty模板中使用get、post、request、cookies、session变量的方法
2014/04/24 PHP
PHP、Nginx、Apache中禁止网页被iframe引用的方法
2020/10/01 PHP
PHP5.4起内置web服务器使用方法
2016/08/09 PHP
PHP将URL转换成短网址的算法分享
2016/09/13 PHP
Javascript 获取链接(url)参数的方法
2009/02/15 Javascript
utf-8编码引起js输出中文乱码的解决办法
2010/06/23 Javascript
jquery预览图片实现鼠标放上去显示实际大小
2014/01/16 Javascript
Javascript中this的用法详解
2014/09/22 Javascript
jQuery实现长按按钮触发事件的方法
2015/02/02 Javascript
js代码实现点击按钮出现60秒倒计时
2021/01/28 Javascript
jQuery模拟实现的select点击选择效果【附demo源码下载】
2016/11/09 Javascript
bootstrap table动态加载数据示例代码
2017/03/25 Javascript
node.js基于express使用websocket的方法
2017/11/09 Javascript
node中的密码安全(加密)
2018/09/17 Javascript
Nodejs把接收图片base64格式保存为文件存储到服务器上
2018/09/26 NodeJs
javascript 内存模型实例详解
2020/04/18 Javascript
浅谈vue中$event理解和框架中在包含默认值外传参
2020/08/07 Javascript
原生js+canvas实现验证码
2020/11/29 Javascript
node.js通过Sequelize 连接MySQL的方法
2020/12/28 Javascript
[01:25:33]完美世界DOTA2联赛PWL S3 INK ICE vs Magma 第二场 12.20
2020/12/23 DOTA
利用Python的Django框架生成PDF文件的教程
2015/07/22 Python
python利用sklearn包编写决策树源代码
2017/12/21 Python
纯DOM+CSS3实现简单的小风车动画
2016/09/27 HTML / CSS
哥伦比亚最大的网上商店:Linio哥伦比亚
2016/09/25 全球购物
请说出这段代码执行后a和b的值分别是多少
2015/03/28 面试题
求职自荐书范文
2013/12/04 职场文书
医学院校毕业生自荐信范文
2014/01/01 职场文书
运动会广播稿400字
2014/01/25 职场文书
《小白兔和小灰兔》教学反思
2014/02/18 职场文书
小学生元旦感言
2014/02/26 职场文书
房产转让协议书
2014/04/11 职场文书
乡镇党的群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
2014县政府领导班子对照检查材料思想汇报
2014/09/25 职场文书
2015年机关党委工作总结
2015/05/23 职场文书
Redis安装启动及常见数据类型
2021/04/14 Redis
python实现监听键盘
2021/04/26 Python