认识jQuery - 蓝桥云课

jQuery初步认识

注意 jQuery 是脚本库,而不是脚本框架。"库"不等于"框架"。脚本框架能帮助我们解决脚本的引用管理和功能管理，然而jQuery是个库，应该就是一大堆函数的集合。
能帮我们更有效率的写javascript代码，实现各种功能。代码还可以很简洁。
浏览器的兼容性问题让人头痛。 jQuery 则通过统一event对象,让我们可以在所有浏览器中使用event.target获取事件对象。
jQuery 可以实现比如渐变弹出,图层移动等动画效果,让我们获得更好的用户体验。
onclick其实是一个匿名函数。这个后面我应该就明白啦。

jQuery版本hello world

下载 jQuery 类库

阿里云

http://labfile.oss.aliyuncs.com/jquery/1.11.1/jquery.min.js

上面的地址是总下载列表, 里面有很多版本和类型的 jQuery 库, 主要分为如下几类:

min: 压缩后的 jQuery 类库, 在正式环境上使用.如:jquery-1.3.2.min.js
vsdoc: 在 Visual Studio 中需要引入此版本的 jquery 类库才能启用智能感知.如：jquery-1.3.2-vsdoc2.js
release包: 里面有没有压缩的 jquery 代码, 以及文档和示例程序. 如:jquery-1.3.2-release.zip

官网中下载最新版本

下载地址：http://jquery.com/download/

github

https://github.com/shiyanlou/jQuery-base-code

撸代码

<!doctype html>
<html lang="zh">
  <head>
    <meta charset="utf-8"/>
    <title>Hello World jQuery!</title>
  </head>
  <body>
    <div id="divMsg">Hello World!</div>
    <input id="btnShow" type="button" value="show" />
    <input id="btnHide" type="button" value="hidden" /><br/>
    <input id="btnChange" type="button" value="change content is Hello World, too!"/>
  

    <script src="jquery-1.11.2.min.js"></script>
  <script>
      $("#btnShow").bind("click", function(event) {
        $("#divMsg").show();
      });

      $("#btnHide").bind("click", function(event) {
        $("#divMsg").hide();
      });

      $("#btnChange").bind("click", function(event) {
        $("#divMsg").html("Hello World, too!");
      });
    </script>

  </body>
</html>
copy

这里我把 <script src="jquery-1.11.2.min.js"></script>这句话放到了前，因为dom艺术那本书里面提到，这样能加快一点速度。但是因为还需要有js代码，所有需要放在 <script>前面才可以。

坑与总结

注意src的值，不是一个url的话，就要自己把js文件保存到实验目录。

效果如下：

页面上有三个按钮，分别控制 Hello World 的显示、隐藏和修改其内容。

此示例使用了：

（1）jQuery 的 ID 选择器：$("#btnShow")
（2）事件绑定函数：bind()
（3）显示和隐藏函数：show()和hide() .
（4）修改元素内部 html 的函数：html()

ok,hello world has a happy ending!

“jQuery基础入门”实验报告

jQuery初步认识

jQuery版本hello world

阿里云

官网中下载最新版本

github