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

2014-10-30  来源:本站原创  分类:jquery  人气:1 

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

相关文章
  • 最简单的jQuery程序 入门者学习 2014-10-30

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

  • C#Web应用程序入门经典学习笔记之二 2015-02-17

    读取Web.config中设置 Conn = new SqlConnection(ConfigurationSettings.AppSettings["cnFriends.ConnectString"]); <appSettings> <!-- User application and configured property settings go here.--> <!-- Example: <add key="settingName&q

  • C#Web应用程序入门经典学习笔记之一 2015-02-02

    最近看了<Beginning C# Web Applications Wtith Visual Studio .Net >.感觉这本书在一些细节方面写的不错,特做笔记,为后来者提供一些或许有用的东东.今天先写出来一些,年前正确整理完. 当前日期: Lbll.Text = DateTime.Now.ToLongDataString(); This.controls.Add(lbl); URL: HyperLink reg = new HyperLink(); Reg.Text = "R

  • JQuery入门-JQuery程序的代码风格详细介绍 2014-01-23

    良好的代码风格可以有效的增加可读性,本节为大家介绍jQuery程序的代码风格,感兴趣的朋友可以参考下 <jQuery权威指南>第1章jQuery开发入门,本章通过循续渐进的方式,先从jQuery的基础概念入手,介绍jQuery库的下载,引入简单应用方法:后部分侧重于jQuery控制DOM对象和页面CSS样式的介绍,通过一些简单的小示例,使读者对jQuery在页面中的功能应用有一个大致的了解,为下一章节进一步学习jQuery库的详细对象和方法奠定基础.本节为大家介绍jQuery程序的代码风格.

  • JQuery学习笔录 简单的JQuery 2015-03-30

    尺寸小.使用简单方便(Write Less, Do More,吃得少干得多,而且目前许多大公司都在支持JQuery,例如微软,微软把JQuery继承在了vs2010中 JQuery简介 普通JavaScript的缺点:每种控件的操作方式不统一,不同浏览器下有区别,要编写跨浏览器的程序非常麻烦.因此出现了很多对JavaScript的封装库,比如Prototype.Dojo.ExtJS.JQuery等,这些库对JavaScript进行了封装,简化了开发.这些库是对JavaScript的封装,也就是咱

  • jquery Moblie入门-hello world的示例代码学习 2015-04-17

    jquery Moblie入门:Hello World的示例代码学习,感兴趣的朋友可以了解下哦 1.需要运行JQuery Mobile 移动应用页面,需要下载JQuery Mobile 3个相关插件文件(有多版本),jquery.mobile-1.2.0.min.css.jquery-1.8.3.min.js.jquery.mobile-1.2.0.min.js,JQuery Mobile官网地址:http://jquerymobile.com 2.将插件文件加载到页面中,注意它们的加载顺序,语

  • Android开发入门之学习笔记(三):程序窗口的布局 2013-01-21

    Android应用程序的用户界面可以看作是由View和View Group组成的,从字面意思上就可以看出,View Group是可以包含多个View的.借用官方教程的图可以更容易理解: 说到这里,我们还没有解释,何为View?其实就是我们所看到的按钮.文本编辑框之类的.换句话说,View是一些用户可以看得见的窗口小部件,而ViewGroup则是用户看不见的,它的作用是更好的组织和布局View. 由于我们是初学者,所以可以简单的来归纳一下: Android应用程序通过 res/layout目录下的

  • 给程序入门者的一点建议 2014-11-11

    Java自学之道(一) 给程序入门者的一点建议 在书场上看到很多有关Java的书籍,但这就像进了瓜地里挑瓜挑的眼花,很多人不知道自己到底该选那本书好.很快精通Java可能只有很少一部分人能实现,那就是他曾经精通过哪门语言,因为程序设计语言很好学,只要你精通一门语言,就可以做到一通百通.因为每种语言都有其共同点,就拿C语言来说,由于C语言出现的比较早,用的人也比较多,所以人们都习惯了它的语法规则和设计流程,假如现在出现了一门新的语言,而它和C语言的语法规则是天壤之隔,那么它的结果肯定是被淘汰的对象

  • 一个.NET程序员为什么学习Ruby on Rails? 2013-12-27

    你是一位资深的.NET程序员,而且已经用ASP.NET构建过许多Web应用. 无数个不眠之夜,为了让ASP.NET控件生命周期中的事件驱动模型按你想要的方式执行,你费尽心血,深入细节. 你精通于使用诸如Presentation Model.Model View Presenter这类设计模式对你的应用进行分层,以使其更易测试和维护. 你认为Ruby on Rails只不过是众多被吹嘘的技术中的一员.在它还没有获得可观的市场份额之前,你不会给予它过多的关注. 欢迎来到我的世界.如果你还在读这篇文章

  • 使用Python开发windows GUI程序入门实例 2014-02-12

    这篇文章主要介绍了使用Python开发windows GUI程序入门实例,本文着重介绍开发环境必须的软件,代码实现相对简单,需要的朋友可以参考下 今天终于可以用wxPython开发GUI程序了,非常高兴.把其中的一些注意点写下来以供参考.在windows XP平台下,首先需要做以下环境的配置: 1. 首先是安装python ,安装完之后将python/bin所在目录添加到path中. 2. 安装wxPython, 此时要注意wxPython的版本要与前面python的版本一致. 3. 安装py2

  • 提交表单最简单的AJAX程序分享 2014-02-28

    提交表单的方法有很多,而最简单的AJAX程序就属本文了,个人感觉还不错,喜欢的朋友可以学习下 function tijiao(){ $("#tijiaoanniu").val("提交中..."); $.ajax({ type:'POST', url:'action.php?type=reg', data:$("form").serialize(),//序列化表单里所有的内容 success: function(data){ alert("

  • 编写简单的jQuery提示插件 2014-09-11

    这篇文章主要介绍了自己编写简单的jQuery提示插件的方法及示例,非常的不错,推荐给正在学习jQuery的小伙伴. 很简单的代码,就不多废话了. 代码: /** * 2014年11月13日 * 提示插件 */ (function ($) { $.fn.tips = function (text) { var divtipsstyle = "position: absolute; left: 0; top: 0; background-color: #dceaf2; padding: 3px; b

  • Java程序员的学习目标:破坏源程序 2015-05-02

    当你看到这个标题的时候肯定回以为是不是作者写错了标题,告诉你没有,学习java语言就是要有创新精神,你只有不断突破前人的你才会有进步. Java作为一门编程语言,最好的学习方法就是写代码.当你学习一个类以后,你就可以自己写个简单的例子程序来运行一下,看看有什么结果,然后再多调用几个类的方法,看看运行结果,这样非常直观的把类给学会了,而且记忆非常深刻.然后不应该满足把代码调通,你应该想想看如果我不这样写,换个方式,再试试行不行.记得哪个高人说过学习编程就是个破坏的过程,把书上的例子,自己学习Doc

  • Android开发入门之学习笔记(一) 2013-01-17

    零零散散看教程已经有一个多星期了,感觉进步不大,还是来总结一下吧,这样好转化为自己的知识. 首先还是从简单的第一个程序回顾一下吧.如何创建一个最简单的Android程序. 我这里使用的是从官方下载的Android Developer Tools(简称ADT): 开发环境的准备,如果是在Windows环境,还是相对比较容易的.简单的说,就是先安装一个JAVA环境(最好在环境变量中加上路径).然后,从Android的官网下载一个ADT的集成包,解压到某一个目录下即可.我这里是放在了D盘的Androi

  • 极客技术专题[001期]:jQuery初学者入门 2013-04-21

    日期:2013-4-8 来源:GBin1.com 技术专题介绍 分享专题:jQuery初学者入门 分享人:极客标签开发团队成员之一Terry 授课时间:2013/04/05 20:30-21:30(已结束) 课程类型:公开课 专题难度:初级 报名方式:社区用户请在相关报名帖中留言报名 课程时间:60min (包含15min的自由问答) 授课方式:社区的互动教学平台 - 实时的观看分享人的代码编写操作并且在线自己修改和运行相关代码做练习(语音采用YY语音频道) 专题内容: jQuery的相关背景

  • jQuery与javascript对照学习 获取父子前后元素 实现代码 2013-10-17

    jQuery与javascript对照学习(获取父子前后元素) ,需要的朋友可以参考下,看看与js有什么不同. jQuery与javascript对照学习(获取父子前后元素) first second parent [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

  • 实例分析一个简单的Win32程序 2013-10-17

    这篇文章主要介绍了实例分析一个简单的Win32程序,对于Win32应用程序的原理.执行流程.实现方法主要环节都做了较为详细的分析,有助于读者深入理解Windows应用程序设计,需要的朋友可以参考下 本文较为详细的分析了一个Win32程序的组成.结构.实现方法及运行原理,对于进行Windows程序设计有很好的借鉴参考价值.分享给大家供大家参考之用.具体分析如下: 一.Windows程序与普通C或C++程序的不同 学过C或C++等语言的人都知道,我们写的程序都一个入口,main函数,但是在Win32

  • 用Python制作简单的钢琴程序的教程 2013-10-30

    这篇文章主要介绍了用Python制作简单的钢琴程序的教程,用键盘演奏.包括变速和变调等功能的实现,需要的朋友可以参考下 录一段音频,把它的音高改变50次并把每一个新的音频匹配到键盘的一个键位,你就能把电脑变成一架钢琴! 一段音频可以被编码为一组数值的数组(或者列表),像这样: 我们可以在数组中每隔一秒拿掉一秒的值来将这段音频的速度变成两倍. 如此我们不仅将音频的长度减半了,而且我们还将它的频率翻倍了,这样使得它拥有比原来更高的音高(pitch). 相反地,假如我们将数组中每个值重复一次,我们将得

  • 简单的Jquery全选功能 2014-01-17

    很简单的Jquery全选功能,看代码就明白,很实用 记载一段最简单的全选功能Jquery代码. [code ]$(function(){ $("#chkAll").click(function(){ $("input:checkbox").attr("checked",$(this).attr("checked")); }); }); [/code]

  • Android 简单的照相机程序的实例代码 2014-02-11

    终于经过多次找错,修改把一个简单的照相机程序完成了,照相类代码如下: class surface extends SurfaceView implements SurfaceHolder.Callback { SurfaceHolder sfholder; Camera camera; Bitmap bitmap; public surface(Context context) { super(context); // TODO Auto-generated constructor stub s