[jQuery笔记] jQuery初识

行者

发布于 2019-12-10 02:23:35

33600

代码可运行

文章被收录于专栏：运维技术迷运维技术迷

运行总次数：0

代码可运行

jQuery安装

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

从jquery.com下载jQuery库
从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>

版本说明

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

production version：生产环境中，此版本是已经被精简和压缩过的;
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>