锋利的jQuery第三章

现在开始学习第三章，jQuery中的Dom操作。

　　以前我也看过w3school的dom,看过了很迷，不知道dom是什么。

1,dom是文档对象模型，dom操作分为3类：Dom Core(核心),HTML-DOM,CSS-DOM

(1)Dom Core(核心):主要有getElementById(),getElementByTagName(),getAttribute()和setAttribute()等方法。

(2)HTML-DOM:如 document.forms //取得forms对象; element.src;//获取元素属性

(3)CSS-DOM:主要针对css操作，如element.style.color = "red";

2,节点操作：

(1)获取和创建

var $para=$("p");    //获取<p>节点
var p_txt=$para.attr("title"); //获取<p>属性title

//创建节点
var $li=$("<li title=‘香蕉‘>香蕉</li>");//直接返回一个jQuery对象

(2)插入节点

<p>我想说：</p>
<b>你好</b>

var $p=$("p"); //获取<p>
var $b=$("b"); //获得<b>
(1)
$p.append($b);//<p>元素内部追加内容
得到<p>我想说：<b>你好</b></p>

$b.appendTo($p);//把$b追加到$p中
得到<p>我想说：<b>你好</b></p>

这两个就是正好相反。

(2)
$p.prepend($b);//<p>元素内部前置内容
得到<p><b>你好</b>我想说：</p>

$b.prependTo($p);//把$b前置到$p中
得到<p><b>你好</b>我想说：</p>

(3)
$p.after($b); //在$p后面添加$b
<p>我想说：</p><b>你好</b>

$b.insertAfter($p); //把$b插入到$p后
<p>我想说：</p><b>你好</b>
(4)
$p.before($b);//在$p之前插入$b
<b>你好</b><p>我想说：</p>

$b.insertBefore($p);//把$b插入到$p之前
<b>你好</b><p>我想说：</p>

(3)删除节点：

(1)remove()方法:从dom中删除匹配元素，参数用于根据jQuery表达式来筛选元素
var $li=$("ul li:eq(1)").remove();//获取第2个li并从网页删除
$li.appendTo("ul"); //把刚才删除的节点重新添加到ul中

$("ul li").remove("li[title!=菠萝]");//将li中属性不等于菠萝的li删除
(2)detach()方法:从dom中去掉匹配元素，但是不从jQuery对象中删除；与remove()不同，所有绑定的事件、附加的数据都会保存下来。
$("ul li").click(function(){
    alert($(this).html() );
})
var $li = $("ul li:eq(1)").detach();//删除元素
$li.appendTo("ul");//重新追加此元素，之前绑定的click事件还在。

(3)empty()方法:清空元素中的所有后代节点。
$("ul li:eq(1)").empty();//清空后是：<li title="橘子"/>

(4)复制和替换节点：

(1)clone()方法:复制
$("ul li").click(function(){
    $(this).clone().appendTo("ul");//复制当前节点，追加到ul中
});

$(this).clone(true).appendTo("body");//复制当前节点，追加到body中,同时复制绑定的事件。

(2)replaceWith()方法:
$("p").replaceWith("<strong>你好</strong>");//把<p>换成<strong>你好</strong>
(3)replaceAll()方法:
$("<strong>你好</strong>").replaceAll("p");//把<p>换成<strong>你好</strong>;
replaceWith()和replaceAll()颠倒了操作。如果替换之前已经为该元素绑定事件，替换后原先绑定的事件和被替换的元素将一起消失。

(5)包裹节点：

(1)wrap()方法：
$("strong").wrap("<b></b>");//用<b>把<strong>包裹起来,结果如下：
<b><strong>香蕉</strong></b>
<b><strong>苹果</strong></b>

(2)wrapAll()方法：将所有选择出的元素 单独包裹,包在一个下面
$("strong").wrapAll("<b></b>");//strong单独包裹,结果如下：
<b>
<strong>香蕉</strong>
<strong>苹果</strong>
</b>
(3)
wrapInner()方法:将每一个匹配的元素的子内容(包括文本节点)用其他标记包裹：
$("strong").wrapInner("<b></b>");//结果如下：
<strong><b>香蕉</b></strong>
<strong><b>苹果</b></strong>

3,属性操作

(1)获取或设置属性：

(1)获取属性，只需要给方法attr()传递属性名称的参数
var $para = $("p");    //获取<p>
var p_txt = $para.attr("title");    //获取<p>的title属性
(2)$("p").attr("title","your title");//设置单个属性，两个参数
$("p").attr({"title" : "your title", "name" : "test" });//将一个“名/值"形式的对象设置为匹配元素的属性

像html(),text(),height(),width(),val(),css()等既可以获取属性值也可以设置属性值。
(3)删除属性removeAttr()方法
("p").removeAttr("title");//删除<p>的属性title
如<p title="苹果">苹果</P>得到<p>苹果</p>

4样式操作：

(1)追加样式：addClass()
$(”p").addClass("another");//给<p>追加“another”类
如<p class="high">高亮样式</p>得到<p class="high another">高亮样式</p>
(2)移除样式：removeClass()
$(”p").removeClass("another")//给<p>移除"another"类
<p class="high another">高亮样式</p>得到<p class="high">高亮样式</p>

$("p").removeClass("high").removeClass("another");//移除多个样式

<p class="high another">高亮样式</p>得到<p>高亮样式</p>

$("p").removeClass("high another");//移除多个样式

$("p").removeClass();//将<p>所有样式移除
(3)切换样式toggleClass()
$("p").toggleClass();//重复切换类名“another"
如果原来的class值为myClass,这样<p>的class值就在"myClass"和”myClass another"之间切换.
(4)判断是否含有某个样式hasClass()
$("p").hasClass("another");//含有返回true,不含有返回false

5,设置和获取html,文本和值

(1)html()方法,获取html内容
<p><strong>苹果</strong></p>
var p_html = $("p").html(); //获取p的html:<strong>苹果</strong>

 $("p").html(<strong>苹果</strong>);//设置<p>的html

(2)text()方法，获取或设置文本值
<p><strong>苹果</strong></p>
$("p").text(); //获取<p>的文本内容：苹果

(3)val()方法：获取文本框，下拉列表，单选框等的值，如为多选，返回数组。$("#check1).val();//获取check1的value$("#check1).val("1");//设置check1的value为1

下面是有关 邮箱登录默认状况的例子，单击时文本框变空：

 <script src="jquery-1.4.2.min.js" type="text/javascript"></script>
 <script type="text/javascript" language="javascript" >
 $(document).ready(function(){  //等待所有dom绘制完成后就执行
     $("#username").focus(function(){
        var txt = $(this).val();//获取值
        if(txt == "请输入帐号"){
            $(this).val("");
        }//if
    });//$("#username")

    $("#username").blur(function(){
        var txt = $(this).val();//获取值
        if(txt == ""){
            $(this).val("请输入帐号");
        }//if
    });//$("#username")

     $("#password").focus(function(){
        var txt = $(this).val();//获取值
        if(txt == "请输入密码"){
            $(this).val("");
        }//if
    });//$("#password")

    $("#password").blur(function(){
        var txt = $(this).val();//获取值
        if(txt == ""){
            $(this).val("请输入密码");
        }//if
    });//$("#password")

 }); //$(document)
 </script>
</head>
<body>

<input type="text" id="username" value="请输入帐号" />
<input type="text" id="password" value="请输入密码" />
<input type="button" value="登录" />
</body>
</html>

下面是使用val()方法设置select,checkbox,radio的值的例子：

 <script src="jquery-1.4.2.min.js" type="text/javascript"></script>
 <script type="text/javascript" language="javascript" >
 $(document).ready(function(){  //等待所有dom绘制完成后就执行
     $(":button").click(function(){
        $("#single").val("选择2号");//改变单选select的值
        $("#multiple").val(["选择2号","选择3号"]);//以数组的形式出现
        $(":checkbox").val(["check1","check2"]);
        $(":radio").val(["radio2"]); //单选也要放在数组中

    });//$(button)

 }); //$(document)
 </script>
</head>
<body>

<select id="single">
    <option>选择1号</option>
    <option>选择2号</option>
    <option>选择3号</option>
</select>

<select id="multiple" multiple="multiple" style="height:120px;">
    <option selected="selected">选择1号</option>
    <option>选择2号</option>
    <option>选择3号</option>
    <option selected="selected">选择4号</option>
</select>

<input type="checkbox" value="check1" />多选1
<input type="checkbox" value="check2" />多选2

<input type="radio" value="radio1" />单选1
<input type="radio" value="radio2" />单选2

<input type="button" value="改变选择的项" />

</body>
</html>

6,遍历节点：

(1)children()方法：获取匹配元素的子元素集合，只考虑子元素不考虑后代元素。
var $ul = $("ul").children();//获取ul的子元素集合
(2)next()方法:获取匹配元素后面紧邻的同辈元素
var $p1 = $("p").next();//取得<p>后面紧邻的同辈元素
(3)prev()方法：获取匹配元素前面紧邻的同辈元素
var $p1 = $("p").next();//取得<p>前面紧邻的同辈元素
(4)siblings()方法:获取匹配元素前后所有的同辈元素
var $p2 = $("p").siblings();
(5)closest()方法：获得最近的匹配元素。首先检查当前元素是否匹配，如果匹配直接返回它，否则向上查找父元素，直到找到匹配元素，找不到就返回空。
$(document).bind("click",function(e){
  $(e.target).closest("li").css("color","red");
});//给点击的目标元素最近的li元素添加颜色(6)parent()获取集合中每个匹配元素的父级元素parents()获取集合中每个匹配元素的祖先元素closest()从元素本身开始，逐级向上级匹配，并返回最先匹配的祖先节点。

7,CSS-DOM操作：

(1)
$("p").css("color");//获取<p>元素的样式颜色
$("p").css("color","red");//设置<p>元素的样式颜色
$("p").css({"fontSize":"30px","backgroundColor":"#888888"});//设置<p>元素的多个样式
(2)
$("p").css("opacity","0.5");//设置半透明
(3)
$("p").css("height");//获取高度
$("p").height();//获取高度 ,默认单位是px
css获取的高度和样式有关，有可能是auto,height()获取的高度为元素在页面的实际高度，不单单位。
(4)offset()方法：获取元素在当前视窗的相对偏移，两个属性top和left
var offset = $("p").offset();
var left = offset.left; //获取左偏移
var top = offset.top; //获取上偏移

(5)scollTop()方法和scollLeft()方法:获取元素的滚动条距离顶端和左端的距离：
var $p = $("p");
var scrollTop = $p.scollTop();//获取<p>的滚动条距离顶端的距离
var scrollLeft = $p.scollLeft();//获取<p>的滚动条距离左端的距离

有关鼠标移动提示的例子：

 <script src="jquery-1.4.2.min.js" type="text/javascript"></script>
 <script type="text/javascript" language="javascript" >
 $(document).ready(function(){  //等待所有dom绘制完成后就执行
     var x = 10; //让显示的位置里鼠标远些
    var y = 20;
    $("a.tooltip").mouseover(function(e){
        this.myTitle = this.title;//获取title
        this.title = "";//内容清空
        var tooltip = "<div id =‘tooltip‘>"+this.myTitle + "</div>";//创建一个div
        $("body").append(tooltip);//追加到文档
        $("#tooltip")
            .css({
                "top":(e.pageY + y) + "px",
                "left":(e.pageX + x) + "px"
                }).show("fast"); //设置坐标并且显示
    })//mouseover
    .mouseout(function(){
        this.title = this.myTitle;
        $("#tooltip").remove(); //移除
    }) //mouseout
    .mousemove(function(e){  //移动事件
        $("#tooltip")
            .css({
                "top":(e.pageY+y) + "px",
                "left":(e.pageX+x) + "px"
                });
    })//mousemove

 }); //$(document)
 </script>
</head>
<body>

<p><a href="#" class="tooltip" title="超链接提示1">我定义的提示</a></p>
<p><a href="#" title="超链接提示2" >title自带的提示</a></p>

</body>
</html>

总结：有关dom的三个方面，core,html,css

锋利的jQuery第三章,布布扣,bubuko.com

时间： 2024-10-10 10:27:47

锋利的jQuery第三章的相关文章

锋利的jQuery第四章:jQuery中的事件和动画

第一部分 1, (1)$()是$(document)的简写,默认参数是document. $(function(){}是$(document).ready(function(){})的简写. 2, (1)事件绑定 bind(type [,data],fn); type是事件类型,有blur,focus,load,resize,scroll,unload,click,dbclick,mousedown,mouseup, mouseover,mousemove,mouseout,mouseenter

锋利的jQuery第5章 jQuery对表单、表格的操作及更过应用

1,button和checkbox的例子: form表单 <form action=""> 你爱的远动有?<br /> <input type="checkbox" name="items" value="足球" />足球 <input type="checkbox" name="items" value="蓝球" />

【学习笔记】锋利的jQuery（三）事件和动画

一.jQuery事件 1,加载事件 $(document).ready(function(){...}) //等同于$(function(){..}) $(window).load(function(){...}) //等同于window.onload = fn 2,基本事件绑定 bind(type,[.data],fn) //可绑定多个事件:bind("mouseover mouseout",fn) unbind(type,fn) //解除绑定 one(type,[.data],fn

jQuery第三章

一.jQuery中的DOM操作 一般来说,DOM操作分为3个方面,即DOM Core核心.HTML-DOM和CSS-DOM 1.DOM Core JavaScript中的getElementById().getElemntByTagName().getAttribute()和setAttribute()等方法,都是DOM Core的核心,例如: (1)使用DOM Core来获取表单对象的方法: document.getElementByTagName(“form”): (2)使用DOM Core

锋利的jQuery读书笔记 第3章、第4章 第5章

第三章 DOM 中有一个非常重要的功能,就是节点模型,也就是 DOM 中的“M” .页面中的元素结构就是通过这种节点模型来互相对应着的,我们只需要通过这些节点关系,可以创建.插入.替换.克隆.删除等等一些列的元素操作.一．创建节点      为了使页面更加智能化,有时我们想动态的在 html 结构页面添加一个元素标签,那么在插入之前首先要做的动作就是:创建节点.      var box = $('<div id="box">节点</div>'); //创建一个

锋利的jQuery第二章

感觉还是看书好一些,jQuery并不难,但是对于一些东西如果你不知道,你就会感觉到很头疼,比如以前看选择器,网上那么多文章,总结的挺好的,但是不能看下去,太多了,对电脑不爽.现在从书上看到这些总结,感觉很清晰,也可以接受. 1,用jQuery判断某个元素是否存在 if($("#tt").length > 0) { //使用长度判断 } if( $("#tt")[0] ) { //转为Dom对象判断 } 2,选择器,根据例子记忆很好理解 (1)基本选择器:id,

锋利的jQuery第一章

以前总是感觉js,html,css,jquery这些东西太繁杂,看着都头晕,想着做后台,不用管这些东西,可是工作之中发现,很多前台后台结合 的地方,比如通过ajax发送到后台,如果不懂得jQuery,感觉很被动,于是,我也不管那么多了,从现在开始学习jQuery了. 我喜欢看书本学习,以后博客将记录我学习的笔记: 1,window.reload()和$(document).ready()的区别: 2,有关菜单的代码: <!DOCTYPE html PUBLIC "-//W3C//DTD X

第三章 jQuery中的DOM操作

DOM(Document Object Model)文档对象模型,每张网页都能用DOM表示出来,每一份DOM都能看成一颗DOM树. jQuery继承了JavaScript对DOM对象操作的特性,使开发人员能方便地操作DOM对象. 1.查找节点 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional

Jquery的一、二、三章的笔记

第一章:Jquery的基础 JQuery - 是一个JavaScript的框架(函数库) 一.Jquery的使用 1.下载Jquery框架:http://jquery.com 2.在页面引用jquery-x.x.x.js文件 <script type="text/javascript" src="js/jquery-1.7.2.js"></script> 3.使用 二.第一个Jquery程序$() $(document).ready(func