收藏
批改状态：合格
老师批语：
基础的 id clss 标签选择：$('爱选哪个选哪个').
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.col {
color: white;
}
</style>
</head>
<body>
<p>Hello world</p>
<p id="title">Hello</p>
<p class="text">World</p>
</body>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
// 标签选择
$('p').css('background-color','red')
// // id选择
$('#title').css('backgroundColor','lightgreen')
// //class选择
$('.text').addClass('col')
</script>
</html>点击 "运行实例" 按钮查看在线实例
清除样式，$('*').remove+爱删哪个删哪个
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.col {
color: white;
}
</style>
</head>
<body>
<p>Hello world</p>
<p id="title">Hello</p>
<p class="text">World</p>
</body>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
// 标签选择
$('p').css('background-color','red')
// // id选择
$('#title').css('backgroundColor','lightgreen')
// //3.class选择
$('.text').addClass('col')
// 清除语句，$('*').remove+爱删哪个删哪个
$('*').removeAttr('style')
$('*').removeClass()
</script>
</html>点击 "运行实例" 按钮查看在线实例
过滤器 first和last：第一和最后
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.col {
color: white;
}
</style>
</head>
<body>
<p>Hello world</p>
<p id="title">Hello</p>
<p class="text">World</p>
</body>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
// 标签选择
$('p').css('background-color','red')
// // id选择
$('#title').css('backgroundColor','lightgreen')
// //3.class选择
$('.text').addClass('col')
$('*').removeAttr('style')
$('*').removeClass()
//第一和最后
$('p:first').css('color','skyblue')
$('p:last').css('color','skyblue')
</script>
</html>点击 "运行实例" 按钮查看在线实例
选择为空的元素？？添加内容——无中生有：$(':empty')
取反——无懈可击：$(':not(:empty)')
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.col {
color: white;
}
</style>
</head>
<body>
<p>Hello world</p>
<!--只有空的标签元素才能插入 -->
<p></p>
<p id="title">Hello</p>
<p class="text">World</p>
</body>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
// 标签选择
$('p').css('background-color','red')
// // id选择
$('#title').css('backgroundColor','lightgreen')
// //3.class选择
$('.text').addClass('col')
$('p:first').css('color','skyblue')
$('p:last').css('color','skyblue')
$('*').removeAttr('style')
$('*').removeClass()
$(':empty').text('作者:孟浩然')
$(':not(:empty)').css('color','wheat')
</script>
</html>点击 "运行实例" 按钮查看在线实例
遍历toArray()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.col {
color: white;
}
</style>
</head>
<body>
<li>Hello world</li>
<li id="title">Hello</li>
<li class="text">World</li>
</body>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
var li = $('li').toArray()
for(var i=0; i<li.length; i++){
li[i].style.color = 'green'
}
</script>
</html>点击 "运行实例" 按钮查看在线实例
返回元素 first() last() find()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.col {
color: white;
}
</style>
</head>
<body>
<ul>
<li>Hello world</li>
<li id="title">Hello</li>
<li class="text">World</li>
</ul>
</body>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
// $('ul').find('li').css('color','coral')
$('li').first().css('color','red')
$('li').last().css('color','red')
</script>
</html>点击 "运行实例" 按钮查看在线实例
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
