最简单的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支持带x身份证号码验证函数
Aug 10 Javascript
javascript下数值型比较难点说明
Jun 07 Javascript
jQuery 源码分析笔记(4) Ready函数
Jun 02 Javascript
javascript操作JSON的要领总结
Dec 09 Javascript
jQuery ajax dataType值为text json探索分享
Sep 23 Javascript
javascript基于HTML5 canvas制作画箭头组件
Jun 25 Javascript
详细解读JavaScript编程中的Promise使用
Jul 27 Javascript
JavaScript简单实现鼠标移动切换图片的方法
Feb 23 Javascript
Bootstarp 基础教程之表单部分实例代码
Feb 03 Javascript
vue-cli脚手架搭建的项目去除eslint验证的方法
Sep 29 Javascript
微信小程序代码上传、审核发布小程序
May 18 Javascript
详解ES6 CLASS在微信小程序中的应用实例
Apr 24 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中调用php内置函数的方法
2013/02/07 PHP
教你如何开启shopnc b2b2c 伪静态
2014/10/21 PHP
thinkphp判断访客为手机端或PC端的方法
2014/11/24 PHP
PHP实现检测客户端是否使用代理服务器及其匿名级别
2015/01/07 PHP
js 手机号码合法性验证代码集合
2012/09/29 Javascript
js操作CheckBoxList实现全选/反选(在客服端完成)
2013/02/02 Javascript
jquery获取子节点和父节点的示例代码
2013/09/10 Javascript
扒一扒JavaScript 预解释
2015/01/28 Javascript
JQuery的ON()方法支持的所有事件罗列
2015/02/28 Javascript
jquery实现简单的全选和反选功能
2016/01/02 Javascript
jQuery技巧之让任何组件都支持类似DOM的事件管理
2016/04/05 Javascript
jQuery Mobile操作HTML5的常用函数总结
2016/05/17 Javascript
鼠标经过出现气泡框的简单实例
2017/03/17 Javascript
Angular 4.x中表单Reactive Forms详解
2017/04/25 Javascript
微信页面弹出键盘后iframe内容变空白的解决方案
2017/09/20 Javascript
微信小程序实现点击按钮修改字体颜色功能【附demo源码下载】
2017/12/05 Javascript
vue-cli 引入jQuery,Bootstrap,popper的方法
2018/09/03 jQuery
ES6 如何改变JS内置行为的代理与反射
2019/02/11 Javascript
jQuery实现checkbox全选、反选及删除等操作的方法详解
2019/08/02 jQuery
vue中上传视频或图片或图片和文字一起到后端的解决方法
2019/12/01 Javascript
vue 如何从单页应用改造成多页应用
2020/10/23 Javascript
python按照多个字符对字符串进行分割的方法
2015/03/17 Python
详解使用Python处理文件目录的相关方法
2015/10/16 Python
再谈Python中的字符串与字符编码(推荐)
2016/12/14 Python
简单了解OpenCV是个什么东西
2017/11/10 Python
python按行读取文件,去掉每行的换行符\n的实例
2018/04/19 Python
python绘制规则网络图形实例
2019/12/09 Python
python3 简单实现组合设计模式
2020/07/02 Python
CSS3中的Transition过度与Animation动画属性使用要点
2016/05/20 HTML / CSS
关于HTML5的22个初级技巧(图文教程)
2012/06/21 HTML / CSS
夏威夷灵感服装及配饰:Reyn Spooner
2018/09/18 全球购物
最热门的自我评价
2013/12/30 职场文书
英语专业毕业生自荐信范文
2013/12/31 职场文书
2014旅游局领导班子四风问题对照检查材料思想汇报
2014/09/19 职场文书
学习经验交流会总结
2015/11/02 职场文书
uni-app 微信小程序授权登录的实现步骤
2022/02/18 Javascript