jQuery 使用jQuery操作DOM

最新推荐文章于 2021-11-19 13:54:37 发布
最新推荐文章于 2021-11-19 13:54:37 发布
阅读量276 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36074088/article/details/71123309
版权 
<html>
  <head>
    <title>day0100.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" >
*{
	margin:0px;
	padding:0px;
	font-size:12px;
}
a{
	color:#999;
	text-decoration:none;
}
dl{
	width:200px;
}
dl dd{
	width:200px;
	line-height:30px;
}
dl dt{
	display:block;
	height:25px;
	line-height:25px;
	background-color:#00F;
	color:#fff;
	text-align:center;
}
.tye{
background:pink;
}

</style>
    

<script type="text/javascript">
$(document).ready(function(){
$("dd").click(function(){

//$("dd").css({"background":"pink"});
//$(this).addClass("tye");


$(this).toggleClass("tye");
});
});
</script>
  </head>
  
  <body>
   
       <dl>
	      <dt>新手上路</dt>
	      <dd class="tye"><a href="#" >注册登录</a></dd>
	      <dd><a href="#">易付宝账户激活</a></dd>
	      <dd><a href="#">易付宝实名认证</a></dd>
	      <dd><a href="#">密码相关</a></dd>
	      <dd><a href="#">会员购买</a></dd>
    </dl>
   
  </body>
</html>

 

效果

 

 

<!DOCTYPE html>
<html>
  <head>
    <title>day0200.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">
    
<script type="text/javascript">
$(function(){
//添加节点
//添加到结尾
/*$("#d").click(function(){
var jq=$("<li>3333</li>");
$("ul").append(jq);
});
*/

//添加到开头
/*$("#d").click(function(){
var jq=$("<li>3333</li>");
$("ul").prepend(jq);
});
*/

//替换
/*$("#a").click(function(){
$("li:eq(0)").replaceWith("<li>ppp</li>");
});*/

$("#u").click(function(){
//var jq=$("<li>3333</li>");
$("ul li:eq(0)").clone(true).appendTo("ul");
});
});

</script>

  </head>
  
  <body>
<ul>
<li>1111</li>
<li>2222</li>
</ul>
<input type="button" id="d" value="添加"/>
<input type="button" id="a" value="替换"/>
<input type="button" id="u" value="克隆"/>
  </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>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>

效果

 

 

权世界是我家的
关注
第八章 使用jQuery操作DOM
JiangMye的博客
07-24 2097
1，增加游戏 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;增加游戏&lt;/title&gt; &lt;style&gt; *{ mar
笔记6，使用jQuery操作DOM
小麦先生
02-18 688
DOM操作分为三类：    DOM Core：任何一种支持DOM的编程语言都可以使用它，如getElementById()    HTML-DOM：用于处理HTML文档，如document.forms     CSS-DOM：用于操作CSS，如element.style.color="green" JavaScript用于对(x)html文档进行操作，它对这三类DOM操作都提供了支
第八章 使用jQuery操作DOM
weixin_30347009的博客
06-18 165
DOM操作： 　　jQuery中提供了一系列操作DOM强有力的方法，它们不仅简化了传统JavaScript操作DOM时繁冗的代码，更加解决了令开发者苦不堪言的跨平台浏览器的兼容。 　　它还让有页面元素真正动起来，动态的增减修改数据，令用户与计算机交互更加便捷，交互形式更加多样。 JavaScript操作DOM时分类： 　　　　　　　　　　DOM Core(核心) 　　　　　　　　　　HT...
用jQuery操作DOM
wdnmdq_66的博客
11-19 98
第八章：使用jQuery操作DOM jQuery对javascript中的DOM操作进行封装jQuery中的DOM操作 1：样式操作 2：内容及value的操作 3：节点操作 4：节点属性操作 5：节点便利 6：css Dom操作 样式操作 设置单个样式css: .css("属性名称","属性值") 设置多个样式css: .css({"属性名称1":"属性值1","属性名称2":"属性值2"}) 获取样式值: .
使用jQuery操作DOM对象
weixin_30386713的博客
06-22 61
一.jQuery操作样式 　　/* 单个样式 */ 　　$("li:first").css("color","#009933"); 　　/* 多个样式 */ 　　$("li:eq(1)").css({"color":"#FFFF00","background":"#FFCCCC"}); 　　/* 添加样式，引用style的.xxxxx */ 　　$("li:eq(2)").addCl...
jQuery常见面试题之DOM操作详析
12-10
关于JQ的DOM操作面试问题很多，可以从各个点问，所以列举几个常见问题，毕竟面试只是过程，重要的是知识自己掌握了。 面试题一：JQ中html()、text()和val()区别？ 面试题二：JQ中find()、has()和filter()区别？ 面试...
jQuery Dom元素操作技巧
12-29
DOM是一种与浏览器、平台、语言无关的接口，使用该接口可以轻松访问页面中所有的标准组件。DOM操作可以分为三个方面即DOM Core(核心)、HTM-DOM和CSS-DOM。 jquery 获取父节点，兄弟节点，在节点内插入内容。 ①$(#...
jQuery DOM操作小结与实例
12-07
在jQuery中，可以使用`$('<element>')`来创建新的DOM元素。例如，要创建一个新的`<div>`元素，可以写作`$('<div>')`。 ## 复制元素 要复制一个DOM元素，可以使用`.clone()`方法。例如，如果你有一个元素`$('...
jQuery中DOM常见操作实例小结
01-21
本文实例讲述了jQuery中DOM常见操作。分享给大家供大家参考，具体如下： DOM属性操作 属性列表 属性 版本 说明 attr() 1.0 设置或返回文档节点的属性。 removeAttr() 1.0 移除文档节点的属性。 prop() 1.6 ...
jquery对dom的操作常用方法整理
12-13
Jquery对dom的操作也是很总要的。 1.三个简单实用的用于 DOM 操作的 jQuery 方法： · text() – 设置或返回所选元素的文本内容 · html() – 设置或返回所选元素的内容（包括 HTML 标记） · val() – 设置或返回...
第六章jQuery选择器
LCL020205的博客
04-23 1044
A.jQuery提供了丰富的选择器以获取DOM元素。B.jQuery中的基本选择器包括标签选择器，类选择器，id选择器，并集选择器和全局选择器。C.使用jQuery的层次选择器可通过DOM元素之间的层次关系来获取元素，包括后代元素。子元素，相邻元素和同辈元素。   $("h1").css("color","blue");   $(".price").css({"background":"#efef.
JQuery复习之JQuery操作DOM
Java学习之乐的博客
06-04 605
今日目录：        1、Jquery 操作 DOM 节点        2、Jquery 操作 DOM 节点属性        3、Jquery 操作 DOM 节点样式        4、设置和获取 HTML，文本和值        5、遍历节点操作        6、Jquery 操作 DOM 节点 CSS一、Jquery 操作 DOM 节点二、Jquery 操作 DOM 节点属性三、Jq...
学习JQuery中的DOM操作和事件操作
Preeminent
01-07 1018
学习JQuery中的DOM操作和事件操作一些问题JQuery是一个javascript类库，那类库是什么，库和框架的区别有是什么呢？ 库的英语为Library，是将代码集合成的一个产品，供程序员调用。面向对象的代码组织形式而成的库也叫类库。面向过程的代码组织形式而成的库也叫函数库。在函数库中的可直接使用的函数叫库函数。开发者在使用库的时候，只需要使用库的一部分类或函数，然后继续实现自己的功能。 框架
JQuery 常见DOM操作练习1
汉南最後の読書人
11-06 1917
1.管理选择器(size()方法)所得的结果 size()方法 <!-- html{ cursor:help; font-size:12px; font-family:Arial, Helvetica, sans-serif; } div{ border:1px solid #003a75; background-color:#FFFF0
jQuery DOM 操作
Xiaoming's Blog
12-30 559
DOM节点的创建 通过源生JS，创建DOM节点的流程大体如下： 创建节点(常见的：元素、属性和文本) document.createElement 添加节点的一些属性 setAttribute、innerHTML 加入到文档中 appendChild 如下边代码所示，写一个最简单的元素创建，我们会发现几个问题： 每一个元素节点都必须单独创建 节点是属性需要
使用Jquery操作DOM
qq_36074043的博客
05-03 570
sj1.html *{ margin:0px; padding:0px; font-size:12px; } #pruduce{ width:947px; background-color:#F2F2F2; } .top{ height:55px; background:url(images/top.jpg) no-repeat 10px 10p
第八章：使用jQuery操作DOM ——课后作业：
gz98411的博客
07-24 8235
1.新增游戏列表 &lt;!doctype html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;游戏推荐 &lt;/title&gt; &lt;style type="text/css" &
使用就jQuery操作DOM 第八章
liyanghahahhaha的博客
07-30 1468
第一题 &lt;!doctype html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;游戏推荐 &lt;/title&gt; &lt;style type="text/css" &gt;
【JavaScript】使用jQuery操作DOM
未入门的程序员笔记
11-26 2355
本章需要掌握的技能目标 1、使用jQuery操作css样式。 2、使用jQuery操作文本与属性值内容 3、使用jQuery操作DOM节点 4、使用jQuery遍历DOM节点 5、使用jQuery操作CSS-DOM
jQuery DOM操作详解：属性与方法
"jQuery使用手册之二 DOM操作" jQuery是一个强大的JavaScript库，主要目的是简化HTML文档遍历、事件处理、动画制作以及Ajax交互。本部分主要关注DOM（Document Object Model）操作，即如何通过jQuery对HTML元素进行...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值