[jQuery笔记] jQuery初识
- 2019 年 12 月 10 日
- 筆記
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>
