1.jQuery中有哪些DOM操作?
(1)操作CSS样式
(2)操作文本与属性值内容
(3)操作DOM节点
(4)遍历DOM节点
(5)操作CSS-DOM
2.简述html()方法,text()方法和val()方法的异同
html() : 获取第一个匹配元素的HTML内容或文本内容。
html(content) : 设置所有匹配元素的HTML内容或文本内容。
text() : 获取所有匹配元素的文本内容。
text (content) : 设置所有匹配元素的文本内容。
val():获取第一个被选元素的value属性的值。
val(content):设置所有匹配元素的value属性的值。
3.简述css()方法和addClass()方法的异同
css()和addClass()都能改变元素的样式。
css()是直接对样式的值进行设置,而addClass()是给元素添加类样式。addClass()比css()更加常用,因为使用addClass()添加样式,更加符合W3C规范中“结构与样式分离”的准则。
4.制作游戏列表页面,游戏列表放置在一个边框颜色为#cccccc的1px实线框中,该线框与浏览器边距为10px与其内容之间间距为15px标题文字大小为14px,颜色为#0066ff,超链接颜色为#ff3300,鼠标指针移过时显示下划线,单击"删除"链接时,其对应的图片和名称等信息被删除,单击新增游戏按钮时,添加游戏信息
实现代码如下:
<!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="img/p1.jpg" /></dt>
<dd>街机三国</dd>
<dd><a class='del' href='javascript:void(0);'>删除</a></dd>
</dl>
<dl>
<dt><img src="img/p2.jpg" /></dt>
<dd>霸域</dd>
<dd><a class='del' href='javascript:void(0);'>删除</a></dd>
</dl>
<dl>
<dt><img src="img/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" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.add').click(function(){
var games = '';
games += '<dl>'+'<dt><img src="img/p4.jpg" /></dt>' + '<dd>大航海家OL</dd>' + '<dd><a class="del" href="javascript:void(0);">删除</a></dd>'+'</dl>';
$(games).insertBefore($('.clear'));
$('.del').click(function(){
$(this).parents('dl').remove();
});
});
});
</script>
</body>
</html>
5.制作男生地带页面,鼠标指针移过商品图片时,图片变为半透明显示,透明度为0.6,指针移出时,恢复正常显示,即图片透明度变为1
实现代码如下:
<!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(img/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='img/p1.gif' /></dt>
<dd>
简约色彩系列带低帮帆布鞋12 黑色
<s>市场价:¥269</s>
<font color="#FF0000">售价:69</font>
</dd>
</dl>
</div>
<div class='box'>
<dl>
<dt><img src='img/p1.gif' /></dt>
<dd>
简约色彩系列带低帮帆布鞋12 黑色
<s>市场价:¥269</s>
<font color="#FF0000">售价:69</font>
</dd>
</dl>
</div>
<div class='box'>
<dl>
<dt><img src='img/p2.gif' /></dt>
<dd>
简约色彩系列带低帮帆布鞋12 黑色
<s>市场价:¥269</s>
<font color="#FF0000">售价:69</font>
</dd>
</dl>
</div>
<div class='box'>
<dl>
<dt><img src='img/p3.gif' /></dt>
<dd>
简约色彩系列带低帮帆布鞋12 黑色
<s>市场价:¥269</s>
<font color="#FF0000">售价:69</font>
</dd>
</dl>
</div>
<div class='box'>
<dl>
<dt><img src='img/p4.gif' /></dt>
<dd>
简约色彩系列带低帮帆布鞋12 黑色
<s>市场价:¥269</s>
<font color="#FF0000">售价:69</font>
</dd>
</dl>
</div>
<div class='box'>
<dl>
<dt><img src='img/p4.gif' /></dt>
<dd>
简约色彩系列带低帮帆布鞋12 黑色
<s>市场价:¥269</s>
<font color="#FF0000">售价:69</font>
</dd>
</dl>
</div>
<div class='box'>
<dl>
<dt><img src='img/p2.gif' /></dt>
<dd>
简约色彩系列带低帮帆布鞋12 黑色
<s>市场价:¥269</s>
<font color="#FF0000">售价:69</font>
</dd>
</dl>
</div>
<div class='box'>
<dl>
<dt><img src='img/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" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(document).ready(function(){
$('img').hover(function(){
$(this).addClass('transparent_class');
},function(){
$(this).removeClass('transparent_class');
})
})
</script>
</body>
</html>