51Testing软件测试论坛

 找回密码
 (注-册)加入51Testing

QQ登录

只需一步,快速开始

微信登录,快人一步

手机号码,快捷登录

查看: 1702|回复: 2
打印 上一主题 下一主题

Jquery的简介及由来

[复制链接]

该用户从未签到

跳转到指定楼层
1#
发表于 2018-6-20 17:08:13 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式
jQuery由美国人John Resig在2006年初创建,是继prototype之后又一个优秀的javaScript框架。
•jQuery是一个快速的,简洁的javaScript库,使用户能更方便地处理HTML documents、events、实现
动画效果,并且方便地为网站提供AJAX交互。
•程序员:简化javascript和ajax编程,能够使程序员从设计和书写繁杂的JS应用中解脱出来,将关注点
转向功能需求而非实现细节上,从而提高项目的开发速度。•
• 用户:改善了页面视觉效果,增强了与页面的交互性,体验更绚丽的网页物资。
•jQuery 是继 Prototype 之后又一个优秀的 JavaScript 库
•jQuery 理念: 写得少, 做得多. 优势如下:
–轻量级
–强大的选择器
–出色的 DOM 操作的封装
–可靠的事件处理机制
–完善的 Ajax
–出色的浏览器兼容性
–链式操作方式
–等
•轻量级:
     经GZip压缩后传输的代码文件仅29KB,未经压缩传送的代码文件仅120KB
•链式语法 :
     $("p.surprise").addClass("ohmy").show("slow");•
•CSS1-3选择器:支持CSS选择器选定DOM对象
•跨浏览器:支持IE 6.0+、Opera 9.0+、Firefox 1.5+、Safari 2+
•  简单:  jQuery文档说明很全,各种应用说明也很详 细,同时还有很多成熟的插件可供选择
• 易扩展: jQuery能够使用户的html页保持代码和html 内容分离,也就是说,不用再在html里面插入
一堆js来调用命令了,只需定义id即可
JQuery的特点:
屏蔽浏览器差异,对DOM的操作提供了方便
的扩展,易用的事件处理API和动画API。
强大的插件机制。
社区活跃,文档非常齐全,全部配有示例。学
习容易,易用性很高。

Jquery是继prototype之后又一个优秀的Javascrīpt框架。它是轻量级的js库(压缩后只有21k) ,兼容各
种浏览器 (IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+)。jQuery使用户能更方便地处理HTML docum
ents、events、实现动画效果,并且方便地为网站提供。

当DOM载入就绪可以查询操纵时绑定一个要执行的函数

Jquery的基本编辑器

1)#id

  根据指定的id匹配一个元素

  如果选择器中包含特殊字符,可以用两个斜杠转义

用法:$("#idname");

2)、element

   根据元素名匹配所有的元素

   一个用于搜索的元素,指向DOM节点的标签名

  用法:$("元素标签名称")

3).class

   根据给定的类名匹配元素

   一个用于搜索的类。一个元素可以有多个类,只要有一个符合条件的就能匹配到。

用法(".类名")

4)、*

匹配所有的元素

找到每一个元素

用法:$("*")  

Jquery的第一个小实例
  1. <p>
  2. </p><p><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"></p><p>
  3. </p><p><html xmlns="http://www.w3.org/1999/xhtml"> </p><p>
  4. </p><p><head></p><p>
  5. </p><p><title>jquery与dom的相互转化</title></p><p>
  6. </p><p><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></p><p>
  7. </p><p><script language="javascript" type="text/javascript" src="./include/jquery.js"></script></p><p>
  8. </p><p> </p><p>
  9. </p><p><script language="javascript" type="text/javascript"></p><p>
  10. </p><p>$(document).ready(function (){  </p><p>
  11. </p><p>//使用普通dom获取文本框的值</p><p>
  12. </p><p>//var document1=document.getElementById("content").value;</p><p>
  13. </p><p>//alert(document1);</p><p>
  14. </p><p>//使用jquery方式获取</p><p>
  15. </p><p>  // var invalue=$("#content");//$(普通对象)转换为jquery对象</p><p>
  16. </p><p>//alert(invalue.val());</p><p>
  17. </p><p>//把jquery对象转换成普通对象(-)</p><p>
  18. </p><p>var domcon=$("#content").get(0);</p><p>
  19. </p><p>alert(domcon.value);</p><p>
  20. </p><p>//(二)</p><p>
  21. </p><p>var domcon=$("#content")[0];</p><p>
  22. </p><p>alert(domcon.value);</p><p>
  23. </p><p> } ); </p><p>
  24. </p><p> </script></p><p>
  25. </p><p></head></p><p>
  26. </p><p><body></p><p>
  27. </p><p><input type="text" value="jquery学习" id="content"></p><p>
  28. </p><p></body></p><p>
  29. </p><p></html></p>
复制代码


分享到:  QQ好友和群QQ好友和群 QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友
收藏收藏
回复

使用道具 举报

  • TA的每日心情
    慵懒
    昨天 10:15
  • 签到天数: 1521 天

    连续签到: 5 天

    [LV.Master]测试大本营

    2#
    发表于 2018-6-26 11:12:57 | 只看该作者
    感谢分享·~
    回复 支持 反对

    使用道具 举报

    本版积分规则

    关闭

    站长推荐上一条 /1 下一条

    小黑屋|手机版|Archiver|51Testing软件测试网 ( 沪ICP备05003035号 关于我们

    GMT+8, 2024-11-23 00:41 , Processed in 0.066128 second(s), 22 queries .

    Powered by Discuz! X3.2

    © 2001-2024 Comsenz Inc.

    快速回复 返回顶部 返回列表