jquery学习-常用dom属性相关方法(2)
程序员文章站
2022-07-05 14:47:51
...
dom属性相关方法
css()方法：设置或者获取css样式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="node_modules/jquery/dist/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
// $('button:eq(0)').click(function () {
// $('li').css('background','red')
//点击下标为0的这个button时，找到li元素，设置它的css样式
// })
// $('button:first').click(function () {
// $('li').css({
// 'background':'red',
// 'font-size':'18px',
// 'color':'white'
// })
//当要设置一个元素的多个样式时，可以用传入一个对象，用名词对的方式。
// })
$('button:eq(0)').click(function () {
$('li').css('background',function (index) {
if (index % 2 == 0) {
return 'red'
}
/*点击下标为0的这个button时，找到li元素，当它的下标为偶数的时候，
将它的css样式设置为红色。
*/
})
})
})
</script>
</head>
<body>
<ul>
<li>nodeing_1</li>
<li>nodeing_2</li>
<li>nodeing_3</li>
<li>nodeing_4</li>
<li>nodeing_5</li>
<li>nodeing_6</li>
<li>nodeing_7</li>
<li>nodeing_8</li>
<li>nodeing_9</li>
<li>nodeing_10</li>
</ul>
<button>设置样式</button>
<button>取消样式</button>
</body>
</html>