jQuery用法總結

1.jQuery選擇器

//id,class,element,element.class,element#id


//id選擇器
var obj= $("#elementId");
//標籤名加name屬性，例如單選按鈕多個選項id屬性不一樣，name屬性相同
var obj= $("input[name="elementName"]:checked ");

//屬性選擇器
//全部具備xxx屬性的元素
$("[xxx]")
$("[xxx='#']")
$("[xxx!='#']")
//具備以yyy結尾的屬性的元素
$("[xxx$='yyy']")

//input選擇器：選取全部input，選取指定類型的input
$(":input")
$(":file")
$(":button")
$(":text")
$(":password")
$(":reset")
$(":checked")
$("input:not(:empty)")

//索引選擇器
//奇數
$("tr:odd")
//偶數
$("tr:even")

$("ul li:eq(3)")
//大於
$("ul li:gt(3)")
//小於
$("ul li:lt(3)")

2.jQuery獲取標籤內容或value值

/*val()方法獲取value屬性的值或賦值，如input標籤*/
var v = $("#elementId").val();

/*html()方法獲取標籤內容包含標籤，如：獲取ul下的li標籤，*/
var v = $("#elementId").html();

/*text()方法獲取標籤中的文本，如獲取p,a,中的文本內容*/
var v = $("#elementId").text();

/*attr()方法返回指定屬性的值或賦值*/
$("img").attr("width","180");

//獲取textarea中的文本內容，使用.val()方法；使用.text()方法沒法獲取

3.添加和刪除HTML元素

//append() - 在被選元素的結尾插入內容
$("p").append("Some appended text.");

//prepend() - 在被選元素的開頭插入內容
$("p").prepend("Some prepended text.");

//after() - 在被選元素以後插入內容
$("img").after("Some text after");

//before() - 在被選元素以前插入內容
$("img").before("Some text before");

//remove() - 刪除被選元素（及其子元素）
$("#div1").remove();

//empty() - 從被選元素中刪除子元素
$("#div1").empty();

//使用參數對刪除的對象過濾
$("p").remove(".classname");

4.jQuery操做CSS

//addClass() - 向被選元素添加一個或多個類
//removeClass() - 從被選元素刪除一個或多個類
//toggleClass() - 對被選元素進行添加/刪除類的切換操做

//css() - 設置或返回樣式屬性
/*css()獲取css屬性值*/
$("body").css("background-color");

/*css()設置單個css屬性值*/
$("div").css("background-color","yellow");

/*css()設置多個css屬性值*/
$("div").css({"background-color":"yellow","font-size":"200%"});

5.jQuery事件

//click();dbclick();
//blur();focus();
//keydown();keypress();keyup();
//鼠標相關事件：mouseup();mouseover();等
//bind();unbind();
//on();off();on能夠綁定多個事件

//toggle();
//trigger();
//select();
//scroll();

6.jQuery操做子元素和父元素

//parent()
//parents()
//parentsUntil();方法返回介於兩個給定元素之間的全部祖先元素。
$("span").parentsUntil("div");

//children();返回全部子元素
$("div").children();
//children();返回指定子元素
$("div").children("p.classname");

//find()獲取符合條件子元素，包括間接子元素
$("div").find("span");

//find()返回全部子元素
$("div").find("*");

//獲取同級元素
//siblings();返回全部同級元素
//next()
//nextAll()
//nextUntil()
//prev()
//prevAll()
//prevUntil()


//條件過濾
//first() 方法返回被選元素的首個元素。
$("div p").first();

//last() 方法返回被選元素的最後一個元素。
$("div p").last();

//eq() 方法返回被選元素中帶有指定索引號的元素。
 $("p").eq(1);

//filter() 方法容許您規定一個標準。不匹配這個標準的元素會被從集合中刪除，匹配的元素會被返回。
 $("p").filter(".intro");

//not() 方法返回不匹配標準的全部元素。與 filter() 相反。
$("p").not(".intro");

原生js操做HTML和CSS

//用js方法顯示和隱藏元素
var target=document.getElementById("enterinfo");
        var clicktext=document.getElementById("sl");
        target.style.display="none";
        clicktext.style.display="block";

7.使用js模擬點擊事件

$("input").trigger("click");
$("input").change();

8.變量form表單下的因此input標籤

var inputs = $("form").find("input[type='text']")
$.each(inputs,function () {
     console.log($(this).attr("name")+":"+$(this).val());

})

//或者
$("form input[type='text']").each(function () {
    console.log($(this).attr("name"));
});