web前端开发之jQuery使用一

都说HTLM5就和英语一样,入门简单,但越学越难,真的是这样的吗?确实是这样。不过不用担心,今天小编特意邀请了一位专门学习HTML5的同学给大家分享一下他的学习感悟。希望对学HTML5开发的朋友有所帮助。闲话少提,直奔核心。

  一、jQuery是什么?

  是对JavaScript封装的一个框架包,旨在简化对JavaScript的操作.

  JavaScript代码:获得元素的节点对象、ajax实现、事件操作、事件对象(大量重复代码,并且考虑到浏览器的兼容性问题)

  jQuery代码:无需考虑浏览器兼容问题,代码少.

     二、jQuery特点

  2.1语法简练,语义易懂,学习快速,文档丰富

  2.2轻量级脚本,代码小巧

  2.3支持CSS1~CSS3定义的属性和选择器

  2.4是跨浏览器的,支持包括IE6.0、FF1.5-、Safari2.0+和Opera9.0+

  2.5能将JavaScript脚本和HTML源代码完全分离,便于后期编辑和维护

  2.6插件丰富,可以实现更多功能

  三、其他JavaScript相关的框架包

  Prototype、YUI、Extjs、bindows、JSVM、mootools等

  Prototype:与面向对象的原型集成关键字一致,该框架特点是功能扩展比较容易.

  YUI:Yahoo雅虎用户接口,该框架可以实现各种页面布局效果.比如标签切换对应内容.

  Extjs:该框架可以实现许多绚丽的效果.比如:页面不同区域进行拖拽效果.

  四、简单使用

  4.1下载

下载jquery

  4.2进入下载页面

  这里看实际需求选择不同的jQuery框架

jQuery下载界面

  4.3下载某版本的jQuery代码

jQuery代码

  4.4将jQuery导入工程.js文件

  将jQuery代码复制到工程的.js文件

  五、演示代码

  这里使用的是HBuilder软件

程序图标

  软件界面

代码界面

  index.html文件

!DOCTYPEhtmlhtmlheadmetacharset=UTF-8title测试网页/title!--引入外部js文件--scripttype=text/javascriptsrc=index.js/scriptscripttype=text/javascriptfunctionf1(){//通过原生js实现varsult=document.getElementById(username).value;alert(sult);//通过jQuery实现varsult=$(#onclick).val();alert(sult);}/scriptstyletype=text/css/style/headbodyinputid=usernametype=textname=userNamevalue=laowang/inputid=onclicktype=buttonvalue=触发onclick=f1()//body/html

  演示效果

浏览器界面

浏览器界面

  结语

  jQuery使用前期:侧重快速找到页面上的各种节点.

  jQuery使用后期:丰富了事件操作、ajax操作、动画效果、DOM操作等.

  在后续文章中,会对jQuery的上述的使用进行逐一讲解.









































治白癜风有什么偏方
长春治白癜风最好的医院



转载请注明:http://www.nylrzx365.com/glgj/4878.html

  • 上一篇文章:
  •   
  • 下一篇文章: 没有了