jq(各种操作)
样式操作
js | jq |
classList.add | addClass |
classList.remove | removeClass |
classList.contains | hasClass |
classList.toggle | toggleClass |
$('p').first().css('color','red').next().css('color','green')
//获取元素距当前窗口的偏移量
offset()
//获取元素相对于父标签的偏移量
position()
//获取浏览器滚动条的位置
scrollTop()
$(window).scrollLeft()
//返回顶部
$(window).scrollTop(0)
$(window).scrollLeft(0)
//文本高度
$('p').height()
//文本+padding
$('p').innerWidth()
//文本+padding+border
$('p').outerHeight()
文本操作
js | jq |
innerText | text() |
innerHTML | html() |
//赋值
$('div').text(‘你好啊’)
//获取
$('input').vla()
//赋值
$('input').val('你好啊')
//获取文件,input标签ID为d1
$('#d1')[0].files[0]
属性操作
js | jq |
setAttribute() | attr(name,value) |
getAttribute() | attr(name) |
removeAttribute() | removeAttr(name) |
标签上能够看到的属性用attr,返回布尔值比如checkbos,radio,option是否被选中用prop
//查看checkbox是否被用户选中
$('#i1').prop('checked')
true
$('#i1').prop('checked',true)
$('#i1').prop('checked',false)
标签操作
js | jq | |
createElement('p') | $('<p>') | 创建标签 |
appendChild() | $('#d1').append($pEle) | 在d1标签内最后面加入$pEle |
$pEle.appendTo($('#d1')) | 将$pEle加在d1内最后面 | |
$('#d1').prepend($pEle) | 在d1标签内最前面加入$pEle | |
prependTo() | ||
$('#d2').after($pEle) | 在d2同级别后面加入$pEle | |
$pEle.insertAfter($('#d2')) | ||
.before | ||
.insertBefore | ||
$('span').remove() | 删除标签(包含子标签) | |
.empty() | 清空标签内部(与$('#d1').html('')相同) |