第八章作业

最新推荐文章于 2021-07-14 18:02:34 发布

qq_43028295

最新推荐文章于 2021-07-14 18:02:34 发布

阅读量274

点赞数

本文链接：https://blog.csdn.net/qq_43028295/article/details/85265965

版权

一简答题
1.
答：
（1）操作CSS样式
（2）操作文本与属性值内容
（3）操作DOM节点
（4）遍历DOM节点
（5）操作CSS-DOM
2.
答：
html() : 获取第一个匹配元素的HTML内容或文本内容。
html(content) : 设置所有匹配元素的HTML内容或文本内容。
text() : 获取所有匹配元素的文本内容。
text (content) : 设置所有匹配元素的文本内容。
val()：获取第一个被选元素的value属性的值。
val(content)：设置所有匹配元素的value属性的值。
3.
答
css()和addClass()都能改变元素的样式。
css()是直接对样式的值进行设置，而addClass()是给元素添加类样式。addClass()比css()更加常用，因为使用addClass()添加样式，更加符合W3C规范中“结构与样式分离”的准则。
4.

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
<title>游戏推荐 </title>

<style type="text/css" >
*{
	margin:0px;
	padding:0px;
	font-size:12px;
}
#listbox{
	margin:10px;
	padding:15px;
	border:1px solid #CCCCCC;
	color:#0066FF;
}
dl{
	display:block;
	float:left;	
	margin:15px;
}
dd{
	font-size:14px;
	color:#663300; 
}

dd a{
	text-decoration:none;
	font-size:14px;
	color:#FF3300;
}
dd a:hover{
	text-decoration:underline;
}
.clear{
	clear:both;
	height:0px;
}
</style>

</head>
<body>
 <div id='listbox'>
 	<dl>
    	<dt><img src="images/p1.jpg" /></dt>
        <dd>街机三国</dd>
        <dd><a class='del' href='javascript:void(0);'>删除</a></dd>
    </dl>
    <dl>
    	<dt><img src="images/p2.jpg" /></dt>
        <dd>霸域</dd>
        <dd><a class='del' href='javascript:void(0);'>删除</a></dd>
    </dl>
    <dl>
    	<dt><img src="images/p3.jpg" /></dt>
        <dd>斗破乾坤</dd>
        <dd><a class='del' href='javascript:void(0);'>删除</a></dd>
    </dl>
    
    <div class='clear'></div>
	 <input type="button" value='新增游戏'  class='add'/>
 </div>

 <script src="js/jquery-1.12.4.js" ></script>
 <script>
	 $(document).ready(function(){

		 $('.del').click(function(){
			 $(this).parents('dl').remove();
		 });

		 $('.add').click(function(){
			 var $htmls ='';
			 $htmls  	+= '<dl>'
					 + '	<dt><img src="images/p4.jpg" /></dt>'
					 + '	<dd>大航海家OL</dd>'
					 + '	<dd><a class="del" href="javascript:void(0);">删除</a></dd>'
					 + '	</dl>' ;
			 $($htmls).insertBefore($('.clear'));
		 });
	 });

 </script>
</body>
</html>

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
<title>男生地带 </title>
<style type="text/css" >
*{
	margin:0px;
	padding:0px;
	font-size:12px;
}
#boxlist{
	height:526px;
	width:996px;
	background:#fff url(images/bg.jpg) no-repeat 0px 0px;
}
.main{ 
	margin-left:278px; 
	border:1px solid #CCC;
}
.box{
	width:168px;
	padding:23px 5px;
	border-right:1px solid #CCC;
	border-bottom:1px solid #CCC;
	float:left;
	cursor:pointer;
}
.transparent_class{
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
	filter:alpha(opacity=60);
	opacity:0.6;
}
 
</style>
</head>
<body>
 <div id='boxlist'>
   <div style='height:43px;' ></div>
 	<div class='main'> 
    	<div class='box'>
        	<dl>
            	<dt><img src='images/p1.gif' /></dt>
                <dd>
                	简约色彩系列带低帮帆布鞋12 黑色
                	<s>市场价：￥269</s>
                    <font color="#FF0000">售价：69</font>
                </dd>
            </dl>
        </div>
        <div class='box'>
        	<dl>
            	<dt><img src='images/p1.gif' /></dt>
                <dd>
                	简约色彩系列带低帮帆布鞋12 黑色
                	<s>市场价：￥269</s>
                    <font color="#FF0000">售价：69</font>
                </dd>
            </dl>
        </div>
        <div class='box'>
        	<dl>
            	<dt><img src='images/p2.gif' /></dt>
                <dd>
                	简约色彩系列带低帮帆布鞋12 黑色
                	<s>市场价：￥269</s>
                    <font color="#FF0000">售价：69</font>
                </dd>
            </dl>
        </div>
        <div class='box'>
        	<dl>
            	<dt><img src='images/p3.gif' /></dt>
                <dd>
                	简约色彩系列带低帮帆布鞋12 黑色
                	<s>市场价：￥269</s>
                    <font color="#FF0000">售价：69</font>
                </dd>
            </dl>
        </div>
        <div class='box'>
        	<dl>
            	<dt><img src='images/p4.gif' /></dt>
                <dd>
                	简约色彩系列带低帮帆布鞋12 黑色
                	<s>市场价：￥269</s>
                    <font color="#FF0000">售价：69</font>
                </dd>
            </dl>
        </div>
        <div class='box'>
        	<dl>
            	<dt><img src='images/p4.gif' /></dt>
                <dd>
                	简约色彩系列带低帮帆布鞋12 黑色
                	<s>市场价：￥269</s>
                    <font color="#FF0000">售价：69</font>
                </dd>
            </dl>
        </div>
        <div class='box'>
        	<dl>
            	<dt><img src='images/p2.gif' /></dt>
                <dd>
                	简约色彩系列带低帮帆布鞋12 黑色
                	<s>市场价：￥269</s>
                    <font color="#FF0000">售价：69</font>
                </dd>
            </dl>
        </div>
        <div class='box'>
        	<dl>
            	<dt><img src='images/p1.gif' /></dt>
                <dd>
                	简约色彩系列带低帮帆布鞋12 黑色
                	<s>市场价：￥269</s>
                    <font color="#FF0000">售价：69</font>
                </dd>
            </dl>
        </div>
        <div style='clear:both;'></div>
    </div>
 </div>
 <script src="js/jquery-1.12.4.js" ></script>
 <script>
	 $(document).ready(function(){
		 $('img').hover(function(){
			 $(this).addClass('transparent_class');
		 },function(){
			 $(this).removeClass('transparent_class');
		 });
	 });

 </script>
</body>
</html>

qq_43028295

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
第八章作业

一简答题1.答：（1）操作CSS样式（2）操作文本与属性值内容（3）操作DOM节点（4）遍历DOM节点（5）操作CSS-DOM2.答：html() : 获取第一个匹配元素的HTML内容或文本内容。html(content) : 设置所有匹配元素的HTML内容或文本内容。text() : 获取所有匹配元素的文本内容。text (content) : 设置所有匹配元素的文本内...
复制链接

扫一扫