jQuery学习笔记

选择器(更详细看w3c官网教程)

$("p") //选择标签

$("#test") //选择id

$(".class") //选择class

$(“div p”) //选择div下的p

.first();

.last();

.eq(n);

.filter(".intro")

.not(".intro")

事件

$("p").click(function(){   // action goes here!! });

获取get

$("#test").html() 返回标签的html代码

$("#test").text() 返回标签的text

$("#test").val() 返回标签value

$("#test").attr(“href”) 返回标签属性

设置set

$("#test1").text("Hello world!"); 设置标签的text

$("#test2").html("<b>Hello world!</b>"); 设置标签的html代码

$("#test3").val("Dolly Duck"); 设置标签的value

$("#w3s").attr("href","www"); 设置标签的attr

带callback函数的方式

$("#w3s").attr({

      "href" : "http://www.w3schools.com/jquery",

      "title" : "W3Schools jQuery Tutorial"

});

$("#w3s").attr("href", function(i,origValue){

      return origValue + "/jquery"; 

});

$("#test1").text(function(i,origText){

      return "Old text: " + origText + " New text: Hello world! (index: " + i + ")"; 

});

添加元素

var txt1="<p>Text.</p>";               // Create text with HTML

var txt2=$("<p></p>").text("Text.");   // Create text with jQuery

var txt3=document.createElement("p");

txt3.innerHTML="Text.";                // Create text with DOM

$("p").append(" <b>Appended text</b>."); 最开始

$("p").prepend(" <b>Appended text</b>."); 最末尾

$("img").before("<b>Before</b>"); 前一个位置

$("img").after("<i>After</i>"); 后一个位置

$("body").append(txt1,txt2,txt3);         // 一次插入多个

$("img").after(txt1,txt2,txt3); // 一次插入多个

删除元素

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

$("#div1").empty(); //删除所有子元素

$("p").remove(".italic"); //删除特定元素

修改样式

$("h1,h2,p").addClass("blue");

$("div").addClass("important");

$("h1,h2,p").removeClass("blue");

$("h1,h2,p").toggleClass("blue");

$("#div1").addClass("important blue"); //加多个样式

<style type="text/css">

.important

{

font-weight:bold;

font-size:xx-large;

}

.blue

{

color:blue;

}

</style>

$("p").css("background-color"); //得到样式

$("p").css({"background-color":"yellow","font-size":"200%"}); //修改样式

jQuery Dimensions

$("#div1").width();

$("#div1").height();

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

jQuery Traversing

父亲关系

$("span").parent(); //直接父亲

$("span").parents(); //所有父亲

$("span").parentsUntil("div") //父亲直到...

孩子关系

$("div").children(); //可能有多个

$("div").find("span") //找到特定孩子，可以隔几代

兄弟关系

siblings() //上面下面的所有兄弟

next() //下一个兄弟

nextAll() //下面全部兄弟

nextUntil() //下面的直到...

Ajax

$("#div1").load("demo_test.txt"); //Ajax读取内容设置给div

$("#div1").load("demo_test.txt",function(responseTxt,statusTxt,xhr){

      if(statusTxt=="success")

        alert("External content loaded successfully!");

      if(statusTxt=="error")

        alert("Error: "+xhr.status+": "+xhr.statusText);

    });

jQuery学习笔记,古老的榕树,5-wow.com