DOM操作

DOM操作分类
DOM CORE HTML-DOM CSS-DOM
1.DOM CORE
JAVASCRIPT中的getElementById/getElementByName/getAtteibute/setAtteibute
element.getAttribute("src");
2.HTML-DOM
document.forms
element.src
3.CSS-DOM
element.style.color="red";

查找节点
1.var $li=$("ul li:eq(1)");
var li_text=$li.text();

2.var $para=$("p");
var p_text=$para.attr("title");

动态创建元素节点
$(html)会根据传入的html标记字符串，创建一个DOM对象；

例子：
var $li_1=$("<li></li>");
var $li_2=$("<li></li>");
$(ul).append($li_1)
     .append($li_2);

注意：
  当创建单个元素时要注意闭合标签和使用标准的XHTML格式
   例如创建一个<p>元素
可以用 $("<p/>") $("<p></p>")
但不能用$("<P/>") $("<P>")

无论html代码多么复杂，都要使用相同的方式来创建


插入节点
    var $li_1 = $("<li title='香蕉'>香蕉</li>");    //  创建第一个<li>元素   
    var $li_2 = $("<li title='雪梨'>雪梨</li>");    //  创建第二个<li>元素
    var $li_3 = $("<li title='其它'>其它</li>");    //  创建第三个<li>元素 
    var $parent = $("ul");                             // 获取<ul>节点，即<li>的父节点   
    var $two_li = $("ul li:eq(1)");             //  获取<ul>节点中第二个<li>元素节点
      $parent.append($li_1);                 //  append方法将创建的第一个<li>元素添加到父元素的最后面
    $parent.prepend($li_2);                 //  prepend方法将创建的第二个<li>元素添加到父元素里的最前面   
     $li_3.insertAfter($two_li);               //  insertAfter方法将创建的第三个<li>元素元素插入到获取的<li>之后
     $li_3.appendTo($parent);                   //appendTo将$li_3添加到父元素的最后面
     $li_2.prependTo($parent);                 //  prependTo方法将创建的第二个<li>元素添加到父元素里的最前面   
     $li_2.after($li_3);                 //  after方法将在li_3之后插入同辈的li_2对象
     $li_2.before($li_3);                 //  before方法将在li_2之前插入同辈的li_3对象
     $li_2.insertBefore($li_3);                 //  insertBefore方法将在li_3之前插入同辈的li_2对象


删除节点
var $li=$("ul li:eq(1)").remove();//删除的节点是包括该节点的所有后代节点的
当然删除的节点还是可以再用的
$li.appentTo("ul");

也可以这样来删除
$("ul li").remove("li[title!=菠萝]");  //把<li>元素中属性title不等于"菠萝"的<li>元素删除

另外
$("ul li:eq(1)").empty(); // 找到第二个<li>元素节点后，清空此元素里的内容，empty()并不删除节点


复制节点

 $("ul li").click(function(){
 $(this).clone().appendTo("ul"); // 复制当前点击的节点，并将它追加到<ul>元素
 })


$("ul li").click(function(){   
     $(this).clone(true).appendTo("ul"); // 注意参数true         //可以复制自己，并且他的副本也有同样功能。
     })  

替换节点
 $("p").replaceWith("<strong>你最不喜欢的水果是?</strong>");
     // 同样的实现： $("<strong>你最不喜欢的水果是?</strong>").replaceAll("p");

注意：原先在替换之前，已经为元素绑定事件，替换后需要为新替换的元素重新绑定事件



包裹节点
$("strong").wrap("<b></b>");//用<b>元素把<strong>元素包裹起来,wrap是对匹配的strong单独进行包裹
  $("strong").wrapAll("<b></b>");//对于整个包含strong的包裹其中，只加一个<b>
 $("strong").wrapInner("<b></b>");//将strong内的元素用<b>包裹起来



属性操作
$("p").attr("title","选择你最喜欢的水果.");
$("p").removeAttr("title");

也可以多个属性赋值

$("p").attr({"title":"my title","name":"my name"});

注意：attr()方法既能赋值也能获取值 类似的
html()/text()/height()/width()/val()/css()等

删除属性
$("p").removeAttr("title");//删除<p>元素的属性title


样式属性

获取样式属性
$("p").attr("class")

设置样式
$("p").attr("class","high");

追加样式
$("p").addClass("another");

删除样式
$("p").removeClass();

删除指定样式
$("p").removeClass("high");

重复切换样式
$toggleBtn.toggle(function(){//显示元素},function(){//隐藏元素})//交替一组动作
也引入了：
$("p").toggleClass("another");

判断元素是否包含有某样式
$("p").hasClass("another")
$("p").is(".another")



设置和获取HTML、文本和值
$("p").html() //获取<p>元素的HTML代码
$("p").text() //获取<p>元素的文本
注意：JavaScript的innerText 并不兼容所有浏览器，所有可以用text来获取

 $("p").html("<strong>你最喜欢的水果是?</strong>"); //设置<p>元素的HTML代码
$("p").text("你最喜欢的水果是?");//设置<p>元素的文本
 $("p").text("<strong>你最喜欢的水果是?</strong>"); //设置<p>元素的文本(带HTML)"/
$(this).val() //获取按钮的value值
$(this).val("我被点击了!");//设置按钮的value值



设置事件
  $("#password").focus(function(){   
        var txt_value =  $(this).val();   
        if(txt_value=="请输入邮箱密码"){    //也可以if(txt_value==this.defaultValue)
                $(this).val("");       
    }    
  });     
  $("#password").blur(function(){   
          var txt_value =  $(this).val();
         if(txt_value==""){  
             $(this).val("请输入邮箱密码");    //也可以$(this).val(this.defaultValue);
        }    
  });

$("#single").val("选择2号");//#single为select控件
注意:val方法会从最后一个选项往前读取，如果选项的value或者text任意一项符合就会被选中
$("#multiple").val(["选择2号", "选择3号"]);//#multiple为select多选控件
$(":checkbox").val(["check2","check3"]);//check2为<input type="checkbox" value="check2"/> 多选2       
$(":radio").val(["radio2"]);//radio2为<input type="radio" value="radio2"/> 单选2

当前以上也可以这样实现：
$("#single option:eq(1)").attr("selected",true);
$("[value=radio2]:radio").attr("checked",true);

遍历节点
children()取子节点
 var $body = $("body").children();
     var $p = $("p").children();
     var $ul = $("ul").children();
     alert( $body.length );  // <body>元素下有2个子元素
     alert( $p.length );     // <p>元素下有0个子元素
     alert( $ul.length );    // <p>元素下有3个子元素
     for(var i=0;i< $ul.length;i++){
         alert( $ul[i].innerHTML );
     }


var $p1 = $("p").next();
     alert( $p1.html() );  //  紧邻<p>元素后的同辈元素
     var $ul = $("ul").prev();
     alert( $ul.html() );  //  紧邻<ul>元素前的同辈元素
     var $p2 = $("p").siblings();
     alert( $p2.html() );  //  紧邻<p>元素的唯一同辈元素 siblings()取得匹配元素前后所有的同辈元素

 

$(document).bind("click", function (e) {
        $(e.target).closest("li").css("color","red");//closest用来取得最近的匹配元素
    })

还有find()/filter()/nextAll()/prevAll()/parent()/praents()等

CSS-DOM的操作

设置多个属性
$("p").css({"fontSize":"30px" ,"backgroundColor":"#888888"})
注意：如果属性为font-Size可以写成fontSize，如果加上了双引号，，也可以写成font-Size


设置透明度
$("p").css("opacity","0.5");

获取某个元素的属性
$(element).css("height")//$(element).height();$(element).height(23);则设置为23px也可以传入参数23em

css获取的高度和height获取有什么区别呢?
1.2版以后的height方法可以用来获取window和document的高度
css方法获取的高度值与央视的设置有关，可能会得到auto或者10px之类的字符串
height方法获得的与样式无关，获取的是元素在实际页面显示的实际高度

$("p").width()
$("p").width("400px")

 var offset = $("p").offset();//获取<p>元素的的左边距和上边距 offset()获取当前视窗的相对偏移
  var left = offset.left;
  var top =  offset.top;
  alert("left:"+left+";top:"+top);


position()方法获取元素相对于最近一个position样式属性设置为relative或者absolute
祖父节点的相对偏移，与offset一样，它返回对象也包括top和left

scrollTop和scrollLeft()
scrollTop 获取元素的滚动条距离顶端的距离
scrollLeft()取元素的滚动条距离左侧的距离

也可以设置
$("textare").scrollTop(300);//元素的垂直滚动条滚到到指定的位置
$("textarea").scollLeft(300);//元素的横向滚动条滚到到指定的位置

自动显示超链接的title

#tooltip{
    position:absolute;
    border:1px solid #333;
    background:#f7f5d1;
    padding:1px;
    color:#333;
    display:none;
}


$(function(){
    var x = 10;
    var y = 20;
    $("a.tooltip").mouseover(function(e){
           this.myTitle = this.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");      //设置x坐标和y坐标，并且显示
    }).mouseout(function(){
                this.title = this.myTitle;
                              $("#tooltip").remove();   //移除
     }).mousemove(function(e){       
                 $("#tooltip").css({
                "top": (e.pageY+y) + "px",
                "left": (e.pageX+x)  + "px"
            });
    });})


由以上可以做成一个点击超链接就直接显示图片
#tooltip{
    position:absolute;
    border:1px solid #ccc;
    background:#333;
    padding:2px;
    display:none;
    color:#fff;
}


$(function(){    var x = 10;
    var y = 20;
    $("a.tooltip").mouseover(function(e){
        this.myTitle = this.title;
        this.title = "";
        var imgTitle = this.myTitle? "<br/>" + this.myTitle : "";//此处运用了三元操作符
        var tooltip = "<div id='tooltip'><img src='"+ this.href +"' alt='产品预览图'/>"+imgTitle+"<//div>"; //创建 div 元素
        $("body").append(tooltip);    //把它追加到文档中
        $("#tooltip")            .css({
                "top": (e.pageY+y) + "px",
                "left":  (e.pageX+x)  + "px"
            }).show("fast");      //设置x坐标和y坐标，并且显示
    }).mouseout(function(){
        this.title = this.myTitle;
        $("#tooltip").remove();     //移除
     }).mousemove(function(e){
        $("#tooltip")            .css({
                "top": (e.pageY+y) + "px",
                "left":  (e.pageX+x)  + "px"
            });
    });})