JQuery(一)
JQuery的精髓 鏈式操作、循環操作等
DOMContentLoaded 與 $.ready() 幾乎相等
window.onLoad 最後
Jquery 選擇元素的方法
- .get() 填元素索引 取出的是已選中 的所有元素中的該元素 並 且爲原生
* .eq() 與*get()*不同的是 如果沒有傳入返回空 並且返回的是jQuery 對象
* .find() 在原對象基礎上 查找對象 可傳入任意選擇器
* .filter() 用於過濾 不能往下查找 字符串可以填 even odd function(index,ele){}
* .not() 與 filter() 相反
* .is() 返回 bool 調用者是否有某元素
* .has() 篩選 裏面有什麼的元素
get() 與 eq()相比使用頻率更低 因爲獲取到的是原生對象
.add() 集中操作 .end()回退操作
複習一個原生知識點
//可以將類數組變爲數組
Array.prototype.slice()
[].slice.call()
prveObject
所有JQuery對象都會帶有這個屬性裏面藏着該對象的上一級 是JQuery 鏈式操作實現的本原所在
JQuery DOM操作
.css()
可以取css值 也可以設置css值
設置時可以填入
css(‘width’,100)
也可以
css({width:100,height:100})
由於取值聯想到了之前的獲取style樣式的一個公共方法
function getStyle(dom,attr){
//用於兼容IE
if(dom.currentStyle){
return dom.currentStyle[attr];
}else{
//此處getComputedStyle(,null)第二個參數來填寫僞類元素
return window.getComputedStyle(dom,null)[attr];
}
}
.attr()
基於 原生js中的 setAttribute 和 getAttribute
用於取得元素中的屬性值和設置值
取值： $(’.wrapper’).attr(‘class’);
設值: $(’.wrapper’).attr(‘class’,‘abc’);
但是 attr 取到的部分特性值 非真實的
如: selected checked disabled等值時
所以需要使用 prop()
prop()
用於取得特性值和設置
val()
用於取得form表單中的value值十分方便
也可以傳入function進行賦值
function(index,oldValue){
return newValue
}
需要注意的是 在使用prop() 或 val() 改變input value時 行內元素上顯示的value不會變化 但是實際真實value值已改變無傷大雅
*attr* 用於設置或取得屬性值 *prop* 用於設置或取得特性值 *val* 用於設置或取得表單value值
另外還有兩個不常用的方法
serialize() 獲取form表單中的全部值 json格式
serializeArray() 獲取表單中的全部值數組形式
html()
原理更接近 innerHtml
會取得元素的值字符串形式
如果調用方法的是一組元素則會返回該元素的第一個元素的html值
但是在賦值時
卻會全部都賦值
也可以傳入一個function來賦值
例如：
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<script>
//set value
$('ul li').html('9')
// result
// <ul>
// <li>9</li>
// <li>9</li>
// <li>9</li>
// <li>9</li>
// <li>9</li>
// </ul>
//read value
$('ul li').html()
//return '1'
//Because it returns only the first value
// And you can pass in a function
// For example
$('ul li').html(function(index,ele){
return index == 2 ? 'I modified it here' : ele
//if you return ele then value will not change
})
//result
// <ul>
// <li>9</li>
// <li>9</li>
// <li>I modified it here</li>
// <li>9</li>
// <li>9</li>
// </ul>
</script>
text()
與html()相似不過取出的是文本值
也可以傳入function 進行值的更改
但設值時 即使寫 HTML標籤也依舊會被當做字符串來處理
size()
獲取對象的長度實際與*.length* 並無差異
在複習刪除類名等方法之前先複習
HTML5 API classList
在老IE不支持
可以注意的是該api的四個方法
.add() 用於添加類名 一次只能添加一個
.remove() 用於刪除類名 如果不傳參則無效 傳入錯誤類名則報錯
.contains() 判斷是否有此類名
.toggle() 如果有該類名則刪除 沒有則添加
JQuery 類名操作
addClass() 可以直接在其中傳入多個類名,中間用空格隔開如"aaa bbb ccc" 也可直接傳入function(index,ele)
removeClass() 刪除指定的class 如果不傳入參數則刪除該元素所有類名
DOM增刪改查操作
next()
獲取該元素的下一個兄弟元素
可以傳入過濾條件 標籤選擇器 odd even
prev() 獲取該元素的上一個兄弟元素
nextAll() 獲取該元素的所有下面的兄弟元素 可以傳入過濾條件 標籤選擇器 odd even
prevAll()
nextUntil(‘h1’,‘p’)
傳入條件:
1. 到某某爲止前的所有兄弟元素
2.到某某爲止前的所有兄弟元素中符合第二個條件的元素
prevUntil()
siblings()
獲取所有的兄弟節點 可傳入篩選條件
parent()
查找上一級元素 可填入過濾元素
parents()
查找上級元素如果不傳參 則獲取所有上級 可以傳入過濾節點
closest()
離你最近的滿足條件的父級 從自己開始找 而 parents 忽略自身,如果不傳參則什麼都沒有
offsetParent()
獲取最近的定位元素 符合條件的父級
slice()
截取元素 包含左邊不包含右邊 1,6 則爲截取第1位-第5位
JQuery對象纔會發生位置改變
insertBefore()
把調用的元素放到傳入 的元素前
before()
把傳入的元素放到調用的元素前 只能傳入JQuery 對象
insertAfter()
把調用的元素放到傳入 的元素後
after()
把傳入的元素放到調用的元素後 只能傳入JQuery 對象
appendTo()
把調用的元素添加到傳入的元素裏 的最後面
append()
把傳入的元素添加到調用的元素裏 的最後面
prepend()
把傳入的元素添加到調用的元素裏 的最前面
prependTo()
把調用的元素添加到傳入的元素裏 的最前面
remove()
剪切元素後事件也會清空
detach()
剪切元素後事件不會清空
$("<div></div>")
// 可以直接填入標籤以創建元素
- wrap()
在該元素的外部包裹一層元素
可以直接傳入字符串html
模板$('.demo').wrap('<div></div>')
也可以傳入 原生dom 對象
或者JQuery對象在處理循環操作時還可以傳入function()
wrapInner() 給元素的裏面的元素包裹上一層元素
wrapAll() 給所選所有元素添加一個父級元素
unwrap() 刪除選中的元素的父級 最多刪到父級爲body時不再刪除