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('')相同）