Jquery学习笔记

1、获取或设置内容

//获取/设置内容
$("#test").html();     //设置或返回所选元素的内容（包括 HTML 标记）
$("#test").text();     //设置或返回所选元素的文本内容
$("#test").val();      //设置或返回表单字段的值
$("#test").attr({      //设置或返回属性值
  "href","http://pinkpink.top"，
  "title" : "pink"
});               

$("#test1").text(function(i,origText){    //html,text,val,attr的回调函数
  函数内容  
});

2、 插入/删除元素

$("p").append(); 
$("p").prepend();
$("p").after("");
$("p").before("");
eg.  var txt1="<p>Text.</p>";               // 以 HTML 创建新元素
     var txt2=$("<p></p>").text("Text.");   // 以 jQuery 创建新元素
     var txt3=document.createElement("p");  // 以 DOM 创建新元素
     txt3.innerHTML="Text.";
     $("p").append(txt1,txt2,txt3);         // 追加新元素

$("p").remove();  //删除被选元素及其子孙元素
$("p").empty();   //删除被选元素的子元素
$("p").remove(".div");  //删除类名为div的被选元素

3、添加或修改类（一个或多个）

$("div").addClass("important blue");
$("div").removeClass("important");
$("div").toggleClass("important");
$("div").css("height","25px");

4、各种尺寸

//设置或返回元素的宽度（不包括内边距、边框或外边距）
$("#div1").width();  
$("#div1").height();

//设置或返回元素的宽度（包括内边距）
$("#div1").innerWidth();  
$("#div1").innerHeight();

//设置或返回元素的宽度（包括内边距、边框）
$("#div1").outerWidth();  
$("#div1").outerHeight();

//返回元素的宽度（包括内边距、边框或外边距）
$("#div1").outerWidth(true);  
$("#div1").outerHeight(true);

eg.   $("#div1").width(500).height(500);

5、HTML遍历

$("div").parent();              //返回div的所有直接父元素
$("div").parents();             //返回div的所有祖先元素
$("div").parents("ul");         //返回div的为ul的祖先元素
$("span").parentsUntil("div");  //返回给定元素之间的所有元素

$("div").children();            //返回div的所有直接子元素
$("div").find("*");             //返回div的所有后代元素
$("div").find("span");          //返回div后代所有的span元素

$("h2").siblings();             //h2的所有同胞元素
$("h2").siblings("p");          //h2的所有同胞p元素

$("h2").next();                 //返回被选元素的下一个同胞元素,该方法只返回一个元素
$("h2").next("p");              //无该方法
$("h2").nextAll();              //返回被选元素的所有跟随的同胞元素
$("h2").nextAll("p");           //返回被选元素的所有跟随的同胞元素中的p元素
$("h2").nextUntil();            //返回介于两个给定参数之间的所有跟随的同胞元素
prev(), prevAll() & prevUntil() //向前遍历同胞

6、 HTML遍历——过滤

$("div").first();         //返回被选元素的首个元素
$("div").last();          //返回被选元素的最后一个元素
$("p").eq(1);             //返回被选元素的第二个元素
$("p").filter(".intro");  //返回带有类名 "intro" 的所有 <p> 元素
$("p").not(".intro");     //返回不带有类名 "intro" 的所有 <p> 元素