jQuery 是一个 JavaScript 库。j 就是 JavaScript; Query 查询; 意思就是查询js,把js中的DOM操作做了封装,我们可以快速的查询使用里面的功能。学习jQuery本质就是学习调用这些函数(方法)。
官网地址: jQuery
各个版本的下载:jQuery CDN
(1)引入 jQuery 文件 (2)直接使用
$(function () { ... // 此处是页面 DOM 加载完成的入口 }) ;
jQuery 的入口函数等 DOM 结构渲染完毕即可执行内部代码,不必等到所有外部资源加载完成,相当于原生 js 中DOMContentLoaded。
(1)$ 是 jQuery 的别称,在代码中可以使用 jQuery 代替 $。
(2)$ 是jQuery 的顶级对象, 相当于原生JavaScript中的 window。把元素利用$包装成jQuery对象,就可以调用 jQuery 的方法。
(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 是索引号
遍历内部 DOM 元素(伪数组形式存储)的过程就叫做隐式迭代。
// 隐式迭代就是把匹配的所有元素内部进行遍历循环,给每一个元素添加css这个方法 $("ul li").css("color", "red");
实现链式编程的核心:在方法中,js提供一个this的关键字,表示当前对象,
对象中的每一个方法都会返回当前对象,简化代码量
$(this).css('color', 'red').sibling().css('color', '');