jQuery 学习入门篇附实例代码


Posted in Javascript onMarch 16, 2010

程序代码
window.onload = function(){ ... } .
访问HTML文档的元素,必须先载入文档对象模型(DOM)。当window.onload函数执行的时候,说明所有东西已经载入,包括图像和横幅等等。要知道较大的图片下载速度会比较慢,因此用户必须等待大图片下载完毕才能看到window.onload()执行的代码效果,这样就花费了很长的等待时间,这不是我们想要的。
对于此,jquery提供了一个"ready"事件,你可以使用以下的代码片段:
程序代码
$(document).ready(function(){//获取文档对象就绪的时候,不需要等待图片等下载完成。
// 你的代码
});
$(document)意思是说,获取整个网页文档对象(类似的于window.document),$(document).ready意思就是说,获取文档对象就绪的时候。
上面这段代码的意思是检查文档对象直到它能够允许被操作(译者注:这样做比window.onload()函数要快的多,因为只要文档对象载入完成就能够执行代码了,而不需要等待页面中的图片下载是否已经完成)---这是我们想要的。好了 ,其他的也不多说了,我们开始来用jQ写几个简单的例子。

1,demo1: --鼠标点击时的触发
首先,我们尝试鼠标点击超链接时触发某些行为。在ready函数里加入以下代码:
程序代码
$("p").click(function(){//获取所有段落p的对象,为其加上点击事件,需要加在readey中
// 你的代码
});

2,demo2:--增加 CSS Class
另外一个事情就是,一个共同的任务:增加或移除元素的css class,例如:
程序代码
$("a").addClass("test");
$("a").removeClass("test"); //样式的切换可以通过 $("p").toggleClass("selected");

3,demo3:--show( )和html()的使用
$("a").addClass("test").show().html("foo");//jquery方法可以连写
// how( ):显示隐藏的匹配元素。
//html("info"):设置每一个匹配元素的html内容。

4,demo4:--特效hide()
$("a").click(function(){
$(this).hide("slow");//对象慢慢的消失、隐藏
return false; //表示不会跳转,等同js
});

5,demo5:---收缩展开功能
$(document).ready(function(){
$("#head").click(function(){
$("#content").slideToggle("slow",function(){ alert("Hello,cssrain.."); } );
});// slideToggle(speed, callback)高度变化切换可见性,完成后可触发一个回调函数
});// speed "slow", "normal", or "fast" 也可以指定一数值

6,demo6:--appendTo的用法
{$("#head2").click(function()
{$("<input type='text' name='ddd' id='ddd' value='hello,cssrain..' ><br>").appendTo("#ccc");});}
<input type="button" name="head2" id="head2" value="appendTo" >
<div name="ccc" id="ccc" >看这里的变化</div>
//appendTo():把所有匹配的元素追加到另一个、指定的元素元素集合中,即增加子节点
//append():为某元素增加子节点

7, demo7:--表格隔行变色, 鼠标滑过变色,点击变色.
代码解释:
例子中我已经把 解释放上去了,这里就不再贴注释了。
例子中用了:mouseover(),addClass(),mouseout(),removeClass(),click(),
toggleClass(),tr:even 等方法。
另外解释了toggle()和toggleClass()的区别。
另外这个例子 我用了 链式操作 .可以查看 链式操作.txt 里面有解释。

8,demo8:--toggle( )的用法:
$("p").toggle()//切换元素的可见状态,但要注意此处对所有p有影响,也可以是切换两个方法toggle( Function even, Function odd ) 。

9,demo9:--hover()的用法:
Hover(function over ,function out )//模仿悬停事件
$("#orderedlist tr").hover(function over ,function out ) //为某表格所有行加上

10,demo10:-- $ 也可以用 jQuery代替
$(document).ready(function(){// 你的代码});//中的$ 也可以用 jQuery代替
jQuery(document).ready(function(){
jQuery(".").click(function(){jQuery(this).toggleClass("")})
});//好处是有可能你会用其他的js库也会用到$, 有可能会冲突,jQuery代替$是比较安全的写法。

还有就是:
$(document).ready(function(){// 你的代码});//的缩写法:$(function() {// 你的代码});

11,demo11:--each—find的用法
$("#orderedlist").find("li").each(function(i) {})
// find("li")找出所有li元素,each()对集合中的每个对象执行方法
//each( Function 函数 fn要执行的函数 )以每一个匹配的元素作为上下文来执行一个函数

12,demo12:--parents()的用法:
$(this).parents("p").addClass("highlight");//往上最近的某标签
this.parent()//指该对象的父节点

13,demo13:--load()的用法:
$("#feeds").load("FAQ1.html",function() { alert("load is done");}
<div id="feeds"></div>
//从远程的一个文件中载入HTML并且将它注入到DOM中

14,demo14:--next的用法:
.next()//获取的是该对象下一个兄弟节点

打包下载地址 jQuery 新手入门学习实例代码集

Javascript 相关文章推荐
Jquery实现带动画效果的经典二级导航菜单
Mar 22 Javascript
js中for in的用法示例解析
Dec 25 Javascript
使用Javascript写的2048小游戏
Nov 25 Javascript
jquery 将当前时间转换成yyyymmdd格式的实现方法
Jun 01 Javascript
js实现为a标签添加事件的方法(使用闭包循环)
Aug 02 Javascript
BootStrap栅格系统、表单样式与按钮样式源码解析
Jan 20 Javascript
利用原生JS与jQuery实现数字线性变化的动画
Feb 24 Javascript
微信小程序拖拽排序列表的示例代码
Jul 08 Javascript
Openlayers实现扩散的动态点(水纹效果)
Aug 17 Javascript
关于uniApp editor微信滑动问题
Jan 15 Javascript
JavaScript实现切换多张图片
Jan 27 Javascript
vue3不同环境下实现配置代理
May 25 Vue.js
Jquery Ajax学习实例4 向WebService发出请求,返回实体对象的异步调用
Mar 16 #Javascript
Jquery Ajax学习实例3 向WebService发出请求,调用方法返回数据
Mar 16 #Javascript
javascript 二维数组的实现与应用
Mar 16 #Javascript
Jquery Ajax 学习实例2 向页面发出请求 返回JSon格式数据
Mar 15 #Javascript
jQuery MD5加密实现代码
Mar 15 #Javascript
[原创]js获取数组任意个不重复的随机数组元素
Mar 15 #Javascript
javascript实现的在当前窗口中漂浮框的代码
Mar 15 #Javascript
You might like
PHP生成静态页面详解
2006/12/05 PHP
php使用PDO操作MySQL数据库实例
2014/12/30 PHP
PHP四舍五入、取整、round函数使用示例
2015/02/06 PHP
PHP微信开发之模板消息回复
2016/06/24 PHP
微信支付开发订单查询实例
2016/07/12 PHP
利用PHP内置SERVER开启web服务(本地开发使用)
2021/03/09 PHP
js表数据排序 sort table data
2009/02/18 Javascript
JS实现将人民币金额转换为大写的示例代码
2014/02/13 Javascript
原生js的弹出层且其内的窗口居中
2014/05/14 Javascript
使用原生JS实现弹出层特效
2014/12/22 Javascript
浅谈javascript中this在事件中的应用
2015/02/15 Javascript
如何用js 实现依赖注入的思想,后端框架思想搬到前端来
2015/08/03 Javascript
全面理解闭包机制
2016/07/11 Javascript
bootstrap table分页模板和获取表中的ID方法
2017/01/10 Javascript
详解vue-cli 构建项目 vue-cli请求后台接口 vue-cli使用axios、sass、swiper
2018/05/28 Javascript
vue解决一个方法同时发送多个请求的问题
2018/09/25 Javascript
从0到1搭建Element的后台框架的方法步骤
2019/04/10 Javascript
JavaScript算法学习之冒泡排序和选择排序
2019/11/02 Javascript
让IDE识别webpack的别名alias的实现方法
2020/05/06 Javascript
Vue仿Bibibili首页的问题
2021/01/21 Vue.js
python3下使用cv2.imwrite存储带有中文路径图片的方法
2018/05/10 Python
pyspark.sql.DataFrame与pandas.DataFrame之间的相互转换实例
2018/08/02 Python
Python设计模式之装饰模式实例详解
2019/01/21 Python
Python cookie的保存与读取、SSL讲解
2020/02/17 Python
python识别验证码图片实例详解
2020/02/17 Python
sublime3之内网安装python插件Anaconda的流程
2020/11/10 Python
python小技巧——将变量保存在本地及读取
2020/11/13 Python
Python实现迪杰斯特拉算法并生成最短路径的示例代码
2020/12/01 Python
MATCHESFASHION.COM美国官网:英国奢侈品零售商
2018/10/29 全球购物
Chicco婴儿用品美国官网:汽车座椅、婴儿推车、高脚椅等
2018/11/05 全球购物
澳大利亚最超值的自行车之家:Reid Cycles
2019/03/24 全球购物
建筑工程技术应届生自荐信
2013/09/27 职场文书
工业自动化专业毕业生推荐信
2013/11/18 职场文书
市场营销专业个人求职信范文
2013/12/14 职场文书
《每逢佳节倍思亲》教后反思
2014/04/19 职场文书
2014小学一年级班主任工作总结
2014/12/05 职场文书