練習4:<br>JQ控制物件方法介紹

練習結果

【選取器】參考1【選取器】參考2

//btn1====1.奇偶項目變色
	$('button:eq(0)').click(function() {
		$('li:even').css('background-color', '#8ACCBE');
		$('li:odd').css('background-color', '#FDE4A2');
	});

【jQuery – 獲取內容和屬性】參考

【jQuery – 設置內容和屬性】參考

//btn2====2.text
	$('button:eq(1)').click(function() {
		alert($('li:eq(1)').text());		//取出文字
		$('li:eq(1)').text('<h1>巨匠電腦</h1>');		//寫入文字
	});
//btn3====3.html
	$('button:eq(2)').click(function() {
		//alert('btn2:'+$('li:eq(2)').html());		//取出文字及結構
		//$('li:eq(2)').html('<h1>巨匠電腦</h1>');		//寫入文字及結構
		var result = $('li:eq(2)').html();
		alert(result);		
		$('li:eq(2)').html('<h1>巨匠電腦</h1>');			
	});

【jQuery – 添加元素】參考

//btn4====4.append
	var result = $('li:eq(3)').html();
	$('button:eq(3)').click(function() {
		$('li:eq(3)').append('<br>'+result);			
	});

【jQuery – 删除元素】參考

//btn5====5.刪除元素內容empty
	$('button:eq(4)').click(function() {
		$('li:eq(3)').empty();
	});
//btn6====6.刪除元素物件remove
	$('button:eq(5)').click(function() {
		$('li:eq(3)').remove();
	});

【jQuery – 獲取並設置 CSS 類】參考

//btn7====7.增加類別addClass
	$('button:eq(6)').click(function() {
		//$('li:last-child').addClass('note');	//但CSS的背景色彩無法加入,因為btn1-JQCSS高於addClass
		$('li:last-child').css('background', '#FFE0E0').addClass('note');
	});
//btn8====8.移除類別removeClass
	$('button:eq(7)').click(function() {
		$('li:last-child').css('background', 'transparent').removeClass('note');
	});
//btn9====9.toggleClass
	$('button:eq(8)').click(function() {
	$('li:last-child').toggleClass('note');
	});