<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>ddd</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script language="JavaScript" src="../js/jquery-1.4.2.js"></script>
<style type="text/css">
div,span{
width: 140px;
height: 140px;
margin: 20px;
background: #9999CC;
border: #000 1px solid;
float:left;
font-size: 17px;
font-family:Roman;
}
div.mini{
width: 30px;
height: 30px;
background: #CC66FF;
border: #000 1px solid;
font-size: 12px;
font-family:Roman;
}
div.visible{
display:none;
}
</style>
<!--引入jquery的js库-->
</head>
<body>
<ul id="city">
<li id="bj" name="beijing">北京</li>
</ul>
</body>
<script language="JavaScript">
//在city下增加<li id="tj" name="tianjin">天津</li>节点
var $liEle = $("<li></li>");
$liEle.attr("id","tj");
$liEle.attr("name","tianjing");
$liEle.text("天津");
$("#city").append($liEle);
</script>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>ddd</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script language="JavaScript" src="../js/jquery-1.4.2.js"></script>
<style type="text/css">
.one{
width: 200px;
height: 140px;
margin: 40px;
background: red;
border: #000 1px solid;
float:left;
font-size: 17px;
font-family:Roman;
}
div,span{
width: 140px;
height: 140px;
margin: 20px;
background: #9999CC;
border: #000 1px solid;
float:left;
font-size: 17px;
font-family:Roman;
}
div.mini{
width: 30px;
height: 30px;
background: #CC66FF;
border: #000 1px solid;
font-size: 12px;
font-family:Roman;
}
</style>
<!--引入jquery的js库-->
</head>
<body>
<input type="button" value="保存" class="mini" name="ok" class="mini" />
<input type="button" value="采用属性增加样式" id="b1"/>
<input type="button" value=" addClass" id="b2"/>
<input type="button" value="removeClass" id="b3"/>
<input type="button" value=" 切换样式" id="b4"/>
<input type="button" value=" hasClass" id="b5"/>
<h1>天气冷了</h1>
<h2>天气又冷了</h2>
<div id="one">
id为one ***********
</div>
<div id="two" class="mini" >
id为two class是 mini
<div class="mini" >class是 mini</div>
</div>
<div>
class是 one
<div class="mini" >class是 mini</div>
<div class="mini" >class是 mini</div>
</div>
<div class="one" >
class是 one
<div class="mini01" >class是 mini01</div>
<div class="mini" >class是 mini</div>
</div>
<br>
<div id="mover" >
动画
</div>
<br>
<span class="spanone"> span
</span>
</body>
<script language="JavaScript">
//<input type="button" value="采用属性增加样式" id="b1"/>
$("#b1").click(function(){
$("#one").attr("class","one");
});
//<input type="button" value=" addClass" id="b2"/>
$("#b2").click(function(){
$("#one").addClass('one');
});
//<input type="button" value="removeClass" id="b3"/>
$("#b3").click(function(){
$("#one").removeClass('one');
});
//<input type="button" value=" 切换样式" id="b4"/>
$("#b4").click(function(){
$("#one").toggleClass("one");
});
//<input type="button" value=" hasClass" id="b5"/>
$("#b5").click(function(){
/**
* 判断是否有class这个属性
*/
alert($("#one").hasClass("one"));
});
</script>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>ddd</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script language="JavaScript" src="../js/jquery-1.4.2.js"></script>
<style type="text/css">
div,span{
width: 140px;
height: 140px;
margin: 20px;
background: #9999CC;
border: #000 1px solid;
float:left;
font-size: 17px;
font-family:Roman;
}
div.mini{
width: 30px;
height: 30px;
background: #CC66FF;
border: #000 1px solid;
font-size: 12px;
font-family:Roman;
}
div.visible{
display:none;
}
</style>
<!--引入jquery的js库-->
</head>
<body>
<button>保存</button> <br> <br> <br>
<p>段落</p>
</body>
<script language="JavaScript">
//button增加事件
$("button").click(function(){
alert("按钮事件");
});
//克隆button 追加到p上 ,但事件不克隆
// $("button").clone().appendTo("p");
//克隆button 追加到p上 ,但事件也克隆
$("button").clone(true).appendTo("p");
</script>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>ddd</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script language="JavaScript" src="../js/jquery-1.4.2.js"></script>
<style type="text/css">
div,span{
width: 140px;
height: 140px;
margin: 20px;
background: #9999CC;
border: #000 1px solid;
float:left;
font-size: 17px;
font-family:Roman;
}
div.mini{
width: 30px;
height: 30px;
background: #CC66FF;
border: #000 1px solid;
font-size: 12px;
font-family:Roman;
}
div.visible{
display:none;
}
</style>
<!--引入jquery的js库-->
</head>
<body>
<ul id="city">
<li id="bj" name="beijing">北京</li>
<li id="tj" name="tianjin">天津</li>
<li id="cq" name="chongqing">重庆</li>
</ul>
<ul id="love">
<li id="fk" name="fankong">反恐</li>
<li id="xj" name="xingji">星际</li>
</ul>
<div id="foo1">Hello1</div>
</body>
<script language="JavaScript">
//append(content) :向每个匹配的元素的内部的结尾处追加内容
// $("#city").append($("#fk"));
$("#city").append("<li>））））</li>");
//appendTo(content) :将每个匹配的元素追加到指定的元素中的内部结尾处
//prepend(content):向每个匹配的元素的内部的开始处插入内容
$("#city").prepend("<li>前面插入</li>");
//prependTo(content) :将每个匹配的元素插入到指定的元素内部的开始处
$("#xj").prependTo($("#city"));
</script>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>ddd</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script language="JavaScript" src="../js/jquery-1.4.2.js"></script>
<style type="text/css">
div,span{
width: 140px;
height: 140px;
margin: 20px;
background: #9999CC;
border: #000 1px solid;
float:left;
font-size: 17px;
font-family:Roman;
}
div.mini{
width: 30px;
height: 30px;
background: #CC66FF;
border: #000 1px solid;
font-size: 12px;
font-family:Roman;
}
div.visible{
display:none;
}
</style>
<!--引入jquery的js库-->
</head>
<body>
<ul id="city">
<li id="bj" name="beijing">北京</li>
<li id="tj" name="tianjin">天津</li>
<li id="cq" name="chongqing">重庆</li>
</ul>
<p id="p3">I would like to say: p3</p>
<p id="p2">I would like to say: p2</p>
<p id="p1">I would like to say: p1</p>
</body>
<script language="JavaScript">
//* after(content) :在每个匹配的元素之后插入内容
// $("#city").after($("#p1"));
//* before(content):在每个匹配的元素之前插入内容
// $("#cq").before($("#p1"));
//* insertAfter(content):把所有匹配的元素插入到另一个、指定的元素元素集合的后面
$("#p1").insertAfter($("#city"));
//* insertBefore(content) :把所有匹配的元素插入到另一个、指定的元素元素集合的前面
$("#p1").insertBefore($("#city"));
</script>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>ddd</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script language="JavaScript" src="../js/jquery-1.4.2.js"></script>
<style type="text/css">
div,span{
width: 140px;
height: 140px;
margin: 20px;
background: #9999CC;
border: #000 1px solid;
float:left;
font-size: 17px;
font-family:Roman;
}
div.mini{
width: 30px;
height: 30px;
background: #CC66FF;
border: #000 1px solid;
font-size: 12px;
font-family:Roman;
}
div.visible{
display:none;
}
</style>
<!--引入jquery的js库-->
</head>
<body>
<ul id="city">
<li id="bj" name="beijing">北京</li>
<li id="tj" name="tianjin">天津</li>
<li id="cq" name="chongqing">重庆</li>
</ul>
<p class="hello">Hello</p> how are <p>you?</p>
</body>
<script language="JavaScript">
//删除<li id="bj" name="beijing">北京</li>
$("#bj").remove();
//删除所有的子节点 清空元素中的所有后代节点(不包含属性节点).
$("#city").empty();
//测试
alert($("#bj").value);
</script>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>ddd</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script language="JavaScript" src="../js/jquery-1.4.2.js"></script>
<style type="text/css">
div,span{
width: 140px;
height: 140px;
margin: 20px;
background: #9999CC;
border: #000 1px solid;
float:left;
font-size: 17px;
font-family:Roman;
}
div.mini{
width: 30px;
height: 30px;
background: #CC66FF;
border: #000 1px solid;
font-size: 12px;
font-family:Roman;
}
div.visible{
display:none;
}
</style>
<!--引入jquery的js库-->
</head>
<body>
<button>保存</button> <br> <br> <br>
<p>段落</p>
<p>段落</p>
<p>段落</p>
</body>
<script language="JavaScript">
//$("button")用 <p>tttttttt</P>替换
//$("p").replaceWith("<button>保存</button>");
// p 用 <button>保存</button> 替换
$("<button>保存</button>").replaceAll($("p"));
</script>
</html>
分享到：
相关推荐
《jQuery基础教程第四版》是一本深受欢迎的前端开发指南，专注于jQuery库的使用和实践。jQuery是一个轻量级、高性能的JavaScript库，它极大地简化了JavaScript操作DOM（文档对象模型）、事件处理、动画制作以及Ajax...
总之，jQuery的节点操作、特殊属性操作和事件机制构成了其强大的功能基础，使开发者能高效地实现网页交互。结合Swiper这样的插件，可以构建出更加动态和吸引人的Web界面。学习和掌握这些知识点，对于提升Web开发技能...
这个"jQuery基础教程源码"资源包含了与《jQuery基础教程》一书配套的所有实例源代码，旨在帮助读者更好地理解和实践jQuery的核心概念。 在jQuery中，DOM（文档对象模型）操作是其主要功能之一。DOM是HTML和XML文档...
《jQuery基础教程（第四版）中文pdf版+配套源码》是针对JavaScript库jQuery的一份详细学习资源，旨在帮助初学者和进阶开发者掌握jQuery的核心概念和技术。jQuery是一款广泛使用的JavaScript库，它简化了HTML文档遍历...
《jQuery基础教程（第四版）中文》是一本深入浅出介绍jQuery库的指南，适合初学者和有一定经验的开发者。jQuery是JavaScript的一个强大框架，它简化了DOM操作、事件处理、动画效果以及Ajax交互，极大地提高了开发...
《jQuery基础教程第四版》是一本专为初学者设计的指南，旨在帮助读者掌握JavaScript库jQuery的核心概念和技术。jQuery简化了HTML文档遍历、事件处理、动画制作以及Ajax交互等任务，是Web开发中广泛使用的工具。这...
以下是关于jQuery基础教程第5章的一些核心知识点： 1. **选择器**：jQuery的选择器基于CSS，允许开发者轻松地选取DOM中的元素。如`$("#id")`用于选取ID为"id"的元素，`$(".class")`用于选取所有class为"class"的...
**jQuery基础教程(高清中文版PDF)** 这本由Jonathan Chaffer和Karl Swedberg编写的《jQuery基础教程》是国外备受推崇的经典著作，它深入浅出地讲解了jQuery库的基础知识，对于想要掌握JavaScript前端开发的人员来说...
**jQuery基础教程（第二版）** jQuery是一款广泛应用于Web开发的JavaScript库，它极大地简化了JavaScript的使用，尤其是处理HTML文档、事件处理、动画效果以及AJAX交互。本教程将深入探讨jQuery的核心概念和功能，...
本文将深入探讨“jQuery淘宝商品多属性查询”这一主题，旨在帮助开发者理解如何利用jQuery来实现类似淘宝商品详情页中的复杂查询功能。 首先，我们需要了解jQuery的核心概念。jQuery通过提供链式调用、选择器、事件...
### jQuery基础教程（第四版）知识点总结 #### 一、jQuery简介与背景 - **诞生时间**：2006年1月14日 - **创始人**：John Resig，一位年轻的80后程序员 - **背景**： - 在jQuery诞生之前，已经有像Dojo和...
"jQuery基础教程源码 第三版"是一本旨在帮助初学者和有经验的开发者深入了解jQuery的著作。在这个版本中，作者深入浅出地介绍了jQuery的核心概念、方法和最佳实践，通过实例代码帮助读者更好地理解和应用jQuery。 ...
### JQuery基础教程知识点详解 #### 一、JQuery简介与特点 **JQuery** 是一个快速、简洁的JavaScript库，其设计目标是简化HTML文档遍历、事件处理、动画以及Ajax交互等操作。通过JQuery，开发者可以更方便地编写...
**jQuery基础教程第四版**是针对初学者设计的一本深入浅出的指南，它全面讲解了jQuery库的核心概念和实用技巧。jQuery是一个广泛使用的JavaScript库，它的主要目标是简化HTML文档遍历、事件处理、动画制作和Ajax交互...
例如，可以使用jQuery来改变元素的类名、内容和属性等。 3. CSS操作：jQuery允许开发者以一种直观和简洁的方式动态地改变CSS样式。开发者可以轻松地获取和设置元素的样式属性，实现丰富的页面效果。 4. HTML事件...
《jQuery基础教程(第二版)》是一本专为初学者设计的指南，旨在帮助读者快速掌握jQuery库的使用，从而简化JavaScript编程。jQuery是一个高效、轻量级的JavaScript库，它使得在网页上操作DOM（文档对象模型）、处理...
《jQuery基础教程6章》是一份详尽的指南，旨在帮助初学者理解并掌握JavaScript库jQuery的核心概念和功能。jQuery简化了HTML文档遍历、事件处理、动画制作以及Ajax交互等任务，使得JavaScript编程变得更加简单易用。...
在本文中，我们将探讨JQuery中一些常用的属性和方法，这些知识是在日常开发工作中非常有价值的。 首先，我们看到JQuery可以用于生成随机数字，比如通过`Math.random()`函数生成一个随机数，然后转换成字符串并截取...