jQuery的初步了解和常用API的使用

本篇笔记目标

• 能说出jQuery是什么
• 能够说出jQuery的优点
• 能说出JQuery对象和DOM对象的区别
• 能够使用jQuery常用API，如jQuery选择器、筛选选择器、jQuery筛选方法
• 理解并能够使用链式编程
• 理解并能运用排他思想
• 能运用jQuery属性操作
• 能运用jQuery文本值操作
• 能运用jQuery元素操作
• 能运用jQuery尺寸和位置操作
• 能够说出4种常见的注册事件
• 能够说出 on 绑定事件的优势
• 能够说出 jQuery 事件委派的优点以及方式
• 能够说出绑定事件与解绑事件

一、jQuery初识

jQuery概念

​ jQuery是一个快速、简介的JavaScript库，是一个封装好的特定的方法和函数的集合。学习jQuery就是为了快速学习和调用这些函数和方法。其宗旨是“Write less, do more.” 即写更少的代码，做更多的事情。

JavaScript库：

jQuery, Prototype, YUI, Dojo, Ext JS, 移动端的zepto, 都是对原生JavaScript的封装，内部都是用JavaScript实现的。

JQuery下载

​ 官网地址：https://jquery.com/

jQuery使用步骤

• 下载jQuery文件
• 引入jQuery 文件
• 使用

二、jQuery 入门

入口函数

​ 第一种写法 （推荐写法）：

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

​ 第二种写法：

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

​ 注意点：

• 等着DOM结构渲染完毕即可执行内部代码，不必等到所有的外部资源加载完成，jQuery帮我们完成了封装
• 原生js中widow.onload = function () {}是等页面文档，外部js文件，css文件，图片加载完毕才执行内部代码。

jQuery的基本使用

jQuery的顶级对象 $

• $ === jQuery, 代码中可以相互代替，但为了方便。一般都直接用jQuery
• $ 是jQuery的顶级对象，相当于原生js中的window，把它包装成jQuery对象，就可以调用jQuery的方法。

JQuery对象和DOM对象

• 区分jQuery对象和DOM对象获取元素和修改样式的方法
  • js对象只能用js的属性和方法
  • jQuery对象只能用jQuery的属性和方法

//jQuery获取元素
$('选择器（元素）')
//原生js获取元素
document.querySelector('选择器（元素）')
document.getElementById('btn');

//jQuery修改样式
$('选择器（元素）').css('属性','值')
//原生js修改样式
btn.style.backgroundColor = "red"

• 理解jQuery对象本质：利用$对象包装后产生的对象，以伪数组的形式存储

• 相互转换

  原生js比jQuery更强大，原生的一些属性和方法在jQuery中没有封装，要想使用这些属性和方法就需要把jQuery对象转换为DOM对象才能使用

//DOM对象转换为jQuery对象 $(DOM对象)
var btn = document.querySelector('input');
btn.style.background = 'red';
=====>>
$(btn).css('background','yellow');

//jQuery 对象转换为 DOM 对象（两种方式）
$('input')
=====>>
$('input')[0]
$('input').get(0)

三、常用API

目录：

• jQuery 选择器
• jQuery 样式操作
• jQuery 效果
• jQuery 属性操作
• jQuery 文本属性值
• jQuery 元素操作
• jQuery 尺寸、位置操作
• jQuery事件

jQuery 选择器

$('#id') // 指定id元素
$('*') // 所有元素
$('.class') // 指定class元素
$('div') // 根据标签获取元素
$('div,p,li') // 获取多个元素
$('li.class') // 交集获取
$('ul>li') // 获取子代
$('ul li') // 后代

隐式迭代

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

<ul>
	<li>1</li>
	<li>2</li>
	<li>3</li>
	<li>4</li>
</ul>

js

//原生js
var lis = document.querySelectorAll('li');
for (var i = 0; i < lis.length; i++) {
   
lis[i].style.background = 'red';
}
//jQuery
$('li').css('background','red');//无需遍历循环，jquery内部已操作，$('li)返回的就是伪数组形式，无论有几个元素

jQuery筛选选择器

$('li:first')// 第一个元素
$('li:last')// 最后一个元素
$('li:eq(2)')// **索引**为2的元素
$('li:odd')// **索引**为奇数的元素
$('li:even')// **索引**为偶数的元素

jQuery 筛选方法 重点

$('li').parent()//父级
$('li').