JQuery的属性操作及事件 |
您所在的位置：网站首页 › jquery事件处理函数 › JQuery的属性操作及事件 |
JQuery的属性操作及事件
|
一、属性操作1、固有属性 （1）获取：选中元素.prop('属性名') console.log($('img').prop('src'));（2）设置：选中元素.prop('属性名','值') 
修改
$('button').click(function(){
$('img').prop('src','https://p1.music.126.net/wb1Gd2C7DknUivCqdFaKeQ==/109951167683687375.jpg?imageView&quality=89')
console.log($('img').prop('src'));
})
2、自定义属性attr()（1）获取：选中元素.attr('属性名') console.log($('img').attr('index'));（2）设置：选中元素.attr('属性名','值')
修改
$('button').click(function(){
$('img').attr('index',1)
console.log($('img').attr('index'));
})
3、数据缓存data()该方法在指定元素上存取数据，不会改变dom元素结构。页面刷新后，之前存储就会消失 （1）获取：选中元素.data('属性名') $('img').data('a',5)（2）设置：选中元素.data('属性名','值')
修改
$('button').click(function(){
$('img').data('a',5)
console.log($('img').data('a'));
})
（3）区别 ①data()：在元素本身是看不到设置的属性（不会更改DOM结构），但是该属性是存在的，且可以获取输出 ②attr()：在元素本身是可以看到设置的属性，也可以获取输出 二、遍历操作1、区别（1）隐式迭代：给同一类元素做同样的操作 （2）遍历操作：给同一类元素做不同的事情 2、遍历元素（1）each(fuction(index,domEle)) index：下标 domEle：Dom元素【注意：不是jq元素，用jq方法的话，需要单独封装】 1 2 3 var colorArr = ['red','green','blue'] $('li').each(function(index,dom){//一定要注意记得传参 console.log(index,dom); $(dom).css('background',colorArr[index]) })（2）$.each(object,function(index,element){}) index：下标 element：循环出来数据 1 2 3 var colorArr = ['red','green','blue'] $.each(colorArr,function(index,item){ console.log(index,item); }) 3、创建/添加/删除元素（1）创建：$('') var newli = $('4')（2）添加 ①内部： 前：选到对应位置.prepend(创建元素) 1 2 3 添加 删除 $('.add').click(function(){ var newli = $('4') $('ul').append(newli) })后：选到对应位置.append(创建元素) $('ul').prepend(newli)②外部： 前：选到对应位置.before(创建元素) $('ul').before(newli)后：选到对应位置.after(创建元素) $('ul').after(newli)（3）删除 ①选到对应元素：remove()删除本身 $('.del').click(function(){ $(newli).remove() })②选到对应元素：empty()删除匹配的所有子节点 $('ul').empty()③对应元素：html('')删除匹配的所有子节点 $('ul').html('') //注意有单引号4、完整的效果 1 2 3 添加 删除 $('.add').click(function(){ var newli $('li').each(function(index,dom){ newli = $(`${index+2}`)//``模板字符串 }) $('ul').append(newli) }) $('.del').click(function(){ $('ul').html('') }) 三、尺寸、位置操作1、尺寸例子 Document div{ width: 100px; height: 200px; padding: 10px; border: 5px solid red; margin: 10px; }（1）width(),height():获取元素的宽高，只算宽高width、height console.log($('div').width());//100 console.log($('div').height());//200（2）innerWidth(),innerHeight():获取元素的宽高,width,height+padding console.log($('div').innerWidth());//120 console.log($('div').innerHeight());//220（3）outerWidth(),outerHeight():获取元素的宽高,width,height+padding+border console.log($('div').outerWidth());//130 console.log($('div').outerHeight());//230（4）outerWidth(true),outerHeight(true):获取元素的宽高,width,height+padding+border+magrin console.log($('div').outerWidth(true));//150 console.log($('div').outerHeight(true));//250 2、位置（1）offset()：设置或获取元素偏移量（获取,设置元素相对于偏离文档的位置） Document *{ margin: 0; padding: 0; } div{ width: 100px; height: 200px; padding: 10px; border: 5px solid red; margin: 10px; } console.log($('div').offset()); $('div').offset({top:50,left:30}) console.log($('div').offset());（2）position()：获取元素偏移【只能获取不能设置】 返回被选元素带有定位的父级偏移坐标,如果父级没有定位,那就是以文档为准 Document *{ margin: 0; padding: 0; } .father{ width: 100px; height: 200px; padding: 10px; border: 5px solid red; margin: 10px; position: relative; } .son{ width: 20px; height: 20px; background-color: skyblue; position: absolute; } console.log($('.son').position()); $('.father').offset({top:50,left:30}) console.log($('.son').position());（3）滚动条：scrollTop()/sroclLeft()设置或获取元素被卷去的头部和左侧 Document .box{ width: 300px; height: 300px; overflow: auto; }
$('.box').scroll(function(){
console.log($('.box').scrollTop()); //返回：顶部滚动多少
})
（4）带有动画的返回顶部 $(window).scroll(function(){ $(document).scrollTop() })完整例子：具体动画效果后续补发视频给小伙伴们🧐 Document *{ margin: 0; padding: 0; } .btn{ width: 200px; height: 50px; background-color: skyblue; line-height: 50px; text-align: center; position: fixed; bottom: 100px; right: 50px; display: none; }
返回顶部
$(window).scroll(function () {
console.log($(document).scrollTop());
if ($(document).scrollTop() >= 300) {
$('.btn').fadeIn(500)
} else {
$('.btn').fadeOut(500)
}
})
$('.btn').click(function () {
$('html').animate(
{
scrollTop: '0'
},
1000
)
})
四、事件（jQuery 事件 | 菜鸟教程）1、单个事件注册element.事件(fuction(){}) （1）.hover：模仿鼠标悬停事件 （2）参数 ①函数1：鼠标移上去触发什么事件 ②函数2：鼠标离开触发什么事件 Document *{ margin: 0; padding: 0; } button{ width: 200px; height: 50px; } 鼠标悬浮 $('button').hover( function(){ $(this).css('background','red') }, function(){ $(this).css('background','') } ) 2、事件处理on()绑定事件$('选择器').on('类型',fuction(){}) （1）优点一：可以绑定多个函数，处理相同或不同的程序 ①处理相同的程序 $('button').on('click mouseenter',function(){ console.log('成功'); })②处理不同的程序 $('button').on({ click:function(){ console.log('点击成功'); }, mouseenter:function(){ console.log('成功'); } })（2）优点二： 可以给动态生成元素绑定，绑定事件（必须是对子节点绑定） 1 2 3 添加 删除 $('.add').click(function(){ var newli $('li').each(function(index,dom){ newli = $(`${index+2}`)//``模板字符串 }) $('ul').append(newli) }) $('.del').click(function(){ $('ul').html('') }) $('ul').on('click','li',function(){ console.log('点击'); }) 3、事件处理off()解绑事件（1）移除全部事件：ele.off() $('button').on({ click:function(){ console.log('点击成功'); }, mouseenter:function(){ console.log('成功'); } }) $('button').off()（2）移除某一个事件：ele.off('类型') $('button').off('click')4、事件只触发一次：one()$('button').one('click',function(){ console.log('仅一次'); })5、自动触发事件$('button').click()五、插件jQuery插件库-收集最全最新最好的jQuery插件 小伙伴可以在这个网站找喜欢的作品，下载压缩包后，可以直接看效果，而且都有源码的哦🧐 |
【本文地址】
今日新闻 |
推荐新闻 |