jquery 常用方法 集錦
JQuery常用方法
1、獲取元素
$("標簽名")、$("#id")、$(".類名")、$("標簽名,#id,.class")
$("祖先 子孫")、$("父>子")、$("前+後")、$("兄~弟")指定層次關系
$("p[id]")獲取有id的p、$("p[id^=p]")獲取有id且，id設定值最初部分都為p的元素
$("li:odd")獲取奇數序號元素，通過過濾器獲取元素:even、:first、eq(index)、:not(:first)獲取除第一個元素之外的其它元素
$(":input")獲取表單元素
$("input:text:disabled")、:enabled、:checked、:selected通過過濾器獲取表單元素
$("p").eq(2)通過指定序號獲取元素
$("p").filter(".center")獲取條件一致的元素
$("p").slice(4,7)獲取制定範圍的元素
$("p").is(".blue")獲取class為blue的p
$("p").next(".yes")獲取p的下個class為yes的元素
$("p").prev(".yes")獲取前一個元素
$("p").parent()獲取父元素
$("p").children()獲取子元素
2、元素控制
$("div").append("<p>追加p標簽</p>")在元素內部追加內容
$("p").appendTo("#content")在元素不同位置追加內容
$("p").prepend()在元素前追加內容
$("p").prependTo("#content)將p追加到#content之前
$("p").after()元素後追加兄弟元素
$("p").before()元素前追加
$("span").wrap("<div></div>")用指定結構元素包含元素
$("p").wrapAll("<div></div>")用指定結構元素包含多個元素的集合
$("p").wrapInner("<b></b>")用指定標簽包含子元素
$(A).replaceWith(B)用B元素替換A元素
$(A).replaceAll(B)將B元素替換成A元素
$("p").empty()刪除p的子元素
$("p").remove("#id")刪除p中的id p元素
$("p").clone().prependTo("#id")復制並插入元素p
3、獲取與控制屬性
$("p").attr(name | properties | key,value | key,fn)獲取、設置屬性值
$("p").removeAttr("style")刪除屬性值
$("p").addClass("class") [註意：沒有點]修改class屬性值
$("p").toggleClass("class",cnt++%3==0)根據條件設置class值
$("p").html(val)設置html元素
$("p").html()獲取html元素
$("p").text()獲取文本
$("p").text(val)設置文本
$("p").val()獲取、設置value
4、CSS控制
$("p").css("color")獲取元素的style屬性值
$("p").css("color","red")設置屬性值
$("p").css({color:"white",backgroundColor:"green"})設置屬性值
var off=$("p").offset();off.top;獲取元素顯示位置
$("p").height()獲取元素高度
$("p").width()獲取元素寬度
5、事件控制
$(document).ready(fn()) | $(fn())導入頁面後執行函數
$("p").bind("click",function(){}) | unbind 事件綁定函數
$("p").hover(over(),out())鼠標放置/離開動作
$("p").toggle(fn1(),fn2(),fn3(),···)元素被單擊時函數的切換操作
$("p").click(fn())元素單擊事件
$("p").mouseover()在元素中綁定mouseover事件
$("p").mouseout()綁定mouseout事件
6、設定效果
$("p").show([speed(um),[callback(fn())]])顯示隱藏元素
$("p").hide(speed,callback)隱藏顯示元素
$("p").toggle( | switch | speed,callback )切換元素顯示/隱藏狀態
$("p").slideUp(speed,callback)漸進隱藏元素
$("p").slideDown(speed,callback)逐漸顯示元素
$("p").slideToggle(speed,callback)交替顯示元素
$("p").fadeIn(speed,callback)控制元素的漸入效果
$("p").fadeOut(speed,callback)控制元素的漸出效果
$("p").animate(params,options | params,[duration],[easing],[callback])運行自定義動畫
7、Ajax的控制
$.ajax(options) | jQuery.ajax(options)通過HTTP通信讀入頁面
$("p").load(url,data,callback)讀入HTML文件後插入到元素中
$("p").ajaxComplete(callback)ajax通信完成後執行的函數
$("p").ajaxError(callback)設置ajax通信失敗後執行的函數
$("p").ajaxSuccess(callback)設置ajax通信成功後執行的函數
$("form").serialize()系列化獲取元素值
實例：
<%@ page language="java" contentType="text/html; charset=UTF-8" %> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <link type="text/css" rel="stylesheet" href="css/index.css" /> <script type="text/javascript" src="js/jquery-1.12.3.min.js"></script> <title>Insert title here</title> <script type="text/javascript"> $(document).ready(function() { // =================選擇器 // 1, id選擇器 // var a = $("#container").html("天不錯"); // 2, class選擇器, 返回的對象是一個數組 // var b = $(".dd").eq(2).html("哈哈哈"); // 3, element選擇器, 返回的也是一個數組 /* var a = $("p"); for(var p in a) { console.log(p+"======="+a[p]); } */ // =====================屬性 // 設置屬性 /* $("#container1").attr({cc:"dd"}); // 獲取屬性 console.log($("#container1").attr("cc")); // 移除屬性 $("#container1").removeAttr("cc"); console.log("==="+$("#container1").attr("cc")); */ // ===================文檔處理 // append方法, 追加一部分內容 // $("#container1").append(", 今天晚上吃點啥 ?"); // appendTo, 追加到所有的對象中 // $("#container").appendTo(".dd"); // replaceWith(後面換前面), 移動之後來替換, 不是復制!!! // $("#container").replaceWith($(".dd").eq(1)); // replaceAll(前面換後面) // $("#container").replaceAll(".dd"); // 將某個元素置空 // $("#container").empty(); // 將某個元素移除 //$("#container").remove(); // ==================CSS // 以字符串的形式返回這個css屬性的值 // var t = $("#container").css("border"); // 設置一個css樣式 // $("#container").css({"color":"pink","font-family":"楷體"}); // =====================事件 /* $(".dd[aa=‘bb‘]").click(function() { $("#container").toggle(5000); }); */ // ===========================ajax // $.get(請求的地址,需要傳遞的參數,回調函數,返回的數據類型); // $.post(請求的地址,需要傳遞的參數,回調函數,返回的數據類型); /* $.ajax({ async:true,// 默認是true url:"", data:"", dataType:"", type:"", success:function(data) {}, error:function() {} }); */ }); </script> </head> <body> <div style="width:100px;color:red;border:1px red solid;" id="container">你好</div> <div class="dd" aa="bb">111</div> <div class="dd">222</div> <div class="dd">333</div> </body> </html>
jquery 常用方法 集錦