首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >[jQuery笔记] jQuery初识

[jQuery笔记] jQuery初识

作者头像
行 者
发布2019-12-10 10:23:35
2980
发布2019-12-10 10:23:35
举报
文章被收录于专栏:运维技术迷运维技术迷

jQuery安装

jQuery可以通过多种方法在网页中加载,一般可以常用两种方法:

  1. 从jquery.com下载jQuery库
  2. 从CDN中加载,比如Google中加载jQuery,常见的CDN有:
// 百度
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">

// 又拍云
<script src="https://upcdn.b0.upaiyun.com/libs/jquery/jquery-2.0.2.min.js">

// 新浪
<script src="https://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js">

// Google
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">

// Microsoft(微软)
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.min.js"></script>

版本说明

官网上面有两个版本可以下载:

  1. production version:生产环境中,此版本是已经被精简和压缩过的;
  2. development version:常用于开发和测试,此版本的代码是可读的。

jQuery库是一个JavaScript文件,可以直接在HTML的<script>标签中引用,如下段代码所示:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>jQuery第一个案例</title>
        // 加载jquery文件,版本2以上不支持IE6、7、8浏览器;如需支持IE6/7/8请选择1.9
        <script src="js/jquery-1.8.3.min.js"></script>
    </head>
    <body>
        //和CSS一样有:类选择器、ID选择器、标签选择器
        <div id="title"><h3>jquery示例</h3></div>

<a href="www.lianst.com">Blog</a>
        <a href="dl.lianst.com">资源分享</a>
        <input type="text" class="txt" value="1">
                <input type="text" class="txt" value="2">
        <input type="button" id="btn" value="ok">
        
        <!--原生JS代码-->
        <script>
         alert(document.getElementById("btn").value);
         alert(document.getElementsByTagName("a").length);
         alert(document.getElementById("title").innerHTML);
        </script>
        
        
        <!--jQuery代码-->
        <script>
            alert(jQuery("#btn").val());
            alert(jQuery("a").size());
            alert(jQuery(".txt").size());
            alert(jQuery("#title").html());    
        </script>
        
        <!--jQuery最简化代码,$代替了jQuery很多代码-->
        <script>
            alert($("#btn").val());
            alert($("a").size());
            alert($(".txt").size());
            alert($("#title").html());
        </script>
    </body>
</html>
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • jQuery安装
  • 版本说明
相关产品与服务
内容分发网络 CDN
内容分发网络(Content Delivery Network,CDN)通过将站点内容发布至遍布全球的海量加速节点,使其用户可就近获取所需内容,避免因网络拥堵、跨运营商、跨地域、跨境等因素带来的网络不稳定、访问延迟高等问题,有效提升下载速度、降低响应时间,提供流畅的用户体验。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档