1瀑踢、html() 取出或設(shè)置html內(nèi)容
// 取出html內(nèi)容
var $htm = $('#div1').html();
// 設(shè)置html內(nèi)容
$('#div1').html('<span>添加文字</span>');
2凝果、text() 取出或設(shè)置text內(nèi)容
// 取出文本內(nèi)容
var $htm = $('#div1').text();
// 設(shè)置文本內(nèi)容
$('#div1').text('<span>添加文字</span>');
3缘圈、attr() 取出或設(shè)置某個屬性的值
// 取出圖片的地址
var $src = $('#img1').attr('src');
// 設(shè)置圖片的地址和alt屬性
$('#img1').attr({ src: "test.jpg", alt: "Test Image" });
jquery特殊效果
fadeIn() 淡入
$btn.click(function(){
$('#div1').fadeIn(1000,'swing',function(){
alert('done!');
});
});
fadeOut() 淡出
fadeToggle() 切換淡入淡出
hide() 隱藏元素
show() 顯示元素
toggle() 依次展示或隱藏某個元素
slideDown() 向下展開
slideUp() 向上卷起
slideToggle() 依次展開或卷起某個元素
例:
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(function(){
$('#btn').click(function(){
// $('.box').fadeOut();//淡出
// $('.box').fadeIn();//淡入
// $('.box').fadeToggle();//切換淡入淡出
// $('.box').toggle();//切換顯示隱藏
$('.box').slideToggle();//切換上收和下展
})
})
</script>
jQuery動畫
通過animate方法可以設(shè)置元素某屬性值上的動畫靴拱，可以設(shè)置一個或多個屬性值国觉，動畫執(zhí)行完成后會執(zhí)行一個函數(shù)。
參數(shù)：
1又憨、什么屬性做動畫翠霍，屬性設(shè)置{param1: value1, param2: value2}
2、動畫執(zhí)行的時間蠢莺，單位毫秒
3寒匙、動畫曲線：
swing（默認值）開始和結(jié)束慢，中間快
linear勻速
可省略不寫
4躏将、回調(diào)函數(shù)锄弱，動畫完成之后要做的事情，可無限嵌套
$('#div1').animate({
width:300,
height:300
},1000,swing,function(){
alert('done!');
});
參數(shù)可以寫成數(shù)字表達式：
$('#div1').animate({
width:'+=100',
height:300
},1000,swing,function(){
alert('done!');
});
jQuery循環(huán)
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(function(){
// //給全部的li設(shè)置內(nèi)容和樣式
// $('.list li').html('111');
// $('.list li').css({background:'gold'});
//第一個參數(shù)index是索引值
$('.list li').each(function(index) {
// alert(index);//彈出索引值
//$(this)是每一個li
$(this).html(index);
});
})
</script>
</head>
<body>
<ul class="list">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
尺寸相關(guān)祸憋、滾動事件
1会宪、獲取和設(shè)置元素的尺寸
width()、height() 獲取元素width和height
innerWidth()蚯窥、innerHeight() 包括padding的width和height
outerWidth()掸鹅、outerHeight() 包括padding和border的width和height
outerWidth(true)、outerHeight(true) 包括padding和border以及margin的width和height
2拦赠、獲取元素相對頁面的絕對位置
offse()
3巍沙、獲取可視區(qū)高度
$(window).height();
4、獲取頁面高度
$(document).height();
5荷鼠、獲取頁面滾動距離
$(document).scrollTop();
$(document).scrollLeft();
6句携、頁面滾動事件
$(window).scroll(function(){
......
})
jquery事件
事件函數(shù)列表：
blur() 元素失去焦點
focus() 元素獲得焦點
change() 表單元素的值發(fā)生變化
click() 鼠標單擊
dblclick() 鼠標雙擊
mouseover() 鼠標進入（進入子元素也觸發(fā)）
mouseout() 鼠標離開（離開子元素也觸發(fā)）
mouseenter() 鼠標進入（進入子元素不觸發(fā)）
mouseleave() 鼠標離開（離開子元素不觸發(fā)）
hover() 同時為mouseenter和mouseleave事件指定處理函數(shù)
mouseup() 松開鼠標
mousedown() 按下鼠標
mousemove() 鼠標在元素內(nèi)部移動
keydown() 按下鍵盤
keypress() 按下鍵盤
keyup() 松開鍵盤
load() 元素加載完畢
ready() DOM加載完成
resize() 瀏覽器窗口的大小發(fā)生改變
scroll() 滾動條的位置發(fā)生變化
select() 用戶選中文本框中的內(nèi)容
submit() 用戶遞交表單
toggle() 根據(jù)鼠標點擊的次數(shù)，依次運行多個函數(shù)
unload() 用戶離開頁面
綁定事件的其他方式
$(function(){
$('#div1').bind('mouseover click', function(event) {
alert($(this).html());
});
});
取消綁定事件
$(function(){
$('#div1').bind('mouseover click', function(event) {
alert($(this).html());
// $(this).unbind();
$(this).unbind('mouseover');
});
});
主動觸發(fā)與自定義事件
主動觸發(fā)
可使用jquery對象上的trigger方法來觸發(fā)對象上綁定的事件颊咬。自定義事件
除了系統(tǒng)事件外务甥，可以通過bind方法自定義事件牡辽，然后用tiggle方法觸發(fā)這些事件喳篇。
//給element綁定hello事件
element.bind("hello",function(){
alert("hello world!");
});
//觸發(fā)hello事件
element.trigger("hello");
例：
<script type="text/javascript">
$(function(){
//自定義事件只能用bind方式綁定，第一個參數(shù)是事件的名字态辛，第二個參數(shù)是事件發(fā)生時執(zhí)行的函數(shù)
$('#btn1').bind('hello', function(){
alert('hello');
})
$('#btn1').bind('click', function(){
alert('click');
})
$('#btn2').click(function() {
// trigger即可以觸發(fā)自定義事件麸澜，也可以觸發(fā)原始的事件
$('#btn1').trigger('hello');
$('#btn1').trigger('click');
});
//不一定點擊按鈕觸發(fā)，也可頁面加載時觸發(fā)奏黑，也可在滿足某種if條件時觸發(fā)
// $('#btn1').trigger('hello');
})
</script>
</head>
<body>
<input type="button" value="按鈕" id="btn1">
<input type="button" value="按鈕2" id="btn2">
事件冒泡
什么是事件冒泡
在一個對象上觸發(fā)某類事件（比如單擊onclick事件）炊邦，如果此對象定義了此事件的處理程序编矾，那么此事件就會調(diào)用這個處理程序，如果沒有定義此事件處理程序或者事件返回true馁害，那么這個事件會向這個對象的父級對象傳播窄俏，從里到外，直至它被處理（父級對象所有同類事件都將被激活）碘菜，或者它到達了對象層次的最頂層凹蜈，即document對象（有些瀏覽器是window）。事件冒泡的作用
事件冒泡允許多個操作被集中處理（把事件處理器添加到一個父級元素上忍啸，避免把事件處理器添加到多個子級元素上）仰坦，它還可以讓你在對象層的不同級別捕獲事件。阻止事件冒泡
事件冒泡機制有時候是不需要的计雌，需要阻止掉悄晃，通過 event.stopPropagation() 來阻止
$(function(){
var $box1 = $('.father');
var $box2 = $('.son');
var $box3 = $('.grandson');
$box1.click(function() {
alert('father');
});
$box2.click(function() {
alert('son');
});
$box3.click(function(event) {
alert('grandson');
event.stopPropagation();
});
$(document).click(function(event) {
alert('grandfather');
});
})
......
<div class="father">
<div class="son">
<div class="grandson"></div>
</div>
</div>
阻止默認行為
阻止右鍵菜單
$(document).contextmenu(function(event) {
event.preventDefault();
});
合并阻止操作
實際開發(fā)中，一般把阻止冒泡和阻止默認行為合并起來寫凿滤，合并寫法可以用
// event.stopPropagation();
// event.preventDefault();
// 合并寫法：
return false;
事件委托
- 事件委托就是利用冒泡的原理妈橄，把事件加到父級上，通過判斷事件來源的子集翁脆，執(zhí)行相應(yīng)的操作眷细，事件委托首先可以極大減少事件綁定次數(shù)，提高性能鹃祖；其次可以讓新加入的子元素也可以擁有相同的操作溪椎。
一般綁定事件的寫法
$(function(){
$ali = $('#list li');
$ali.click(function(event) {
$(this).css({background:'red'});
});
})
...
<ul id="list">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
事件委托的寫法
$(function(){
$list = $('#list');
$list.delegate('li', 'click', function(event) {
$(this).css({background:'red'});
});
})
...
<ul id="list">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
取消事件委托
// ev.delegateTarge 委托對象
$(ev.delegateTarge).undelegate();
// 上面的例子可使用 $list.undelegate();
例:
<style type="text/css">
.list{
list-style: none;
}
.list li{
height: 30px;
background-color: green;
margin-bottom: 10px;
color: #fff;
}
</style>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(function(){
/*
給每個li綁定事件，一共綁定了8次恬口，性能不高
$('.list li').click(function() {
alert($(this).html());
});
*/
/*
事件委托：方法delegate校读，只綁定一次事件，冒泡觸發(fā)
參數(shù)：
selector選擇器：寫入ul下面的所有要發(fā)生事件的元素祖能，多個元素用空格隔開歉秫，例如‘li a span’
eventType事件
function要執(zhí)行的操作
$('.list').delegate('li', 'click', function() {
//$(this)指發(fā)生事件的子集，即每個li
alert($(this).html());
//全部取消委托
$('.list').undelegate();
});
})
</script>
</head>
<body>
<ul class="list">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
</ul>
</body>
jquery元素節(jié)點操作
*創(chuàng)建節(jié)點
var $div = $('<div>');
var $div2 = $('<div>這是一個div元素</div>');
插入節(jié)點
1养铸、append()和appendTo()：在現(xiàn)存元素的內(nèi)部雁芙，從后面插入元素
var $span = $('<span>這是一個span元素</span>');
$('#div1').append($span);
......
<div id="div1"></div>
2、prepend()和prependTo()：在現(xiàn)存元素的內(nèi)部钞螟，從前面插入元素
3兔甘、after()和insertAfter()：在現(xiàn)存元素的外部，從后面插入元素
4鳞滨、before()和insertBefore()：在現(xiàn)存元素的外部洞焙，從前面插入元素
刪除節(jié)點
$('#div1').remove();
例:
<script type="text/javascript">
$(function(){
var $span = $('<span>span元素</span>');
var $p = $('<p>p段落元素</p>');
var $h = $('<h1>頁面標題</h1>');
/*插入子元素*/
//div中插入span和p（末尾追加）
// $('#div1').append($span);
// $('#div1').append($p);
// 把span和p插入div中
$span.appendTo('#div1');
$p.appendTo('#div1');
//把子元素插入到父元素（前面追加）
// $('#div1').prepend($span);
// $('#div1').prepend($p);
// $span.prependTo('#div1');
// $p.prependTo('#div1');
//在div前邊插入兄弟h1標題
// $('#div1').before($h);
$h.insertBefore('#div1');
//在后邊插入兄弟元素
//after()
//insertAfter()
//刪除p標簽
$p.remove();
})
</script>
</head>
<body>
<div id="div1"></div>
</body>
