0
点赞
收藏
分享

微信扫一扫

JS笔记(六)

小a草 2022-04-14 阅读 94
前端jquery

十九、jQuery

19.1 jQuery概述

19.1.1 JavaScript库

在这里插入图片描述

19.1.2 jQuery概念

在这里插入图片描述

19.2 jQuery的基本使用

19.2.1 入口函数

在这里插入图片描述
在这里插入图片描述
正常来说script写在div下面,如果想写在上面需要上方两种入口函数

19.2.2 jQuery顶级对象 $

在这里插入图片描述

19.2.3 jQuery对象和DOM对象

  • DOM对象:用原生js获取来的对象就是DOM对象
  • jQuery对象:用jQuery获取来的对象就是jQuery·对象,以伪数组形式存储
  • jQuery对象只能使用jQuery方法,DOM对象只能使用原生js属性和方法
    在这里插入图片描述

19.2.4 jQuery对象和DOM对象

jQuery对象和DOM对象是可以互相转化的,因为原生js比jQuery更大,还有一些原生属性和方法jQuery没有给我们封装,要使用这些属性和方法需要把jQuery对象转化为DOM对象才能使用

  • DOM对象转化为jquery对象(两种情况)
    在这里插入图片描述
  • jQuery对象转换为DOM对象
    在这里插入图片描述
    若只有一个div,index索引号为0,因为jQuery对象是伪数组形式

二十、jQuery常用API

20.1 jQuery选择器

20.1.1 基础选择器

在这里插入图片描述

20.1.2 层级选择器

在这里插入图片描述
在这里插入图片描述

隐式迭代
遍历内部DOM元素(伪数组形式存储)的过程就叫隐式迭代,就是给匹配到的所有元素进行遍历循环操作并给每个元素都修改样式,这样就不用for循环
在这里插入图片描述

例如
在这里插入图片描述

20.1.3 筛选选择器

在这里插入图片描述

20.1.4 jQuery筛选方法(重点)

在这里插入图片描述
在这里插入图片描述

其他筛选方法
item为其中 一个li
在这里插入图片描述
选取某元素第n个li有两个方法,推荐第二个
在这里插入图片描述

20.1.4 jQuery的排他思想

  • 显示元素show()
  • 隐藏元素hide()

20.1.5 链式编程

在这里插入图片描述

例如之前的排他思想案例中的让当前元素变色其他元素不变色两句可以合为一句话来写像链子一样
在这里插入图片描述

20.2 jQuery样式操作

20.2.1 操作css方法

在这里插入图片描述
在这里插入图片描述

20.2.2 设置类样式方法

就是在css中添加一个类名并加上样式,直接给元素添加或者删除类名来获得类名的样式
在这里插入图片描述

在这里插入图片描述

类操作样式与className区别
jQuery里面类操作只是对指定类进行操作,不影响原来的类名,后者回一下

20.3 jQuery效果

在这里插入图片描述

20.3.1 显示隐藏效果

在这里插入图片描述
注意:jQuery中样式参数比较多,可以通过jQuery中文手册查找(素材中有手册)

20.3.2 滑动效果

滑动案例
在这里插入图片描述

jQuery停止动画排队
在这里插入图片描述

像导航栏,如果多次快速移动的话就会出现多个导航栏依次下滑的过程即使停止滑动也要等到滑动次数结束才停止,为了解决这一问题,在动画方法前面添加一个stop(),即在执行这一下滑的时候停止之前所有的滑动
在这里插入图片描述

20.3.3 淡入淡出效果

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

案例
在这里插入图片描述

20.3.4 自定义动画animate(重)

在这里插入图片描述

例如
在这里插入图片描述

20.4 jQuery属性操作

20.4.1 获取固有属性

在这里插入图片描述
只能获取固定属性获取不了自定义属性
在这里插入图片描述

20.4.2 获取自定义属性

在这里插入图片描述
在这里插入图片描述

20.4.3 数据缓存

在这里插入图片描述
在这里插入图片描述

20.5 jQuery内容文本值

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

20.6 jQuery元素操作(遍历、创建、添加、删除元素)

20.6.1 遍历元素

隐式迭代是对同一类元素做了同样的操作,如果想要给同一类元素做不同操作,就需要用到遍历
在这里插入图片描述
在这里插入图片描述
此方法遍历对象时,index表示属性名,element表示属性值

20.6.2 创建、添加元素

先创建,后添加
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
添加要把标签完整地写出来(双)以及内容
注意:element要把它改成jQuery对象
在这里插入图片描述

20.6.3 删除元素

在这里插入图片描述
empty和html都是清除元素里面所有的子元素,但是这个元素还存在,但是html要在括号内加双引号

20.7 jQuery尺寸、位置操作

20.7.1 尺寸操作

在这里插入图片描述
width/height括号中添加数字是修改样式宽度/高度,没有数字就是获取元素高与宽

20.7.2 位置操作

在这里插入图片描述
在这里插入图片描述
注意position只能获取位置不能设置位置

在这里插入图片描述
此方法可以在括号内设置被卷去元素的头部的像素
在这里插入图片描述

案例:带有动画的返回顶部
在这里插入图片描述
animate前面必须是元素不能是document
在这里插入图片描述

二十一、jQuery事件

21.1 jQuery事件注册

  • 单个事件注册
    在这里插入图片描述
    在这里插入图片描述

21.2事件处理

21.2.1 事件on()绑定事件

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
点击ul中的任意一个小li都会触发click事件

在这里插入图片描述
在这里插入图片描述
这样新创建的li也绑定了这个事件,以前的创建元素不能绑定这个事件

21.2.2 事件处理off()解绑事件

off()方法可以解除通过on()方法添加的事件处理程序
在这里插入图片描述
one事件使用方法与on一致
在这里插入图片描述

21.2.3 自动触发事件trigger()

trigger事件不需要点击等事件触发,设置定时器自动触发
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

21.3 jQuery事件对象

只要有事件触发,就会有事件对象的产生
在这里插入图片描述

二十二、jQuery其他方法

22.1 jquery对象拷贝(重点)

如果想要把某个对象拷贝(合并给另一个对象使用),可以使用$.extend()方法
在这里插入图片描述

在这里插入图片描述
target本来为空输出后target有了obj内容,如果target本来有个id拷贝后obj的id会附带原来target的id

深拷贝与浅拷贝
浅拷贝修改原来target的拷贝对象也会影响原来被拷贝对象的内容,浅拷贝只是把复杂数据类型地址拷贝过去,target与obj的复杂数据类型(对象)都指向一个地方内容,里面如果有属性名一样的会覆盖,例如下面只会保留msg中的age=18
深拷贝是完全拷贝克隆给目标对象,不会影响袁拷贝对象的内容,而是新开放一个空间存放target的对象内容,且如果对象里面属性不冲突会保留,深拷贝会将msg中的sex和name同时保留
在这里插入图片描述

22.2 多库共存

需要一个解决方案,让jQuery和其他js库不存在冲突,可以同时存在,这就叫多库共存
jQuery解决方案
如果自己的函数名有 而 j q u e r y 也 有 而jquery也有 jquery这样就会冲突,就可以把jquery的$符号改掉
在这里插入图片描述
在这里插入图片描述

22.3 jQuery插件

22.3.1插件查找

在里插入图片描述
下载插件后将css与js文件复制到需要用这些样式的页面文件中将插件的图片等改为自己需要的即可

22.3.2 bootstrap插件

在这里插入图片描述
引入完整方式
在这里插入图片描述
引入bootstrap的js文件后可以完整使用bootstrap

望各位兄弟姐妹点赞

举报

相关推荐

0 条评论