jquery基礎用法總結
一、初始化
$(document).ready(function(){});
$(function(){});
$().ready(function(){});
- js的window.onload事件是等到所有內容,以及我們的外部圖片之類的檔案載入完了之後,才回去執行
只執行一次。 - jQuery的入口函式 是在 html所有標籤都載入之後,就回去執行。寫幾次執行幾次。
js建立物件:
var obj = {}; //1
var obj1 = new Object(); //2
var obj2 = Object.create(); //3
1跟2的區別:
推薦使用第一個方式
第二種方式存在效率問題,因為要new物件,會涉及到原型查詢的問題。
二、選擇器
基本選擇器
符號 | 說明 | 用法 |
---|---|---|
$(“#demo”) | 選擇id為demo的第一個元素 | $(“#demo”).css(“background”,”red”) |
$(“.liItem”) | 選擇所有類名(樣式名)為liItem的元素 | $(“.liItem”). css(“background”,”red”); |
$(“div”) | 選擇所有標籤名字為div的元素 | $(“div”). css(“background”,”red”); |
$(“*”) | 選擇所有元素 | 少用或配合其他選擇器來使用 $(“*”). css(“background”,”red”) |
$(“.liItem,div”) | 選擇多個指定的元素,這個地方是選擇出了 .liItem元素和div元素 | $(“.liItem,div”). css(“background”,”red”) |
層級選擇器
符號 | 說明 | 用法 |
---|---|---|
空格 | 選擇所有的後代元素 | $(“div span”). css(“background”,”red”); |
> | 子代選擇器選擇所有的子代元素 | $(“div > span”). css(“background”,”red”) |
+ | 緊鄰選擇器 | 選擇緊挨著的下一個元素 $(“div + p”). css(“background”,”red”) |
~ | 兄弟選擇器 | 選擇後面的所有的兄弟元素 |
基本過濾選擇器
符號 | 說明 | 用法 |
---|---|---|
:eq(index) | index是從0開始的一個數字,選擇序號為index的元素。選擇第一個匹配的元素。 | $(“li:eq(1)”). css(“background”,”red”) |
:gt(index) | Index 是從0開始的一個數字,選擇序號大於index的元素 | $(“li:gt(2)”). css(“background”,”red”) |
:lt(index) | Index是從0開始的一個數字,選擇小於index 的元素 | $(“li:lt(2)”). css(“background”,”red”) |
:odd | 選擇所有序號為奇數行的元素 | $(“li:odd”). css(“background”,”red”) |
:even | 選擇所有序號為偶數的元素\ | $(“li:even”). css(“background”,”red”) |
:first | 選擇匹配第一個元素 | $(“li:first”). css(“background”,”red”) |
:last | 選擇匹配的最後一個元素 | $(“li:last”). css(“background”,”red”) |
:contains(text) | 選擇所有包含指定文字的元素 | |
:empty() | 選擇所有沒有子元素的元素(包括文字) | |
:has(selector) | 選擇元素其中至少包含指定選擇器匹配的一種元素 | |
:hidden | 所有隱藏元素 | |
:visible | 所有課件元素 |
屬性選擇器
符號 | 說明 | 用法 |
---|---|---|
$(“a[href]”) | 選擇所有包含href屬性的元素 | $(“a[href]”). css(“background”,”red”) |
$(“a[href=’itcast’]”) | 選擇href屬性值為itcast的所有a標籤 | $(“a[href=’itcast’]”). css(“background”,”red”) |
$(“a[href!=’baidu’]”) | 選擇所有href屬性不等baidu的所有元素,包括沒有href的元素 | $(“a[href!=’baidu’]”). css(“background”,”red”) |
$(“a[href^=’web’]”) | 選擇所有以web開頭的元素 | $(“a[href^=’web’]”). css(“background”,”red”) |
$(“a[href$=’cn’]”) | 選擇所有以cn結尾的元素 | $(“a[href$=’cn’]”). css(“background”,”red”) |
$(“a[href*=’i’]”) | 選擇所有包含i這個字元的元素,可以是中英文 | $(“a[href*=’i’]”). css(“background”,”red”) |
$(“a[href][title=’我’]”) | 選擇所有符合指定屬性規則的元素,都符合才會被選中。 | $(“a[href][title=’我’]”). css(“background”,”red”) |
input的型別選擇器
$(“:radio”) $(“:text”) $(“:button”)
$(this)[hasHighlight ? “removeClass” : “addClass”](“highlight”)
mouseover/mouseout事件,滑鼠經過的時候會觸發多次,每遇到一個子元素就會觸發一次。
mouseenter/mouseleave事件,滑鼠經過的時候只會觸發一次
jQuery物件轉換成DOM物件:
方式一:$(“#btn”)[0]
方式二:$(“#btn”).get(0)
DOM物件轉換成jQuery物件:
var btn = document.getElementById(“btn”);
var jquery_btn = $(btn);
jquery獲取innerHTML $(“#id”).html()
jQuery的庫衝突問題
通過呼叫jQuery.noConflict(); 將$控制權轉移給其他庫。
三、DOM
(一)節點
1.查詢節點 屬性:$p.attr(“title”) 元素:$(“ul li:eq(1)”).text()
2.建立節點 元素(li):文字(草莓):屬性(草莓):$("ul").append($("<li tittle=’草莓’>草莓</li>"))
3.插入節點
append() 正常加 appendTo()邏輯反的,往裡面加 prepend() prependTo()
after() insertAfter() 前正常,後邏輯反。 before() insertBefore()
4.刪除節點
(1)remove var $li = $(“ul li:eq(1)”).remove();
刪除後,得到刪除節點的引用,還可以操作新增給其他節點。也可以直接通過append等轉移節點,可以達到刪除效果。
$(“ul li:eq(1)”).remove(“li[title!=草莓]”);
傳入選擇器選擇
(2)$(“ul li:eq(1)”).empty();
刪除內容 li還在
5.複製節點
$("ul li:eq(1)").clone().appendTo("ul");
傳入true,克隆節點事件。
6.替換節點
replaceWith() replaceAll() 前正常,後邏輯反。
7.包裹節點
wrap() 後包裹前 每個符合情況單獨包裹
wrapAll() 符合元素的所有全部包裹一次
wrapInner() 包裹內容
(二)屬性
1.獲取:$(“ul”).attr(“title”)
設定:$(“ul”).attr(“title”,”your title”) $(“ul”).attr({“title”:”your title”,”color”:”red”});
html() val() text() height() width() css()
2.刪除:$(“ul”).removeAttr(“title”)
(三)樣式
1.獲取:$(“ul”).attr(“class”)
設定:$(“ul”).attr(“class”,”high”)
2.追加:$(“ul”).addClass(“class”)
追加同一屬性會覆蓋 第一次呼叫與attr相同
3.移除:removeClass()
不傳引數刪除所有class屬性,傳引數刪除引數
4.切換:$(“ul”).toggleClass(“class”)
5.$(“ul”).hasClass(“class”)
相當於 (“ul”).is(“.another”)
(四)HTML 文字 值
1.html() innerHTML 不能用於XML
2.text() innerText XML XHTML都有效 FireFox 不能用innerText 但是可用text()
3.val() 讀寫 下拉選擇 $("select").val("22");
$("select").val(["22",”33”]);
(五)遍歷節點
1.children()
2.next() 後面的同輩節點 prev()
3.siblings() 元素前後所有同輩節點
4.closest() 找最近的匹配元素,不匹配逐級向上查詢。
5.find() filter() nextAll() prevAll() parent() parents()
(六)CSS DOM
1.$(“li”).css(“color”) $(“li”).css(“color”,”red”) $(“li”).css({“color”:”red”,”tittle”:”title content”})
直接寫數字預設轉畫素
$(“li”).width() $(“li”).width(“400px”) $(“li”).width(400) $(“li”).width(“400em”)
- offset() 獲取元素的offset物件,該物件有left和top元素,左偏移和右偏移。
- position() 獲取元素相對於最近的一個position樣式屬性為relative absolute的祖父節點的相對偏移。
4.scrollTop() scrollLeft() 距頂端 距左端 的距離 傳入值可設定滾動位置
四、事件和動畫
1.事件
(一)事件繫結
1.$li.click(function(){})
2.$li.bind(“click”,function(){})
(二)合成事件
1.$li.hover(fn1, fn2)
相當於mouseLeave mouseEnter
2.$li.toggle(fn1,fn2)
模擬滑鼠連續單擊
(三)事件冒泡
1.event.stopPropagation() event.preventDefault()
簡寫:return false; jquery不支援事件捕獲
2.event.type()
3.event.target()
4.event.relatedTarget()
5.event.pageX() event.pageY() 滑鼠點選座標
6.event.which() 獲取滑鼠左中右鍵 1左,2中,3右
7.event.metaKey() 按鍵
8.originalEvent() 指向原始事件物件
9.$li.one(“click”,function(){})
相當於bind 只有效一次,之後點選無作用
(四)移除事件
1.$btn.unbind(“click”);
沒有引數,刪除所有繫結時間,函式作為第二個引數,只刪除事件事件處理函式。只有一個引數,傳入一個型別,只刪除一個事件繫結。
(五)模擬操作
1.$li.trigger(“click”) $li.click()
2.觸發自定義事件 $li.bind(“myClick”,function(){}) $li.trigger(“myClick”)
3.傳遞資料 $li.bind(“myClick”,function(event,message1,message2){}) $li.trigger(“myClick”,[“引數一”,”引數二”])
4.執行預設操作
$(“input”).trigger(“focus”)
不僅會觸發focus繫結的事件,也會使input本身繫結事件
$(“input”).triggerHandler(“focus”)
不觸發瀏覽器預設操作,觸發focus事件
(六)其他用法
1.繫結多個事件型別
$li.bind(“mouseover mouseout”,function(){})
2.名稱空間
$li1.bind(“click.plugin”,function(){})
$li2.bind(“mouseover.plugin”,function(){})
$li3.unbind(“.plugin”) 整體解除繫結
3.相同控制元件 不同名稱空間的相同事件
$li1.bind(“click”,function(){});
$li1.bind(“click.plugin”,function(){});
$li2.bind(“click”,function(){
$li1.trigger(“click!”);
});
2.jQuery中的動畫
1.show () hide() 引數 slow 600ms normal 400ms fast 200ms 傳入數字預設為ms 同時變高度 寬度 不透明度
2.fadeIn() fadeOut() 不透明度
3.slideUp() slideDown() slow 600ms normal 400ms fast 200ms
4.自定義動畫
$li.animate({left:”500px”},3000);
scrollTop
5.累加、累減動畫
$li.animate({left:”+=500px”},3000);
6.多重動畫 綜合動畫
$li.animate({left:”500px”,height:”200px”},3000); //同時執行多個動畫
$li.animate({left:”500px”},3000)
.animate({height:”200px”},3000); //按順序執行多個動畫
7.停止動畫和判斷是否處於動畫狀態
stop([clearQueue][,gotoEnd])
$li.stop(true,true)
$li.is(“:animated”)
8.toggle() slideToggle() fadeIn(600,0.2)
9
.$li.animate({opacity:”show”},400) ; //相當於:$li.show(400) $li.fadeIn(400)
$li.animate({height:”show”},400) ; // 相當於:$li.slideDown(400)
$li.animate({opacity:”0.6”},400) ; // 相當於:$li.fadeTo(400,0.6)
10.$("#comment").animate({height: "+=50"}, 1000);
11.$comment.is(":animated") 判斷處於動畫狀態 返回布林值
例子:
$('tbody>tr').click(function(){
$(this).addClass("highlight")
.siblings().removeClass("highlight").end()
.find(':radio').attr("checked",true);
});
//$(':radio:checked').parent().parent().addClass("highlight");
//$(':radio:checked').parents('tr').addClass("highlight");
$('tbody>tr:has(":checked")').addClass("highlight");
$('th[class="h"]').click(function(){
$(this).parent().siblings('.child_' + $(this).parent()[0].id).toggle(); //點選自動執行與取消
});
動態篩選
$("#filterName").keyup(function(){
$("table tbody tr").hide().filter(":contains("+ $(this).val() +")").show();
}).keyup();
$('#cssfile').attr("href", "css/" + this.id + ".css"); //jQuery
$('#cssfile')[0].href = ("css/" + this.id + ".css"); //js
var hasHighlight = $(this).hasClass('highlight');
$(this)[hasHighlight ? "removeClass" : "addClass"]("highlight")
.find(':checkbox').attr("checked", !hasHighlight);
$('tbody>tr:has(":checked")').addClass("highlight");
var index = $('div.tab_menu>ul>li').index(this); //傳入js物件