jQuery初识目录

  • 什么是jQuery
  • （1）jQuery概念
  • （2）jQuery库包含的功能- HTML 元素选取
  • （3）jQuery版本与浏览器兼容问题
  • jQuery 安装
  • jQuery入门
  • （1）jQuery对象
  • （2）基础语法
  • （3）文档就绪事件
  • （4）load和ready的区别


什么是jQuery

（1）jQuery概念

  • jQuery是一个轻量级的JavaScript函数库
  • jQuery是一个轻量级的“写的少，做得多”的JavaScript库

（2）jQuery库包含的功能- HTML 元素选取

  • HTML 元素操作
  • CSS 操作
  • HTML 事件函数
  • JavaScript 特效和动画
  • HTML DOM 遍历和修改
  • AJAX

（3）jQuery版本与浏览器兼容问题

  • 1.x：兼容ie678,使用最为广泛的，官方只做BUG维护，功能不再新增。因此一般项目来说，使用1.x版本就可以了，最终版本：1.12.4 (2016年5月20日)
  • 2.x：不兼容ie678，很少有人使用，官方只做BUG维护，功能不再新增。如果不考虑兼容低版本的浏览器可以使用2.x，最终版本：2.2.4 (2016年5月20日)
  • 3.x：不兼容ie678，只支持最新的浏览器。除非特殊要求，一般不会使用3.x版本的，很多老的jQuery插件不支持这个版本。目前该版本是官方主要更新维护的版本。最新版本：3.3.1（2018年1月20日）
  • 使用条件注释来适配浏览器：
<!--[if lt IE 9]>
    <script src="jquery-1.9.0.js"></script>
<![endif]-->
<!--[if gt IE 9]><!-->
    <script src="jquery-2.0.0.js"></script>
<!--<![endif]-->

jQuery 安装

jQuery 库是一个 JavaScript 文件，您可以使用 HTML 的

  • 从 jquery.com 下载 jQuery 库，然后在本地通过
百度 CDN：
<head>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
</script>
</head>

jQuery入门

（1）jQuery对象

在JQuery库中，可以通过本身自带的方法获取页面 DOM元素 的对象叫做JQuery对象。

  • 使用$表示jQuery对象， $ == jQuery
  • $()就是jQuery()， $() == jQuery() == new jQuery()(表达的是同一个意思，但是布尔值不相等)
    jQuery通过$()来获取元素，()内部传入选择器

（2）基础语法

jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作。

$(selector).action()

  • 美元符号（$）定义 jQuery
  • 选择符（selector）“查询"和"查找” HTML 元素
  • jQuery 的 action() 执行对元素的操作

实例:

  • $(this).hide() - 隐藏当前元素
  • $(“p”).hide() - 隐藏所有 <p> 元素
  • $(“p.test”).hide() - 隐藏所有 class=“test” 的<p> 元素
  • $("#test").hide() - 隐藏所有 id=“test” 的元素

（3）文档就绪事件

这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码，即在 DOM 加载完成后才可以对 DOM 进行操作。

$(document).ready(function(){ 
   // 开始写 jQuery 代码...
});


//简写语法：
$(function(){
   // 开始写 jQuery 代码...
});

（4）load和ready的区别

  • javascript入口函数：
window.onload = function () {
    // 执行代码
}
  • jQuery入口函数：
$(document).ready(function(){
    // 执行代码
});
或者
$(function(){
    // 执行代码
});

jquery 逻辑与 基于jquery的框架有哪些_HTML