认识jQuery

喜欢ヅ旅行 2022-05-16 05:54 191阅读 0赞

## 一、了解jQuery ##

1，是什么（What）

*  一个JS函数库
 *  封装简化DOM操作（CRUD）/Ajax

2，为什么用它（Why）

*  强大的选择器：方便快速查找DOM元素
 *  隐式遍历（迭代）：一次操作多个元素
 *  读写合一：读数据/写数据用的是一个函数
 *  链式调用：可以通过，不断调用jQuery对象的方法
 *  事件处理
 *  DOM操作（CUD）
 *  样式操作
 *  动画
 *  浏览器兼容

3，如何使用（How）

*  引入jQuery库
    
    本地引入与CDN远程引入  
    测试版与生产版（压缩版）
 *  使用jQuery
    
    使用jQuery函数：$/jQuery
    
    使用jQuery对象：执行$()得到的

## 二、jQuery的两把利器 ##

1，jQuery函数：$/jQuery：

*  jQuery向外暴露的就是jQuery函数，可以直接使用
 *  当成一般函数使用：$(param)
 *  param是function: 相当于window.onload = function(文档加载完成的监听)
 *  param是选择器字符串: 查找所有匹配的DOM元素, 返回包含所有DOM元素的jQuery对象
 *  param是DOM元素: 将DOM元素对象包装为jQuery对象返回 $(this)
 *  param是标签字符串: 创建标签DOM元素对象并包装为jQuery对象返回
 *  当成对象使用: $.xxx
 *  each(obj/arr, function(key, value)\{\}) 遍历
 *  trim(str) 去除首尾空格

2，jQuery对象

*  包含所有匹配的n个DOM元素的伪数组对象
 *  执行$()返回的就是jQuery对象
 *  基本行为:
    
     *  length/size(): 得到dom元素的个数
     *  \[index\]: 得到指定下标对应的dom元素
     *  each(function(index, domEle)\{\}): 遍历所有dom元素
     *  index(): 得到当前dom元素在所有兄弟中的下标

## 三、属性/文本操作 ##

*  操作标签的属性, 标签体文本
 *  attr(name) / attr(name, value): 读写非布尔值的标签属性
 *  prop(name) / prop(name, value): 读写布尔值的标签属性
 *  removeAttr(name)/removeProp(name): 删除属性
 *  addClass(classValue): 添加class
 *  removeClass(classValue): 移除指定class
 *  val() / val(value): 读写标签的value
 *  html() / html(htmlString): 读写标签体文本