jQuery学习笔录3（jQuery学习笔记——DOM【1.DOM Core】）

DOM是Document Object Model的缩写，是文本对象模型的意思。

一 概述

1 DOM 能够让开发者获取和操作网页中的数据，脚本和表现层对象。

dom结构，树形的 ，如下图

   DOM操作分3个方面：DOM Core， HTML- DOM , CSS- DOM

jQuery中DOM Core的操作
1查找元素节点
1）查找元素节点

var $li=$("ul li:eq(0)");//查找元素节点，获取

里第1个
• 节点
  
  2）查找属性节点
  
  使用attr()方法来获取它的各种属性
  
  var $para=$("p");
  var p_txt=$para.attr("title");
  
  3）动态添加元素节点
  
  i 创建新的元素
  
  ii 将新的元素插入到文档中，将新的元素插入到文档最简单的方法是，让其作为文档中某个节点的子节点
  
  $("HTML标记字符串")：创建一个DOM对象，并将这个DOM对象包装成一个jQuery对象后返回。
  

  $("HTML标记字符串").append("新建元素")

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

  除了append()之外，还有别的方法可以将新的节点插入到文档中，

  比如 appendTo(),before()。
  

  4）删除元素节点

  remove() 和 empty()

  remove()删掉元素节点 以及他下面的所有子节点都一并删掉
  

  $("ul li:eq(3)").remove()

  empty() 清空节点，及元素中所有的后代节点。

  5）复制节点

  clone(),如果想让复制后的节点同样拥有复制功能，这样写：clone(true)

  6)替换节点

  replaceWith(), replaceAll()

  7)包裹节点

  wrap(),wrapAll(),wrapInner()

   $("strong").wrap("")//用标签把strong括起来

  firebug中看到的：

  
  你最爱的水果呢？
  

  2获取属性和设置属性

  1)如果要获取p元素的属性，只要给attr()传递一个参数（属性名称）。

    var $para=$("p")//获取p元素
    var $p_tit=$para.attr("title")//获取

  元素节点属性title

  2)设置属性，传递2个参数：1个属性名称 ，1个属性的值

   $("ul li[title=香蕉]").attr("title","your turn");//设置属性值

  类似获取属性，设置元素属性值的方法：html(),text(),val(),css()等。

  3)删除属性

  removeAttr()

  3样式操作

  1）用样式A替换样式B

  $("p").attr("class","A") //class="A"

  2)添加样式 addClass("C")

  $("p").addClass("testColor");

  3)删除样式 removeClass("A")

  $("p").removeClass("testColor").removeClass("myClass");
  

  4设置和获取html、文本和值

  $("p").html();
  

  相当于js 的innerHTML()，抓取元素中【HTML内容】:文本内容 + p元素内的标签 html

  $("p").text();
  

  相当于js的innerText() ,读取或设置元素的【文本内容】

  $(this).val();

  类似js的value属性，设置和抓取元素的【值】，无论是textbox 还是select ，如果元素为多选，则返回一个包含选择值的数组
  

  5）获取焦点

  $("#mailaddress").focus()

  6)失去焦点

  $("#mailaddress").blur()

  4遍历节点，遍历节点方法有很多：parent(),parents(),next(),children,prev(),siblings()等——详见jQuery API

  1） parent()：获取匹配元素的父元素，包含父元素里面的内容
  

  Hello

  Hello

  
  $("p").parent() 得到的是：

  Hello

  Hello

  对象，因为p标签的父标签是div.

  又例：

  alert("parent")
  var li3=$("li").parent();//匹配元素的父元素
  alert(li3.html());

  2 ）chlidren():只抓该元素下一级的元素

  一个段落hahadd

  var v_p=$("p").children();

  alert(v_p.length);得到的是：1个元素，就是，不考虑

  3 ）next() :抓匹配元素后面紧邻的同辈元素

  var p1=$("p").next(); 结果是

  
  

  4）prev() : 抓匹配元素前面紧邻的同辈元素

  var ul1=$("ul").prev(); 结果是

   

  5 ）siblings() :抓取匹配元素前后所有的同辈元素

  var p=$("p").siblings();
  alert(p.html());

  6 ）closest() ： 用来获得最近的匹配元素，检查当前元素是否匹配，匹配直接返回元素本身，不匹配向上查找父元素，直到有匹配的，没有就返回空jquery对象
  $(window.document).bind("click",function(e){
      $(e.target).closest("li").css("color","red");

    $(e.target).closest("li").css({"fontSize":"18px","backgroundColor":"#888888"});
  }) 点到

  • ，添加css样式

    具体代码1：查找节点

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="jQueryDomAttr.aspx.cs" Inherits="jQueryDom_jQueryDom1" %>
    
    
    
    
    
        
        
    
    
        
    
        
    
        
    你最喜欢的水果是？
        
    
            
    苹果
            
    橘子
            
    菠萝
        
        
        
    
    
    
    

    
    具体代码2：属性样式操作

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="jQueryDOMCss.aspx.cs" Inherits="jQueryDom_jQueryDOMCss" %>
    
    
    
    
    
        
        
        
    
    
        
    
        
    
        
    你喜欢啥水果
        切换样式
    
        
        
        
        
        
    
    
    
    

    
    具体代码3：children遍历

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="jQueryDOMchild.aspx.cs" Inherits="jQueryDom_jQueryDOMchild" %>

    
    
       
       
    
    
       

    
       

    
       

    一个段落hahadd

    
       

    
       
    • 1
    
       
    • 2
    
       
    • 3
    
       

    
       

    
       
    
    
    
    

    具体代码4 ：eg

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="jQueryDOMeg.aspx.cs" Inherits="jQueryDom_jQueryDOMeg" %>
    
    
    
    
    
        
        
    
    
        
    
        
    
        
        选择1号
        选择2号
        选择3号
        
    
    
        
        选择1号
        选择2号
        选择3号
        选择4号
        选择5号
        
    
        多选1
        多选2
        多选3
        多选4
    
        单选1
        单选2
        单选3