前端常用語法學習總結

一. CSS 指層疊樣式表 (Cascading Style Sheets)

由於兩種主要的瀏覽器（Netscape 和 Internet Explorer）不斷地將新的 HTML 標籤和屬性（比如字體標籤和顏色屬性）添加到 HTML 規範中，創建文檔內容清晰地獨立於文檔表現層的站點變得越來越困難。
爲了解決這個問題，萬維網聯盟（W3C），這個非營利的標準化聯盟，肩負起了 HTML 標準化的使命，並在 HTML 4.0 之外創造出樣式（Style）。所有的主流瀏覽器均支持層疊樣式表。

二.CSS 選擇器

1、常用的Css選擇器有：
（1）類選擇器： .intro ----- 選擇class=“intro” 的所有元素。
（2）id選擇器： #idNmae ----- 選擇 id="idName"的所有元素。
（3）*選擇器： * ------- 選擇所有元素。
（4）元素選擇器： p --------選擇所有p標籤的元素。
（5）後代選擇器： div p ------選擇 div 元素內部的所有 p 元素。（以上選擇器皆可使用例如：#idName h2{}）
（6）子元素選擇器： div>p ------------選擇父元素爲 div 元素的所有 p 元素。
還有許多選擇器，建議大家到w3cschool中查詢。

三.css創建,插入樣式表的方法有三種

(1)外部樣式表:
當樣式需要應用於很多頁面時，外部樣式表將是理想的選擇。在使用外部樣式表的情況下，你可以通過改變一個文件來改變整個站點的外觀。每個頁面使用標籤鏈接到樣式表。標籤在（文檔的）頭部：

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>

樣式表應該以 .css 擴展名進行保存。下面是一個樣式表文件的例子：

hr {color: sienna;}
p {margin-left: 20px;}
body {background-image: url("images/back40.gif");}

(2)內部樣式表：
當單個文檔需要特殊的樣式時，就應該使用內部樣式表。你可以使用 style 標籤在文檔頭部定義內部樣式表，就像這樣:

<head>
<style type="text/css">
  hr {color: sienna;}
  p {margin-left: 20px;}
  body {background-image: url("images/back40.gif");}
</style>
</head>

(3)內聯樣式:
要使用內聯樣式，你需要在相關的標籤內使用樣式（style）屬性。Style 屬性可以包含任何 CSS 屬性。本例展示如何改變段落的顏色和左外邊距：(由於要將表現和內容混雜在一起，內聯樣式會損失掉樣式表的許多優勢.當樣式僅需要在一個元素上應用一次時使用。)

<p style="color: sienna; margin-left: 20px">
This is a paragraph
</p>

(4)多重樣式：
若外部樣式與內部樣式都擁有對某個標籤的屬性設置，相同的屬性設置會以內部樣式爲準，外部樣式多餘的屬性設置則會被繼承。同樣，內聯樣式若修改則會已內聯樣式爲準。（類似與就近原則）

四、獲取頁面各種標籤中的值

（1）獲取input框中的值

<input type="text" name="inputA" id="inputA" onclick="getinputAValue()"/>

<script>
	//方法一,通過id獲取
    function getinputAValue(){
		 var element = document.getElementById("inputA").value;
		  alert(element);
    }
    //方法二,通過name獲取
	 function getinputAValue(){
		 var element = document.getElementByName("inputA").value;
		  alert(element);
    }
      //方法三,通過.val()獲取
	 function getinputAValue(){
		 var element = $("#inputA").val();
		  alert(element);
    }
</script>

（2）獲取td中的值

<td id='mytd'>這裏是td的值</td>
<input type='button' value='獲取td的值' onclick='getTdInner()' />

<script>
function getTdInner(){
	 var tdInner= document.getElementById('mytd');
	 alert(tdInner.innerText);//td沒有value屬性，只能是隻能是innerText或innerHTML
}
</script>

（3）獲取select框中的值

<select id="selectTest" name="selectTest" onblur="showValue()">
    <option value="1">選項一</option>
    <option value="2">選項二</option>
</select> 
  
<script>
function showValue(){
	 	//第一種，通過select的id獲取（id名稱儘量唯一）
		var v = document.getElementById("selectTest").value;   //此方法最常用最實用
		
		//第二種，通過select的name獲取（name名稱儘量唯一）
		var v = document.getElementsByName("selectTest")[0].value;
		
		//第三種，通過select標籤獲取
		var v = document.getElementsByTagName("select")[0].value;//如果同一頁面含有多個select標籤，則上述[0]中的數字要改爲相應的物理順序號（從0起算）
		
		//第四種，獲得各個位置的值、步驟
		1:拿到select對象： var myselect=document.getElementById("selectTest");
		2：拿到選中項的索引：var index=myselect.selectedIndex //selectedIn代表的是你所選中項的index
		3:拿到選中項options的value： myselect.options[index].value;
		4:拿到選中項options的text： myselect.options[index].text;
		
		//jquery方法（前提是已經加載了jquery庫）
		1:var options=$("#selectTest option:selected");  //獲取選中的項
		2:alert(options.val());   //拿到選中項的值
		3:alert(options.text());   //拿到選中項的文本
} 
</script>

（4）循環獲取td下所有tr的值

<tbody id="table_list">
	<tr>
		<td><input type="text" >姓名</td>
		<td>
			<select>
				<option value="boy" >男</option>
				<option value="girl" >女</option>
			</select>
		</td>
		<td><input type="text" >年齡</td>
		<td><input type="text" >學歷</td>
		<td><a class="" onclick="del()">刪除</a></td>
	</tr>
	<tr>
		<td><input type="text" >姓名</td>
		<td>
			<select>
				<option value="boy" >男</option>
				<option value="girl" >女</option>
			</select>
		</td>
		<td><input type="text" >年齡</td>
		<td><input type="text" >學歷</td>
		<td><a class="" onclick="del()">刪除</a></td>
	</tr>
</tbody>


<script>

var trList = $("#table_list").children("tr") //children() 方法返回被選元素的所有直接子元素。
	for (var i=0;i<trList.length;i++) {
		var tdArr = trList.eq(i).find("td");		//.find() 和 .children() 方法類似，不過後者只沿着 DOM 樹向下遍歷單一層級。
		var name = tdArr.eq(0).find("input").val();
		var gender = tdArr.eq(1).find("select").val();
		var age = tdArr.eq(2).find("input").val();
		var education = tdArr.eq(3).find("input").val();
		alert(name);
		alert(gender);
		alert(age);
		alert(education);
	}
</script>

方法還有許多，也全部都記不住，只好寫到博客中方便查看。希望能幫到你。

前端常用語法學習總結