【前端】JQuery(学习笔记)

2024-01-02 06:03:27

一、JQuery概述

1、JQuery框架

JQuery:一个JavaScript框架。简化JS开发

JavaScript框架:本质上就是一些js文件,封装了js的原生代码

2、JQuery版本

1)1.x

兼容ie678,使用最为广泛的,官方只做BUG维护,功能不再新增。因此一般项目来说,使用1.x版本就可以了。

最终版本:1.12.4 (2016年5月20日)

2)2.x

不兼容ie678,很少有人使用,官方只做BUG维护,功能不再新增。如果不考虑兼容低版本的浏览器可以使用2.x。

最终版本:2.2.4 (2016年5月20日)

3)3.x

不兼容ie678,只支持最新的浏览器。除非特殊要求。一般不会使用3.x版本的,很多老的jQuery插件不支持这个版本。

目前该版本是官方主要更新维护的版本。最新版本:3.2.1(2017年3月20日)

3、开发版本和生产版本

jquery-xxx.js:开发版本。给程序员看的,有良好的缩进和注释。体积大一些

jquery-xxx.min.js:生产版本。程序中使用,没有缩进换号。体积小一些。程序加载更快

4、JQuery导入

<script src=".../js/jquery-3.3.1.min.js"></script>

二、JQuery对象

1、与JS对象区别

  1. JQuery对象在操作时,更加方便
  2. JQuery对象和js对象方法不通用的

2、相互转换

  1. jq – > js:jq对象[索引] / jq对象.get(索引)
  2. js – > jq:$(js对象)

三、JQuery选择器

1、选择器概述

选择器:筛选具有相似特征的元素(标签)

2、基本操作

1)事件绑定
$("#b1").click(function(){
	alert("abc");
});
2)入口函数
$(function () {
	...
});

window.onload 和 $(function) 区别

  1. window.onload 只能定义一次,如果定义多次,后边的会将前边的覆盖掉
  2. $(function)可以定义多次的
3)样式控制:css()
$("#div1").css("backgroundColor","pink");

3、分类

1)基本选择器
  1. 标签选择器(元素选择器):$("html标签名")
    获得所有匹配标签名称的元素
  2. id选择器:$("#id的属性值")
    获得与指定id属性值匹配的元素
  3. 类选择器:$(".class的属性值")
    获得与指定的class属性值匹配的元素
  4. 并集选择器:$("选择器1,选择器2....")
    获取多个选择器选中的所有元素
2)层级选择器
  1. 后代选择器:$("A B")
    选择A元素内部的所有B元素
  2. 子选择器:$("A > B")
    选择A元素内部的所有B子元素
3)属性选择器
  1. 属性名称选择器 :$("A[属性名]")
    包含指定属性的选择器
  2. 属性选择器:$("A[属性名='值']")
    包含指定属性等于指定值的选择器
  3. 复合属性选择器:$("A[属性名='值'][]...")
    包含多个属性条件的选择器
4)过滤选择器
  1. 首元素选择器: (selector):first
    获得选择的元素中的第一个元素
  2. 尾元素选择器:(selector):last
    获得选择的元素中的最后一个元素
  3. 非元素选择器:(selector):not(selector)
    不包括指定内容的元素
  4. 偶数选择器:(selector):even
    偶数,从 0 开始计数
  5. 奇数选择器:(selector):odd
    奇数,从 0 开始计数
  6. 等于索引选择器:(selector):eq(index)
    指定索引元素
  7. 大于索引选择器:(selector):gt(index)
    大于指定索引元素
  8. 小于索引选择器:(selector):lt(index)
    小于指定索引元素
  9. 标题选择器:(selector):header
    获得标题(h1~h6)元素,固定写法
5)表单过滤选择器
  1. 可用元素选择器:(selector):enabled
    获得可用元素
  2. 不可用元素选择器:(selector):disabled
    获得不可用元素
  3. 选中选择器:(selector):checked
    获得单选/复选框选中的元素
  4. 选中选择器:(selector):selected
    获得下拉框选中的元素

四、DOM操作

1、内容操作

  1. html():获取/设置元素的标签体内容
  2. text():获取/设置元素的标签体纯文本
  3. val():获取/设置元素的value属性值

2、通用属性操作

  1. attr():获取/设置元素的固有属性
  2. removeAttr():删除固有属性
  3. prop():获取/设置元素的自定义的属性
  4. removeProp():删除自定义的属性

3、对class属性操作

  1. addClass():添加class属性值
  2. removeClass():删除class属性值
  3. toggleClass():切换class属性
  4. css()

4、CRUD操作

  1. append():父元素将子元素追加到末尾
    对象1.append(对象2):将对象2添加到对象1元素内部,并且在末尾
  2. prepend():父元素将子元素追加到开头
    对象1.prepend(对象2):将对象2添加到对象1元素内部,并且在开头
  3. appendTo()
    对象1.appendTo(对象2):将对象1添加到对象2内部,并且在末尾
  4. prependTo()
    对象1.prependTo(对象2):将对象1添加到对象2内部,并且在开头
  5. after():添加元素到元素后边
    对象1.after(对象2): 将对象2添加到对象1后边。对象1和对象2是兄弟关系
  6. before():添加元素到元素前边
    对象1.before(对象2): 将对象2添加到对象1前边。对象1和对象2是兄弟关系
  7. insertAfter()
    对象1.insertAfter(对象2):将对象1添加到对象2后边。对象1和对象2是兄弟关系
  8. insertBefore()
    对象1.insertBefore(对象2): 将对象1添加到对象2前边。对象1和对象2是兄弟关
  9. remove():移除元素
    对象.remove():将对象删除掉
  10. empty():清空元素的所有后代元素。
    对象.empty():将对象的后代元素全部清空,但是保留当前对象以及其属性节点

五、JQuery动画

1、默认动画

  1. show([speed],[easing],[fn]])
  2. hide([speed],[easing],[fn]])
  3. toggle([speed],[easing],[fn])

2、滑动动画

  1. slideDown([speed],[easing],[fn])
  2. slideUp([speed],[easing],[fn]])
  3. slideToggle([speed],[easing],[fn])

3、淡入淡出动画

  1. fadeIn([speed],[easing],[fn])
  2. fadeOut([speed],[easing],[fn])
  3. fadeToggle([speed],[easing],[fn])

4、动画参数

  1. speed:动画的速度。三个预定义的值(“slow”,“normal”, “fast”)或表示动画时长的毫秒数值(如:1000)
  2. easing:用来指定切换效果
    1. swing:默认。动画执行时效果"先慢,中间快,最后又慢"
    2. linear:动画执行时速度是匀速的
  3. fn:在动画完成时执行的函数,每个元素执行一次。

六、JQuery遍历

1、JS遍历

for(初始化值;循环结束条件;步长)

2、jq遍历

  1. jq对象.each(callback)
    1. 回调函数参数
      1. index:索引
      2. element:每一个元素对象
      3. this:每一个元素对象
    2. 回调函数返回值
      1. true:break
      2. false:continue
  2. $.each(object, [callback])
  3. for..of:for(元素对象 of 容器对象) jquery 3.0 版本之后提供的方式

七、JQuery事件绑定

1、标准方法

  1. jq对象.事件方法(回调函数);
  2. 如果调用事件方法,不传递回调函数,则会触发浏览器默认行为。

2、on/off方法

  1. jq对象.on(“事件名称”,回调函数)
  2. jq对象.off(“事件名称”)
  3. jq对象.off():解绑所有事件

3、事件切换

jq对象.toggle(fn1,fn2...)

单击jq对象对应的组件后,会循环执行回调函数

1.9版本 .toggle() 方法删除,jQuery Migrate(迁移)插件可以恢复此功能。

<script src="../js/jquery-migrate-1.0.0.js" type="text/javascript" charset="utf-8"></script>

八、JQuery插件

作用:增强jq的功能

实现方式:

  1. 增强对象:$.fn.extend(object)
  2. 增强$: $.extend(object)

文章来源:https://blog.csdn.net/wmh1024/article/details/135285051
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。