简介
1.内部封装了原生js代码（还额外添加了很多的功能），能够让你书写更少的代码完成js操作，类似与模块
2.在前端模块叫做"类库"
3.兼容多个浏览器
4.jQuery的宗旨：write less，do more！！！
5.虽然导入模块需要消耗资源，但是jQuery的文件非常小，基本不影响网络速度
6.Ajax支持
7.插件扩展开发
jQuery学习内容
基本语法
jQuery(选择器).action()
$(选择器).action
选择器
基本选择器
id：$('#d1')
class：$('.c1')
标签：$('div')
jQuery对象转成标签对象：$('div')[0];
标签对象转成jQuery对象：$(divEle);
组合选择器，分组与嵌套
$('#id.c1')
$('#d1,c1,p')
$('div span')
$('div>span')
$('div+span')
$('div~span')
筛选器
$('div p:fitst');
$('div p:last');
$('div p:eq(2,取索引为2的元素)');
$('div p:even');
$('div p:odd');
$('div p:gt(7)');
$('div p:lt(2)');
$('div p:not{"#d1"}');
$('div:has{"p"}');
筛选器方法
$('#d1').next()
$('#d1').nextAll()
$('#d1').prev()
$('#d1').prevAll()
$('#d1').prevUntill()
$('#d1').parent()
$('#d1').parents()
$('#d1').parentUntill()
$('#d1').children()
$('#d1').sibling()
$('#d1').find('p',从某个区域内筛选出想要的标签)
$('#d1 p').first()
$('#d1 p').not('#d1')
属性选择器
$("p[username]="jason"")
表单筛选器
$(":text",这种只适用于表单标签)
$("input[type=text]")
$(":checked",会把selected也拿到)
$(":selected")
jQuery操作标签
操作类
addClass(),removeClass(),hasClass(),toggleClass()
CSS操作
$('p').first().css('color','red').next().css('color','blue');
jQuery链式操作可以使用一行代码操作很多标签
jQuery对象调用jQuery方法之后返回的还是jQuery对象本身
位置操作
offset() 拿到标签距离当前窗口的位置
position() 拿到标签距离父标签的位置
scrollTop() 右侧滚动条距离顶端的距离
scrlooLeft() 距离左侧的距离
尺寸相关
height,width 文本
innerHeight,innerWidth 文本 + padding
outerHeight,outerWidth 文本 + padding + 边框
文本操作
$('p').text(不加参数获取值，加参数赋值)
$('p').html(不加参数获取值，加参数赋值)
获取值操作
$('p').val()
$('p')[0].files[0]
属性操作
$('p').attr(name,value)
$('p').prop(name,value) 针对选择框的属性操作
在用变量名存储对象的时候，js中使用xxxEle；jQuery中推荐使用$xxxEle;
文档处理
let $pEle = $('
')
$pEle.text('hello world')
$pEle.attr('id','d1')
$('div').append($pEle)
$('div').append($pEle[0])
$pEle.appendTo($('div'))
.preappend()
.preappendTo()
after()
insertAfter()
before()
insertBefore()
$('div').remove(移除标签，列表展示数据的时候会用到)
$('div').empty(清空div内部所有的内容)
事件相关
绑定事件的两种方式
$('#d1').click(function(){})
$('#d1').on('click',function(){})
克隆事件
$(this,this指代的永远是当前被操作的对象).clone()
$(this).clone(true,加参数可以克隆js代码)
左侧菜单，模态框
.hide{displsy:none}
内部本质就是给标签增加减少hide类属性
返回顶部
屏幕滚动事件
$(window).scroll(function(){
if($(window).scrollTop > 300){
$('a').removeClass('hidde')
}else{
$('a').addClass('hidde')
}
})
自定义登录校验
$('input').focus(function(){
$(this).next().text('')
})
input实时检测
$('#d1').on('input',function(){
console.log(this.value)
})
hover事件
$('#d1').hover(
function(){
alert('123')
},
function(){
alert('456')
})
键盘按键事件
$(window).keydown(function(event){
console.log(event.keyCode)})
阻止后续事件执行
$('#d2').on('click',function(e){
$('#d1').text('hello world！！')
return false
e.preventDefault()})
阻止事件冒泡
return false
e.stopPropagation()
事件委托
$('body').on('click','button',function(){alert('123')
each方法，和for循环机制一样
$('div').each(function(index){alert(123)})
$('div').each(function(index,obj){alert(123)})
$.each([111,222,333],function(index,obj){alert(123)})
data方法，能够让标签存储数据 并且用户看不见
$('div').data('info','hello,world')
$('div').first().data('info')
$('div').first().removeData('info')