jq

库

自己或者别人封装的js文件

jquery pc端的dom操作

zepto 移动端的dom操作

版本

1.x 兼容ie678

2.x 使用基于jquery的插件 不兼容ie678（主流使用，稳定）

3.x 使用了一些新的语法（阮一峰的es6入门） 不兼容性ie678

生产环境 （jq的压缩版本，体积大）

用户真实打开页面加载的这个文件

开发环境（jq不是压缩版本，体积小）

入口函数

$(document).ready(function(){
	入口函数
})
$(function(){
	入口函数,跟上面是一模一样
})

隐式迭代

获取的jquery对象 伪数组[]，在你看不见的情况下，就已经迭代完成

$('div').css('color','red')
$('div') 能够获取出所有的div元素，获取出来之后，形成一个数据集合（伪数组）
以前我们需要使用遍历，但是在jquery里面我可以直接调用jquery的方法，.css() 默认帮你把遍历工作处理好

筛选选择器

$('div:first') 第一个div   ===  $('div:nth-of-type(1)')
$('div:last') 最后一个
$('div:eq(1)') 能够指定获取某一个元素 !!!
$('div:odd')   奇数
$('div:even')  偶数

父级 parentNode
子级 children

 父级.parent()
console.log($('.father').parent());

 获取所有的父级，.parents()   获取当前元素的所有父级 包括body、html
console.log($('.son').parents());

 获取指定 .parents(参数) 
 父级如果里面填了参数，说明我需要指定获取叫这个的祖辈元素
console.log($('.son').parents('.yye'));
 子级 .children()
console.log($('.father').children());

 获取指定的子级 .find(参数)  里面的参数是必填项
console.log($('.bigyye').find('.son'));

兄弟 除了本身之外的亲兄弟元素
siblings()

当前之前的所有的兄弟
prevAll()

上一个兄弟
prev()

下一个兄弟元素
next()

后面所有的兄弟元素
nextAll()

获取自定的元素
eq(number)

判断当前元素是否具备这个类名
hasClass('类名') 如果存在 true  不存在 false

获取当前索引

$(this).index()

设置属性

$(dom).css()  
如果只有单个的属性
$(dom).css('color','red')  
如果需要修改多个属性
$(dom).css({
	'color':'red',
	width:'500px',
	'backgroundColor':'red'
})  

设置类名

添加一个类名
$(this).addClass('red')
移出类名
$(this).removeClass('teacher')
类名切换
$(this).toggleClass('red')

显示和隐藏

显示当前元素,本质 其实就是改变display的属性为block
show()

隐藏当前元素，本质 其实就是改变display的属性为none
hide()

显示和隐藏切换
toggle 第一个参数控制效果的速度  slow 慢  normal 正常 fast 快  也可以是毫秒
toggle 第二个参数控制运动曲线，  swing 先慢后快  linear 匀速
toggle 第三个参数回调函数，在动画执行完毕之后执行

$('div').toggle(3000,'swing',function(){
alert('我执行完了')
})

滑动效果

下拉显示

$(dom).slideDown()

上拉隐藏

$(dom).slideUp()

滑动效果切换

$(dom).slideToggle()

hover鼠标移入移出事件

mouseenter 、mouseleave

hover(function(){
	移入触发
},function(){
	移出触发
})

hover(function(){
	无论是移入还是移入都会触发的方法
})

动画队列

一个元素能够绑多个动画效果，但是动画需要排队，依次执行

在动画执行之前使用.stop().show()  先停止之前的，再开启新的动画，这样能够保证每次都只有一个动画在执行

淡入淡出效果

淡入

$(dom).fadeIn()

淡出

$(dom).fadeOut()

淡入淡出切换

$(dom).fadeToggle()

淡入到

$(dom).fadeTo(时间,透明度)

属性控制

固有属性

js  dom.checked 
jq  $(dom).prop('checked')

自定义属性

js  dom.xxxattribute()
jq  $(dom).attr('index','1') 

内存属性

js  dom.setdata
jq  $(dom).data()   获取、设置data-的属性

以上jq属性都是填一个值是获取，填两值是设置

获取内容

表单内容 input

js dom.value 
jq $(dom).val()

标签内容 p

js dom.innerHTML  dom.innerText
jq $(dom).html()  $(dom).text()

以上jq属性，没有填内容的是获取，填了内容的是设置

保留小数点

toFixed()

遍历方式

$(dom).each(function(index,dom){
// index是元素的索引
// dom是元素的每一项
})
主要遍历或者处理dom元素

$.each(arr,function(index,value){ 
// index是数组的索引
// value是数组的每一项值
})
主要遍历或者处理数据

模板字符串

元素的创建和插入

创建

$('<ul></ul>') 

插入

js dom.appendChild(ele)
js dom.insertBefore(ele,位置)

$('#dd').append(`<div class="cart-item">内部后面插入</div>`)
$('#dd').prepend(`<div class="cart-item">内部前面插入</div>`)
$('#dd').before("<div class='cart-item'>外部前面插入</div>")
$('#dd').after("<div class='cart-item'>外部后面插入</div>")

清空

$(dom).remove()   连dom这个元素一起清除
$(dom).empty()    清除dom这个元素里面的内容
$(dom).html('')   等价于empty()

元素尺寸

width()  宽度  
innerWidth() 宽度+内边距
outerWidth() 宽度+内边距+边框
outerWidth(true)  宽度+内边距+边框+外边距

获取位置

$(dom).offset()  当前元素到文档的顶部和左边的对象
注意 这里返回的是一个对象 （可以获取和设置）
{
	top:400,
	left:0
}
最终  $(dom).offset().top


$(dom).position() 当前元素到定位父级的顶部和左侧
注意 这里返回的是一个对象 （只能获取）
{
	top:400,
	left:0
}

获取浏览器被卷去的距离

$(document).scrollTop()

on绑定事件

一个元素，多个事件绑定同一个方法

$(dom).on('click mouseenter',function(){
	click和mouseenter 都调用这个方法
})

一个元素，绑定多个不同的方法

$(dom).on({
	'click':function(){
	
	},
	'mouseenter':function(){
	
	}
})

$(dom).on('click',function(){
	方法一
})
$(dom).on('click',function(){
	方法二
})

1.事件委派

// $('ul').on('click', 'li', function () {
//     console.log(this)
// })

2.动态绑定

$('html').on('click','li',function(){
console.log(this)
})
$('button').click(function () {
var html = `<ul>
<li>不想在li身上绑定方法，因为绑定次数会很多1</li>
<li>不想在li身上绑定方法，因为绑定次数会很多2</li>
<li>不想在li身上绑定方法，因为绑定次数会很多3</li>
<li>不想在li身上绑定方法，因为绑定次数会很多4</li>
<li>不想在li身上绑定方法，因为绑定次数会很多5</li>
</ul>`;
$('.box').append(html)
})

注意，如果你找的这个父级元素也是动态创建，那么这个绑定是无效的

off解绑

$(dom).off('click',function(){})

one执行一次

$(dom).one('click',function(){
	当前函数只能执行一次
})

trigger自动触发

$(dom).click(function(){})

$(dom).trigger()
$(dom).triggerHandler()   他不会触发默认行为 foucs()