前端学习开发之【jQuery】

本地存储

1.特性

1. 数据存储在浏览器中；
2. 页面刷新不丢失数据；
3. 容量大，sessionStorage约5M，localStorage约20M；
4. 只能存储字符串，对象需要编码。

2.window.sessionStroage

1. 生命周期为关闭浏览器窗口(该页面)；
2. 在同一个窗口下数据可以共享；
3. 以键值对的形式存储使用。

存储数据：
sessionStorage.setItem(key,value);
获取数据：
sessionStorage.getItem(key);
删除数据：
sessionStorage.removeItem(key);
更改数据：
直接覆盖即可。
删除所有数据：
sessionStorage.clear();

3. window.localStorage

1. 生命周期永久生效，除非手动删除，否则关闭页面也会存在；
2. 可以多窗口共享；
3. 以键值对存储。
   存储数据：
   localStorage.setItem(key,value);
   获取数据：
   localStorage.getItem(key);
   删除数据：
   localStorage.removeItem(key);
   更改数据：
   直接覆盖即可。
   删除所有数据：
   localStorage.clear();

jQuery入门

1.概述

JS库：
一个封装好的特定的集合（方法或函数）。

jQuery：为了快速方便地操作DOM，里面基本都是函数。

jQuery是一个快速、简洁的JS库，设计宗旨是Write Less，Do More。把JS中DOM操作进行了封装，优化了DOM操作、事件处理、动画设计和Ajax交互。

优点：

1. 轻量级，不会影响页面加载速度；
2. 跨浏览器兼容；
3. 链式编程，隐式迭代；
4. 对事件、样式、动画支持，大大简化了DOM操作；
5. 支持插件开发；
6. 免费、开源。

2.基本使用

1. 去官网下载jQuery文件，（压缩版即可）；
2. 引入jQuery文件：
   <script src="jQuery.min.js"></script>

入口函数：

• 等页面DOM加载完再执行js代码；
• 相当于原生js中的DOMContentLoaded；
• 等页面文档、外部js文件、css文件、图片都加载完毕才执行内部代码。

写法一：

$(document).ready(function(){

})

写法二：

$(function(){

})

3. jQuery对象

1. $是jQuery的别称，在代码中可以使用jQuery代替；
2. $是jQuery的顶级对象，相当于js的window，把元素利用 $包装成jQuery对象，可以调用jQuery方法；
3. DOM对象：用原生js获取来的对象；
4. jQuery对象：用jquery方法获取过来的，$(' ')，以伪数组方式存储。
5. jQuery对象只能使用jQuery方法，DOM对象使用原生js属性和方法；
6. 原生js比jQuery大，因为它封装了部分常用属性和方法。

转换：
DOM→jQuery：
$('DOM对象')

jQuery→DOM：

$(' ')[index]或$(' ').get(index) index=0

4. 常用API

选择器：
$(' 选择器 ')

设置样式：
$(' ').css('属性','值')

隐式迭代：
遍历内部DOM元素（伪数组方式存储）的过程。简单说就是把匹配到的所有元素进行循环遍历，执行相应方法，不用我们再进行循环。

筛选选择器：


排他思想：
利用隐式迭代获取全部元素，然后添加事件，设置当前，去掉兄弟。

链式编程：
减少代码量。自己怎样.兄弟怎样

样式操作：

1. 操作css：

• 参数只写属性名，则返回属性值：$(' ').css("属性名")；
• 修改：$(' ').css("属性名","属性值") 逗号分割，加引号；
• 参数是对象，修改多个属性。

2. 操作类：

• 添加类：$(' ').addClass("类名")；
• 删除类：$(' ').removeClass("类名")；
• 切换类：$(' ').toggleClass("类名")；添加或删除
  注意：原生js操作类会覆盖，jQuery不会覆盖，会追加，只修改指定类名的类。

5.动画效果

显示与隐藏：
show([speed,[easing],[fn]])
hide([speed,[easing],[fn]])
toggle([speed,[easing],[fn]])

• 参数都可以省略，无动画直接显示；
• speed：速度，slow或normal或fast或动画时长毫秒数；
• easing：切换效果，默认swing，可设置为linear；
• fn：回调函数，动画完成时的执行函数，每个元素执行一次。

滑动：
slideDown([speed,[easing],[fn]])
slideUp([speed,[easing],[fn]])
slideToggle([speed,[easing],[fn]])

切换事件：
hover([over,]out)

• over：鼠标移动到元素上要触发的函数；
• out：鼠标移出元素要触发的函数

动画队列：
动画效果一旦触发就会执行，如果多次触发，就会造成多个动画或效果排队执行。

停止排队：
stop() 必须写在动画的前面，因为它结束上一次动画。

淡入淡出效果：
fadeIn([speed,[easing],[fn]])
fadeout([speed,[easing],[fn]])
fadeToggle([speed,[easing],[fn]])

fadeTo(speed,opacity,[easing],[fn]):修改透明度 opacity：0~1

自定义动画：
animate(params,[speed],[easing],[fn])

• params：想要更改的样式属性，以对象形式传递，必须写，属性名可以不带引号，如果是复合属性则需要采用驼峰命名法。

6.属性操作

固有属性：

• 获取属性值：
  prop("属性")
• 设置属性值：
  prop("属性","属性值")

自定义属性：

• 获取属性值：attr("属性")
• 设置属性值：attr("属性","属性值")

数据缓存data():
data()方法可以在指定元素上存取数据，并不会修改DOM元素结构，一旦页面刷新之前存放的数据都将被移除。
获取h5自定义属性不用写data– 返回数字型。

7.内容文本值操作

针对元素的内容还有表单的值：

• 获取元素内容：$(' ').html()
• 修改元素内容：$(' ').html("值")
• 获取文本内容：$(' ').text()
• 修改文本内容：$(' ').text("值")
• 获取表单内容：$(' ').val()
• 修改表单内容：$(' ').val("值")

8. 元素操作

遍历元素：
隐式迭代可以对一组元素进行同样的操作；
如果想给同一元素做不同操作，需要遍历。

$(" ").each(function(index,domEle){ })

• each()方法遍历匹配的每一个元素，主要用DOM处理；
• index是每个元素的索引号，domEle是每个DOM对象。

$.each(object,function(index,element){ })

• $.each()方法可用于遍历任何对象，比如数组、对象
• index是每个元素的索引号，element遍历内容

创建元素：
var name=$(" 元素 ")
添加元素：

• 内部添加：$(" 原").append("要添加的") 放置在原元素的最后；$(" 原").prepend("要添加的")放在原元素最前； 成父子
• 外部添加：element.after("内容") element.before("内容") 成兄弟

删除元素：

• $(element).remove() 删除元素本身
• $(element).empty() 删除元素子节点，不删除本身
• $(element).html("") 清空该元素内容，同上

9. 尺寸与位置

position只能获取不能设置。

scroll：滚动事件

节流阀 互斥锁

10.事件

事件注册：
单个事件注册：$(" ").click(function(){ })
事件处理：
on()方法在匹配元素上绑定一个或多个事件的事件处理函数；
element.on(events,[selector],fn)

• events：一个或多个用空格分隔的事件类型；
• selector：元素的子元素选择器；
• fn：回调函数
  events：对象，eg：

$("div").on({
click:function(){ },mouseenter:function(){ }
})

可以完成事件委派操作：要加给子元素的事件绑定在父元素身上，把事件委派给父元素；

$("ul").on("click","li",function(){ })

给动态创建的元素绑定事件（未来创建的元素也可以绑定）。

解绑事件：
off()方法可以移除on()方法绑定的事件处理程序。
$(" ").off()：解除所有事件；
$(" ").off("事件名 ")：接触指定事件；
$(" ").off("事件名","子元素")：解除事件委托。

one()：只触发事件一次 ，用法等于on。

自动触发事件：
定时器自动触发，不必进行鼠标操作。

• 直接在入口函数里:$(" ").事件()；
• $("element").trigger("事件");
• $("element").triggerHandler("事件")：不会触发元素默认行为

事件对象：

11.其他方法

对象拷贝：
$.extend([deep],target,object1,[objectN]
会覆盖目标原有属性值；

• deep：为true则为深拷贝，为false则为浅拷贝；
• target：拷贝到的目标对象；
• object：待拷贝的对象

深拷贝：会拷贝其的子对象，新开辟空间，属性合并
浅拷贝：把原来对象的复杂数据类型地址拷贝给目标对象（同一个子对象），属性覆盖。

多库共存：
$可能会冲突，解决方案：

• 把$统一改为jQuery；
• 自己设置新名字：var xx=$.noConflict()

jQuery插件

代码007普通

打赏 收藏 海报 链接