使用Jquery操作DOM

<!DOCTYPE html>
<html>
  <head>
    <title>sj1.html</title>
	<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
    <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">

<style type="text/css" >
*{
	margin:0px;
	padding:0px;
	font-size:12px;
}
#pruduce{
	width:947px;
	background-color:#F2F2F2;
}
.top{
	height:55px;
	background:url(images/top.jpg) no-repeat 10px 10px;
}
 
.main{ 
	text-align:center;
	 
	height:309px;
	 
	 
}
.box{
	width:300px;
	height:280px; 
	border:1px solid #999;
	margin:0px 6px;
	float:left;
	cursor:pointer;
}
dl{
	padding-top:3px;
		
}
dd{
	line-height:30px;
}

div.btprice_1{
	height:50px;
	background:#FFF2CE url(images/bt1.jpg) no-repeat 5px 4px; 
}
div.btprice_2{
	height:50px;
	background:#FFF2CE url(images/bt2.jpg) no-repeat 5px 4px; 
}
div.btprice_3{
	height:50px;
	background:#FFF2CE url(images/bt3.jpg) no-repeat 5px 4px; 
}
.hoverstyle{
	background-color:#D51938;
	color:#fff;
}
</style>

<script type="text/javascript">

$(function(){
$("dl").hover(function(){
$(this).addClass("hoverstyle");
},function(){
$(this).removeClass("hoverstyle");

});
});
</script>


</head>
<body>

<div id="pruduce">
	<div class="top"></div>
    <div class="main">
    	<div class="box">
        	<dl>
            	<dt><img src="images/pic1.jpg" /></dt>
                <dd>[包邮]亮点可移动儿童防身高帖(每个ID限20)</dd>
                
            </dl> 
            <div class="btprice_1"></div>
        </div>
        <div class="box">
        	<dl>
            	<dt><img src="images/pic2.jpg" /></dt>
                <dd>[包邮]韩国泡温泉游泳衣价达玛分教保守纤瘦大胸泳装</dd> 
            </dl> 
             <div class="btprice_2"></div>
        </div>
        <div class="box">
        	<dl>
            	<dt><img src="images/pic3.jpg" /></dt>
                <dd>[包邮]贵人鸟运动透气跑鞋P23423(每个限购5件)</dd>
               
            </dl> 
             <div class="btprice_3"></div>
        </div>
    </div> 
</div>
</body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <title>sj2.html</title>
	<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
    <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">
    
   <style type="text/css" >
*{
	margin:0px;
	padding:0px;
	font-size:12px;
}
#login{
	position:relative;
	height:282px;
	width:494px; 
	background:url(images/bg1.jpg) no-repeat;
}
#login input.text{
	position:absolute; 
	height:26px;
	line-height:26px;
	color:#999;
	width:207px;
}
.username{
	left:183px;
	top:105px;
}

.passwrd{
	left:183px;
	top:145px;
}

input.btn{
	position:absolute; 
	left:183px;
	top:190px; 
	height:32px;
	line-height:32px;
	width:100px; 
	background:url(images/btn.jpg) no-repeat;
	border:none;
}

</style>
<script type="text/javascript">
	
$(function(){
var uname='通行账号/邮箱';
var pwd='密码';
$("input").focus(function(){
$(this).val('');
});
$("input").blur(function(){
  if($(this).attr("name")=="username"){
  $(this).val(uname);
  }else if($(this).attr("name")=="password"){
  $(this).val(pwd);
  }
});
});
</script>
</head>
<body>
 <div id="login">
 	<form>
    	<input type="text" name='username' class='text username' value="通行账号/邮箱" />
        <input type="text" name='password' class='text passwrd' value="密码"/>
        <input type="submit" name='sub'  class='btn' value=" "/>
    </form>
 </div>

</body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <title>sj3.html</title>
   
	<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
	 <script type="text/javascript" src="js/jquery-migrate-1.2.0.js"></script>
    <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">
    
   
<style type="text/css" >
*{
	 
	font-size:12px;
}
tr{
	text-align:center;
	height:40px;
}

</style>
<script type="text/javascript">
	$(document).ready(function(){ 
		$(".newone").live("click",function(){
		var myid=$("<tr   bgcolor='#FAF3E9'>"
		+"<td>"
		+"<input  type='checkbox'/>"
		+"</td>"
    +"<td>张三</td>"
    +"<td>男</td>"
    +"<td>6565654315321321</td>"
    +"<td>短工</td>"
    +"<td>18625455412</td>"
    +"<td>1995-12-09</td>"
   +"<td>10,000.00</td>"
    +"<td>"
    	+"<img  class='add' src='images/add.jpg' />"
        +"<img class='del' src='images/del.jpg' />"
    +"</td>"
  +"</tr>");
  
  $("table").append(myid);
		});
		
		$(".del").bind("click",function(){
	         $(this).parent().parent().remove();
		});
	});

</script>
</head>
<body>


<table  width="800" >
  <tr class='ee' bgcolor="#EBE7DC">
    <td><input type="checkbox"/></td>
    <td>姓名</td>
    <td>性别</td>
    <td>卡号</td>
    <td>会员级别</td>
    <td>电话号码</td>
    <td>出生年月日</td>
    <td>消费金额</td>
    <td> </td>
  </tr>
  <tr  bgcolor="#FAF3E9">
    <td><input  type="checkbox"/></td>
    <td>张三</td>
    <td>男</td>
    <td>6565654315321321</td>
    <td>短工</td>
    <td>18625455412</td>
    <td>1995-12-09</td>
    <td>10,000.00</td>
    <td>
    	<img  class='add' src="images/add.jpg" />
        <img class='del' src="images/del.jpg" />
    </td>
  </tr>
  <tr   bgcolor="#FEFAF7">
    <td><input  type="checkbox"/></td>
    <td>张三</td>
    <td>男</td>
    <td>6565654315321321</td>
    <td>短工</td>
    <td>18625455412</td>
    <td>1995-12-09</td>
    <td>10,000.00</td>
    <td>
    	<img  class='add' src="images/add.jpg" />
        <img class='del' src="images/del.jpg" />
    </td>
  </tr>
    <tr bgcolor="#FAF3E9">
    <td><input  type="checkbox"/></td>
    <td>张三</td>
    <td>男</td>
    <td>6565654315321321</td>
    <td>短工</td>
    <td>18625455412</td>
    <td>1995-12-09</td>
    <td>10,000.00</td>
    <td>
    	<img  class='add' src="images/add.jpg" />
        <img class='del' src="images/del.jpg" />
    </td>
  </tr>
</table>
<a href="#" class='newone'>新增</a>


</body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <title>kh4.html</title>
	   
  <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
  <script type="text/javascript" src="js/jquery-1.11.1.js"></script>
  <script type="text/javascript" src="js/jquery-migrate-1.2.0.js"></script>
    <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">
<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>
<script type="text/javascript">
	$(document).ready(function(){ 
		$(".add").live("click",function(){
		var myid=$("<dl>"
		+"<dt><img src='images/p1.jpg' /></dt>"
        +"<dd>街机三国</dd>"
        +"<dd>"+"<a class='del' href='javascript:void(0);'>删除</a>"+"</dd>"
   +"</dl>");
  
  $("#listbox").append(myid);
		});

		$(".del").bind("click",function(){
	         $(this).parent().parent().remove();
		});
	});

</script>
</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>
 </div>
<input type="button" value='新增游戏'  class='add'/>
</body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <title>kh5.html</title>
	<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
    <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">
    

 <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>
<script type="text/javascript">
$(function(){
$("dl").hover(function(){
$(this).addClass("transparent_class");
},function(){
$(this).removeClass("transparent_class");

});
});

</script>
</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 黑色
                	<span>市场价:¥269</span>
                    <font color="#FF0000">售价:69</font>
                </dd>
            </dl>
        </div>
        <div class='box'>
        	<dl>
            	<dt><img src='images/p1.gif' /></dt>
                <dd>
                	简约色彩系列带低帮帆布鞋12 黑色
                	<span>市场价:¥269</span>
                    <font color="#FF0000">售价:69</font>
                </dd>
            </dl>
        </div>
        <div class='box'>
        	<dl>
            	<dt><img src='images/p2.gif' /></dt>
                <dd>
                	简约色彩系列带低帮帆布鞋12 黑色
                	<span>市场价:¥269</span>
                    <font color="#FF0000">售价:69</font>
                </dd>
            </dl>
        </div>
        <div class='box'>
        	<dl>
            	<dt><img src='images/p3.gif' /></dt>
                <dd>
                	简约色彩系列带低帮帆布鞋12 黑色
                	<span>市场价:¥269</span>
                    <font color="#FF0000">售价:69</font>
                </dd>
            </dl>
        </div>
        <div class='box'>
        	<dl>
            	<dt><img src='images/p4.gif' /></dt>
                <dd>
                	简约色彩系列带低帮帆布鞋12 黑色
                	<span>市场价:¥269</span>
                    <font color="#FF0000">售价:69</font>
                </dd>
            </dl>
        </div>
        <div class='box'>
        	<dl>
            	<dt><img src='images/p4.gif' /></dt>
                <dd>
                	简约色彩系列带低帮帆布鞋12 黑色
                	<span>市场价:¥269</span>
                    <font color="#FF0000">售价:69</font>
                </dd>
            </dl>
        </div>
        <div class='box'>
        	<dl>
            	<dt><img src='images/p2.gif' /></dt>
                <dd>
                	简约色彩系列带低帮帆布鞋12 黑色
                	<span>市场价:¥269</span>
                    <font color="#FF0000">售价:69</font>
                </dd>
            </dl>
        </div>
        <div class='box'>
        	<dl>
            	<dt><img src='images/p1.gif' /></dt>
                <dd>
                	简约色彩系列带低帮帆布鞋12 黑色
                	<span>市场价:¥269</span>
                    <font color="#FF0000">售价:69</font>
                </dd>
            </dl>
        </div>
        <div style='clear:both;'></div>
    </div>
 </div>

</body>
</html>

  • 2
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
(答案见下载资源) 上机任务1 用chrome打开dom.sample2.html页面, 在chrome的控制台中输入jQuery代码并执行,完成以下选择动作: (1)查找id号为tigerLily的元素 (2)查找拥有类myList的元素 (3)查找所有的input元素 (4)查找所有img元素和tr元素 (5)查找id号为coffeePot和id号为someDiv的元素 (6)选择具有id属性的所有元素 (7)选择具有id属性的input元素 (8)选择其value属性等于A的元素 (9)选择其value属性等于A或等于C的元素 (10)选择其title属性值中含有dog的img元素 (11)选择其href属性值以http开头的a元素 (12)选择div元素内嵌套的span元素 上机任务2 用chrome打开dom.sample2.html页面, 在chrome的控制台中输入jQuery代码并执行,完成以下选择动作: (13)选择元素li,该元素作为拥有myList类的ul元素的直接子元素 (14)选择id号为radioA的input元素后面的第一个input兄弟元素 (15)选择id号为radioA的input元素后面的所有input兄弟元素 (16)选择dom sample页面中第3个tr元素 (17)选择其type属性值checkbox且索引为偶数的input元素 (18)选择非最后一行的tr元素 (19)选择所有的checkbox元素 (20)选择所有被选中的表单元素 (21)选择含有1972的td元素 (22)选择包含有sapn元素的div元素 (23)选择表格中每行的第一个单元格和最后一个单元格 (24)选择表格中第3行,标题行不算(要求用nth-child()过滤器) 上机任务3 用chrome打开dom.sample2.html页面,该页面中内嵌有几个CSS类:.red .green .blue .yellow .thickBorder .seeThrough 在chrome的控制台中输入jQuery代码并执行,完成以下选择动作: (1)将拥有alt属性的倒数第二个图片元素应用yellow类 (2)将第一个checkbox表单元素应用.green样式 (3)求id值为checkbox3的元素在所有表单元素里的顺序号 (4)用一条链式语句完成:先对所有img元素应用seeThrough样式,再为所有img元素和tr元素应用yellow样式 (5)用filter方法实现:选择单元格内容为Java或Smalltalk的单元格 (6)取图片集中的第2,3,4张图片 (7)用has方法实现:选择那些包含有ul元素的li元素 (8)将tbody每个单元格里的文字设为:我爱jQuery (9)查找form元素的后代元素中标签为label的元素 (10)查找表单元素中是否有id值为checkbox5的元素 提示: 为某dom元素应用某css样式可以使用jQuery中的addClass方法,例如:将id为tt的div元素应用.bt样式,可用些语句:$("#tt").addClass("color","red");
jQuery是一个流行的JavaScript库,它简化了对DOM元素的操作。下面是一些常见的jQuery操作DOM的示例: 1. 选择元素: 使用jQuery选择器可以方便地选择DOM元素。例如,要选择id为"myElement"的元素,可以使用以下代码: ```javascript var element = $("#myElement"); ``` 2. 操作样式: 使用jQuery可以轻松地添加、删除或修改元素的样式。例如,要将元素的背景颜色设置为红色,可以使用以下代码: ```javascript element.css("background-color", "red"); ``` 3. 操作内容: jQuery提供了许多方法来操作元素的内容。例如,要获取或设置元素的文本内容,可以使用以下代码: ```javascript var text = element.text(); // 获取文本内容 element.text("Hello, World!"); // 设置文本内容 ``` 4. 操作属性: 使用jQuery可以方便地获取或设置元素的属性。例如,要获取或设置元素的href属性,可以使用以下代码: ```javascript var href = element.attr("href"); // 获取href属性值 element.attr("href", "https://www.example.com"); // 设置href属性值 ``` 5. 添加和删除元素: 使用jQuery可以在DOM中添加或删除元素。例如,要在一个元素内部添加一个新的子元素,可以使用以下代码: ```javascript element.append("<div>New element</div>"); // 添加新的子元素 ``` 这些只是jQuery操作DOM的一些基本示例,jQuery还提供了许多其他强大的功能,如事件处理、动画效果等。你可以查阅jQuery的文档以了解更多信息。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值