jQuery学习笔记——DOM操作

查找属性节点：查找到所需要的元素后，可以调用jQuery对象的attr()方法来获取它的各种属性值
   创建节点：使用jQuery的工厂函数$():$(html);会根据传入的html标记字符串创建一个DOM对象，并把这个DOM对象包装成一个jQuery对象返回。
   插入节点
   方法：
   

append() //向每个匹配的元素的内部的结尾处追加内容
   appendTo()//将每个匹配的元素追加到指定的元素中的内部的结尾处
   prepend()//向每个匹配的元素的内部的开始处插入内容
   parendTo()//将每个匹配的元素插入到指定的元素中的内部的开始处
   after()//向每个匹配元素之后插入内容
   insertAfter()//向每个匹配元素插入到指定的元素之后
   before()
   insertBefore()

 
   注：以上方法不但能将新创建的DOM元素插入到文档中，也能对原有的DOM元素进行移动
   创建新节点和插入新节点示例

 

var newP=$("<p>今天是七夕节！</p>");
   newP.insertAfter("#chapter");//将创建的newp元素插入到ID为#chapter的元素之后
   newP.appendTo("body");//插入到body元素里

 
      删除节点

 

 remove()//从DOM中删除所有匹配的元素，传入的参数用于根据jQuery表达式来筛选元素。当某个节点用remove（）方法删除后，该节点所包含的所有后代节点将被同时删除，这个方法的返回值是一个指向已被删除的节点的引用
   empty()://清空节点-清空元素中的所有后代节点（不包含属性节点）。
   复制节点
   clone()//复制的节点不具有任何行为
   clone(true)//复制元素的同时也复制元素中的事件

 
     替换节点
   

replaceWith()://将所有匹配的元素都替换为指定的html或DOM元素
   replaceAll()//颠倒了的replacewith()方法

 
   注：若在替换之前，已经在元素上绑定了事件，替换后原先绑定的事件会与原先的元素一起消失
   包裹节点
   

wrap()//将指定节点用其他标记包裹起来。该方法对于需要在文档中插入额外的结构化标记非常有用，而且不会破坏原始文档的语义。
   wrapAll()//将所有匹配的元素用一个元素来包裹。而wrap()是将所有的元素进行单独包裹。
   wrapInner()//将每一个匹配的元素的子内容（包括文本节点）用其他结构化标记包裹起来

 

   属性操作
   attr()//获取html属性和设置属性
   ·当为该方法传递一个参数时，即为某元素的获取指定属性
   ·当为该方法传递两个参数时，即为某元素设置指定属性的值
   注：jQuery中有很多方法都是一个函数实现获取和设置。如：attr(),html(),text(),val(),height(),width(),css()等
   removeAttr()//删除指定元素的指定属性
   样式操作
   获取class和设置class：class是元素的一个属性，所以获取class和设置class都可以使用attr()方法来完成
   追加样式：addClass()
   移除样式：removeClass()//从匹配的元素中删除全部或指定的class
   切换样式：toggleClass()//控制样式上的重复切换。如果类名存在则删除它，如果类名不存在则添加它
   判断是否含有某个样式：hasClass()//判断元素中是否含有某个class，如果有，返回true，否则返回false。
  
   设置和获取HTML，文本和值
   读取和设置某个元素中的HTML内容：html()//适用于XHTML不适用于xml
   读取和设置某个元素中的文本内容：text()//适用于xml和XHTML
   读取和设置某个元素的值：val()//该方法类似JavaScript中的value属性。对于文本框，下拉列表框、单选框该方法返回元素的值（多选框只能返回第一个值）。
   如果为多选下拉列表框，则返回一个包含所有选择值的数组
  
   常用的遍历节点的方法
   取得匹配元素的所有子元素组成的集合：children()//只考虑子元素，不考虑后代元素
   取得匹配元素后面紧邻的同辈元素的集合（但集合中只有一个元素）：next()
   取得匹配元素前面紧邻的同辈元素的集合（但集合中只有一个元素）：prev()
   取得匹配元素前后所有的同辈元素：siblings()
   css-dom操作
   获取和设置元素的样式属性：css()
   获取和设置元素的透明度：opacity属性
   获取和设置元素的高度，宽度：height(),width().
     注：在设置值时，若只传递数字，则默认单位是px。如需要使用其他单位则需要传递一个字符串，例如：

 

$("p:first").height("2em");

 
   获取元素在当前视窗中的相对位移：offset().其返回对象包含了两个属性：top，left该方法只对可见元素有效
  
 jQuery中的事件——加载DOM

 $(document).ready()

  
 事件绑定
 bind()
 提示：使用jQuery的is()方法判断元素是否可见
 
 合成事件
 hover():模拟光标悬停时间。当光标移动到元素上时，会触发指定的第一个事件，当光标移出这个元素师，会触发指定的第二个函数
 toggle()//用于模拟鼠标连续单击事件。第一单击触发第一个函数，以此类推
 toggle()的另一个作用，切换元素的可见状态
 
 事件冒泡
 事件会按照DOM层次结构像水泡一样不断向上直至顶端
 解决：在事件处理函数中返回false，会对事件停止冒泡。还可以停止元素的默认行为
 
 事件对象的属性

 event.pageX,event.pageY

 
 
 移除事件
 移除某按钮上的所有click事件：

 $("btn").unbind("click")

 
 移除某按钮上的所有事件：
 

$("btn").unbind();
 one()//该方法可以为元素绑定处理函数。当处理函数触发一次后，立即被删除。即在每个对象上事件处理函数只能被执行一次
 $("a").one("click",function(){
 alert("click me just once!");
 return false;
 });