最简单的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 相关文章推荐
疯掉了,尽然有js写的操作系统
Apr 23 Javascript
jquery表单验证使用插件formValidator
Nov 10 Javascript
JS去除iframe滚动条的方法
Apr 01 Javascript
js实现仿阿里巴巴城市选择框效果实例
Jun 24 Javascript
第一次接触神奇的Bootstrap网格系统
Jul 27 Javascript
前端页面文件拖拽上传模块js代码示例
May 19 Javascript
微信小程序开发之toast等弹框提示使用教程
Jun 08 Javascript
vue二级路由设置方法
Feb 09 Javascript
微信小程序实现聊天对话(文本、图片)功能
Jul 06 Javascript
layui实现数据分页功能
Jul 27 Javascript
JS+DIV实现拖动效果
Feb 11 Javascript
JS定时器如何实现提交成功提示功能
Jun 12 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
一个php作的文本留言本的例子(五)
2006/10/09 PHP
设置下载不需要倒计时cookie(倒计时代码)
2008/11/19 Javascript
jQuery 使用手册(六)
2009/09/23 Javascript
JavaScript 基础篇(一)
2012/03/30 Javascript
JavaScript获取元素尺寸和大小操作总结
2015/02/27 Javascript
tuzhu_req.js 实现仿百度图片首页效果
2015/08/11 Javascript
比较常见的javascript中定义函数的区别
2015/11/09 Javascript
基于vuejs实现一个todolist项目
2017/04/11 Javascript
基于匀速运动的实例讲解(侧边栏,淡入淡出)
2017/10/17 Javascript
Angular如何在应用初始化时运行代码详解
2018/06/11 Javascript
微信小程序 slot踩坑的解决
2019/04/01 Javascript
javascript for循环性能测试示例
2019/08/07 Javascript
vue 父组件通过$refs获取子组件的值和方法详解
2019/11/07 Javascript
微信小程序中data-key属性之数据传输(经验总结)
2020/08/22 Javascript
逐行分析鸿蒙系统的 JavaScript 框架(推荐)
2020/09/17 Javascript
angular共享依赖的解决方案分享
2020/10/15 Javascript
使用Python编写类UNIX系统的命令行工具的教程
2015/04/15 Python
从Python程序中访问Java类的简单示例
2015/04/20 Python
Python for Informatics 第11章之正则表达式(二)
2016/04/21 Python
python中Switch/Case实现的示例代码
2017/11/09 Python
Python简单生成随机数的方法示例
2018/03/31 Python
Django项目开发中cookies和session的常用操作分析
2018/07/03 Python
Python数据可视化库seaborn的使用总结
2019/01/15 Python
python使用PyQt5的简单方法
2019/02/27 Python
Python argparse模块使用方法解析
2020/02/20 Python
JupyterNotebook 输出窗口的显示效果调整方法
2020/04/13 Python
keras 使用Lambda 快速新建层 添加多个参数操作
2020/06/10 Python
Python 实现RSA加解密文本文件
2020/12/30 Python
Python 打印自己设计的字体的实例讲解
2021/01/04 Python
python+selenium自动化实战携带cookies模拟登陆微博
2021/01/19 Python
CSS3实现多背景模拟动态边框的效果
2016/11/08 HTML / CSS
Css3新特性应用之形状总结
2016/12/08 HTML / CSS
美国农场商店:Blain’s Farm & Fleet
2020/01/17 全球购物
linux面试题参考答案(7)
2012/10/29 面试题
八项规定对照检查材料
2014/08/31 职场文书
五年级作文之成长
2019/09/16 职场文书