前端学习——jQuery

JQ

轻量级、链式编程、隐式迭代（内部实现，不需要代码实现）、弥补原生的兼容性问题，兼容主流浏览器
有自己的简易动画，简化了DOM操作。免费、开源

官网https://jquery.com/

引入文件

入口函数

//1
$(function (){
	...
}

//2
$(document).ready(function(){
	...
})

注意：
等着 DOM 结构渲染完毕即可执行内部代码，不必等到所有外部资源加载完成，jQuery 帮我们完成了封装。
不同于原生 js 中的 load 事件是等页面文档、外部的js 文件、css文件、图片加载完毕才执行内部代码。
更推荐使用第一种方式。

jQ对象和DOM对象的区别

只有 jQuery 对象才能使用 jQuery 方法，DOM 对象则使用原生的 JavaScirpt 方法

DOM 对象与 jQuery 对象之间是可以相互转换的
对象之间的转换：

$(div) //DOM元素转换jQ
$('div')[0] //jQ转换DOM
//要区分好自己是什么对象

jQ中的选择器

$(’#id’)==》指定id元素

$(’*’)==》所有元素

$(’.class’)==》指定class元素

$(‘div’)==》根据标签获取元素

$(‘div,p,li’)==》获取多个

$(‘li.class’)==>交集获取

$(‘ul>li’)==>子代

$(‘ul li’)==>后代

筛选选择器

$(‘li:first’)：第一个元素

$(‘li:last’)：最后一个元素

$(‘li:eq(2)’)==》索引为2【查找指定索引的元素】

$(‘li:odd’)==》索引为奇数

$(‘li:even’)==》索引为偶数

筛选方法

$(‘li’).parent()父级

$(‘ul’).children(‘li’);子集【如果不加参数，获取所有的，如果添加指定的元素，按照指定的找】

$(‘ul’).find(‘li’)后代

$(‘li’).siblings(‘li’)兄弟

$(‘li’).nextAll();后面的

$(‘li’).prevAll();前面的

判断是否具有某个类名：$(‘div’).hasClass(‘aaa’)

$(‘div’).eq(index);指定索引方法【eq推荐用方法】

parent()  children()  find()  siblings()  eq() //重点记住

toggle

$('input').click(function () {
      $('div').toggle(1000);
    })

排他思想

 $('input').click(function () {
      // $(this).css('background', 'yellow')
      // $(this).siblings().css('background', '')
      // 优化
      $(this).css('background', 'yellow').siblings().css('background', '')
      // 链式编程
 })

既让他背景变黄色，又让他的兄弟们不变色

索引值问题

$('li').click(function () {
      console.log($(this).index())
})

因为jQuery对象是一个伪数组，有索引
不需要再自己遍历绑

样式操作

$('input').click(function () {
      console.log($('div').css('width')) //可以取值
      
	//多个值的时候，用键值对形式
	$('div').css(
        {
          width: 200,
          height: '300px',
          backgroundColor: 'yellow'
        }
      )
    })

给元素增加类名（增加、删除与切换）

$('input').click(function () {
      
      $('div').addClass('box')  //是增加一个类名，加在原有的后面
      
      $('div').removeClass('box')  //删除原有，增加新
      
      $('div').toggleClass('box')  //切换
      
})

基本动画效果

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

//隐藏
$('#btn2').click(function () {
      $('div').hide(1000, 'linear', function () {
        //动画结束后要做的
        alert('隐藏完毕')
      })
    })
//显示
$('#btn1').click(function () {
      $('div').show(1000, 'linear', function () {
        alert('显示完毕')
      })
    })
//切换
$('#btn3').click(function () {
      $('div').toggle(1000, 'linear', function () {
        alert('切换完毕')
      })
    })

（1）参数都可以省略， 无动画直接显示
（2）speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。
（3）easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。
（4）fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。

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

$('#btn4').click(function () {
      $('div').slideDown(1000, 'linear', function () {
        alert('下滑完毕')
      })
    })

    $('#btn5').click(function () {
      $('div').slideUp(1000, 'linear', function () {
        alert('上滑完毕')
      })
    })

    $('#btn6').click(function () {
      $('div').slideToggle(1000, 'linear', function () {
        alert('切换完毕')
      })
    })

淡入淡出：
fadeIn([speed,[easing],[fn]])
fadeOut([speed,[easing],[fn]])
fadeToggle([speed,[easing],[fn]])
fadeTo([[speed],opacity,[easing],[fn]])【注意fadeTo必须写两个参数，speed和opacity】

$('#btn7').click(function () {
      $('div').fadeIn(1000, 'linear', function () {
        alert('切换完毕')
      })
    })

    $('#btn8').click(function () {
      $('div').fadeOut(1000, 'linear', function () {
        alert('切换完毕')
      })
    })

    $('#btn9').click(function () {
      $('div').fadeToggle(1000, 'linear', function () {
        alert('切换完毕')
      })
    })

    $('#btn10').click(function () {
      $('div').fadeTo(800, 0.3)
    })

自定义动画：

$('#btn11').click(function () {
      $('div').animate({
        width: '200px',
        height: '300px',
        left: '600px',
        top: '300px'
      }, function () { //回调函数中还可以继续动画
        $('div').animate({
          width: '300px',
          height: '100px',
          left: '220px',
          top: '80px'
        })
      });
    })

animate(params,[speed],[easing],[fn])
参数：
（1）params: 想要更改的样式属性，以对象形式传递，必须写。 属性名可以不用带引号， 如果是复合属性则需要采取驼峰命名法 borderLeft。其余参数都可以省略。
（2）speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。
（3）easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。
（4）fn: 回调函数，在动画完成时执行的函数。

jQuery属性操作

设置或获取元素固有属性值 prop()

//获取属性
$('img').prop('src')
//获取后设置属性
$('img').prop('src','images/l1.jpg')

 $('input').click(function () {
      console.log($('input').prop('checked')) //勾选框状态true/false
    })

attr
获取属性语法
attr(’‘属性’’) 类似原生 getAttribute()
设置属性语法
attr(’‘属性’’, ‘‘属性值’’) 类似原生 setAttribute()

$('input').attr('name') //获取固有属性
$('input').attr('username', 'jack') //自定义属性

data
data() 方法可以在指定的元素上存取数据，并不会修改DOM元素结构，所以元素上无法查看（一旦页面刷新，之前存放的数据都将被移除）

$('input').data('username', 'jack')

购物车全选案例

点击全选按钮实现

 $('.all').change(function () { //选中全选按钮，发生改变时修改值
      var val = $(this).prop('checked'); //获取属性存起来
      $('.product-list input').prop('checked', val); //修改所有商品属性
    })

选择全部商品后全选按钮也选中实现

$('.product-list input').change(function () {
      // 先把选项总数存起来
      var len1 = $('.product-list .dc').length;
      // 再把被选中数存起来
      var len2 = $('.product-list .dc:checked').length;
      // len1 == len2  如果两个总数一样的
      $('.all').prop('checked', len1 == len2); //状态的改变影响着全选按钮
    })

创建元素

语法：$(’’

’’);

添加元素父子关系

element.append(’‘内容’’) [把内容放入匹配元素内部最后面，类似原生 appendChild

$('.box01').append('一一一')

element.prepend(’‘内容’’) 把内容放入匹配元素内部最前面。

$('.box02').prepend('一一一')

外部添加兄弟关系

element.after(’‘内容’’) // 把内容放入目标元素后面
element.before(’‘内容’’) // 把内容放入目标元素前面

删除元素
element.remove() // 删除匹配的元素（本身）
element.empty() // 删除匹配的元素集合中所有的子节点
element.html(’’’’) // 清空匹配的元素内容

jQuery尺寸、位置操作

jQuery 尺寸

width()、height()【只算width和height】

$('.box01').width()

innerWidth()、innerHeight()【包含padding+width】
outerWidth()、outerHeight()【包含padding、border、width】
outerWidth(true)、outerHeight(true)【包含padding、border、margin、width】
（）内不传值是取值，传值了是修改，可以不写单位

jQuery 位置
offset()设置或获取元素偏移
offset：距离文档的距离【left，top】
暴露的值是对象{top:x,left:x}

$('.box').offset().left //取值

position() 获取元素偏移
①position() 方法用于返回被选元素相对于带有定位的父级偏移坐标，如果父级都没有定位，则以文档为准
②该方法有2个属性 left、top。position().top 用于获取距离定位父级顶部的距离，position().left 用于获取距离定位父级左侧的距离
注意：该方法只能获取
scrollTop()、scrollLeft()设置或获取元素被卷去的头部和左侧
①scrollTop() 方法设置或返回被选元素被卷去的头部。
②不跟参数是获取，参数为不带单位的数字则是设置被卷去的头部。
scroll事件
谁出现滚动条，事件就绑给谁

动画返回顶部

$('body').append('
返回顶部
') //jq创建按钮
    $(document).scroll(function () {
      if ($(this).scrollTop() > 300) {   //大于300时显示按钮 默认display:none
        $('div').show();
      }
    })
    $('div').click(function () {
      $('html').animate({ scrollTop: 0 })   //点击事件，动画效果回到顶部
    })

jQuery的事件

jQ事件注册
语法：element.事件(function(){})

on

on() 方法在匹配元素上绑定一个或多个事件的事件处理函数

语法：element.on(events,[selector],fn)

//一个参数
$('box').on('click',function(){
	...
})
//多个参数
$('box').on('click mouseover',function(){ //空格分隔
	...
})

对于不同处理程序

$("div").on({        //分开的
  mouseover: function(){
 	...
  }, 
  mouseout: function(){
  	...
  },
  click: function(){
 	...
 }  
})

事件的委派
可以事件委派操作。事件委派的定义就是，把原来加给子元素身上的事件绑定在父元素身上，就是把事件委派给父元素

$('ul').on('click', 'li', function() { //第二个参数是支持选择器的

    alert('hello world!');
//ul 响应 所有子元素的事件
})

off

解绑事件

$('div').on({
	click:function(){
		$('div').css('background','blue')
	},
	mouseenter:function(){
		$('div').css('background','yellow')
	}
})

$('div').off() //不传值都解绑
$('div').off('mouseenter') //选择事件解绑

one

$('input').one('click',function () {
    alert('点击了');
})

trigger

$('a').click(function () {
        $('a').css('background', 'yellow');
    })

    $('div').click(function () {  //点击div会使a变化
        $('a').trigger('click');  
    })

$(‘div’).triggerHandler(‘click’);// 自动触发事件【这种触发事件不会触发默认行为】

jQuery事件对象

阻止冒泡

 $('input').click(function (e) {
      //阻止冒泡
      e.stopPropagation();
      console.log(e);
})

阻止默认行为

$('a').click(function (event) {
      console.log(666);
      event.preventDefault();
})

jQuery插件

** jQuery 插件库 http://www.jq22.com/**

** jQuery 之家 http://www.htmleaf.com/**

jQuery 插件使用步骤：

1.引入相关文件。（jQuery 文件 和 插件文件）
2. 复制相关html、css、js （调用插件）

懒加载

一般用来处理图片
图片使用延迟加载在可提高网页下载速度。它也能帮助减轻服务器负载
当我们页面滑动到可视区域，再显示图片

EasyLazyload插件

​ 1.要引入JQuery
​ 2.插件JS【js引入文件和js调用必须写到 DOM元素（图片）最后面】
​ 3.将图片 src 替换为 data-lazy-src //不是属性，是插件带的
​ 4.调用lazyLoadInit()

lazyLoadInit({
    //当图片出现时, 指定颜色出现在指定位置
    coverColor:'white',
    ///当图片出现时, 指定自定义组件(html元素)
    coverDiv:"
test
",
    //展示时间
    showTime:1000,
    //图片距离屏幕底部出现时间点的距离差值
    offsetBottom:130,
    offsetTopm:100,
    //完全显示出来的回调
    onLoadBackStart:function (i,e) {
        console.log('start:' + i); //索引为i的图片开始显示了
    },
    onLoadBackEnd:function (i,e) {
        console.log('end:' + i);  //索引为i的图片显示完毕了
    }
});

获取图片

<img data-lazy-src="https://picsum.photos/500/300?random=1" alt="">
<img data-lazy-src="https://picsum.photos/500/300?random=2" alt="">
<img data-lazy-src="https://picsum.photos/500/300?random=3" alt="">
<img data-lazy-src="https://picsum.photos/500/300?random=4" alt="">
<img data-lazy-src="https://picsum.photos/500/300?random=5" alt="">

Zepto

轻量级，针对移动端，手机端支持良好、pc端最好不要使用
封装了移动端的手势模块

Zepto 中文官网地址：https://www.html.cn/doc/zeptojs_api/

$(document).on({
    tap:function () {
        console.log('单击')
    },
    doubleTap:function () {
        console.log('双击');
    },
    swipeLeft:function () {
        console.log('左滑')
    },
    swipeRight:function () {
        console.log('右滑');
    }
})

localStorage 和 sessionStorage 属性

localStorage 和 sessionStorage 属性允许在浏览器中存储 key/value 对的数据。

localStorage 用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去删除，localStorage属性是只读的。
如果你只想将数据保存在当前会话中，可以使用 sessionStorage 属性，该数据对象临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据

将字符串数组 转换为真正的数组

    var arr = JSON.parse(str);