JQuery笔记03
jQuery添加属性:
$('.box').attr('class' , 'one');
$('.box').attr({
name : 'haha',
index : '1'
});
//获取属性值:
$('.box').attr('index');
//移除属性:
$('.box').removeAttr('index');//如果不传参数,就什么都不干
jQuery中 .prop()
专门用来获取W3C标准的属性,返回 false / true(attr返回的是checked、selected、disabled,和webAPI不同)
if($('ul li input:checked').length == 4)
用冒号 : 属性 来筛选符合条件的元素
操作文本和内容:
$('input').val()//获取
$('input').val('666')//设置
- .html() => innerHTML()
- .text() => innerText()
获取宽高:
.width() / .height()
content的宽高
.innerWidth() / .innerHeight()
content + padding的宽高
.outerWidth() / .outerHeight()
content + padding + border 的宽高
.outerWidth(true) / .outerHeight(true)
content + padding + border + margin 的宽高
设置/获取坐标:
相对document:
.offset() //获取,返回对象,得到的是数值
.offset({
left : 80,
top : 45
}) //不需要单位!
相对最近的定位父元素:
.position() //只能获取,不能设置,返回的也是一个对象
出界值:
scrollLeft()//content相当于左侧滚动出去的距离
scrollTop()//content相当于顶部滚动出去的距离
设置值直接在括号内添加数值即可,如:
scrollLeft(100)
jQuery中的事件
on方法绑定事件:
on('事件类型' , '子元素selector-可省略-相当于事件代理' , '传递给事件处理函数的数据-不常用' , function (e) {})
$('div').on('click mouseenter' , function (e) {
if(e.type == 'click'){
console.log('点击事件');
}
else if( e.type == 'mouseenter'){
console.log('移入事件');
}
})
可以注册多个事件,用事件对象的type属性判断是哪个函数生效。
off方法解绑事件:
$('.box').off();
不传参数会移除掉所有事件,传入事件名则移除相应的事件 (会连同代理的事件一并清除)
<div class="box"> <span> </span></div>
$('.box').on('click', 'span' , function(){})//是给span注册的,由div代理
$('.box').off('click','**')//会移除掉div代理span的点击事件
事件触发:
$('.box').trigger('事件名')
,想触发谁的事件就谁调用,遵循冒泡
$('.span').triggerHandler('事件名')
- 通过代理注册的事件,此方法无法触发。
- 通过此方法触发的事件不会冒泡,不会执行默认事件。
- 多个符合条件只会触发第一个
- 返回事件处理函数中的返回值
jQuery事件对象:
event.type //事件类型
event.target //事件目标,点击谁就是谁
event.currentTarget //相当于this
event.delegateTarget //寻找代理对象
screenX / screenY //相对设备'屏幕'左上角的值
offsetX / offsetY //相对元素左上角的值
pageX / pageY //相对于页面左上角的值
keycode //键盘值
.end()
返回上一次状态
each(function (index , element-是DOM对象) {
})