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=$("

");
var $li_2=$("

");
$(ul).append($li_1)
     .append($li_2);

注意：
  当创建单个元素时要注意闭合标签和使用标准的XHTML格式
   例如创建一个

元素
可以用 $("

") $("

")
但不能用$("

") $("

")

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


插入节点
    var $li_1 = $("

香蕉

");    //  创建第一个

元素   
    var $li_2 = $("

雪梨

");    //  创建第二个

元素
    var $li_3 = $("

其它

");    //  创建第三个

元素 
    var $parent = $("ul");                             // 获取

节点，即
• 的父节点   
      var $two_li = $("ul li:eq(1)");             //  获取
  节点中第二个
  • 元素节点
          $parent.append($li_1);                 //  append方法将创建的第一个
  • 元素添加到父元素的最后面
        $parent.prepend($li_2);                 //  prepend方法将创建的第二个
  • 元素添加到父元素里的最前面   
         $li_3.insertAfter($two_li);               //  insertAfter方法将创建的第三个
  • 元素元素插入到获取的
  • 之后
         $li_3.appendTo($parent);                   //appendTo将$li_3添加到父元素的最后面
         $li_2.prependTo($parent);                 //  prependTo方法将创建的第二个
  • 元素添加到父元素里的最前面   
         $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!=菠萝]");  //把
  • 元素中属性title不等于"菠萝"的
  • 元素删除
    
    另外
    $("ul li:eq(1)").empty(); // 找到第二个
  • 元素节点后，清空此元素里的内容，empty()并不删除节点
    
    
    复制节点
    
     $("ul li").click(function(){
     $(this).clone().appendTo("ul"); // 复制当前点击的节点，并将它追加到
    元素
     })
    
    
    $("ul li").click(function(){   
         $(this).clone(true).appendTo("ul"); // 注意参数true         //可以复制自己，并且他的副本也有同样功能。
         })  
    
    替换节点
     $("p").replaceWith("你最不喜欢的水果是?");
         // 同样的实现： $("你最不喜欢的水果是?").replaceAll("p");
    
    注意：原先在替换之前，已经为元素绑定事件，替换后需要为新替换的元素重新绑定事件
    
    
    
    包裹节点
    $("strong").wrap("");//用元素把元素包裹起来,wrap是对匹配的strong单独进行包裹
      $("strong").wrapAll("");//对于整个包含strong的包裹其中，只加一个
     $("strong").wrapInner("");//将strong内的元素用包裹起来
    
    
    
    属性操作
    $("p").attr("title","选择你最喜欢的水果.");
    $("p").removeAttr("title");
    
    也可以多个属性赋值
    
    $("p").attr({"title":"my title","name":"my name"});
    
    注意：attr()方法既能赋值也能获取值 类似的
    html()/text()/height()/width()/val()/css()等
    
    删除属性
    $("p").removeAttr("title");//删除

    元素的属性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() //获取

    元素的HTML代码
    $("p").text() //获取

    元素的文本
    注意：JavaScript的innerText 并不兼容所有浏览器，所有可以用text来获取
    
     $("p").html("你最喜欢的水果是?"); //设置

    元素的HTML代码
    $("p").text("你最喜欢的水果是?");//设置

    元素的文本
     $("p").text("你最喜欢的水果是?"); //设置

    元素的文本(带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为 多选2       
    $(":radio").val(["radio2"]);//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 );  // 元素下有2个子元素
         alert( $p.length );     //

    元素下有0个子元素
         alert( $ul.length );    //

    元素下有3个子元素
         for(var i=0;i< $ul.length;i++){
             alert( $ul[i].innerHTML );
         }
    
    
    var $p1 = $("p").next();
         alert( $p1.html() );  //  紧邻

    元素后的同辈元素
         var $ul = $("ul").prev();
         alert( $ul.html() );  //  紧邻

    元素前的同辈元素
         var $p2 = $("p").siblings();
         alert( $p2.html() );  //  紧邻

    元素的唯一同辈元素 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();//获取

    元素的的左边距和上边距 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 = "

    "+ this.myTitle +""; //创建 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? "
    " + this.myTitle : "";//此处运用了三元操作符
            var tooltip = "

    "+imgTitle+""; //创建 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"
                });
        });})