最简单的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 相关文章推荐
网站导致浏览器崩溃的原因总结(多款浏览器) 推荐
Apr 15 Javascript
jquery 学习之一 对象访问
Nov 23 Javascript
js的参数有长度限制吗?发现不能超过2083个字符
Apr 20 Javascript
jquery实现点击页面计算点击次数
Jan 23 Javascript
JS实现在线统计一个页面内鼠标点击次数的方法
Feb 28 Javascript
jquery实现华丽的可折角广告代码
Sep 02 Javascript
jQuery实现表格隔行及滑动,点击时变色的方法【测试可用】
Aug 20 Javascript
jquery的父、子、兄弟节点查找,节点的子节点循环方法
Dec 07 Javascript
纯js实现倒计时功能
Jan 06 Javascript
vue一步步实现alert功能
Jul 05 Javascript
微信小程序的部署方法步骤
Sep 04 Javascript
vuex 实现getter值赋值给vue组件里的data示例
Nov 05 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 utf-8编码问题,utf8编码,数据库乱码,页面显示输出乱码
2013/04/08 PHP
基于empty函数的判断详解
2013/06/17 PHP
php实现webservice实例
2014/11/06 PHP
php生成随机颜色的方法
2014/11/13 PHP
php编写批量生成不重复的卡号密码代码
2015/05/14 PHP
Yii2实现自定义独立验证器的方法
2017/05/05 PHP
PHP实现八皇后算法
2019/05/06 PHP
PHP图像处理 imagestring添加图片水印与文字水印操作示例
2020/02/06 PHP
Mootools 1.2教程 排序类和方法简介
2009/09/15 Javascript
javascript动态创建链接的方法
2015/05/13 Javascript
javascript实时显示当天日期的方法
2015/05/20 Javascript
分享有关jQuery中animate、slide、fade等动画的连续触发、滞后反复执行的bug
2016/01/10 Javascript
JavaScript对Json的增删改属性详解
2016/06/02 Javascript
javaScript如何跳出多重循环break、continue
2016/09/01 Javascript
node.js平台下的mysql数据库配置及连接
2017/03/31 Javascript
详解react-router4 异步加载路由两种方法
2017/09/12 Javascript
vue.js中npm安装教程图解
2018/04/10 Javascript
jQuery实现模糊查询的方法分析
2018/05/10 jQuery
vue点击input弹出带搜索键盘并监听该元素的方法
2018/08/25 Javascript
js计算两个时间差 天 时 分 秒 毫秒的代码
2019/05/21 Javascript
vue-cli配置全局sass、less变量的方法
2019/06/06 Javascript
layer.msg()去掉默认时间,实现手动关闭的方法
2019/09/12 Javascript
vue+element-ui表格封装tag标签使用插槽
2020/06/18 Javascript
vue+高德地图实现地图搜索及点击定位操作
2020/09/09 Javascript
解决elementui表格操作列自适应列宽
2020/12/28 Javascript
通过vue.extend实现消息提示弹框的方法记录
2021/01/07 Vue.js
Python使用matplotlib绘制动画的方法
2015/05/20 Python
python实现对任意大小图片均匀切割的示例
2018/12/05 Python
python实现函数极小值
2019/07/10 Python
通过一张图教会你CSS3倒影的实现
2017/09/26 HTML / CSS
个人优缺点自我评价
2014/01/27 职场文书
和睦家庭事迹
2014/05/14 职场文书
运动员获奖感言
2014/08/15 职场文书
技术股东合作协议书
2014/12/02 职场文书
重温经典:乔布斯在斯坦福大学的毕业演讲(双语)
2019/08/26 职场文书
Redis 限流器
2022/05/15 Redis