八天学会jQuery之新手篇
- 格式:doc
- 大小:92.50 KB
- 文档页数:21
jQuery教程菜鸟教程
jQuery 教程
jQuery 是一个 JavaScript 库。
jQuery 极大地简化了 JavaScript 编程。
jQuery 很容易学习。
本章节的每一篇都包含了在线实例
通过本站的在线编辑器,你可以在线运行修改后的代码,并查看运行结果。
实例
$(document).ready(function(){ $("p").click(function(){ $(this). hide(); }); });
尝试一下»
点击 "尝试一下" 按钮查看运行结果。
jQuery 实例
在本教程中,您将通过教程以及许多在线实例,学到如何通过使用 jQuery 应用 JavaScript 效果。
•jQuery 在线实例
jQuery 测验
在菜鸟教程上测试你的 jQuery 技能!
•jQuery 测验
jQuery 参考手册
在本教程中,你将学习到更多的jquery的使用方法。
Jquery基础知识之菜鸟教程 jquery核⼼: write less do more1.jQuery 语法基础语法: $(selector).action();2.⽂档就绪事件:⽂档完全加载完后执⾏函数第⼀种⽅式: $(document).ready(function(){});第⼆种⽅式: $(function(){});3.jQuery 选择器元素选择器 $("p").hide(); // 所有的p元素隐藏#id选择器 $("#test").hide();//id为test的元素隐藏.class选择器 $('.test').hide(); // class为test的所有元素隐藏$("*") //选取所有元素$(this) // 选取当前HTML元素$("p .intro") // 选取class 为intro的p元素$("ul li:first") //选取第⼀个ul元素下的第⼀个li元素$('ul li:first-child') //选取每个ul下的第⼀个li元素$('[href]') //选取所有带href属性的元素$('a[target="_blank"]') //选取所有a元素(带有target属性值为_blank)$('a[target !="_blank"]') //选取所有a元素(不带有target属性值为_blank)$(":button") // 选取所有type=“button”的input和button元素$("tr:even") // 选取所有的偶数⾏$("tr:odd") //选取所有的奇数⾏4.jQuery 事件事件:页⾯对不同访问者的响应⿏标事件: click dbclick mouseenter mouseleave hover(悬停事件)键盘事件: keypress keydown keyup blur表单事件: submit change focus unload⽂档窗⼝事件:load resize scroll4.1 jQuery 事件⽅法语法$("p").click(function(){//点击p元素后执⾏的代码});$("p").dblclick(function(){ //双击事件$(this).hide();});$("#p1").mouseenter(function(){ // ⿏标指针穿过元素事件alert("You entered p1!");});$("#p1").mouseleave(function(){// ⿏标指针离开元素事件alert("Bye! You now leave p1!");});$("input").focus(function(){// 元素获得焦点事件$(this).css("background-color","#cccccc");});$("input").blur(function(){// 元素失去焦点事件$(this).css("background-color","#ffffff");});5.jQuery 效果5.1 隐藏和现实HTML元素:$(selector).hide(speed,callback);$(selector).show(speed,callback);例:$("button").click(function(){$("p").hide(1000);//1000毫秒,隐藏的速度,1s钟隐藏});5.2 来回切换隐藏和显⽰⽤ toggle();<button>隐藏/显⽰</button>$("button").click(function(){$("p").toggle();});6. 淡⼊淡出$(selector).fadeIn(speed,callback);$(selector).fadeOut(speed,callback);$(selector).fadeToggle(speed,callback);$(selector).fadeTo(speed,opacity,callback);$("button").click(function(){ //三个div逐次出现$("#div1").fadeIn();$("#div2").fadeIn("slow");$("#div3").fadeIn(3000);});$("button").click(function(){ //三个div逐次淡出,依次看不见$("#div1").fadeOut();});<button>点击淡⼊/淡出</button>$("button").click(function(){$("#div3").fadeToggle(3000);});$("button").click(function(){$("#div1").fadeTo("slow",0);//0完全透明,div1看不见了});7. 滑动⽅法$(selector).slideDown(speed,callback); //向下收起来$(selector).slideUp(speed,callback); //向上收起来$(selector).slideToggle(speed,callback);8.动画:默认情况下,所有 HTML 元素都有⼀个静态位置,且⽆法移动。
jQuery基础教程一(传说中的ready)首先我们来说明一下什么是JqueryjQuery 是一个新型的JavaScript库.jQuery是一个简洁快速的JavaScript库,它能让你在你的网页上简单的操作文档、处理事件、运行动画效果或者添加Ajax交互。
jQuery的设计会改变你写JavaScript代码的方式。
jQuery适合于设计师、开发者以及那些还好者,同样适合用于商业开发,可以说jQuery 适合任何JavaScript应用的地方,可用于不用的应用程序。
jQuery是一个轻量级的脚本,其代码非常小巧,JavaScript包只有15K左右。
jQuery支持CSS1-CSS3,以及基本的xPathjQuery是跨浏览器的,它支持的浏览器包括IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+第一步ready函数如果你需要一些函数需要在DOM加载就绪以后才能执行,当然window.onload()能实现同样的功能,但当window.onload函数执行的时候,要说明所有东西已经载入,包括图像和横幅等等。
要知道较大的图片下载速度会比较慢,因此用户必须等待大图片下载完毕才能看到window.onload()执行的代码效果,这样就花费了很长的等待时间,这不是我们想要的.$(document).ready(fn):当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。
这是事件模块中最重要的一个函数,因为它可以极大地提高web应用程序的响应速度。
简单地说,这个方法纯粹是对向window.load事件注册事件的替代方法。
通过使用这个方法,可以在DOM载入就绪能够读取并操纵时立即调用你所绑定的函数.(document)意思是说,获取整个网页文档对象(类似的于window.document),$(document).ready意思就是说,获取文档对象就绪的时候。
$(document).ready(function() {// do stuff when DOM is ready//当文档载入后从此处开始执行代码});jquery基础教程二(鼠标点击事件)下面我们来看看jquery如何给DOM 各个元素批量绑定事件<SCRIPT LANGUAGE="JavaScript"><!--$(document).ready(function() {$("div").click(function(){//$("div")就是页面中所有的div标签alert("Hello World!");})})//--></SCRIPT>$("div").click $("div")就是页面中所有的div标签这句话就是给所有的标签为div的元素绑定了一个click事件即当所有div 被鼠标单击的时候执行alert("Hello World!");例子:<html><head><meta http-equiv="Content-Type" content="text/html; charset= gb2312" /><title>jquery基础教程二(demo鼠标点击事件)</title><script language="javascript" src="/demo/jquery.js"></script><SCRIPT LANGUAGE="JavaScript"><!--$(document).ready(function() {$("div").click(function(){alert("Hello World!");})})//--></SCRIPT></head><body><div>Hello World!</div></body></html>jquery基础教程三(css的操作之addClass和removeClass)下面我们看看jquery对css的操作方法addClass和removeClass1)addClass:为每个匹配的元素添加指定的类名。
菜鸟教程jquery语法jQuery是一种高效、简洁又方便的JavaScript库,它简化了HTML文档的操作、事件处理、动画设计以及AJAX交互等操作,为前端开发者提供了非常方便的编程工具。
本篇文章将为大家简单介绍jQuery的语法和用法,包括选择器、事件、动画和AJAX交互等常用功能。
1. jQuery选择器选择器是jQuery的核心功能之一,它允许我们通过CSS样式来获取文档中的HTML元素。
以下是一些常见选择器:- 元素选择器$('p'):获取所有的p元素$('#header'):获取id为header的元素$('.nav'):获取class为nav的元素jQuery中的事件和原生JavaScript的事件类似,但是它的处理方式更为方便和高效。
以下是一些常用的事件处理方法:- click():点击事件$('button').click(function(){//执行操作});- hover():鼠标悬停事件jQuery提供了一些强大的动画效果,比如淡入淡出、滑动等。
以下是一些常用的动画效果:- fadeIn():淡入效果$('div').fadeIn();- slideUp():上滑效果4. jQuery AJAX交互jQuery AJAX可以实现页面的异步交互,比如发送请求、接收数据等。
以下是一些常用的AJAX方法:- $.ajax():发送和接收请求的函数$.ajax({type: 'post',url: 'test.php',data: {'name': '小明','age': 18},success: function(data){console.log(data);}});总结本文对jQuery的语法和用法进行了简单介绍,包括选择器、事件、动画和AJAX交互等常用功能。
基础jquery知识点基础jQuery知识点jQuery是一个快速、简洁的JavaScript库,它简化了HTML文档遍历、事件处理、动画效果等操作。
在网页开发中,jQuery非常常用,是前端开发的基础知识之一。
下面将介绍一些基础的jQuery 知识点。
一、选择器(Selectors)选择器是使用jQuery的关键,它允许我们通过各种方式选择HTML元素,并对其进行操作。
常见的选择器包括元素选择器、类选择器、ID选择器等。
1. 元素选择器元素选择器使用元素的标签名作为选择器,可以选择所有匹配的元素。
例如,使用$("p")可以选择页面中的所有段落元素。
2. 类选择器类选择器使用元素的class属性作为选择器,可以选择具有相同类名的所有元素。
例如,使用$(".class")可以选择页面中所有具有class为class的元素。
3. ID选择器ID选择器使用元素的id属性作为选择器,可以选择具有相同id的元素。
例如,使用$("#id")可以选择具有id为id的元素。
二、事件处理(Event Handling)事件处理是jQuery的另一个重要功能,它允许我们对HTML元素进行事件绑定,并在事件发生时执行相应的操作。
1. click事件click事件在元素被点击时触发,我们可以使用click()函数来绑定click事件,并定义事件处理函数。
例如,使用$("button").click(function(){})可以在点击按钮时执行相应的操作。
2. hover事件hover事件在鼠标悬停在元素上时触发,我们可以使用hover()函数来绑定hover事件,并定义事件处理函数。
例如,使用$("div").hover(function(){}, function(){})可以在鼠标悬停在div元素上时执行第一个函数,鼠标移出时执行第二个函数。
jq 常用方法
1.选择器:使用选择器来定位元素,可以使用类、ID、属性等选择器。
2.事件处理:使用事件处理函数来处理用户的行为,例如单击、鼠标悬停等。
3.样式操作:使用CSS样式操作来改变元素的外观,例如改变颜色、背景等。
4.属性操作:使用属性操作来读取或设置元素的属性,例如设置表单的值、获取图片的地址等。
5.DOM操作:使用DOM操作来动态地更新或添加元素,例如创建新的元素、删除元素等。
6.Ajax异步请求:使用Ajax来与服务器进行数据交互,例如获取数据、提交表单等。
7.动画效果:使用动画效果来为元素添加过渡效果,例如淡入淡出、滑动等。
8.插件扩展:使用第三方插件来扩展jq的功能,例如轮播图、图片放大等。
9.表单验证:使用表单验证插件来验证用户输入的数据,例如验证手机号码、邮箱等。
10.工具方法:使用工具方法来简化代码,例如遍历对象、数组等。
- 1 -。
WEB论坛您的位置:WEB开发站长站web前端JS/VBSjqueryjQuery基础教程(新手入门必看)jQuery基础教程(新手入门必看)2009-10-10 21:54:18 作者:admin 来源:浏览次数:133 网友评论 0条此文以实例为基础一步步说明了jQuery的工作方式。
现以中文翻译(添加我的补充说明)如下。
如有相关意见或建议请麻烦到我的 BLOG 写个回复或者 EMAIL 告知。
英文原版:http://jquery.bassistance.de/jquery-getting-started.html ,感谢原文作者Jörn Zaefferer内容提要安装Hello jQueryFind me:使用选择器和事件Rate me:使用AJAXAnimate me(让我生动起来):使用FXSort me(将我有序化):使用tablesorter插件(表格排序)Plug me:制作您自己的插件Next steps(下一步)安装一开始,我们需要一个jQuery的库,最新的下载可以到这里找到。
这个指南提供一个基本包含实例的包供下载.(译者Keel注:一定要下载这个包,光看文章不实践肯定是不行的。
)下载后解压缩,然后用你最喜欢的文本编辑器打开starterkit.html和custom.js这两个文件。
(译者Keel注:这两个就是例子文件,所有的例子都用这两个例子作出,custom.js写jQuery代码,starterkit.html观察效果.建议用editPlus打开)现在,我们就已经做好了一切准备来进行这个著名的"Hello world"例子.本章的相关链接:jQuery DownloadsHello jQuery在做所有事情之前,我们要让jQuery读取和处理文档的DOM,必须尽可能快地在DOM载入后开始执行事件,所以,我们用一个ready事件作为处理HTML文档的开始.看看我们打开的custom.js这个文件,里面已经准备好了:$(document).ready(function() {// do stuff when DOM is ready});放一个简单的alert事件在需要等DOM完成载入,所以我们把任务稍稍变复杂一点:在点击任何一个链接时显示一个alert.$(document).ready(function() {$("a").click(function() {alert("Hello world!");});});这样在你点击页面的一个链接时都会触发这个"Hello world"的提示。
jquery实训报告引言在计算机科学领域,学习一门新技术并进行实际应用是非常重要的。
在这篇文章中,我将分享我对jQuery的学习经验和实训报告。
一、什么是jQueryjQuery是一种轻量级的JavaScript库,它简化了对HTML文档的操作。
它被广泛应用于网页开发中,主要用于DOM操作、事件处理、动画效果和异步编程。
二、学习jQuery的动机为了提高自己的前端开发技能,我决定花时间学习和实践jQuery。
在互联网时代,网页设计和用户体验扮演着至关重要的角色。
掌握jQuery可以帮助我们更高效地开发交互式网页,并提升用户的体验。
三、学习过程1. 学习资源我首先选择了一些优质的学习资源,如书籍、在线教程和视频教程。
这些资源帮助我建立了对jQuery的基础知识的全面理解。
2. 实践项目除了理论知识,实践是最好的学习方法。
我决定选择一个小型项目来应用我所学的jQuery知识。
我选择了一个简单的图片轮播的实现,这个项目可以帮助我理解jQuery动画效果和事件处理的运用。
4. 小组合作我和几位同学一起组成了一个学习小组,我们每周会聚在一起,一起解决项目中遇到的问题。
这样的方式不仅增加了团队合作的经验,也加深了我们对jQuery的理解。
五、实践报告1. 实践目标我的目标是实现一个具有不同效果的图片轮播,为了达到这个目标,我首先需要了解jQuery的选择器和基本DOM操作。
2. 实现步骤我首先创建一个HTML页面,为每个图片创建容器和相应的CSS样式。
然后,我通过使用jQuery选择器和DOM操作方法,实现了图片的自动切换、滑动效果和按钮控制。
3. 遇到的挑战在实践过程中,我遇到了一些挑战。
其中之一是如何实现自动切换图片的功能。
通过学习和与小组成员讨论,我采用了定时器和动画效果来实现这一功能。
4. 成果与总结最终,我成功地实现了一个具有流畅且具有各种效果的图片轮播。
通过实践,我不仅学会了如何使用jQuery库,还提高了自己的问题解决能力和团队合作能力。
jquery实训报告一、概述本报告旨在总结我在jquery实训课程中的学习和实践经验。
通过该实训,我深入了解了jquery的基本概念、应用场景以及常用方法,并能够灵活运用jquery进行网页开发。
二、实训内容1. jquery基础知识在实训课程一开始,我通过老师的讲解和自主学习,掌握了jquery 的概念和基本语法。
jquery是一个快速、简洁的JavaScript库,为HTML文档的遍历和操作提供了便捷的API。
我了解到jquery支持多种选择器、事件处理、动画效果等功能,这为我后续的实践奠定了基础。
2. jquery应用实践在掌握了jquery的基础知识后,我开始进行实践练习。
首先,我通过实现一些常见的页面效果,比如下拉菜单、轮播图等,巩固了对jquery的理解。
随后,我尝试对一些已有的网页进行优化,通过选择器的合理运用和事件的绑定,提高了页面的响应速度和用户体验。
3. jquery与后端交互为了更好地理解jquery在实际项目开发中的应用,我将其与后端技术相结合,并实现了一些基本功能。
我学会了通过ajax与后端进行数据的交互,实现了表单的动态验证、数据的异步加载等功能。
这为我未来参与实际项目开发提供了很好的参考。
三、实践成果展示下面我将展示我在实训中完成的一些实践项目,并简要介绍其实现思路和效果。
1. 下拉菜单通过jquery选择器选取导航栏中的菜单,并为其绑定hover事件,实现鼠标悬浮时下拉菜单的展开与收起。
通过添加css样式和jquery的动画效果,使得菜单展开过程平滑流畅,提升了用户体验。
2. 图片轮播基于jquery库,我实现了一个简单的图片轮播效果。
通过设置定时器和切换图片的透明度,实现了轮播效果。
我还通过添加左右切换按钮、鼠标移入停止轮播等交互功能,使得轮播图更具有吸引力和可操作性。
3. 表单验证在一个用户注册页面中,我利用jquery实现了表单的即时验证。
通过jquery选择器选取表单元素,并为其绑定blur事件,实时验证用户输入的合法性,并给出相应的提示信息。
jQuery 新手入门教程什么是jQuery?jQuery是一个JavaScript库,白痴解释就是一个JavaScript 工具箱,很多现成的工具,想用什么就拿什么。
省去了自己重新编写代码的烦恼,对于像我一样的JS白痴,更是容易上手。
jQuery能做什么?他能让你的页面产生很多让人惊喜的动态效果,简单的说就是让你的网站更加漂亮,这里有很多不同的效果,点击查看>>> 怎么用jQuery?简单的说:在页面中调用jQuery库(一个js文件),就可以方便的使用其中的工具了(使用时需要另一个js调用jQuery中的工具),从而实现想要的效果。
第一步:寻找想要的效果的效果都出自两个地方:sonicHTML,jQuerytools。
网络上有更多的效果,如果愿意花时间,可以去其他地方找找。
第二步:扒代码首先推荐扒代码利器Firefox+firebug。
如果没有,赶快去下!在扒代码是要十分小心两个地方!1.静态页中的html和css用firebug扒取页面中你想要部分的HTML和CSS代码,该部分的id和class千万不要动,保持原状!同时,在你想要的HTML元素前,可能会有一个空的例如这个效果>>>,千万不要遗漏!2.中的js⑴在调用的js中,肯定会有一个js的文件名中带有“jQuery”,直接把这个文件的代码复制,变成你自己的文件。
⑵在中一定还有另一个js,这个js中会有以下代码:$(document).ready(function(){//中间为其他代码});这个js可能是调用的外部文件,也可能就在head(body中也有可能,不过可能性低)中以形式出现。
这个部分一定会出现之前HTML中的id或者class。
一定要保持一致,如果想用其他的名字,一定要记得HTML中和js中同步,不一样就功亏一篑了第三步:本地测试并修改错误本地新建HTML,CSS,JS,把扒到的代码都放进去,该调用的文件都调用好。
[jQuery教程] jQuery速成教程jQuery其实很简单,相信您看了CSS学习网精心编写的jQuery速成教程后,一定会被它的优雅、轻巧吸引住,而且如果您掌握了它,定能成为提升薪水的一个资本。
本节并没有涉及到jQuery如何编写,只为大家解决几个常见问题,因为这也是面试中常常遇到的几个问题。
如果你掌握了jQuery可以成为提升工资的一个资本。
另外我写教程的时候需要一边发布一边写,因此如果当你看到某节教程的标题不是【蓝色加粗字体、标题后面无精品推荐】这些条件,那么劝大家不要看此教程,因为它还没发育好呢!课程列表:第一章:基础篇- 对象的获取第一节:jQuery速成- 向jQuery进军!第二节:jQuery速成- 核心!第三节:jQuery速成- 核心方法的使用第四节:jQuery速成- 基本对象获取第五节:jQuery速成- 层级对象获取第六节:jQuery速成- 简单对象获取第七节:jQuery速成- 内容对象的获取和对象可见性!第八节:jQuery速成- 对象获取进阶第九节:jQuery速成- 子元素的获取第十节:jQuery速成- 表单对象的获取第十一节:jQuery速成- 元素属性的设置与移除第二章:进阶篇- 对象的筛选第十二节:jQuery速成- 过滤第十三节:jQuery速成- 查找第十四节:jQuery速成- 串联第三章:文本篇- 对象文本处理第十五节:jQuery速成- 内部插入第十六节:jQuery速成- 外部插入第十七节:jQuery速成- 包裹第十八节:jQuery速成- 替换,删除和复制第十九节:jQuery速成- 元素的赋值第四章:样式篇- 层叠样式表的处理第二十节:jQuery速成- 样式的设置与定义第五章:提高篇- jQuery中的事件机制第二十一节:jQuery速成- 页面的载入事件与事件处理第二十二节:jQuery速成- 鼠标事件与交互第二十三节:jQuery速成- 焦点事件第二十四节:jQuery速成- 键盘事件第二十五节:jQuery速成- 其他事件第六章:效果篇- jQuery中的动画效果第二十六节:jQuery速成- 动画实现的基本方法第二十七节:jQuery速成- 元素的渐隐渐显第二十八节:jQuery速成- 元素的滑动第二十九节:jQuery速成- 自定义动画第七章:工具篇- jQuery中的工具使用第三十节:jQuery速成- 浏览器种类及其特性的检测第三十一节:jQuery速成- 数组和对象的操作第三十二节:jQuery速成- 工具杂项第八章:高级篇- Ajax异步请求及调用实战第三十三节:jQuery速成- Ajax请求(讲解篇)第三十四节:jQuery速成- Ajax请求(实战篇)第一章:基础篇- 对象的获取第一节:jQuery速成 - 向jQuery进军!jQuery速成- 向jQuery进军!jQuery其实很简单,相信您看了CSS学习网精心编写的jQuery速成教程后,一定会被它的优雅、轻巧吸引住,而且如果您掌握了它,定能成为提升薪水的一个资本。
jquery的使用方法jQuery作为一种常用的JavaScript库,其强大的功能和简化代码的方便性让其成为前端开发者中的首选。
以下是在项目中常见的jQuery使用方法的分步骤阐述:1. 引入jQuery库在HTML文件的<head>区域中使用script标签引入jQuery库,通常我们是从官网下载一个jquery-x.x.x.js文件,在引用时需要写正确的路径。
2. jQuery对象的创建要使用jQuery对象,首先需要用jQuery构造函数来创建一个jQuery对象。
这可以使用两种方式创建:1)通过$或jQuery函数创建:例如:$("选择器")或者jQuery("选择器");2)通过使用jQuery()或$()函数作为参数传递原始DOM元素来创建。
3. 选择器的使用jQuery中的选择器实现了所有的CSS选择器,也支持自定义选择器。
与CSS选择器类似,jQuery选择器是用于选择HTML元素的字符串。
例如:选择id为“content”的元素:$("#content");选择class为“box”的元素:$(".box");选择label元素中“for”属性值为“id”的元素:$("label[for='id']")4. 事件处理函数的绑定通过bind()或者on()函数可以给元素绑定事件,例如:$(selector).bind(event,function)绑定事件。
事件可以是click、dblclick、mouseenter等等,函数可以是已定义的函数名,也可以是匿名函数。
5. 样式的操作通过jQuery对象的css()方法设置样式。
例如:$(selector).css('color','#fff')设置字体颜色为白色,$(selector).addClass('className')增加类名为'className'的样式。
八天学会jQuery之新手篇 整理自:jquery新手教程(1)window.onload()是传统javascript里一个能吃苦耐劳的家伙。
它长久以来一直被程序员们作为尽快解决客户端页面载入问题的捷径。
但有时候等待页面载入还是不够快。
只有少数大型的图片文件会被快速的载入,而大部分大型的图片文件会使window.onload()载入的很慢。
所以当我为最近的网络营销创建一个web应用程序的时候我不得希望更快一点。
有一些围绕window.onload()的新研究(比如brother cake)的代码是一种快速的方式。
如果你需要,可以试试。
但是如果你要做一些DOM(文档对象模型)javascript的编程,那么你为什么不试试jQuery,它就像你自己亲自制作一个蛋糕,并品尝它。
jQuery有一个用来作为DOM快速载入javascript的得心应手的小函数,那就是ready…他在页面加载完成之后执行。
$(document).ready(function(){// Your code here...});你可以用他来载入任何你想要载入的javascript,并不一定要保留jQuery的编码风格。
让jQuery同时去执行多个函数也是可以的。
你以前可能见过类似于init()之类的函数,你会发现jQuery会快很多。
在以后的教程里我们会一遍又一遍的用到这个函数。
OK你现在可以尝试一下代码:(记得把jQuery引用进你的页面哦,不记得的话看看上篇。
)$(document).ready(function(){alert("!");});jquery新手教程(2)<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”“/TR/xhtml1/DTD/xhtml1-transitional.dtd”><html xmlns=”/1999/xhtml”><head><meta http-equiv=”Content-Type”content=”text/html; charset=gb2312″/> <title>StripingTable</title><. src=”jquery-latest.pack.js”type=”text/.”></.><!–将jQuery引用进来–><. type=”text/.”>$(document).ready(function(){ //这个就是传说的ready$(“.stripe tr”).mouseover(function(){//如果鼠标移到class为stripe的表格的tr上时,执行函数$(this).addClass(“over”);}).mouseout(function(){// 给这行添加class值为over,并且当鼠标一出该行时执行函数$(this).removeClass(“over”);}) // 移除该行的class$(“.stripe tr:even”).addClass(“alt”);// 给class为stripe的表格的偶数行添加class值为alt});</.><style type=”text/css”>th {background:#0066FF;color:#FFFFFF;line-height:20px;height:30px;}td {padding:6px 11px;border-bottom:1px solid #95bce2;vertical-align:top;text-align:center;}td * {padding:6px 11px;}tr.alt td {background:#ecf6fc; /* 这行将给所有的tr加上背景色*/}tr.over td {background:#bcd4ec; /* 这个将是鼠标高亮行的背景色*/}</style></head><body><table width=”50%”border=”0″cellspacing=”0″cellpadding=”0″><!color=”#008000″& gt;–用class=”stripe”来标识需要使用该效果的表格–> <thead><tr><th>名称</th><th>网址</th><th>QQ</th><th>Email</th></tr></thead><tbody><tr><td>ajax之家</td><td></td><td>274430124</td><td>admin@</td></tr><tr><td>ajax之家</td><td></td><td>274430124</td><td>admin@</td></tr><tr><td>ajax之家</td><td></td><td>274430124</td><td>admin@</td></tr><tr><td>ajax之家</td><td></td><td>274430124</td><td>admin@</td></tr><tr><td>ajax之家</td><td></td><td>274430124</td><td>admin@</td></tr><tr><td>ajax之家</td><td></td><td>274430124</td><td>admin@</td></tr></tbody></table><p>PS: 飘飘说我的table没有<thead>,我知错了…</p></body></html>这里有一个jQuery的技巧不得不提一下:jQuery的链式操作,什么是链式操作呢?我们来看看,本来应该写成这样子的:$(“.stripe tr”).mouseover(function(){$(this).addClass(“over”);})$(“.stripe tr”).mouseout(function(){$(this).removeClass(“over”); })但是我们写成了:$(“.stripe tr”).mouseover(function(){$(this).addClass(“over”);}).mouseout(function(){$(this).removeClass(“over”);})在jQuery中,执行完mouseover或者mouseout等方法之后,都会返回当前的对象,所以可以进行链式操作jquery新手教程(3)这个教程有点鸡肋,实际上用的不多,甚至根本就用不到,没明白作者为什么要设计这一章……今天的jquery教程是草草完成的.我想把一些东西放在这15天的前面简单的讲讲,这样以来就可以使一些js新手不至于被一堆代码搞的晕头转向.事实上我是在即将结尾的时候才做出的这个决定.目标我们要使用jQuery去创建一小段代码,这段代码会把一个页面所有的超链接转换并且伪装起来.为什么?一些下属经销商认为,一部分用户有足够的悟性发现会员链接,并能尽量避免通过点击URL链接直接进入浏览器,从而“欺骗”下属经销商脱离代理(假设购买行为已经发生)“老”办法有很多下属经销商千方百计的掩饰他们的链接,避免人们通过链接找到他们.这些伎俩涉及到.htaccess和服务器端的代码. 但对于本教程,我会将重点放到”老学校”的javascript上:<a onMouseOver=’window.status=””;return true;’onMouseOut=’window.status=”完毕”; return true;’href=””target=”_blank”& gt;点我进入ajax之家,但状态栏显示的却是百度链接</a>这段代码被用来在浏览器状态栏显示用户鼠标指向的链接地址.比如实际链接是?aff=123,则可以在状态栏显示。
问题你是一个很活跃的下级经销商,你可能会以疯狂的速度给很多个页面添加链接.并且还要给每个链接添加这种效果那么你肯定会厌倦的.假如有一天你要修改任务栏里显示的链接的时候估计你会疯掉的.jQuery的解决办法首先,我们想让javascript尽快的掩饰我们的链接所以我们应该先从这里开始:<script src=”jquery.js”></script><script type=”text/javascript”>$(document).ready(function(){//code goes here});</script>当DOM准备好的时候我们放在ready里的代码就开始执行了.接下来要给所有我们想伪装的链接添加一个class,class有助于jQuery帮我们找到需要伪装的链接而撇开其它不需要伪装的链接.title有两个作用:当鼠标划过链接的时候会有一个小小的盒状提示显示URL:并且同样的信息会显示在浏览器的状态栏(IE Only).<p><a href=”?id=123″title=””class=”affLink”>Super Duper Product</a></p>告诉jQuery找到有class=“affLink”的链接$(‘a.affLink’)添加一个鼠标划过事件$(‘a.affLink’).mouseover(function(){window.status=this.title;return true;})简单的说:找到class=“affLink”的所有链接,当鼠标划过它们的时候改变浏览器状态栏信息为该链接title的内容.这个在FireFox并不能正常的工作,只是在IE里起作用.在FireFox的状态栏只是显示一个”Done”,或者更准确的说,鼠标划过超链接对状态栏并没有任何影响.我没有更多的浏览器测试.继续-mouseout jQuery可以让我们用”链”的方式,像这样:$(‘a.affLink’).mouseover(function(){window.status=this.title;return true;}).mouseout(function(){window.status=’Done’;return true;});这点代码告诉jQuery改变浏览器状态栏信息,或者当鼠标不再停留在链接上时返回”Done”. 如果你不适应jQuery的这种链的工作方式,那么你完全可以这样写:$(‘a.affLink’).mouseover(function(){window.status=this.title;return true;});$(‘a.affLink’).mouseout(function(){window.status=’Done’;return true;});这就看你了.把这些代码放到一起:<script src=”jquery.js”></script><script type=”text/javascript”>$(document).ready(function(){$(‘a.affLink’).mouseover(function(){window.status=this.title;return true;}).mouseout(function(){window.status=’Done’;return true;});});</script>最后的想法你们当中可能觉得今天的课程太简单了,有些还可能还是有点不太明白,因为你们不是二级经销商.jquery新手教程(4)这篇文章是关于安全邮件列表的,什么意思呢?自己仔细看,这篇jquery教程内容比较简单,想法不错规则提到如何防止垃圾邮件:不要把你的邮件地址放到任何一个mailto:链接中. 在与垃圾邮件恶魔做斗争的过程中我们的网页设计师和程序员总结出了一些有创意的解决办法,让我们快速的看一些这些常见方法的缺点(或多或少有一些).name [at-no-spam] 问题:链接式的更方便,而且把邮件地址敲入收件人栏还有可能会出错.联系方式问题:你冒着这么大的风险就是因为有一个垃圾邮件借用你的帐户发送大量的垃圾邮件(除非你使用真正的安全邮件脚本).而这样就扼杀了那些只想给你发个简单邮件的用户.javascript加密问题:你的邮件仍然暴露在光天化日之下,即使你使用了复杂的密码技术给它带上面具.还有谁希望为了发送一封邮件而启用第三方的解密网站,反正我是不会.藏在一种简单的形式后面(有一个例子,但是打不开了.)/contact/我能想到的没有人…但是让我们看看是否我们能改进观念。