JQ基礎總結

JQ 基礎教程

01JQ 選擇器

$('p') //元素選擇器 
$('#id') //id選擇器 
$('.class') //類選擇器 
$ ('*') //選取所有元素 
$ ('this') // 獲取當前元素

02JQ 事件

$('#id').click(); // 點擊事件 
$('#id').mouseenter() // 鼠標事件
$('#id').keypress() // 鍵盤事件
$('#id').submit() // 表單事件
$('#id').load() // 文檔事件

03JQ 顯示隱藏

hide()&&show()

$('#id').click(function(){
	$('.class').hide(1000);
	$('.class').show(1000);
})

toggle()

$('#id').click(function(){
	$('.class').toggle(1000);
})

淡入淡出

• fadeIn() 淡入
• fadeOut() 淡出
• fadeToggle() 淡入淡出
• fadeTo() 元素變透明

$('#id').click(function(){
	$('.class').fadeIn();
	$('.class').fadeIn("slow");
	$('.class').fadeIn(1000);
	
	$("#div1").fadeOut();
	$("#div2").fadeOut("slow");
	$("#div3").fadeOut(3000);
	
	$("#div1").fadeToggle();
	$("#div2").fadeToggle("slow");
	$("#div3").fadeToggle(3000);
})

JQ滑動

• slideDown() 下拉滑動
• slideUp() 上滑
• slideToggle()

$('#id').click(function(){
	$('.clss').slideDown(1000);
	$('.clss1').slideUp(1000);
	$('.clss2').slideToggle(1000)
})

JQ動畫animate()

// 動畫
$('#id').click(function(){
	$('.class').animate(
	 {
		  left:'250px',
		  opacity:'0.5',
	      height:'150px',
		  width:'150px'
	 }
	);
	var divBox = $('#div');
	divBox.animate({height:150px,opacity:'0.4'});
	divBox.animate({width:350px,opacity:'1.4'});
})
// 中止動畫 
$('#button').click(function(){
	$('.divBoxLer').stop();
	// stop() 能夠添加兩個參數 來控制動畫的執行
})

JQ動畫 鏈

$('#id').click(function(){
	$('.clss').css('width:150px').slideDown(1000).slideUp(2000);
})

04JQ DOM操做

獲取返回內容

$(document).ready(function(){
			 $('#id').click( function(){
				 var textData = $('.p').text("Hello world!");
				 var textHtml = $('.PL').html("Hello world!");
				 console.log(taxtData);
				 console.log(textHtml);
			 })
		})

獲取表單的值

$(document).ready(function(){
			$('#button').click(function(){
			 var formData = $('#name').val("Hello world!");
			 console.log(formData,'數據')
			})
		})

獲取屬性

$(document).ready(function(){
  $("button").click(function(){
    alert($("#runoob").attr("href",'Hello world!'));
  });
});

05JQ 添加元素

• append() - 在被選元素的結尾插入內容
• prepend() - 在被選元素的開頭插入內容
• after() - 在被選元素以後插入內容
• before() - 在被選元素以前插入內容

$(document).ready( function(){
			$('#button').click( function(){
				$('.p').append('添加在p標籤尾部的新內容');
				$('.p').prepend('添加在p標籤開頭的新內容');
				
				var text = $('<li></li>').html('添加內容')
				$('#ul .li').after(text)
				$('#ul .li').before(text)
			})
		})

06JQ 刪除元素

• remove() - 刪除被選元素（及其子元素）
• empty() - 從被選元素中刪除子元素

$(document).ready( function(){
		$('#button').click(){
			$('.class').remove();
			$('.class').empty();
		}
		})

07JQ 操做CSS

• addClass() - 向被選元素添加一個或多個類
• removeClass() - 從被選元素刪除一個或多個類
• toggleClass() - 對被選元素進行添加/刪除類的切換操做
• css() - 設置或返回樣式屬性

$(document).ready(function(){
  $("button").click(function(){
    $("h1,h2,p").addClass("blue");
	$("h1,h2,p").removeClass("blue");
	$("h1,h2,p").toggleClass("blue");
	$("h1,h2,p").css("background-color");
  });
});

08JQ 操做尺寸

• width() 返回元素的寬度
• height() 返回元素的高度
• innerWidth() 元素的寬度（包括內邊距）
• innerHeight() 元素的高度（包括內邊距）
• outerWidth() 元素的寬度（包括內邊距和邊框）
• outerHeight() 元素的高度（包括內邊距和邊框）

09JQ 異步交互

load()方法

$(selector).load(URL,data,callback);

$(document).ready( function(){
			$('#button').click(function(){
				$('.form').load('./api/newData.txt')
			})
		})

$.get() 方法

$.get(URL,callback);

$(document).ready( function(){
			$('#button').click(function(){
				$.get('URL',function(data,status){
					console.log(data,'數據')
				})
			})
		})

$.post() 方法

$.post(URL,data,callback);

$(document).ready( function(){
			$('#button').click(function(){
				$.post('url',{
					name:'name',
					url:'url',
					},
					function(data,status){
						console.log(data,'數據')
					}
				)
			})
		})