<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<style>
.bg1{
background-color:green;
}
.txt{
color:blue;
}
</style>
<script src="jquery-1.4.4.js" type="text/javascript"></script>
</HEAD>
<BODY>
<div>
<a href='aa.html' title="alink">link</a>
</div>
<hr/>
<div>
<ul>
<li id="apple" title='click change to apple'>苹果</li>
</ul>
</div>
<div id="sel" style="border:1px"></div>
<hr/>
<i>点击我会被strong标签包裹</i> 中间
<i id="i2" title="click test wrap"> 另一个i</i>
<hr/>
<button id="b1" >交替变换样式</button>
<button id="b2" class="txt" >点击移除样式</button>
<hr/>
<font>css<font>
</BODY>
<script language="javascript" >
//alert($("a").attr("href")); //attr() 获取某个节点的属性
$("a").attr("title","link"); //设置属性
$("a").removeAttr("href"); //移除属性
//创建节点 $(html)
var $d1 = $("<li>香蕉</li>");
var $d2 = $("<li>橘子</li>");
var $d3 = $("<li title='梨'>梨</>");
var $d4 = $("<p>before1</p>");
var $d5 = $("<p>before2</p>");
var $d6 = $("<p>after1</p>");
var $d7 = $("<p>after2</p>");
var $d8 = $("<li>西瓜</li>");
var $d9 = $("<li>葡萄</li>");
//将节点追加到ul,在最后
$("ul").append($d1).append($d2);
$d3.appendTo($("ul"));
//在ul节点前节点
$("ul").before($d4);
$d5.insertBefore($("ul"));
//在ul节点后添加节点
$("ul").after($d6);
$d7.insertAfter($("ul"));
//在ul节点的内部最前面添加节点
$("ul").prepend($d8);
$d9.prependTo($("ul"));
//绑定click事件
$("ul li").click(function(){
//当点击li时,将当前li copy到id为sel的元素下
//如果要想把li所关联的事件行为一并复杂，给clone()方法传递参数true
$(this).clone(true).appendTo("#sel");
});
$("#sel").click(function(){
//当点击id为sel的div时，将当前元素移除（本身也移除），
//remove()方法返回结果是当前被移除元素
var $rm = $(this).remove();
//将被移除的元素添加到body下
$("body").append($rm);
})
$("#apple").click(function (){
//点击当前元素会被<li id='apple'>apple</li>所替换
$(this).replaceWith("<li id='apple'>apple</li>");
})
$("i").click(function(){
//将当前元素用<strong>标签包裹
$(this).wrap("<strong></strong>");
})
$("#i2").click(function(){
//将当前元素用font标签包裹
$(this).wrapAll("<font color='red'></font>");
//将当前元素内的内容用span包裹
$(this).wrapInner("<span style='background-color:#000000'></span>");
})
$("#b1").click(function(){
//交替样式显示，判断当前元素是否有该样式，有remove，没有add
$(this).toggleClass("bg1");
})
$("#b2").click(function(){
//移除当前元素制定的样式，如果不加参数，移除所有
$(this).removeClass("txt");
})
//获取样式 $().attr("class")
// 添加：(1)$().addClass("xx")添加制定的元素 ||
// (2)$().attr("class","xx")
// (1)是追加，（2）如果原来有是替换
//判断是否含有某样式 $().hasClass("xx");
/*
$().html() 等同于js的innerHTML
$().text() 等同于js的innerText
$().val() 等同于js的value属性
*/
/*
$().children() 当前元素的所有子元素
$().next() 下一个紧邻兄弟元素
$().prev() 上一个紧邻的兄弟元素
$().siblings() 所有的兄弟元素
//最近的匹配元素,搜先test itself，不会查找兄弟节点，逐级查找父节点
$().closest()
--alert($("li").closest("div").html());
*/
/*
$().css()和attr()方法一样使用
$().css("color"); //获取
$().css("color","red")//设置
*/
//一次设置多个css值
$("font").css({"fontSize":"30px",
"backgroundColor":"yellow",
"width":"100px"});
alert($("font").height()+" "+$("font").width());//高，宽
</script>
</HTML>
分享到：
相关推荐
jquery DOM操作，重点介绍DOM这个章节。
引用 jquery ,只是用一些 DOM 操作函数， 还是觉得 jQuery 的体积有点大，抽取其中常用的 DOM 操作函数，形成了 gQuery，去除空格后，只有不到 4k
JQuery DoM和ajax 操作大全源码
jQuery 的DOM操作方法 元素的创建、复制、重组、修饰，学习jquery dom操作的朋友有福了。
jQuery DOM节点操作源码，适合初学者哦，可以下载下来作为参考资料的。
关于JQ的DOM操作面试问题很多，可以从各个点问，所以列举几个常见问题，毕竟面试只是过程，重要的是知识自己掌握了。 面试题一：JQ中html()、text()和val()区别？ 面试题二：JQ中find()、has()和filter()区别？ 面试...
jquery DOM操作 基于命令改变页面,需要的朋友可以参考下。
jquery学习资料jQuery DOM的操作jQuery插件源码jQuery插件等资料: jQuery DOM教辅.pdf jQuery DOM源码 jQuery DOM的操作.pdf jQuery 丰富的插件.pdf jQuery 事件的处理.pdf jQuery 元素选择器参考手册（教辅） .pdf ...
本文用代码的方式详细讲解了jQuery的DOM操作,具体操作方法请详细参看代码中的注释部份
开发工具与关键技术：Visual Studio jQueryDOM节点操作相关知识点 创建DOM节点
JQ 选择器大全包含：基本选择器,层级选择器,层级函数,过滤选择器,内容选择器,可见选择器,jq中显示相关的函数,属性选择器,子元素选择器,表单选择器。里面的练习题可以拿来练手
每天都在与DOM打交道而且晕头转向，不过，自打咱认识了jQuery：是操作属性也不烦了，插入新元素也不晕了，连移动元素及包装元素咱也不抽筋了。。
jQuery中的DOM操作（1） jQuery获得元素 jQuery设置元素 jQuery复制元素 1、jQuery获得元素 jQuery 中非常重要的部分，就是操作 DOM 的能力。 jQuery 提供一系列与 DOM 相关的方法，这使访问和操作元素和属性变得很...
本文实例讲述了jQuery中DOM常见操作。分享给大家供大家参考，具体如下： DOM属性操作 属性列表 属性 版本 说明 attr() 1.0 设置或返回文档节点的属性。 removeAttr() 1.0 移除文档节点的属性。 prop() 1.6 ...
jquery 基本 层级 控制器 可见性 属性 子元素 表单对象属性 dom对象 等详细的一些操作~ 详细 简单~易懂 实用！
Jquery对dom的操作也是很总要的。 1.三个简单实用的用于 DOM 操作的 jQuery 方法： · text() – 设置或返回所选元素的文本内容 · html() – 设置或返回所选元素的内容（包括 HTML 标记） · val() – 设置或返回...
jQuery操作DOM解析
我是辰兮，很高兴你能来阅读，本章初识jQuery，用案例详细的讲解了jQuery的DOM操作，每一个操作都有详细的案例以及截图，希望对你有帮助，分享获取新知，大家一起进步。 下一篇请参考：JQuery-DOM进阶 文章目录一、...