jQuery入门指南与实战应用

• 
  
  
  
  • 　　parent() 方法返回被选元素的直接父元素（遍历上一级）
  
  
  
  

$(function(){
$("span").parent().css("color","red");
});

• 
  
  
  
  • 　　parents() 方法返回被选元素的所有祖先元素，一路向上直到文档的根元素 ()
  
  
  
  

$(function(){
$("span").parents().css("color","blue");
});

• 
  
  
  
  • 　　parentsUntil() 方法返回介于两个给定元素之间的所有祖先元素
  
  
  
  

$(function(){
$("span").parentsUntil("div").css("color","green");
});

• 
  
  
  
  • 　　children() 方法返回被选元素的所有直接子元素（遍历下一级）
  
  
  
  

$(function(){
$("ul").children().css("color","white");
});

• 
  
  
  
  • 　　find() 方法返回被选元素的后代元素，一路向下直到最后一个后代
  
  
  
  

$(function(){
$("ul").find("*").css("color","white");//遍历所有后代
});

$(function(){
$("ul").find("span").css("color","yellow");//遍历后代中所有span 元素
});

• 
  
  
  
  • 　　siblings() 方法返回被选元素的所有同胞元素。
  
  
  
  

$(function(){
$("li").siblings().css("color","orange");
});

• 
  
  
  
  • 　　next() 方法返回被选元素的下一个同胞元素，只返回一个元素
  
  
  
  

$(function(){
$("li").next().css("color","grey");
});

• 
  
  
  
  • 　　nextAll() 方法返回被选元素的所有跟随的同胞元素
  
  
  
  

$(function(){
$("li").nextAll().css("color","pink");
});

• 
  
  
  
  • 　　nextUntil() 方法返回介于两个给定参数之间的所有跟随的同胞元素。
  
  
  
  

$(function(){
$("li").nextUntil("div").css("color","yellow");
});

• 
  
  
  
  • prev()，prevAll() 以及 prevUntil() 用法同上，但方向相反：它们返回的是前面的同胞元素（在 DOM 树中沿着同胞元素向后遍历，而非向前）
  
  
  
  


• 节点增删改查

html代码

• 
  
  
  
  • 　　增加节点：
    
    
    
    • 　　　　父节点.append(子节点)  或 子节点.appendTo(父节点)    放进父元素的内部的后面
      
    
    
    
    
  
  
  
  

$(function () {
　　//创建标签
　　var $p=$("

我是新创建的p元素

• 
  
  
  
  • 
    
    
    
    • 　　　　父节点.prepend(子节点)  或 子节点.prependTo(父节点)    放进父元素内部的前面
    
    
    
    
  
  
  
  

$(function () {
　　//创建标签
　　var $p=$("

我是新创建的p元素

• 
  
  
  
  • 　　删除节点：
    
    
    
    • 　　　　被删节点.remove()    不仅删除子节点把自身也删除
    
    
    
    
  
  
  
  

$("#box").remove();

• 
  
  
  
  • 
    
    
    
    • 　　　　被删节点.empty()    只删除子节点
    
    
    
    
  
  
  
  

$("#box").empty();

• 
  
  
  
  • 　　替换节点：
    
    
    
    • 　　　　被替换节点.replaceWith(节点)  或  节点.replaceAll(被替换节点)
    
    
    
    
  
  
  
  

$("h4").replaceWith($("我是a标签"));//相当于 $("我是a标签").replaceAll($("h3"));

6. 事件

• 事件列表

• on   和   bind 方法向被选元素添加一或多个事件处理程序
  
  
  
  • 　　bind() 方法
    
    
    
    • 　　　　参数1：规定添加到元素的一个或多个事件。由空格分隔多个事件值。必须是有效的事件。
    
    
    • 　　　　参数2：可选。规定传递到函数的额外数据。
    
    
    • 　　　　参数3：必需。规定当事件发生时运行的函数。
    
    
    • 　　　　参数4：规定事件映射 ({event:function, event:function, ...})，包含要添加到元素的一个或多个事件，以及当事件发生时运行的函数
    
    
    
    
  
  
  
  

点击>

• 
  
  
  
  • 　　on() 方法添加的事件处理程序适用于当前及未来的元素（比如由脚本创建的新元素）
    
    
    
    • 　　参数1：必需。规定要从被选元素移除的一个或多个事件或命名空间，由空格分隔多个事件值。必须是有效的事件。
    
    
    • 　　参数2：可选。规定只能添加到指定的子元素上的事件处理程序（且不是选择器本身）
    
    
    • 　　其他三个参数与bind() 方法参数1、2、3相同
    
    
    
    
  
  
  
  

$("button").on("click",function(){
　　alert("我是一个按钮");
});

（未完，晚点更新）