最简单的jQuery程序

用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>

$(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）。

最简单的jQuery程序相关推荐

简单引入JQuery
简单引入JQuery 前言环境配置下载官网的JQuery到本机引入JQuery到Html文件中前言作为一个兢兢业业的后端程序猿,这里为了方便自己搭建的项目更加合理,使自己写的接口对前端也更加 ...
子程序调用与宏定义的异同_如何用数控系统进行简单的宏程序调用？老师傅告诉你，用G65就行...
什么是简单调用?很多人都不知道吧,如果想要深入操作宏, 就先要学会变量,学会变量之担,再去操作宏,就会变得非常的简单,今天给大家分享如何用G65进行简单的宏程序调用. 用户宏的简单宏调用是指在主程序中 ...
小程序生命周期_来，简单说说小程序的生命周期?
简单说说小程序的生命周期? 在小程序中生命周期分为三大类应用生命周期页面生命周期组件生命周期应用生命周期 onLaunch(){ console.log('onLaunch监听小程序初始化') ...
编写运行最简单的java程序——使用记事本编写java程序
编写运行最简单的java程序--使用记事本编写java程序第一个java程序--使用记事本编辑经过上篇文章的java环境搭建成功的小伙伴们可以在自己的计算机上编写属于自己的java程序了yo~ 还 ...
用java做一个简单记事本_用记事本写一个简单的java程序
用记事本写一个简单的java程序第一步: 安装好jdk,并设置好环境变量. 桌面-计算机(右键)-属性-高级系统设置-环境变量-path-在变量值后加上:和jdk安装路径加上(路径即为C:\Prog ...
matlab简单程序实例_visual basic VB.NET实例系列教程第一节（简单实用抽奖程序）...
近期疫情原因,工作比较不忙,所以打算出一套零基础,VB.NET实例系列入门教程,实用又好玩,带大家进入VB的编程世界里,希望这套图文教程能帮到有需要的人! 第一节(简单实用抽奖程序) 内容准备:编译环 ...
BizTalk 2006 简单入门示例程序（附源项目文件下载）
BizTalk 2006 简单入门示例程序(附源项目文件下载) 为初学BizTalk Server 2006的开发人员,提供一个简单入门的示例程序,包括一个Receive Port.Send Port ...
通过汇编一个简单的C程序，分析汇编代码理解计算机是如何工作的
实验目的: 通过反汇编一个简单的C程序,分析汇编代码理解计算机是如何工作的实验过程: 通过vi程序进行编程: int g(int x) { return x + 3; } int f(int x) ...
JAVA同时输入用户名和密码_用java模拟设计一个简单的“用户注册”程序。当用户输入用户名和密码时,单击“注...
用java模拟设计一个简单的"用户注册"程序.当用户输入用户名和密码时,单击"注 2020 - 9 - 26 TAG : 所有功能均已实现,如有不满意的地方我再修改imp ...

最简单的jQuery程序

最简单的jQuery程序相关推荐

最新文章

热门文章