css

JQuery是一個非常優秀的js庫。
選擇元素
$( )裏可以填css選擇器

	
		$(’.demo’).css(’background-color’,’red’);
	

$( )裏可以填原生DOM

	
		var oDiv = document.getElementById(’demo’);
	

	
		$
 
(oDiv).css({’background-color’:’red’,’height’:’100’});
	

$( )裏可以填null，false，undefined $( function ( ) { } ) 選出 div下的span

	
		$(’span’,’div’).css({’background-color’:’red’});
	

	
		$(’div span’).css({’background-color’
 
:’red’});
	

JQuery特有的選擇規則

	
		$(’ul>li:first’);// 操作的是第一個li
	

	
		$(’ul>li:eq(2)’);
	

	
		$(’ul>li’).eq(2);//操作的是第二個li   ’eq‘的值可以從0開始
	

	
		$(’ul>li:odd’); //選擇第奇數個 (1 3 5 7...)
	

	
		$(’ul>li:even’); //選擇第偶數個 (0 2 4 6 ...)
 

	

eq的值可以從0開始 $()裏返回的是一個JQuery對象
常用的方法
1.filter( ) 規定某個條件，將不符合條件的元素從選擇中移除，返回符合條件的元素 filter()裏可以放選擇器，函數，JQuery對象 2.has( ) 可以用於檢測某個元素是否在另一個元素中，返回的符合條件的對象給父級元素 has( )裏可以放選擇器，原生DOM 3.not( ) 效果與filter相反 4.is( ) 判斷前面返回的DOM是否與後面相同，返回的不是對象，所以不能進行鏈式調用 如果前面返回的DOM有很多個，後面只要有一個與前面相同，返回結果都是TRUE is( )裏可以放選擇器，函數，JQuery對象，DOM元素 5.find( ) 獲得當前元素集合中每個元素的後代 在一個集合中找符合條件的子集
取值賦值函數統一性
html 基於innerHTML,獲取集合中第一個匹配元素的HTML內容 或 設置每一個匹配元素的html內容。

	
		<!-- html --> 
	

	
		<ul>
	

	
		<li>1</li>
	

	
		<li>2</li>
	

	
		<li>3</li>
	

	
		<li>4</li>
	

	
		</ul>
	

	
		//javascript
	

	
		console.log($(’ul li’).html());
	

打印結果只有1，.html( )方法和.css( )方法一樣，( )內不填內容表示取值，在取值時候，只能取到第一個元素的值；( )內填內容是賦值，會將所有li都賦上值，( )內可以添加標簽

	
		$(’ul li’).html(’<span>aaa</span>’);
	

text 得到匹配元素集合中每個元素的文本內容結合，包括他們的後代，或設置匹配元素集合中每個元素的文本內容為指定的文本內容

	
		//在li內插入span
	

	
		$(’ul li’).html(’<span style="background-color: orange">lalal</span>’);
	

	
		//將li內的span標簽替換成123
	

	
		$(’ul li’).text(’123’);
	

css 想同時改變多個css屬性，可以用對象的形式

	
		//采用小頭峰寫法
	

	
		$(’ul li’).css({width: 100,height:20,backgroundColor:’orange’});
	

	
		//利用css樣式
	

	
		$(’ul li’).css({’width’: ’100px’,’height’:’20px’,’backgroundColor’:’orange’});
	

想取值時要傳參，選擇具體要取出的樣式，不能一次取出所有屬性。 attr / prop 獲取匹配的元素集合中的第一個元素的屬性的值 或 設置每一個匹配元素的一個或多個屬性 對於HTML元素本身就帶有的固有屬性，在處理時，使用prop方法。 對於HTML元素我們自己自定義的DOM屬性，在處理時，使用attr方法。 attr()函數主要依賴的是Element對象的getAttribute()和setAttribute()兩個方法。 prop()函數主要依賴的則是JS中原生的對象屬性獲取和設置方式。 因為jQuery認為：attribute的checked、selected、disabled就是表示該屬性初始狀態的值，property的checked、selected、disabled才表示該屬性實時狀態的值(值為true或false)
next() 下一個兄弟節點 prev() 上一個兄弟節點 index()

當前兄弟節點中的索引

鏈接：http://www.f-z.cn/id/163

學習更多IT知識 加群：272292492

分針網——每日分享：CSS 自定義屬性：API 篇