推荐阅读
  • jQuery 停止动画

    $(document).ready(function(){ $('.flip').click(function(){ $('.panel').slideToggle(5000); }); $('#stop').click(function(){ $('.panel').stop(); }

  • jQuery 祖先

    jQuery 遍历 - 祖先 祖先是父、祖父或曾祖父等等。 通过 jQuery,您能够向上遍历 DOM 树,以查找元素的祖先。 向上遍历 DOM 树 这些 jQuery 方法很有用,它们用于向上遍历 DOM 树: parent() parents() parentsUntil() jQuery parent() 方法 parent() 方法返回被选元素的直接父元素。 该方法

  • jQuery 链

    jQuery - 链(Chaining) 通过 jQuery,可以把动作/方法链接在一起。 Chaining 允许我们在一条语句中运行多个 jQuery 方法(在相同的元素上)。 jQuery 方法链接 直到现在,我们都是一次写一条 jQuery 语句(一条接着另一条)。 不过,有一种名为链接(chaining)的技术,允许我们在相同的元素上运行多条 jQuery 命令,一条接着另一条。 提

  • jQuery Prettydate

    jQuery Prettydate jQuery Prettydate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求。该插件捆绑了一套有用的验证方法,包括 URL 和电子邮件验证,同时提供了一个用来编写用户自定义方法的 API。所有的捆绑方法默认使用英语作为错误信息,且已翻译成其他 37 种语言。 该插件目前版本是 1.1.0。 下载

  • jQuery 事件

    jQuery 事件 jQuery 是为事件处理特别设计的。 什么是事件? 页面对不同访问者的响应叫做事件。 事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。 实例: 在元素上移动鼠标。 选取单选按钮 点击元素 在事件中经常使用术语“触发”(或“激发”)例如: “当您按下按键时触发 keypress 事件”。 常见 DOM 事件: 鼠标事件 键盘事件 表单事件 文档/

  • jQuery 过滤

    jQuery 遍历- 过滤 缩小搜索元素的范围 三个最基本的过滤方法是:first(), last() 和 eq(),它们允许您基于其在一组元素中的位置来选择一个特定的元素。 其他过滤方法,比如 filter() 和 not() 允许您选取匹配或不匹配某项指定标准的元素。 jQuery first() 方法 first() 方法返回被选元素的首个元素。 下面的例子选取首个 &amp

  • jQuery CSS 类

    $(document).ready(function(){ $('#btnEx').click(function(){ $('#test').toggleClass('important'); }); }); .important { font-size:x-large; font-weight:bold; color

  • jQuery Growl

    jQuery Growl 插件(消息提醒) jQuery Growl 插件(消息提醒) 允许您很容易地在一个覆盖层显示反馈消息。消息会在一段时间后自动消失,不需要单击'确定'按钮等。用户也可以通过移动鼠标或点击关闭按钮加快隐藏信息。 该插件目前版本是 1.0.0。 访问 jQuery Growl 官网,下载 jQuery Growl 插件。 效果如下: 使用方

  • jQuery 实例

    jQuery 实例 你想增进 jQuery 技能吗? jQuery 选择器 $(this).hide() 演示 jQuery 的 hide() 函数,隐藏当前的 HTML 元素。 $('p').hide() 演示 jQuery 的 hide() 函数,隐藏所有 <p> 元素。 $('.test').hide() 演示 jQ

  • jQuery 后代

    jQuery 遍历 - 后代 后代是子、孙、曾孙等等。 通过 jQuery,您能够向下遍历 DOM 树,以查找元素的后代。 向下遍历 DOM 树 下面是两个用于向下遍历 DOM 树的 jQuery 方法: children() find() jQuery children() 方法 children() 方法返回被选元素的所有直接子元素。 该方法只会向下一级对 DOM 树

jQuery 安装

可以通过多种方法在网页中添加 jQuery。 您可以使用以下方法:

jquery.com 下载 jQuery 库

Production version - 用于实际的网站中,已被精简和压缩。

Development version - 用于测试和开发(未压缩,是可读的代码)

以上两个版本都可以从 jquery.com 中下载。

从 CDN 中载入 jQuery


新浪CDN:

<script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>

百度CDN:

<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>

360CDN:

<script src="http://libs.useso.com/js/jquery/1.9.1/jquery.min.js"></script>



引用安装本地jQuery

jQuery 库是一个 JavaScript 文件,您可以使用 HTML 的 <script> 标签引用它:


 <head>
<script src="jquery-3.5.1.min.js"></script>
</head>

使用CDN模式

比如我们使用上面提示的百度的jQuery CDN

 <head>
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js">
</script>
</head>

使用 CDN 优势

使用  CDN、百度、 新浪、谷歌或微软的 jQuery,有一个很大的优势:

许多用户在访问其他站点时,已经从百度、又拍云、新浪、谷歌或微软加载过 jQuery。所以结果是,当他们访问您的站点时,会从缓存中加载 jQuery,这样可以减少加载时间。同时,大多数 CDN 都可以确保当用户向其请求文件时,会从离用户最近的服务器上返回响应,这样也可以提高加载速度。

检查是否安装成功


 <script>
$(document).ready(function () {
    alert('test')
});
</script>
尝试一下

点击 "尝试一下" 按钮查看在线实例


创建一个简单的项目

显示/隐藏 文本框

 <p id="demo">这是一个文本框</p>
       <button onclick="hide()">点击隐藏文本</button>
       <button onclick="show()">点击显示文本</button>
       <script>
           //隐藏文本
           function hide(){
              $("#demo").hide();
           }
           //显示文本
           function show(){
              $("#demo").show();
           }
       </script>
尝试一下

点击 "尝试一下" 按钮查看在线实例

低级错误

我们必须先把jQuery库文件引入,才能够使用jQuery。也就是说你写的jQuery代码必须在jQuery库文件下面才能生效。

像下面这种方式就是错误的,初学者很容易犯这种低级错误,大家好好好注意一下。

 <script  type="text/javascript">
    //你的jQuery代码
</script>
<!—jQuery库-->
<script type="text/javascript" src="jquery-1.19.0.min.js"></script>

关于我们 免责声明 联系我们
Copyright © 2020 爱学习网 浙ICP备18049359号 网站地图 Google地图