jQuery中常用的選擇器及常用的方法
window:視窗
常用屬性:
獲取其他的四個物件
window.location....
常用方法:
訊息框
alert confirm prompt
定時器
setInterval 週期
setTimeout 延遲
開啟關閉
open close
location:定位
location.href:設定或者獲取url
history:歷史
go()
DOM(文件物件模型)
就是我們的html程式碼載入到記憶體中會形成一棵document樹
節點:
文件節點 document
元素節點 element
屬性節點 attribute
文字節點 text
獲取一個元素節點:通過document獲取
四個
操作元素的屬性
dom物件.屬性
操作元素的標籤體
dom物件.innerHTML
以前通過js獲取物件的時候
var obj=document.getElementById("id");
funtion getId(id){
return document.getElementById("id");
}
$("選擇器")===>獲取元素
jquery和html的整合
jquery是單獨的js檔案
通過script標籤的src屬性匯入即可
獲取一個jquery物件
$("選擇器") 或者 jQuery("選擇器")
dom物件和jquery物件之間的轉換
dom物件===>jquery物件
$(dom物件)
jquery物件===>dom物件
方式1:
jquery物件[index]
方式2:
jquery物件.get(index)
頁面載入:
js:
window.onload=function(){}//在一個頁面中只能使用一次
jquery 在一個頁面中可以使用多次
方式1:
$(function(){...})
方式2:
$(document).ready(function(){});
派發事件:
$("選擇器").click(function(){...});
等價於 原生js中
dom物件.onclick=function(){....}
掌握事件:
focus
blur
觸發每一個匹配元素的blur事件。
這個函式會呼叫執行繫結到blur事件的所有函式，包括瀏覽器的預設行為。可以通過返回false來防止觸發瀏覽器的預設行為。blur事件會在元素失去焦點的時候觸發，既可以是滑鼠行為，也可以是按tab鍵離開的
change
click
jquery中效果:
隱藏或展示
show(毫秒數) hide(毫秒數)
滑入或滑出
slideDown(毫秒數):向下滑入
slideUp(毫秒數):向上滑出
淡入或淡出
fadeIn(int):淡入
fadeOut(int):淡出
選擇器總結:
基本選擇器★
$("#id值") $(".class值") $("標籤名")
瞭解:$("*")
理解:獲取多個選擇器 用逗號隔開
$("#id值,.class值")
層次選擇器 ★
a b:a的所有b後代
a>b:a的所有b孩子
a+b:a的下一個兄弟(大弟弟)
a~b:a的所有弟弟
基本過濾選擇器:★
:frist 第一個
:last 最後一個
:odd 索引奇數
:even 索引偶數
:eq(index) 指定索引
:gt(index) >
:lt(index) <
內容過濾:
:has("選擇器"):包含指定選擇器的元素
可見過濾:
:hidden 在頁面不展示元素 一般指 input type="hidden" 和 樣式中display:none
:visible
屬性過濾器:★
[屬性名]
[屬性名="值"]
表單過濾:
:input 所有的表單子標籤 input select textarea button
//input
屬性和css操作總結:
對屬性的操作:
attr():設定或者獲取元素的屬性
方式1:獲取
attr("屬性名稱")
方式2:設定一個屬性
attr("屬性名稱","值");
方式3:設定多個屬性 json
attr({
"屬性1":"值1",
"屬性2":"值2"
})
removeAttr("屬性名稱"):移除指定屬性
//新增class屬性的時候
//attr("class","值");
addClass("指定的樣式值"); 相當於 attr("class","指定的樣式值");
removeClass("指定的樣式值");
對css操作:操作元素的style屬性
css():獲取或者設定css樣式
方式1:獲取
css("屬性名")
方式2:設定一個屬性
css("屬性名","值")
方式3:設定多個
css({
"屬性1":"值1",
"屬性2":"值2"
});
獲取元素的尺寸:
width()
height()
設定或者獲取value屬性
jquery物件.val():獲取
jquery物件.val("...."):設定
建立一個元素: $("<標籤></標籤>")
文件操作:
內部插入
a.append(c):將c插入到a的內部(標籤體)後面
a.prepend(c):將c插入到a的內部的前面
appendTo
prependTo
外部插入
a.after(c):將c放到a的後面
a.before(c):將c放到a的前面
a.insertAfter(c)
a.insertBefore(c)
刪除
empty() 清空元素
remove() 刪除元素