jQuery中Dom的基本操作小结
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<head>
<title>jquery中的Dom操作</title>
<script src="../jquery/jquery-1.4.2.min.js" type="text/javascript"></script>
</head>
<body>
<p title="选择你最喜欢的水果">你最喜欢的水果是？</p>
<ul>
<li title="苹果">苹果</li>
<li title="香蕉">香蕉</li>
<li title="西瓜">西瓜</li>
</ul>
<strong>你最喜欢的水果是？</strong>
<strong>你最喜欢的水果是？</strong><br />
<input type="button" value="查找节点" id="btnFind" />
<input type="button" value="创建节点" id="btnCreate" />
<input type="button" value="删除节点" id="btnDelete" />
<input type="button" value="复制节点" id="btnCopy" />
<input type="button" value="替换节点" id="btnReplace" />
<input type="button" value="包裹节点" id="btnWrap" />
<script type="text/javascript">
$(function(){
$("#btnFind").click(function(){
//查找元素节点
var getValue= $("ul li:eq(1)").text();//获取第二个元素的值
alert(getValue);
//查找属性节点 attr()方法的参数可以是一个，也可以是两个，当参数是一个时，则是要查询的属性的名字，两个时，则是赋值
var para=$("p");
var p_text=para.attr("title");//获取<p>元素节点属性的title
alert(p_text);
alert(para.attr("title","改变你最喜欢吃的水果").attr("title"));//首先改变title的值，然后在取title的值
});
//创建节点 append(),prepend()加载元素的内部，为父子关系，after(),before()加在元素的前后，为兄弟光系
$("#btnCreate").click(function(){
var html=$("<li title= '桃子'>桃子</li><li title= '菠萝'> 菠萝</li>");
// $("ul").append(html);//默认会加在ul最后面
// var li2=$("ul li:eq(1)").after(html);//加在第二个li后面
var li2=$("ul li:eq(1)").before(html);//加在第二个li前面
});
$("#btnDelete").click(function(){
// var li2=$("ul li:eq(1)").remove();//删除第二个li元素
//$("ul").append(li2);//把刚才删除的节点又重新添加到ul元素里
var li2=$("ul li:eq(1)").empty();//清空第二个节点
});
$("#btnCopy").click(function(){
$("p").clone().appendTo("ul");
});
$("#btnReplace").click(function(){
$("p").replaceWith("<strong>你最不喜欢的水果是？哈哈</strong>");
});
$("#btnWrap").click(function(){
// $("strong").wrap("<b></b>");//用<b>标签把<strong>元素包裹起来,是将所有的元素进行单独包裹
// $("strong").wrapAll("<b></b>");//wrapAll()是将所有的元素进行一起包裹，可以通过firebug查看
$("strong").wrapInner("<b></b>");//是将strong的内容（包括文本节点）用<b>进行包裹
});
})
</script>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<head>
<title>属性操作</title>
<script src="../jquery/jquery-1.4.2.min.js" type="text/javascript"></script>
<style type="text/css">
.height{ font-weight:bold;color:red;}
.another{ font-style:italic;color:blue;}
</style>
</head>
<body>
<p title="选择你最喜欢的水果">你最喜欢的水果是？</p>
<ul>
<li title="苹果" class="height">苹果</li>
<li title="香蕉">香蕉</li>
<li title="西瓜">西瓜</li>
</ul>
<input type="button" value="获取或设置属性" id="btnSetOrGetAttr" />
<input type="button" value="删除属性" id="btnDeleteAttr" />
<input type="button" value="获取或设置样式" id="btnSetOrGetStyle" />
<input type="button" value="移除样式" id="btnRemoveStyle" />
<script type="text/javascript" language="javascript">
$(function(){
$("#btnSetOrGetAttr").click(function(){
var p = $("p").attr("title");//获取属性
alert(p);
var pSet=$("p").attr("title","这是我重新设置的title属性哈");
alert(pSet.attr("title"));//获取重新设置后的title
});
$("#btnDeleteAttr").click(function(){
var p=$("p").removeAttr("title");
alert(p.attr("title"));
});
$("#btnSetOrGetStyle").click(function(){
var p=$("p").attr("class");//获取p元素的class
alert(p);
var pSet=$("p").attr("class","height");//设置class为height;
alert(pSet.attr("class"));//获取设置后的class
});
$("ul li").click(function(){
$(this).addClass("another");//给li追击another类,此时第一个li会有两个class的值，则会合并样式，并且对于同一个样式属性，后者覆盖前者
});
$("#btnRemoveStyle").click(function(){
// $("ul li").removeClass("height");//表示移除一个样式
// $("ul li").removeClass("height another");//代表移除两个样式
$("ul li").removeClass();//代表移除li所有的class
//判断是否含有某个样式,如果有，则返回true，否则false
var flag = $("p").hasClass("another");//等价于 $("p").is(".another");
alert(flag);
});
})
</script>
</body>
</html>
相关推荐
-
jquery对dom的操作常用方法整理
Jquery对dom的操作也是很总要的. 1.三个简单实用的用于 DOM 操作的 jQuery 方法: · text() - 设置或返回所选元素的文本内容 · html() - 设置或返回所选元素的内容(包括 HTML 标记) · val() - 设置或返回表单字段的值 2.attr()获取属性.当然这两也是可以自己设置值来修改的, 3.对html内容的添加.添加新的 HTML 内容 我们将学习用于添加新内容的四个 jQuery 方法: · append() - 在被选元素的结尾插入内容 · p
-
jquery 操作DOM的基本用法分享
例子展示: jquery代码: 复制代码 代码如下: <script language="javascript"> $(document).ready(function(){ alert($("ul li:eq(1)").text()); //选取第二个li的值 alert($("p").attr("title")); //选取p的title属性的值 //追加元素 $('ul').append("<
-
jQuery学习笔记之jQuery的DOM操作
一.节点的操作 1.查找节点: var $var_1=$("htmltype"); //这句话就是获取所有htmltype节点 如:var $ul_1=$("ul"); 2.创建并追加节点: var $var_1=$("<htmltype>");//这句话是创建一个节点 $("htmltype2").append($var_1) ; //这句话是把节点插入所有htmltype2节点中 例子:var $li_1=
-
jQuery中Dom的基本操作小结
jquery中各个节点的基本操作 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" ><meta http-equiv=
-
jQuery中DOM常见操作实例小结
本文实例讲述了jQuery中DOM常见操作.分享给大家供大家参考,具体如下: DOM属性操作 属性列表 属性 版本 说明 attr() 1.0 设置或返回文档节点的属性. removeAttr() 1.0 移除文档节点的属性. prop() 1.6 设置或返回DOM元素的属性. removeProp() 1.6 移除每个匹配元素的属性. addClass() 1.0 添加CSS类名. removeClass() 1.0 移除CSS类名. toggleClass() 1.2 切换CSS类名(存在就
-
JQuery中DOM事件绑定用法详解
本文实例讲述了JQuery中DOM事件绑定用法.分享给大家供大家参考.具体分析如下: 在文档加载完成后,如果打算为元素绑定事件来完成某些操作,则可以使用bind()方法来对匹配元素进行特定事件的绑定,bind()方法的调用格式为: bind( type [, data] , fn); bind()方法有3个参数,说明如下. 第1个参数是事件类型,类型包括:blur.focus.load.resize.scroll.unload.click.dblclick.mousedown.mouseup.m
-
JQuery中DOM事件冒泡实例分析
本文实例分析了JQuery中DOM事件冒泡.分享给大家供大家参考.具体分析如下: 什么是冒泡 在页面上可以有多个事件,也可以多个元素响应同一个事件.假设网页上有两个元素,其中一个元素嵌套在另一个元素里,并且都被绑定了click事件,同时body元素上也绑定了click事件. <div id="content"> 外层div元素 <span>内层span元素</span> 外层div元素 </div> <script type=&qu
-
JQuery中DOM实现事件移除的方法
本文实例讲述了JQuery中DOM实现事件移除的方法.分享给大家供大家参考.具体如下: 可以为同一个元素绑定多个事件,也可以为多个元素绑定同一个事件.假设网页上有一个<button>元素,使用以下代码为该元素绑定多个相同的事件. $(function(){ $('#btn').bind("click", function(){ $('#test').append("<p>我的绑定函数1</p>"); }).bind("c
-
JQuery中DOM加载与事件执行实例分析
本文实例讲述了JQuery中DOM加载与事件执行原理.分享给大家供大家参考.具体分析如下: JavaScript和HTML之间的交互是通过用户和浏览器操作页面时引发的事件来处理的.当文档或者它的某些元素发生某些变化或操作时,浏览器会自动生成一个事件.例如当浏览器装载完一个文档后,会生成事件:当用户单击某个按钮时,也会生成事件.虽然利用传统的JavaScript事件能完成这些交互,但jQuery增加并扩展了基本的事件处理机制.jQuery不仅提供了更加优雅的事件处理语法,而且极大地增强了事件处理能
-
jQuery中DOM操作实例分析
本文实例讲述了jQuery中DOM操作的方法.分享给大家供大家参考.具体分析如下: 这里主要设计的dom操作包括:dom对象的创建(JS方式和jquery方式).属性的修改.样式的修改.动态绑定事件 代码如下: 复制代码 代码如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <script type="text/javascript" src="jquery-1.3.
-
JQuery中DOM事件合成用法实例分析
本文实例讲述了JQuery中DOM事件合成用法.分享给大家供大家参考.具体分析如下: jQuery有两个合成事件--hover()方法和toggle()方法,类似前面讲过的ready()方法,hover()方法和toggle()方法都属于jQuery自定义的方法. hover()方法 hover()方法的语法结构为: hover(enter,leave); hover()方法用于模拟光标悬停事件.当光标移动到元素上时,会触发指定的第1个函数(enter);当光标移出这个元素时,会触发指定的第2个
-
jQuery中DOM树操作之使用反向插入方法实例分析
本文实例讲述了jQuery中DOM树操作之使用反向插入方法.分享给大家供大家参考.具体分析如下: 使用反向插入方法 这里我们先把创建的内容插人到元素前面,然后再把同一个元素插人到文档 中的另一个位置.通常,当在jQuery中操作元素时,利用连缀方法更简洁也更有效.可是我们现在没有办法这样做,因为this是.insertBefore()的目标,是.appendTo()的内容.此时,利 用反向插入方法,可以帮我们解决问题. 像.insertBefore()和.appendTo()这样的插人方法,一般
-
jQuery中DOM树操作之复制元素的方法
本文实例讲述了jQuery中DOM树操作之复制元素的方法.分享给大家供大家参考.具体分析如下: 复制元素 前面提到的操作包括:插人新创建的元素.将元素从文档中的一个位置移动 到另一个位置,以及通过新元素来包装已有的元素.可是,有时候也会用到复制元素的操作.例如,可以复制出现在页面顶部的导航菜单,并把副本放到页脚上.实际上,无论何时,只要能通过复制元素增强页面的视觉效果,都是以重用代码来实现的好机会.毕竟,如果能够只编写一次代码并让jQuery替我们完成复制,何必要重写两遍同时又增加双倍的出错机会