1.<!DOCTYPE html>
<html>
<head>
<title>work1.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<script type="text/javascript" src="../js/jquery-1.9.1.js"></script>
<script type="text/javascript">
/* 改变 <body> 内所有 <div> 的背景色为 # bbffaa
改变 <body> 内 子 <div> 的背景色为 # bbffaa
改变 id 为 one 的下一个 <div> 的背景色为 # bbffaa
改变 id 为 two 的元素后面的所有兄弟<div>的元素的背景色为 # bbffaa
改变 id 为 two 的元素所有 <div> 兄弟元素的背景色为 # bbffaa */
//改变 <body> 内所有 <div> 的背景色为 # bbffaa
$(document).ready(function(){
//改变 <body> 内所有 <div> 的背景色为 # bbffaa
//$("div").css("background-color","#bbffaa");
//改变 <body> 内子 <div> 的背景色为 # bbffaa
// $("#body>div").css("background-color","#bbffaa");
// 改变 id 为 one 的下一个 <div> 的背景色为 # bbffaa
$("#one~div").css("background-color","#bbffaa");
//改变 id 为 two 的元素后面的所有兄弟<div>的元素的背景色为 # bbffaa
$("#two div").css("background-color","#bbffaa");
//改变 id 为 two 的元素所有 <div> 兄弟元素的背景色为 # bbffaa
$("#two>div").css("background-color","#bbffaa");
});
</script>
</head>
<body id="body">
<div id="one">aaaaa</div>
<div id="two">bbbbb</div>
<div>ccccc</div>
<div>dddddd</div>
<div>eeeeee</div>
</body>
</html>
2.<!DOCTYPE html>
<html>
<head>
<title>work1.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<script type="text/javascript" src="../js/jquery-1.9.1.js"></script>
<script type="text/javascript">
/* 改变第一个 div 元素的背景色为 # bbffaa $("div:first").css("background-color","#bbffaa");
改变最后一个 div 元素的背景色为 # bbffaa $("div:last").css("background-color","#bbffaa");
改变class不为 one 的所有 div 元素的背景色为 # bbffaa $("div:not(.one)").css("background-color","#bbffaa");
改变索引值为偶数的 div 元素的背景色为 # bbffaa $("div:even").css("background-color","#bbffaa");
改变索引值为奇数的 div 元素的背景色为 # bbffaa $("div:odd").css("background-color","#bbffaa");
改变索引值为大于 3 的 div 元素的背景色为 # bbffaa $("div:gt(3)").css("background-color","#bbffaa");
改变索引值为等于 3 的 div 元素的背景色为 # bbffaa $("div:eq(3)").css("background-color","#bbffaa");
改变索引值为小于 3 的 div 元素的背景色为 # bbffaa $("div:lt(3)").css("background-color","#bbffaa");
改变所有的标题元素的背景色为 # bbffaa $("div:header").css("background-color","#bbffaa");
改变当前正在执行动画的所有元素的背景色为 # bbffaa $("div:animated").css("background-color","#bbffaa");*/
$(document).ready(function(){
$("div:header").css("background-color","#bbffaa");
});
</script>
</head>
<body id="body">
<div id="one">aaaaa</div>
<div id="two">bbbbb</div>
<div>ccccc</div>
<div class="one">dddddd</div>
<div>eeeeee</div>
<div>fffffff</div>
<div>ggggggg</div>
<div>sssssss</div>
</body>
</html>
3.<!DOCTYPE html>
<html>
<head>
<title>work1.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<script type="text/javascript" src="../js/jquery-1.9.1.js"></script>
<script type="text/javascript">
/* 改变 id 为 one 的元素的背景色为 # bbffaa $("#one").css("background-color","#bbffaa");
改变 class 为 mini 的所有元素的背景色为 # bbffaa $(".mini").css("background-color","#bbffaa");
改变元素名为 <div> 的所有元素的背景色为 # bbffaa $("div").css("background-color","#bbffaa");
改变所有元素的背景色为 # bbffaa $("*").css("background-color","#bbffaa");
改变所有的<span>元素和 id 为 two 的元素的背景色为 # bbffaa $("#sapn,#two").css("background-color","#bbffaa");
*/
$(document).ready(function(){
$(".mini").css("background-color","#bbffaa");
});
</script>
</head>
<body id="body">
<div id="one">aaaaa</div>
<div id="two">bbbbb</div>
<div>ccccc</div>
<div class="mini">dddddd</div>
<div>eeeeee</div>
<div>fffffff</div>
<div>ggggggg</div>
<div>sssssss</div>
</body>
</html>
4.<!DOCTYPE html>
<html>
<head>
<title>work1.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<script type="text/javascript" src="../js/jquery-1.9.1.js"></script>
<script type="text/javascript">
/* 改变含有文本 ‘di’ 的 div 元素的背景色为 # bbffaa $("div:contains('weimingwei')");
改变不包含子元素(或者文本元素) 的 div 空元素的背景色为 # bbffaa $("div:empty");
改变含有 class 为 mini 元素的 div 元素的背景色为 # bbffaa $(".mini").css("background-color","#bbffaa");
改变含有子元素(或者文本元素)的div元素的背景色为 # bbffaa $("div:parent").css("background-color","#bbffaa");
*/
$(document).ready(function(){
$(".mini").css("background-color","#bbffaa");
});
</script>
</head>
<body id="body">
<div id="one">aaaaa</div>
<div id="two">bbbbb</div>
<div>ccccc</div>
<div class="mini">dddddd</div>
<div></div>
<div></div>
<div>ggggggg</div>
<div>sssssss</div>
</body>
</html>
5.<!DOCTYPE html>
<html>
<head>
<title>work1.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<script type="text/javascript" src="../js/jquery-1.9.1.js"></script>
<script type="text/javascript">
/* 改变所有可见的div元素的背景色为 # bbffaa $("div:hidden").css("background-color","#bbffaa");
选取所有不可见的元素, 利用 jQuery 中的 show() 方法将它们显示出来, 并设置其背景色为 # bbffaa $("div").show(); $("div:visible")show().css("background-color","#bbffaa");
选取所有的文本隐藏域, 并打印它们的值 $("div").show();
*/
$(document).ready(function(){
$("div").show();
});
</script>
</head>
<body id="body">
<div id="one">aaaaa</div>
<div id="two">bbbbb</div>
<div>ccccc</div>
<div class="mini">dddddd</div>
<div> wwwwww</div>
<div style="display: none;">
<h1>你好 好好好哦</h1>
</div>
<input type="hidden" value="11"/>
<input type="visible" value="11"/>
<input type="visible" value="11"/>
<input type="visible" value="11"/>
<div>sssssss</div>
</body>
</html>
6.<!DOCTYPE html>
<html>
<head>
<title>work1.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<script type="text/javascript" src="../js/jquery-1.9.1.js"></script>
<script type="text/javascript">
/* 选取下列元素,改变其背景色为 # bbffaa
含有属性title 的div元素. $("div[title]").css("background-color","#bbffaa");
属性title值等于"test"的div元素. $("div[title=test]").css("background-color","#bbffaa");
属性title值不等于"test"的div元素(没有属性title的也将被选中).$("div[title=test]").css("background-color","#bbffaa");
属性title值 以"te"开始 的div元素. $("div[title^=te]").css("background-color","#bbffaa");
属性title值 以"est"结束 的div元素. $("div[title$=est]").css("background-color","#bbffaa");
属性title值 含有"es"的div元素. $("div[title*=es]").css("background-color","#bbffaa");
选取有属性id的div元素，然后在结果中选取属性title值含有“es”的 div 元素.
$("div[id][title*=es]").css("background-color","#bbffaa");
*/
$(document).ready(function(){
$("div[id][title*=es]").css("background-color","#bbffaa");
});
</script>
</head>
<body id="body">
<div id="one "title="test">aaaaa</div>
<div title="test">bbbbb</div>
<div title="test">ccccc</div>
<div title="tqest">dddddd</div>
<div title="aaaa"> wwwwww</div>
</body>
</html>
7.<!DOCTYPE html>
<html>
<head>
<title>work1.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<script type="text/javascript" src="../js/jquery-1.9.1.js"></script>
<script type="text/javascript">
/* 选取下列元素,改变其背景色为 # bbffaa
每个class为one的div父元素下的第2个子元素. $("body>div:nth-child(2)").css("background-color","#bbffaa");
每个class为one的div父元素下的第一个子元素 $("body>div:first-child").css("background-color","#bbffaa");
每个class为one的div父元素下的最后一个子元素 $("body>div:last-child").css("background-color","#bbffaa");
如果class为one的div父元素下的仅仅只有一个子元素，那么选中这个子元素 $("body>div:only-child").css("background-color","#bbffaa");
*/
$(document).ready(function(){
$("body>div:last-child").css("background-color","#bbffaa");
});
</script>
</head>
<body id="body">
<div id="one "title="test">aaaaa</div>
<div class="one">ccccc</div>
<div title="tqest">dddddd</div>
<div title="aaaa"> wwwwww</div>
</body>
</html>
扫一扫
282
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
