選擇器css
#id element classnamehtml
$(「#id」) = $(document.getElementById(「id」)node
對於多個classname, 要找到某一個,如jquery
<style>app
.abc {background-color: #0000FF}ide
</style>函數
<div class=」abc」>hello</div>測試
<div class=」abc」>hello</div>動畫
<div class=」abc」>hello</div>this
使用
<script>
$(function(){
$($(".abc").get(1)).css('background-color','green')
})
</script>
能夠找到第二個並把它底色改變
$(".abc").get(1) 是找到第二個class爲abc的html element,外層加個$()把它變成jquery的對象,而後就能使用css功能了($(「.abc).get(1) = $(「.abc」)[1] )
也可使用 $(「.abc」).eq(1).css()
$(「」).size() $(「」).length
羣組選擇器
$(「span,p,div」)
後代選擇器
$(「div p」) 或 $(「div」).find(「p」)
子選擇器
$(「div > p」) 或 $(「div」).children(「p」)
通配選擇器
$(「*」) 通常不在全局用,浪費資源,而是在某個標籤下再使用如 $(「div *」)
標籤和classname能夠一塊兒使用精肯定位,如:
<div class=’abc’>hello</div> $(「div.abc」)
屬性選擇器
<a title=’num1’>num1</a>
<a title=’num2’> num2 </a>
<a>num3</a>
使用$(「a[titile]」) 能夠找到前兩個,使用$(「a[titile=num1]」) 會找到第一個
過濾選擇器
:first(或.first()) :last(或.last()) :not() (或.not() ) :even :odd :eq() :gt() :lt() :header :focus :animated
內容過濾器
:contains(「text」) 包含文本 text的元素
:empty 不包含文本或子元素的元素
:has(selector) 含有子元素selector的元素
要區別 hasClass(classname) 和 .has(expr|ele)
:parent 包含文本或子元素的元素 ――注意它與.parent()不一樣,它返回當前元素的父元素(parents() parentsUntil())
可見性過濾器
:hidden :visible
$(「:hidden」) 找到全部隱藏的元素
$(「div:hidden」) 找到DIV下全部隱藏的元素
篩選
filter() 篩選出與指定表達式匹配的元素集合。用於縮小匹配的範圍。用逗號分隔多個表達式,如:
<li>列表1</li>
<li>列表3</li>
<li>列表2</li>
<li>列表7</li>
<li>列表4</li>
<li>列表5</li>
<li>列表6</li>
$(function(){
$("li").filter('.abc,:first').css('background','red');
}) 它會將第一個li 和加了class 爲 abc的元素加紅底
$(function(){
$("li").filter('.abc’).filter(‘:first').css('background','red');
}) 它會將li中的加了class 爲 abc且爲第一個的元素加紅底
基礎DOM操做
獲取與設置元素內容
html()獲取html 內容 text()獲取文本內容 val()獲取表單中的value值
若是()中有值,就會設置其內容
<ul><li>列表1</li><li>列表2</li></ul>
<input type="button" value="提交"/>
$(「ul」).html() 會獲取 <li>列表1</li><li>列表2</li>
$(「ul」).text() 會獲取 列表1列表2
$(「input」).val() 會獲取提交
$("ul").html('<li>列表3</li><li>列表4</li>'); 會把本來ul包含的內容改成
<ul><li>列表3</li><li>列表4</li></ul>
$("ul").text('列表5列表6'); 把本來ul包含的內容改成
<ul>列表5列表6</ul>
$("input").val('測試');會把原來的input改成
<input type="button" value="測試"/>
元素屬性操做
attr(key) attr(key,value) attr({key1:value1,key2:value2,…})
attr(key,function(index,value){}) value可使用函數來獲得
removeAttr(key)
CSS操做
$().css() 如:
$(「div」).css(‘color’) 能夠獲得 color值
$("div").css({‘color’:'red',’height’:100,’width’:200}) 能夠設置div的css的屬性
還可使用函數,如:
$(「div」).css({ ‘color’:function(){},’height’:function(){},.. } )
$().addClass() 能夠增長class
$().removeClasss() 刪除
$().toggleClass() class之間的切換
例:$('div').click(function(){
$(this).toggleClass(funtion(){
if($(this).hasClass('red')){
$(this).removeClass('red');
return 'green';
}else{
$(this).removeClass('gree');
return 'red';
}
});}
width() height() innerHeight() innerWidth()outerHeight() outerWidth()
$(window).width() 能夠獲得窗口的寬度 $(document).width()
$("div").width(400) 能夠設置div的寬度爲400px
也可使用函數 width(function(index,width){})
offset() position() scrollTop() scrollLeft()
$('div:first').offset().top 獲得第一個div的top值
$('div:first').offset({top:100,left:8}) 設置第一個div的top left值
DOM操做
1.建立節點
var box = $(「<div id=’div1’>插入節點</div>」)
2.插入節點
內部插入
$(「div」).append(box)
append(content|function(){}) 能夠直接插入內容也能夠是函數
appendTo(content)
prepend(content|function(){})
prependTo(content)
外部插入
after(content|function(){})
befor(content|function(){})
insertafter() insertbefor()
3.包裹
wrap(html) wrap(element) wrap(function(){})
unwrap()
wrapAll(html) wrap(element)
wrapInner(html) wrapInner(element) wrapInner(function(){})
4.複製節點clone(true)
若是不加true,只複製元素和內容,若是加true,則元素附帶的事件處理行爲也複製
5.刪除節點remove() detach()
remove刪除後不保留事件行爲,detach保留
6.清空節點 empty()
7.替換節點 replaceWith() replaceAll()
$('div').replaceWith('<span>node</span>'); 將DIV替換成span
$('<span>node</span>').replaceAll('div'); 同上
表單選擇器
常規選擇器
$(‘input [name=’b2’]’).val()
表單選擇器
:input 選取全部input textarea,select和button元素
:text 選取全部單行框,即 type=text
:password 選取全部密碼框
:radio 選取全部單選框
:checkbox 選取全部複選框
:submit :reset :p_w_picpath :button :file :hidden
表單過濾器
:enable 選取全部可用元素
:disable 選取全部不可用元素
:checked 選取全部被選中的元素,單選和複選字段
:selected 選取全部被選中的元素,下拉列表
事件
click dbclick mousedown mouseupmousemove mouseover mouseout change select submit keydownkeypress keyup blur focus loadresize scroll error
綁定事件
bind(type,[data],fn)
bind(‘type1 type2’,fn)
bind({
‘type1’:function(){},
’type2’:function(){}
})
刪除綁定事件
unbind() 刪除所有事件
unbind(‘type1’) 刪除type1事件,若是有多個事件
unbind(‘type1’,fn) 刪除事件type1綁定的函數fn
簡寫事件綁定方法
click(fn) dblclick(fn) mousedown()mouseup() mouseover() mouseout() mousemove()mouseenter() mouseleave() keydown() keyup() keypress() unload() resize() scroll() focus() blur() focusin() focusout() select() (文本選定) change() (值改變) submit()
mouseover() mouseenter() 若是有子元素,over 也會觸發事件,enter不會
mouseout() mouseleaver() 同上
keydown() keyup() 返回的是鍵碼keyCode,keypress()返回的是字符編碼charCode
focus() blur() 事件觸發時機是當前元素
focusin() focusout() 事件觸發時機能夠是子元素
複合事件
ready(fn) 當DOM加載完畢觸發
hover([fn1,]fn2) 鼠標移入稱出的複合事件 mouserenter() mouseleave()
事件對象
對象的屬性
type 事件類型
target 返回觸發綁定事件的DOM元素
currentTarget 返回監聽綁定事件的DOM,至關於this
若是事件綁定在父元素上,currentTarget是返回父元素,而target有可能返回子元素
relatedTarget 返回移入移出目標點離開或進入的那個DOM元素
data 返回綁定事件的額外數據
pageX/pageY 相對於頁面原點
screenX/screenY 相對於顯示器屏幕位置
clientX/clientY 相對於頁面視口
result
timestamp
which 若是是鼠標點擊,返回鼠標的左中右鍵(1,2,3),若是是鍵盤,返回鍵盤按鍵
altKey/shiftKey/ctrlKey/metaKey 獲取是否按下了alt shift ctrl meta鍵
冒泡和默認行爲
阻止冒泡,在函數里加上e.stopPropagation();
阻止默認行爲 e.preventDefault();
$('form').submit(function(e){e.preventDefault():}) 阻止表單提交
若是同時阻止冒泡和默認行爲,只須要函數返回false就行
$('a').click(function(e){return false;})
動畫效果
顯示 show() 隱藏 hide()
show(1000) 1000毫秒 1秒內慢慢變小變透明直到消失
還有show(‘slow’|’normal’|’fast’) 600毫秒 400毫秒 200毫秒
還能夠加入函數作參數
show(‘slow’,function(){}) 實現列隊動畫效果,逐個顯示,例:
<style>
.test{
padding:5px;
margin-right:5px;
background:orange;
float:left;
}
</style>
<div>人</div>
<div>生</div>
<div>苦</div>
<div>短</div>
<div>,</div>
<div>快</div>
<div>學</div>
<div>PYTHON</div>
<input type="button" value = "顯示"/>
<input type="button" value = "隱藏"/>
$((function){
$('.show').click(function(){
$('.test').first().show('fast',function testshow(){
$(this).next().show('fast',testshow);
});
});
$('.hide').click(function(){
$('.test').last().hide('fast',function testshow(){
$(this).prev().hide('fast',testshow);
});
});
})
若是隻用一個按鈕來控制顯示和隱藏,使用 toggle()
<p id="toggle-test">PYTHON</p>
<input type="button" value = "切換"/>
$('.toggle').click(function(){
$('#toggle-test').toggle('slow')
})
滑動、捲動
slideUp() slideDown() slideToggle()
淡入、淡出
fadeIn() fadeOut() fadeToggle()