jQuery入门,jquery教程 菜鸟教程

jQuery入门,jquery教程 菜鸟教程,JQuery 无废话系列教程(一) jquery入门 [推荐]

Shell(也就是这篇文章的作者)也属于刚会用JQuery的类型。在学习的过程中,尤其是入门初期,会遇到很多问题。一直在准备写一些关于JQuery的文章,但是怕自己写作和表达能力有限,会‘误导孩子’。最后,我鼓起勇气。文章如有错误或理解不当,希望朋友们直接指出批评。

这篇文章的目的是授人以鱼不如授人以渔。我只说关键的部分,我也不可能把JQuery的每个函数都讲一遍,因为有很多函数外壳我都没有在实际应用中用过。但是我们已经可以钓鱼了,为什么还要担心鱼呢!

BTW: Shell假设你已经掌握了基本的JavaScript技能和基本的CSS知识。

JQuery是什么

JQuery只是一个JS文件

人们总是对新职业表示好奇和排斥,壳牌刚开始学的时候也是一样。想掌握,又怕自己学不会其实JQuery很简单.

010-5900JQuery实际上是一个工具包。很多常用的函数都被好心人打包了,我们真的需要直接调用(有点类似SDK)。我们现在不讨论具体的内部原理和实现。

记住JQuery很简单,很方便. 目前jQuery最新发布版本为1.32,官方下载地址为http://docs.jquery.com/Downloading_jQuery.

JQuery有两个版本:

一种是未压缩版本(uncompressed version),主要用于开发。

另一种是缩小版。当开发完成后,您可以使用这个版本。

两个版本的区别

文件大小不同,最终用户可以在浏览时减少下载JS的等待时间。

未压缩版本文件大小为118KB。

缩小版的文件大小为56KB。

本系列教程基于1.32版进行讲解.

010-59001站在巨人的肩膀上

别人发明了轮子,我们就不用自己再造一个了。

二、强大的BOM、DOM、CSS、事件操作能力

我最常用的是CSS和DOM,真的很方便。

第三,更简洁的代码

我自己的亲身经历,比如用JavaScript给两种颜色的表TR码编号,JQuery只需要两行。

第四,浏览器独立

做过JavaScript开发的人都知道,JavaScript有时候在不同的浏览器中表现不一样,我们要针对不同的浏览器编写相应的代码。JQuery已经在这个方法中被内部处理了,所以我们只是使用它。

五、良好的性能

我是有自知之明的,至少我的JavaScript代码没有JQuery的高效。

JQuery能带给我们什么

万年之始,难。第一次用JQuery的时候很害怕,不知道怎么用。其实很简单。我们用一个例子来说明。)

创建一个html文件,比如index.html,放在和JQuery库文件jquery-1.3.2.js相同的目录下(实际上可以放在那里)。

首先我们解决JQuery的引用。代码如下:

超文本标记语言

标题查询测试/标题

脚本语言=' JavaScript ' src=' jquery-1 . 3 . 2 . js '/script

/头

身体

/body

/thml

现在,让我们扩展一个函数,让index.html显示一个表格,表格中每一行的颜色都不一样,即奇数行是一种颜色,偶数行是另一种颜色。

Index.html代码结构:

htmlheadmeta http-equiv=' Content-Type ' Content=' text/html;charset=utf-8 '/title jquery test/title style type=' text/CSS '

/*table中的偶数行*/。tabbeven { background:# ff 0000;}

/*table中的奇数行*/。tab odd { background:# 00ff 00;} /style脚本语言=' JavaScript ' src=' jquery-1 . 3 . 2 . js '/script脚本语言=' JavaScript ' type=' text/JavaScript '/![CDATA[ $(文档)。ready(function(){ $(' # tab test tr:even ')。add class(' tab even ');$('#tabTest tr:odd ')。add class(' tab odd ');});//]]/script/head body table id=' tab test ' tbody trtd快购网_ 1/Td td1/Td/tr tr tr Td快购网_2/td td1/td /tr tr td快购网_3/td td1/td /tr tr td快购网_ 4/Td td1/Td/tr/tr Td快购Lizhong.com _ 5/tdtd D1/Td/tr/tbody/table/body/thml

效果如下:

代码解析:

$(文档)。ready(function(){ $(' # tab test tr:even ')。add class(' tab even ');$('#tabTest tr:odd ')。add class(' tab odd ');});

$(文档)的功能。ready很简单,就是等待内部加载完所有页面再执行JavaScript代码(别忘了JQuery也是Javascript代码)。几乎所有使用JQuery的代码都会用到这个函数。因为如果我们的JavaScript代码中存在DOM操作,那么在页面被完全读取之前,整个DOM框架还没有真正建立起来,在此之前的DOM操作是无效的。

$('#tabTest tr:even ')。add class(' tab even ');添加CSS样式$ ('# tabTesttr: odd ')。为id为tabtest的表的偶数行添加名为tabEven的class(' tab odd ');为id为tabTest的表的奇数行添加名为tabEven的CSS样式。

如何使用JQuery

红色的那一行代码就完成了JQuery的引用,简单吧!

作者:万思杰

郑重声明:本文由网友发布,不代表盛行IT的观点,版权归原作者所有,仅为传播更多信息之目的,如有侵权请联系,我们将第一时间修改或删除,多谢。

相关文章阅读

  • 使用jquery实现图片轮播效果如何,jQuery图片轮播
  • 使用jquery实现图片轮播效果如何,jQuery图片轮播,使用jQuery实现图片轮播效果
  • 举例说明jquery中each函数的使用,jquery each()
  • 举例说明jquery中each函数的使用,jquery each(),JQuery中each()的使用方法说明
  • 一篇文章带你了解jquery动画人物,一篇文章带你了解jquery动画制作
  • 一篇文章带你了解jquery动画人物,jquery的动画,一篇文章带你了解jQuery动画
  • trigger的用法总结,jquery trigger 传参数
  • trigger的用法总结,jquery trigger 传参数,jQuery中值得注意的trigger方法浅析
  • js hover 触发事件显示另一元素,js hover 触发事件,jQuery中多个元素的Hover事件解决方案
  • js apply 实现原理,jquery apply用法_1
  • js apply 实现原理,jquery apply用法
  • js apply 实现原理,jquery apply用法,js中apply方法的使用详细解析
  • js apply 实现原理,jquery apply用法,JS中apply()的应用实例分析
  • jq获取radio选中的值,jquery radio 取值
  • jq获取radio选中的值,jquery radio 取值,Jquery获取radio选中值实例总结
  • 留言与评论(共有 条评论)
       
    验证码: