<!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开发的参考手册。 文件包内实例丰富，将其拷贝到单独的html文件中即可执行。 文件包包含一个模板文件：template....
jqueryui 基础教程，有对每个控件及属性，参数的详细解释
JQ 选择器大全包含：基本选择器,层级选择器,层级函数,过滤选择器,内容选择器,可见选择器,jq中显示相关的函数,属性选择器,子元素选择器,表单选择器。里面的练习题可以拿来练手
JQuery基础知识,这是我自己自学时作的总结，只作了常用的一些事件属性.还有资料
此外，这一章也会讨论如何扩展jQuery处理元素的CSS属性的能力。 第13章将带领读者深入理解Ajax相关的概念，包括jQuery的延迟处理机制，从而实现等待数据在一段时间后可用时再对其进行处理。 附录A将帮助读者理解闭包...
本文档主要介绍jQuery的一些常用语法规则和里面的一些方法属性等
在jQuery 1.8.1中，可以采用无前缀的属性名，并自动生成适合当前浏览器的前缀。例如，在Chrome中，jQuery调用$("#myscroll").css("marquee-direction", "backwards")将设置为“-webkit-marquee-direction: backwards...
jQuery UI实际上是jQuery插件，专指由jQuery官方维护的UI方向的插件 jQuery UI 与 jquery 的主要区别是： (1) jQuery是一个js库，主要提供的功能是选择器，属性修改和事件绑定等等。 (2) jQuery UI则是在jQuery的...
第二部分（第2章）详细介绍和分析了构造函数jQuery()的用法、构造过程、原型属性和方法、静态属性和方法。 第三部分（第3～7章）详细分析了底层支持模块的源码实现，包括选择器Sizzle、异步队列Deferred Object、...
jquery的发展，应用及jquery详细讲解，对于jquery的方法，属性做出详细解释，并且有实例代码
本篇文章记录了Jquery基础学习过程中的Jquery选择器以及核心函数。Jquery选择器：基本元素选择器，层级选择器，过滤选择器，子元素过滤选择器，表单过滤选择器，属性选择器，表单对象过滤选择器。
主要介绍了jquery-mobile基础属性与用法,结合实例形式详细分析了jQuery-mobile常用属性功能与具体使用技巧,需要的朋友可以参考下
内容全面、丰富、翔实，不仅由浅入深地讲解了jQuery的所有必备基础知识，还介绍了jQuery UI等扩展知识以及jQuery开发中的技巧与性能优化方面的高级知识。 本书极其注重实战，因为动手实践才是掌握一门新技术的最...
1.3.1 jQuery Mobile属性 1.3.2 jQuery Mobile主题 1.3.3 jQuery Mobile视图 操作案例1：制作jQuery Mobile基本页面 1.3.4 jQuery Mobile对话框 1.4 与电话整合 操作案例2：制作商家信息展示页面 2 jQuery Mobile UI...
5.1 操作属性 5.2 插入新元素 5.3 移动元素 5.3.1 标注、编号和链接到上下文 5.3.2 插入脚注 5.4 包装元素 5.5 复制元素 5.5.1 复制的深度 5.5.2 通过复制创建突出引用...
在jQuery 1.8中，可以采用无前缀的属性名，并自动生成适合当前浏览器的前缀。例如，在Chrome中，jQuery调用$("#myscroll").css("marquee-direction", "backwards")将设置为“-webkit-marquee-direction: backwards”...
jQuery的基本使用、选择器、效果、样式操作、属性操作、元素操作、尺寸操作、位置操作、以及事件注册、事件处理、事件对象、拷贝对象、多库共存、部分插件的使用
js的常用方法及属性，jquery 使用及方法，相关基础方法的使用
jquery基础教程之deferred对象使用方法