前端基础之jQuery（第四天）

简介

  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')