[jQuery笔记] jQuery初识

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>

文章最后更新时间 : 2018年11月01日 20:55:38

评论已关闭