2021-06-10 jQuery笔记

jQuery

插件：

jQuery插件库 https://www.jq22.com/

jQuery插件库之家 http://www.htmleaf.com

全屏滑动 https://www.dowebok.com/demo/2014/77/

bootstrap https://v3.bootcss.com

入口函数

等着桌面的DOM结构渲染完毕执行完毕再去执行js代码 == DOMContentLoaded

1. $(document).ready(function() {})

2. $(function() {})

顶级对象$

$是jQuery别称，也是jQuery的顶级对象相当于JavaScript里的window。

Dom对象 & jQuery对象

• 不能混淆使用！！

  • 获取dom对象，只能使用原生属性和方法，不能使用jQuery里面的属性方法

    document.querySelector('div')

  • 获取jQuery对象，只能使用jQuery里面属性和方法，不能使用原生的属性方法

    $('div')

• 可以相互转换

  • 原生js>jquery，所以特殊时候需要将jQuery 转换为 DOM对象

    • DOM 转换为 jQuery ：$(DOM对象).jQuery方法

      $(document.querySelector('video')).play();
      

    • jQuery转换为 DOM ：$(jq对象)[num].DOM方法

      $('video')[0].play();
      $('video').get(0).play();
      

jQuery常用API

jQuery选择器

$('选择器')

jQuery筛选选择器

• 例如

  • $(‘ul li:first’)
  • $(‘ul li:eq(3)’)
  • $(‘ol li:odd’)

• jQuery筛选方法

  • $(’.son’).parent() 返回最近一级的父级元素
  • $(’.nav’).children(‘p’) 返回最近一级的子级元素
  • $(’.nav’).find(‘p’) 返回所有子级元素
  • n $(‘ol .item’).siblings(‘li’) 返回除了自身的同级兄弟元素
  • n $(‘ul li’).eq(2) 返回最近一级的子级元素
  • n $(‘div:first’).hasClass(‘类名’) 判断是否有类名

jQuery排他思想

$(function() {
  // 隐式迭代：给所有按钮绑定点击事件
  $('button').click(function() {
	$(this).css('background', 'pink');
  $(this).siblings('button').css('background', '');
  })
})

• 淘宝精品女装案例注意点：
  • $(this).index() 拿到当前索引号，注意index括号！！
  • $(‘div’).show() 注意hide括号！！

链式编程

• 为了节省代码量，看起来更优雅

  $(this).css('background', 'pink'). siblings('button').css('background', '');
  

  我的颜色为红色，我兄弟的颜色为空

jQuery样式操作

css方法

• 以对象的方式添加css属性，是不需要加引号的！！！

• 如果是复合属性如backgroundColor，采用驼峰命名法；

• 属性值不是数字，就要加引号！！

  $('div').css({
    width: 400,
    height: 400,
    backgroundColor: 'red'
  })
  

类样式

• $(this).addClass(‘current’) 添加类名
• $(this).removeClass(‘remove’) 移出类名
• $(this).toggleClass(‘current’); 切换类

类操作和className操作

• 原生js会覆盖className
• 然而类操作是追加类名操作，不影响以前的类名

jQuery效果

jQuery封装了很多动画效果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jW4PVVDd-1623298042651)(file:Users/neru/Library/Group%20Containers/UBF8T346G9.Office/TemporaryItems/msohtmlclip/clip_image001.png)]

显示隐藏

一般情况不加参数

• 显示 show()

  show([speed, [easing], [fn]])

• 隐藏 hide()

  hide([speed, [easing], [fn]])

• 切换

  toggle([speed, [easing], [fn]])

滑动

• slideDown([speed, [easing], [fn]])
• slideUp ([speed, [easing], [fn]])
• slideToggle([speed, [easing], [fn]])

淡入淡出

• fadeIn([speed, [easing], [fn]])
• fadeOut ([speed, [easing], [fn]])
• fadeToggle([speed, [easing], [fn]])

speed：slow-nomal-fast-1000(ms)

easing：(optional)切换效果，默认swing，可用参数linear

fn：回调函数，在动画完成执行的函数，每个元素执行一次

修改透明度

• fadeTo([speed, opacity, [easing], [fn]])

opacity：透明度必须写，取值0～1

speed：必须写,slow-nomal-fast-1000(ms)

easing：(optional)切换效果，默认swing，可用参数linear

fn：回调函数，在动画完成执行的函数，每个元素执行一次

事件切换

• hover([over,], out])

over：鼠标移到元素上要触发的函数(相当于mouseenter)

out：鼠标离开元素上要触发的函数(相当于mouseleave)

动画队列及排队方法

1. 动画或效果队列

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

2. 停止排队

stop()：用于停止动画或效果，写到动画或者效果前面，相当于停止上一次动画。

自定义动画

• animate(params, [speed], [easing], [fn])

params：想要更改的样式属性，以对象形式传递，必须写。

​ 属性名可以不用带引号，复合属性需要驼峰命名法。

speed：slow-nomal-fast-1000(ms)

easing：(optional)切换效果，默认swing，可用参数linear

fn：回调函数，在动画完成执行的函数，每个元素执行一次

jQuery属性操作

元素固有属性

• prop(‘属性’) 查看固有的属性值
• prop(‘属性’, ‘属性值’) 修改属性值

元素自定义属性

• attr(‘属性’) 查看固有的属性值
• attr(‘属性’, ‘属性值’) 修改属性值

数据缓存data()

• data()方法在指定元素上存储数据，并不会修改DOM元素结构
• 一旦页面刷新，之前存放的数据都将被移除。

1. 存储在元素缓存里

   $('span').data('uname', 'andy')
   

2. 也可获取H5自定义属性 index-data()，返回数字型的2

   <div index='1' data-index="2">我是1</div>
   $('div').data('index') 
   

jQuery内容文本值

html()

1. 获取元素内容 $(‘div’).html()

2. 修改元素内容 .html(‘123’)

text()

1. 获取元素内容 $(‘div’).text()

2. 修改元素内容 .text(‘123’)

val()

1. 获取表单元素内容 $(‘input’).val()

2. 修改表单元素内容 .val(‘123’)

jQuery元素操作

遍历foreach

$('div').each(function(index, domEle) {}) 

1. each()遍历匹配元素，用DOM处理

2. 2个参数：index索引号；domEle每个DOM元素对象，不是jquery对象

3. 所以想使用jquery方法，需要给dom元素转换为jquery对象：$(domEle)

$(function() {
	$.each({
		name: 'andy',
		age: 18
	}, function(i, ele) {})
})

1. each()遍历数组东西，用DOM处理

创建元素

var li1 = $('<li>我是一个新创建的li</li>');

• 内部添加父子关系

  1. 到最后面append()

     $('ul').append(li1);
     

  2. 到最前面prepend()

     $('ul').prepend(li2);
     

• 外部添加兄弟关系

  1. 到最后面append()

     $('.test').after(div);
     

  2. 到最前面prepend()

     $('.test').prepend(div);
     

删除元素

• remove() 自杀，儿女也没了
• empty() 杀儿女
• html() 杀儿女

jQuery尺寸、位置操作

尺寸方法

• width() / height()
• innerWidth() / innerHeight() 包含padding
• outerWidth() / outerWidth() 包含padding + border
• outerWidth(true) / outerWidth(true) 包含padding + border + margin

位置方法

返回一个对象，属性left&top

• offset() 距离文档坐标，与父元素无关，可以修改

• position() 偏移量，得到带有定位的父盒子坐标

• scrolltop() 被卷去的头部，可以做返回顶部

  滚动事件 $(window).scroll(function() { })

电梯滚动 节流阀 互斥锁

• 有两个事件

  • 当页面滑动到各自定位时，电梯导航对应也会变成红色

  • 当点击电梯导航某个li，变成红色，页面滚动到各自定位

  • 但是这种情况下，会发生两次动画，因此要添加flag=true

  • 所以

    刚开始flag=true，若点击了li，则flag=false。若完成滚动事件，则将flag=true

  • 当flag=true时，事件1才可以实现动画

jQuery事件

单个事件注册

$('.toTop').click(function() {}

事件处理

element.on(events, [selector], function(event) {})

on()，可以绑定动态元素

• 事件委托

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

• 事件解绑off()

  • 解除所有事件

    $('div').off();
    

  • 解除某个事件

    $('div').off('click');
    

  • 解除事件委托

  $('ul').off('click', 'li');
  

事件执行一次

one()

$('p').one('click', function() {
  alert('一次执行');
}) 

自动触发

• .click()
• .trigger(‘click’)
• .triggerHandler(‘click’) 不会触发元素的默认行为

阻止冒泡

• event.stopPropagation();

jQuery对象拷贝

$.extend([deep], target,object1, [objectN])

1. deep：true深拷贝，默认false

2. target：拷贝对象

3. object1：拷贝到第一个对象的对象

浅拷贝：拷贝对象复杂数据类型地址，会随之修改

$.extend(targetObj, obj);

深拷贝：拷贝对象复杂数据类型，不会被修改

$.extend(true, targetObj, obj);

jQuery多库共存

jQuery为了与其他js库不冲突，可以同时存在

$(‘元素’) 选择器封装原理

function $(ele) {
	return document.querySelector(ele);
}

解决方法

• 用jQuery代替$符号

• 自定义符号jQuery.noConflict()

  var s = jQuery.noConflict();
  console.log(s('span'));
  

todolist案例

分析

• 刷新页面，数据不会丢失： localStorage
• 步骤
  • 敲回车
  • 本地存储
  • 渲染到页面

存储

本地存储只能存储字符串数据格式

JSON.stringify() 把我们数组对象转换为字符串格式

localStorage.setItem('todo', JSON.stringify(todolist));

获取

获取的时候需要吧字符串格式，转换为对象格式，才可以使用获取。

JSON.parse()