jQuery概述及基本语法

╰+哭是因爲堅強的太久メ 2022-05-16 07:19 251阅读 0赞

#### 一、jQuery简介 ####

**1. 简介**

> jQuery是继Prototype之后又一个优秀的JavaScript库。它是轻量级的js库，它兼容CSS3，还兼容各种浏览器。jQuery使用户能更方便地处理HTML（标准通用标记语言下的一个应用）、events、实现动画效果，并且方便地为网站提供AJAX交互。jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。jQuery能够使用户的HTML页面保持代码和HTML内容分离，也就是说，不用再在html里面插入一堆js来调用命令了，只需要定义id即可。  
>   
> jQuery是免费、开源的，使用MIT许可协议。jQuery的语法设计可以使开发更加便捷，例如操作文档对象、选择DOM元素、制作动画效果、事件处理、使用Ajax以及其他功能。除此以外，jQuery提供API让开发者编写插件。其模块化的使用方式使开发者可以很轻松的开发出功能强大的静态或动态网页。

**2. 优点 and 缺点**

优点：

*  写少代码，做多事情（write less do more）；
 *  免费，开源且轻量级的js库，容量很小；
 *  兼容市面上主流浏览器，例如 IE、Firefox、Chrome；
 *  能够处理 html/jsp/xml、css、dom、事件、实现动画效果，也能提供异步ajax功能；
 *  文档手册很全，很详细，而且有成熟的插件可供选择；
 *  不用再在html里面通过`<script>`标签插入一大堆js来调用命令了，只需要定义id即可。

缺点：

*  由于不是原生JavaScript语言，理解起来可能会受到限制；
 *  项目中需要包含jQuery库文件，如果包含多个版本的jQuery库，不仅显得过于臃肿而且可能会发生冲突。

**3. 作用**  
　　jQuery最主要的作用是简化js的操作。

**4. 引入jQuery**

*  从 [Jquery.com][] 下载 jQuery
 *  下载 jQuery后，可以使用 HTML 的 `<script>` 标签引用

#### 二、jQuery基本语法 ####

**1. jQuery 语法**

> jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作  
> 基础语法： $(selector).action()  
> 美元符号定义 jQuery，选择符（selector）“查询"和"查找” HTML 元素，jQuery 的 action() 执行对元素的操作

实例：

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

**2. 事件加载 $(document).ready(function()\{\});**

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

> 当 DOM（文档对象模型） 已经加载，并且页面（包括图像）已经完全呈现时，才会发生 ready 事件。  
> 由于该事件在文档就绪后发生，因此把所有其他的 jQuery 事件和函数置于该事件中是非常好的做法。  
>   
> $(document).ready() 里的代码是在页面内容都加载完才执行的，而直接写到script标签里，当页面加载完这个script标签才会执行里边的代码，如果标签里执行的代码调用了当前还没加载过来的代码或者dom，那么就会报错。

**3. 其他常用事件**

1.$("#button1").click(function(){ 
    	//something
    });
    
    2.$("#image1").mouseenter(function(){ 
    	//something
    });

#### 三、JS和jQuery的区别 ####

**1. 加载完成事件**

*  JS加载事件每个页面只能有一个，并且是下面的加载事件覆盖上面的
 *  jQuery加载事件每个页面可以有多个

//原生js的加载完成事件
    window.onload = function () { 
        alert("js加载事件1");  //没有运行
    };
    window.onload = function () { 
        alert("js加载事件2");  //有运行
    };
    
    //jquery的加载完成事件
    $(function () { 
        alert("jquery加载事件1");  //有运行
    });
    $(function () { 
         alert("jquery加载事件2");  //有运行
    });

**2. 根据ID取元素**

*  JS取到的是一个DOM对象，例：`var span= document.getElementById("span_id");`
 *  jQuery取到的是一个jQuery对象，例：`var span = $("#span_id");`

**3. 根据class取元素**

*  JS：`var span = document.ElementsByClassName("span_class");`
 *  jQuery：`var span = $(".span_class");`

**4. 根据name取元素**

*  JS：`var span= document.getElementsByName(span_name);`
 *  jQuery：`var span = $("[name='span_name']");`

**5. 根据标签名取元素**

*  JS：`var span= document.getElementsByTagName("span");`
 *  jQuery：`var = $("div span");`

**6. 操作内容**

非表单元素（如果是文本就用text方法，如果是html代码就用html方法）

*  JS：`xx.text();` \-无参数的情况下是取值 　`xx.text("test");` \-有参数的情况下是赋值
 *  jQuery：`xx.html();` \-无参数的情况下是取值 　`xx.html("test");` \-有参数的情况下是赋值

表单元素