附实例代码,学习入门篇附实例代码

程序代码
window.onload = function(){ ... } .
访谈HTML文档的因素,必得先载入文书档案对象模型(DOM)。当window.onload函数实践的时候,表达具备东西已经载入,蕴涵图像和横幅等等。要通晓非常的大的图片下载速度会相当慢,由此客户必需等待大图片下载完成手艺看到window.onload()实行的代码效果,那样就费用了相当长的等候时间,那不是大家想要的。
对此此,jquery提供了二个"ready"事件,你能够利用以下的代码片段:
程序代码
$(document).ready(function(){//获取文书档案对象就绪的时候,没有供给拭目以俟图片等下载完毕。
// 你的代码
});
$(document)意思是说,获取整个网页文书档案对象(类似的于window.document),$(document).ready意思便是说,获取文书档案对象就绪的时候。
地点这段代码的情趣是检查文书档案对象直到它能够允许被操作(译者注:这样做比window.onload()函数要快的多,因为借使文书档案对象载入完毕就可见实施代码了,而无需拭目以俟页面中的图片下载是还是不是业已实现)---这是我们想要的。好了 ,其余的也相当的少说了,我们伊始来用jQ写多少个轻易的事例。

demo 0,jQ的基本点程序:

指南/基础

1,demo1: --鼠标点击时的接触
率先,大家尝试鼠标点击超链接时触发有个别行为。在ready函数里踏入以下代码:
程序代码
$("p").click(function(){//获取具有段落p的对象,为其丰硕点击事件,必要加在readey中
// 你的代码
});

程序代码
window.onload = function(){ ... } .
访谈HTML文档的因素,必须先载入文书档案对象模型(DOM)。当window.onload函数实行的时候,表明全部东西已经载入,包涵图像和横幅等等。要精晓极大的图片下载速度会相当的慢,因而客户必得等待大图片下载实现技巧来看window.onload()实践的代码效果,那样就耗费了不长的守候时间,这不是我们想要的。

        那是一个基础指南,目的在于支持你开头应用jquery。jquery给予你科学普及难题的减轻措施。假诺你从未构建你的测量检验页面,作者建议您创制二个暗含下列内容的HTML页: 
程序代码  

2,demo2:--增加 CSS Class
其余一个事务正是,一个二头的天职:扩充或移除成分的css class,比方:
程序代码
$("a").addClass("test");
$("a").removeClass("test"); //样式的切换能够通过 $("p").toggleClass("selected");

对于此,jquery提供了一个"ready"事件,你能够应用以下的代码片段:
程序代码
$(document).ready(function(){//获取文书档案对象就绪的时候,无需等待图片等下载实现。
// 你的代码
});
$(document)意思是说,获取整个网页文书档案对象(类似的于window.document),$(document).ready意思就是说,获取文书档案对象就绪的时候。
上边这段代码的意味是反省文书档案对象直到它亦可允许被操作(译者注:那样做比window.onload()函数要快的多,因为只要文档对象载入完结就可以执行代码了,而无需等待页面中的图片下载是或不是曾经造成)---那是大家想要的。好了 ,别的的也非常的少说了,大家伊始来用jQ写多少个轻松的事例。

复制代码 代码如下:

3,demo3:--show( )和html()的使用
$("a").addClass("test").show().html("foo");//jquery方法能够连写
// how( ):展现隐蔽的相称成分。
//html("info"):设置每一个相配元素的html内容。

1,demo1: --鼠标点击时的接触
第一,大家品尝鼠标点击超链接时触发有个别行为。在ready函数里步入以下代码:
程序代码
$("p").click(function(){//获取具有段落p的目的,为其丰裕点击事件,要求加在readey中

<html> 
<head> 
<script type="text/javascript" 
src="link/to/jquery.js"></script> 
<script type="text/javascript"> 
   // Your code goes here 
</script> 
</head> 
<body> 
<a href="; 
</body> 
</html>  

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

// 你的代码

      修改script标签的src属性指向到您的jquery.js。举个例子,假如你的jQuery.js与你的HTML文件在同等目录,你能够这么: 
次第代码 
<script type="text/javascript" src="jquery.js"></script> 
文书档案载入时运营代码
     首先, 大相当多JavaScript程序猿会用类似代码:  
次第代码 
window.onload = function(){ ... } . 

5,demo5:---降低打开效用
$(document).ready(function(){
$("#head").click(function(){
$("#content").slideToggle("slow",function(){ alert("Hello,cssrain.."); } );
});// slideToggle(speed, callback)高度变化切换可知性,完结后可触及一个回调函数
});// speed "slow", "normal", or "fast" 也得以钦赐一数值

});

     访谈HTML文书档案的因素,必需先载入文书档案对象模型(DOM)。当window.onload函数实践的时候,表达全体东西已经载入,富含图像和横幅等等。要明了不小的图片下载速度会一点也不快,由此客商必需等待大图片下载实现才具见到window.onload()实行的代码效果,那样就开销了十分长的守候时间,那不是大家想要的。

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():为某成分扩展子节点

2,demo2:--增加 CSS Class
另外两个作业正是,多少个手拉手的任务:增加或移除成分的css class,比如:
程序代码
$("a").addClass("test");
$("a").removeClass("test"); //样式的切换能够通过 $("p").toggleClass("selected");

        对于此,jquery提供了三个"ready"事件,你可以行使以下的代码片段:  
次第代码 
$(document).ready(function(){
// 你的代码
}); 
       $(document)意思是说,获取文书档案对象(类似的于window.document),$(document).ready意思就是说,获取文书档案对象就绪的时候。 
       上边这段代码的意味是检查文书档案对象直到它亦可允许被操作(译者注:那样做比window.onload()函数要快的多,因为只要文书档案对象载入完结就可见实践代码了,而无需拭目以待页面中的图片下载是还是不是曾经到位)---那是大家想要的。由此将上边的代码片段粘贴到您测量检验页面包车型大巴脚本区吧!

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

3,demo3:--show( )和html()的使用

鼠标点击时的触及
       首先,大家尝试鼠标点击超链接时触发有些行为。在ready函数里投入以下代码: 
程序代码 
$("a").click(function(){
alert("多谢你的来到!");
});

8,demo8:--toggle( )的用法:
$("p").toggle()//切换来分的可知状态,但要注意此处对富有p有震慑,也足以是切换多少个方法toggle( Function even, Function odd ) 。

$("a").addClass("test").show().html("foo");//jquery方法能够连写

       保存HTML文件,然后刷新一下页面。点击某些超链接,页面将弹出警示对话框。

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

// how( ):突显遮盖的相称成分。

增加 CSS Class
       别的三个业务便是,二个同步的义务:增添或移除元素的css class,例如: 
次第代码 
$("a").addClass("test"); 
$("a").removeClass("test"); 

10,demo10:-- $ 也足以用 jQuery代替
$(document).ready(function(){// 你的代码});//中的$ 也能够用 jQuery代替
jQuery(document).ready(function(){
jQuery(".").click(function(){jQuery(this).toggleClass("")})
});//好处是有希望你会用其余的js库也会用到$, 有一点都不小希望会冲突,jQuery替代$是相比较安全的写法。

//html("info"):设置每八个相配成分的html内容。

    若是您早就在页面尾部加入了:  
前后相继代码 
<style>a{text-weight:bolder}</style> 
    那么当你调用了addClass函数后,全部超链接的字体将形成粗体。

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

4,demo4:--特效hide()

特效
    Effects Module(效果模块)提供了一雨后春笋好用的特效。

11,demo11:--each—find的用法
$("#orderedlist").find("li").each(function(i) {})
// find("li")寻找具有li成分,each()对聚集中的每一种对象实施情势
//each( Function 函数 fn要实践的函数 )以每三个万分的因素作为左右文来实行五个函数

$("a").click(function(){

    加上上边代码: 
先后代码 
$("a").click(function(){
    $(this).hide("slow");
    return false;
}); 
    未来,只要你点击超链接,超链接就能够稳步的毁灭。“return false"表示保留私下认可行为,由此页面不会跳转。

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

$(this).hide("slow");//对象日益的未有、掩盖

回调

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

return false; //表示不会跳转,等同js

    所谓回调就是父函数实行到位后,本身能够作为重返值传递到另一个函数的函数。回调功效的特别之处在于,出现在“父函数"前边的函数能够在回调函数实行前实行。 
    别的二个生死攸关是要精晓什么精确行使回调,作者就有的时候遗忘了不易语法。

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

});

    四个不带参数的回调应该这么写: 
前后相继代码 
$.get('myhtmlpage.html', myCallBack); 
    注意第二个参数是一个简约的函数名(它不是字符,也尚无带括号)

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

5,demo5:---降低展开作用

    那么带参数的回调该怎么写吗?
    错误的写法,上边这样写是格外的(或许不会实施): 
次第代码 
$.get('myhtmlpage.html', myCallBack(param1,param2)); 
    正确的写法: 
程序代码
$.get('myhtmlpage.html', function(){
    myCallBack(param1,param2);
}); 
    这样就兑现了回调贰个带参函数的功效。
后记       到这里,只怕你应该去会见其余的文档了。里面包涵越来越多的指南-它很全面,包罗了jquery各类方面。如果大家有毛病,请放心的给自己发Email。
    当然,你也得以看看利用jQuery做的二种DEMO。

window.onload = function(){ ... } . 访问HTML文书档案的成分,必得先载入文书档案对象模型(DOM)。当window.onload函数试行的时候,表明全数东西已经...

$(document).ready(function(){

你恐怕感兴趣的篇章:

  • jQuery选用器基础入门教程
  • JQuery入门基础小实例(1)
  • jQuery入门基础知识学习指南
  • jQuery入门介绍之基础知识
  • jQuery基础语法实例入门
  • jquery 常用操作整理 基础入门篇
  • jQuery基础_入门不可不看知识点

$("#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学习入门篇.rar

0,jQ的十分重要程序: 程序代码 window.onload = function(){ ... } . 访问HTML文书档案的因素,必需先载入文书档案对象模型(DOM)。当window.onload函数试行的时候...

本文由星彩网app下载发布于前端技术,转载请注明出处:附实例代码,学习入门篇附实例代码

TAG标签:
Ctrl+D 将本页面保存为书签,全面了解最新资讯,方便快捷。