jQuery学习笔记（三）

jQuery中DOM操作

• DOM是一种与浏览器、平台、语言无关的接口，使用该接口可以轻松的访问页面中的所有的标准组件。

DOM操作的分类：

DOM Core

• DOM core并不专属于JavaScript，任何支持DOM的程序都可以使用。
• JavaScript 中的getElementById()、getElementsByTagName()、getAttribute()、setAttribute()等方法都是DOM Core的组成部分。

HTML-DOM

• HTML -DOM的出现比DOM-Core还要早，它提供一些更简明的标志来描述HTML元素的属性。
• 比如：使用HTML-DOM来获取某元素的src属性的方法：element.src。

CSS-DOM

• 针对CSS的操作。在JavaScript中，主要用于获取和设置style对象的各种属性，通过改变style对象的属性，使网页呈现不同的效果。

查找节点

• attr()方法设置或返回被选元素的属性值。

  $(document).ready(function(){
      $("button").click(function(){
          alert("Image width " + $("img").attr("width")); //返回图像的width属性
      });
  });

  $(document).ready(function(){
      $("button").click(function(){
          $("img").attr("width","180"); //设置图像的width属性
      });
  });

创建节点

• html()方法返回或设置被选元素的内容(inner HTML)。

  //语法：$(selector).html()
  //当使用该方法返回一个值时，它会返回第一个匹配元素的内容。
  $(document).ready(function(){
      $(".btn1").click(function(){
          alert($("p").html()); 
      });
  });

  //语法：$(selector).html(content)
  //当使用该方法设置一个值时，它会覆盖所有匹配元素的内容。
  $(document).ready(function(){
      $(".btn1").click(function(){
          $("p").html("Hello <b>world!</b>");
      });
  });

插入节点

• append() 方法在被选元素的结尾（仍然在内部）插入指定内容。

  $("button").click(function(){
      $("p").append(" <b>Hello world!</b>");
  });

• appendTo() 方法在被选元素的结尾（仍然在内部）插入指定内容（颠倒append()的操作）。不同之处在于：内容和选择器的位置，以及 append() 能够使用函数来附加内容。

  $("button").click(function(){
      $("<b>Hello World!</b>").appendTo("p");
  });

• prepend() 方法在被选元素的开头（仍位于内部）插入指定内容。

  $(".btn1").click(function(){
      $("p").prepend("<b>Hello world!</b>");
  });

• prependTo() 方法在被选元素的开头（仍位于内部）插入指定内容（颠倒prepend()的操作）。不同之处在于：内容和选择器的位置，以及 prepend() 能够使用函数来附加内容。

  $(".btn1").click(function(){
      $("<b>Hello World!</b>").prependTo("p");
  });

• after() 方法在被选元素后插入指定的内容。

  $("button").click(function(){
      $("p").after("<p>Hello world!</p>"); //在每个 p 元素后插入内容
  });

• insertAfter() 方法在被选元素之后插入 HTML 标记或已有的元素（颠倒after()的操作）。

  $("button").click(function(){
      $("<span>Hello world!</span>").insertAfter("p"); //在每个 p 元素之后插入 span 元素
  });

• before() 方法在被选元素前插入指定的内容。

  $("button").click(function(){
      $("p").before("<p>Hello world!</p>");
  });

• insertBefore() 方法在被选元素之前插入 HTML 标记或已有的元素（颠倒before()的操作）。

  $("button").click(function(){
      $("<span>Hello world!</span>").insertBefore("p");
  });

删除节点

• jQuery提供了三种删除节点的方法remove()、detach()、empty()。

• remove()方法

  • 当某个节点用此方法删除后，该节点所包含的所有文本和子节点将同时被删除，用remove()方法删除后，还是可以继续使用删除后的引用。
  • 但除了这个元素本身得以保留之外，remove() 不会保留元素的 jQuery 数据。其他的比如绑定的事件、附加的数据等都会被移除。这一点与 detach() 不同。

  $("button").click(function(){
      $("p").remove();//移除所有 <p> 元素
  });

• detach()

  • 和remove()方法一样，也是从DOM中去掉所有匹配的元素，与remove()不同的是，detach() 会保留所有绑定的事件、附加的数据。

  $("button").click(function(){
      $("p").detach();//移除所有 <p> 元素
  });

• empty()

  • empty() 方法删除匹配的元素集合中所有的子节点。

  $(".btn1").click(function(){
      $("p").empty(); //移除 p 元素，包括所有文本和子节点。
  });

复制节点

• clone() 方法生成被选元素的副本，包含子节点、文本和属性。
• 在clone()方法中传递一个可选的布尔值，规定是否复制元素的所有事件处理。默认的，副本中不包含事件处理器(false)。

  $("button").click(function(){
      $("body").append($("p").clone()); //克隆并追加一个 p 元素
  });

样式操作

• 获取样式和设置样式 attr()

  $("button").click(function(){
      $("img").attr("width","180"); //设置图像的width属性
  });

• 追加样式 addClass()

  $("button").click(function(){
      $("p:first").addClass("intro"); //向第一个 p 元素添加一个类
  });

• 移除样式 removeClass()

  $("button").click(function(){
      $("p:first").removeClass("intro"); //从第一个 p 元素删除类
  });

• 切换样式：

  • toggle()方法只要是控制行为上的重复切换（如果元素是显示的，则隐藏；如果元素原来是隐藏的，则显示）
  • toggleClass()方法控制样式上的重复切换（如果类名存在，则删除它，如果类名不存在，则添加它）

  $("button").click(function(){
      $("p").toggleClass("main");//控制所有 <p> 元素的 "main" 类样式上的重复切换
  });

• 判断是否含有某个样式

  • hasClass()可以用来判断元素是否含有某个class,如有返回true 该方法等价于is()

  $("button").click(function(){
      alert($("p:first").hasClass("intro"));//检查第一个 <p> 元素是否包含 "intro" 类
  });

设置和获取HTML、文本和值

• html()方法
  • 此方法类似JavaScript中innerHTML属性，可以用来读取和设置某个元素中的HTML内容。

• text()方法

  • 此方法类型JavaScript中innerText属性，用来读取和设置某个元素中的文本内容。
  • html()和text()的区别主要在于是否包含标签

  $(".btn1").click(function(){
      $("p").text("Hello world!");
  });

• val()方法

  • 此方法类似JavaScript中的value属性，用来设置获取元素的值。无论是文本框、下拉列表还是单选框，都可以返回元素的值，如果元素多选，返回一个包含所有选择的值的数组。

  $("button").click(function(){
      $(":text").val("Hello World");
  });

遍历节点

• children()方法

  • 该方法返回被选元素的所有直接子元素。
  • childre()方法只考虑直接子元素而不考虑其他后代元素

  $(document).ready(function(){
      $("div").children(); //返回每个 <div> 元素的所有直接子元素
  });

• next()方法

  • 该方法用于取得匹配元素后面紧邻的同胞元素。
  • 如果提供选择器，则取回匹配该选择器的下一个同胞元素。

  $("p").next(".selected").css("background", "yellow"); //查找每个段落的下一个同胞元素，仅选中类名为 "selected" 的段落，对其设置样式

• prev()方法

  • 用于获得匹配元素集合中每个元素紧邻的前一个同胞元素，通过选择器进行筛选是可选的。

  $("p").prev(".selected"); //检索每个段落，找到类名为 "selected" 的前一个同胞元素

• siblings()方法

  • 用于获得匹配集合中每个元素的同胞，通过选择器进行筛选是可选的。

  $("p").siblings(".selected"); //查找每个 p 元素的所有类名为 "selected" 的所有同胞元素

• parent()方法

  • 获得当前匹配元素集合中每个元素的父级元素，使用选择器进行筛选是可选的。

  $("p").parent(".selected"); //查找每个段落的带有 "selected" 类的父元素

• parents()方法

  • 获得当前匹配元素集合中每个元素的祖先元素，使用选择器进行筛选是可选的。

  $("b").parents(); //查找每个 b 元素的所有祖先元素

CSS DOM操作

• CSS DOM技术简单的来说就是读取和设置style对象的各种属性。
• 用css()方法获取元素的样式属性，可以同时设置多个样式属性。

• CSS DOM中关于元素定位有几个常用的方法：

  offset()方法

  • 它的作用是获取元素在当前视窗的相对偏移其中返回的对象包含两个属性，即top和left，它只对可见元素有效。

  position()方法

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

  scrollTop()方法和scrollLeft方法

  • 这两个方法的作用分别是获取元素的滚动条距顶端的距离和距左侧的距离。