1、jQuery 概述和基本使用

本文主要是介绍1、jQuery 概述和基本使用，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

1、jQuery 概述

jQuery 是一个 JavaScript 库。j 就是 JavaScript； Query 查询； 意思就是查询js，把js中的DOM操作做了封装，我们可以快速的查询使用里面的功能。学习jQuery本质就是学习调用这些函数（方法）。

2、jQuery 的基本使用

2.1 jQuery 的下载

官网地址： jQuery

各个版本的下载：jQuery CDN

2.2 jQuery 的使用步骤

（1）引入 jQuery 文件 （2）直接使用

2.3 jQuery 的入口函数

$(function () {  
... // 此处是页面 DOM 加载完成的入口 
}) ; 

jQuery 的入口函数等 DOM 结构渲染完毕即可执行内部代码，不必等到所有外部资源加载完成，相当于原生 js 中DOMContentLoaded。

2.4 jQuery 的顶级对象 $

(1)$ 是 jQuery 的别称，在代码中可以使用 jQuery 代替 $。

(2)$ 是jQuery 的顶级对象， 相当于原生JavaScript中的 window。把元素利用$包装成jQuery对象，就可以调用 jQuery 的方法。

2.5 jQuery 对象和 DOM 对象

(1)DOM 对象：用原生js获取过来的对象，使用原生的 JavaScirpt 属性和方法

var myDiv = document.querySelector('div'); 
// myDiv 是DOM对象
var mySpan = document.querySelector('span'); 
// mySpan 是DOM对象

(2)jQuery对象：用jquery方式获取过来的对象，jQuery对象只能使用jQuery方法

$('div'); // $('div')是jQuery对象
$('span'); // $('span')是jQuery对象

(3)DOM 对象与 jQuery 对象之间的相互转换

（原生js 比 jQuery 更大，一些属性和方法 jQuery并没有给我们封装. 要想使用这些属性和方法需要把 jQuery对象转换为DOM对象才能使用）

DOM 对象转换为 jQuery 对象： $(DOM对象)

$('div') //直接获取，得到就是jQuery对象

jQuery 对象转换为 DOM 对象（两种方式）

jQuery 对象以伪数组形式存储

$('div') [index] // index 是索引号

$('div') .get(index) // index 是索引号

3、 隐式迭代（重要）

遍历内部 DOM 元素（伪数组形式存储）的过程就叫做隐式迭代。

// 隐式迭代就是把匹配的所有元素内部进行遍历循环，给每一个元素添加css这个方法
  $("ul li").css("color", "red");

4、链式编程

实现链式编程的核心：在方法中，js提供一个this的关键字，表示当前对象，

对象中的每一个方法都会返回当前对象，简化代码量

$(this).css('color', 'red').sibling().css('color', ''); 

这篇关于1、jQuery 概述和基本使用的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！