jQuery教程

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 概述和基本使用的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!