二、jQuery样式操作
标签样式操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jQuery-3.4.1.js"></script>
</head>
<body>
<div class="c1 c2 c3"></div>
</body>
</html>
$('div').hasClass('c1')
true
$('div').hasClass('c2')
true
$('div').hasClass('c3')
true
$('div').removeClass('c1')
k.fn.init [div.c2.c3, prevObject: k.fn.init(1)]
$('div').addClass('c1')
k.fn.init [div.c2.c3.c1, prevObject: k.fn.init(1)]
cs操作
$('p').first().css('color','red')
k.fn.init [p, prevObject: k.fn.init(2)]
$('p').first().css('color','red').next().css('color','green')
k.fn.init [p, prevObject: k.fn.init(1)]
# jQuery对象调用jQuery方法之后返回jQuery对象 也就可以继续调用
位置操作
$('p').offset() #相对于浏览器窗口
{top: 116, left: 100}left: 100top: 116__proto__: Object
$('p').position() #相对于父标签
{top: 100, left: 100}
$('window').scrollTop() #括号内不加参数就是获取 有参数就是设置
undefined
文本操作
$('div').text()
"
有些话听听就过去了，不要在意，都是成年人
"
$('div').html()
"
<p>有些话听听就过去了，不要在意，都是成年人</p>
"
$('div').text('你个')
k.fn.init [div, prevObject: k.fn.init(1)]
$('div').html('<h1>你个</h1>')
k.fn.init [div, prevObject: k.fn.init(1)]
获取值操作
$('#d1').val()
"111"
$('#d2').val()
"222"
$('#d1').val('222')
k.fn.init [input#d1]
$('#d2').val('111')
k.fn.init [input#d2]
$('#d2')[0]
<input type="file" value="222" id="d2">
$('#d2')[0].files[0]
File {name: "邯郸学院 郭赛科.pdf", lastModified: 1596785921287, lastModifiedDate: Fri Aug 07 2020 15:38:41 GMT+0800 (中国标准时间), webkitRelativePath: "", size: 249211, …}
属性操作
js中 jQuery
setAttribute() attr(name,value)
getAttribute() attr(name)
removeAttribute() removeAttr(name)
事件
<button id="d1">问我</button>
<button id="d2">亲我</button>
<script>
// 第一种
$('#d1').click(
function (){
alert('v')
}
)
// 第二种
$('#d2').on('click',function (){
alert('2')
}
)
</script>
克隆事件
<button id="d1">
屠
</button>
<script>
$('#d1').on('click',function (){
// alert('a')
// console.log(this)
$(this).clone().insertAfter('body')
})
</script>
