td 對象
td 對象代表了 HTML 中數據單元。
在 HTML 表格中每個 <td> 標簽都會創建一個 td 對象。
th 對象
th 對象代表了 HTML 標準中的表頭單元。
HTML 中每個 <th> 標簽都會創建一個 th 對象。
td/th 對象屬性
W3C: W3C 標準。
屬性 | 描述 | W3C |
---|---|---|
abbr | 設置或返回單元格中內容的縮寫版本。 | Yes |
align | 已廢棄。 設置或返回單元格內部數據的水平排列方式。 | D |
axis | 設置或返回相關單元格的一個逗號分隔的列表。 | Yes |
background | 已廢棄。 設置或返回表格的背景圖片。 | D |
bgColor | 已廢棄。 設置或返回表格的背景顏色 | D |
cellIndex | 返回單元格在某行的單元格集合中的位置。 | Yes |
ch | 設置或返回單元格的對齊字符。 | Yes |
chOff | 設置或返回單元格的對齊字符的偏移量。 | Yes |
colSpan | 單元格橫跨的列數。 | Yes |
headers | 置或返回 header-cell 的 id 值。 | Yes |
height | 已廢棄。 設置或返回數據單元的高度 | D |
noWrap | 已廢棄。 nowrap 屬性規定表格單元格中的內容不換行。 | D |
rowSpan | 設置或返回單元格可橫跨的行數。 | Yes |
vAlign | 設置或返回表格單元格內數據的垂直排列方式。 | Yes |
width | 已廢棄。設置或返回單元格的寬度。 | D |
標準屬性和事件
td/th 對象同樣支持標準的 屬性 和 事件。
如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039,我們一起飛!
例
一個簡單的 HTML 表格,帶有兩個單元格:
<table border="1">
<tr>
<td>Cell A</td>
<td>Cell B</td>
</tr>
</table>
瀏覽器支持
所有主流瀏覽器都支持 <td> 標簽。
標簽定義及使用說明
<td> 標簽定義 HTML 表格中的標準單元格。
HTML 表格有兩種單元格類型:
表頭單元格 - 包含頭部信息(由 <th> 元素創建)
標準單元格 - 包含數據(由 <td> 元素創建)
<th> 元素中的文本通常呈現為粗體并且居中。
<td> 元素中的文本通常是普通的左對齊文本。
提示和注釋
提示:如果需要將內容橫跨多個行或列,請使用 colspan 和 rowspan 屬性!
HTML 4.01 與 HTML5之間的差異
HTML 5 中不再支持 HTML 4.01 中的某些屬性。
屬性
屬性 | 值 | 描述 |
---|---|---|
abbr | text | HTML5 不支持。規定單元格中內容的縮寫版本。 |
align | leftrightcenterjustifychar | HTML5 不支持。規定單元格內容的水平對齊方式。 |
axis | category_name | HTML5 不支持。對單元格進行分類。 |
bgcolor | rgb(x,x,x)#xxxxxxcolorname | HTML5 不支持。HTML 4.01 已廢棄。 規定單元格的背景顏色。 |
char | character | HTML5 不支持。規定根據哪個字符來進行內容的對齊。 |
charoff | number | HTML5 不支持。規定對齊字符的偏移量。 |
colspan | number | 規定單元格可橫跨的列數。 |
headers | header_id | 規定與單元格相關聯的一個或多個表頭單元格。 |
height | pixels% | HTML5 不支持。HTML 4.01 已廢棄。 設置單元格的高度。 |
nowrap | nowrap | HTML5 不支持。HTML 4.01 已廢棄。 規定單元格中的內容是否折行。 |
rowspan | number | 設置單元格可橫跨的行數。 |
scope | colcolgrouprowrowgroup | HTML5 不支持。定義將表頭單元格與數據單元格相關聯的方法。 |
valign | topmiddlebottombaseline | HTML5 不支持。規定單元格內容的垂直排列方式。 |
width | pixels% | HTML5 不支持。HTML 4.01 已廢棄。 規定單元格的寬度。 |
全局屬性
<td> 標簽支持 HTML 的全局屬性。
事件屬性
<td> 標簽支持 HTML 的事件屬性。
如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039,我們一起飛!
avascript,從“最被誤解的語言”,最后神奇地轉變成為“最流行的語言”,證明它經受得起時間的考驗。雖然單獨來看,它的交互設計有些失敗,但是加上Ajax的完美配合,javascript就成了一款輕便并且又實用的好語法。
如果想要更高效、更系統地學會javascript,最好采用邊學邊練的學習模式。
如果覺得javascript的學習難度較高,不易理解,建議采用視頻的方式進行學習:
Web前端開發零基礎入門HTML/CSS/JavaScript
https://www.ixigua.com/6907467670300393988
(1)簡稱JS
(2)一種腳本語言,腳本語言的特點
Java語言是一種非腳本語言,屬于編譯型語言。
JavaScript語言是一種腳本語言(解釋型語言),JavaScript的“目標程序”是以普通文本的形式保存。用記事本是可以直接打開的。瀏覽器打開就直接解釋執行了。
(3)JavaScript和JScript的關系
JavaScript是網景公司開發的,javascript之父是 布蘭登艾奇。JavaScript前身叫做LiveScript。當時網景公司開發JavaScript的目的是為了占領“瀏覽器”市場。網景公司有一個瀏覽器,當時非常著名:領航者瀏覽器Navigator。JavaScript語言是為領航者瀏覽器專門量身打造的。JavaScript只支持Navigator瀏覽器,其它瀏覽器不支持。這個時候微軟慌了,馬上組建團隊,開發了一種編程語言叫做Jscript,專門和JavaScript抗衡的,只支持IE瀏覽器。網景公司在某個歷史階段,和SUN公司有合作,SUN公司把LiveScript改名為JavaScript。
(4)JavaScript主要用來操作HTML中的節點,產生動態效果
JavaScript是一門編程語言,專門用來操作HTML頁面中的節點,讓網頁產生動態效果的。JavaScript中也有變量、數據類型、運算符、if語句、for循環、標識符、關鍵字等。
(5)JavaScript和Java的區別
JavaScript運行在瀏覽器當中,瀏覽器中有執行JS代碼的內核。
Java運行在JVM當中。JavaScript和Java沒有任何關系。
Java語言是SUN公司開發的,JavaScript這個名字是SUN公司給起的名。
JavaScript選擇是對的,真的搭上了Java的順風車!
(1)ECMAScript是ECMA制定的262標準,JavaScript和JScript都遵守這個標準,ECMAScript是JavaScript核心語法
(2)DOM編程是通過JavaScript對HTML中的dom節點進行操作,DOM是有規范的,DOM規范是W3C制定的。(Document Object Model:文檔對象模型)
(3)BOM編程是對瀏覽器本身操作,例如:前進、后退、地址欄、關閉窗口、彈窗等。由于瀏覽器有不同的廠家制造,所以BOM缺少規范,一般只是有一個默認的行業規范。(Browser Object Model:瀏覽器對象模型)
(1)<input type="button" value="hello" onclick="window.alert('hello js')" />
(2)JS是一種基于事件驅動型的編程語言,當觸發某個事件之后,執行一段代碼
(3)JS中的任何一個事件都對應一個事件句柄,例如鼠標單擊事件click,對應的事件句柄就是onclick,事件句柄都是以標簽的屬性方式存在。在事件句柄后面可以編寫JS代碼,當觸發這個事件之后,這段JS代碼則執行了。
(4)JS中的字符串可以使用單引號括起來,也可以使用雙引號括起來
(5)window是JS中的內置BOM頂級對象,代表當前瀏覽器窗口,window對象有一個alert()函數,該函數可以在瀏覽器上彈出消息框。
(6)JS中的一條語句結束后可以使用“;”結尾,也可以不寫。
(7)window.alert()中的window.可以省略。
(1)<script type="text/javascript">JS代碼</script>
(2)window.alert()的執行會阻塞當前頁面的加載
(3)一個頁面中可以寫多個腳本塊
(4)腳本塊的位置沒有限制
(5)暴露在腳本塊中的JS代碼在頁面打開的時候遵循自上而下的順序依次逐行執行
(1)<script type="text/javascript" src="js文件路徑"></script>
(2)<script type="text/javascript" src="js文件路徑">這里不能寫JS代碼</script>
(3)這種寫法錯誤:<script type="text/javascript" src="js文件路徑"/>
(1)標識符命名規則和規范按照java執行
(2)關鍵字不需要刻意記
(1)變量未賦值,系統默認賦值undefined
(2)JS是一種弱類型編程語言,一個變量可以接收任何類型的數據
(3)一行上也可以聲明多個變量
(1)函數類似于java語言中的方法,是一段可以完成某個功能的可以被重復利用的代碼片段
(2)定義函數的兩種語法
第一種:普通函數定義,這種方式較多
function 函數名(形式參數列表){
函數體;
}
例如:
function sum(a, b){
return a + b;
}
注意:
a和b是形式參數列表,也是兩個局部變量。
JS中的函數不需要指定返回值類型,因為JS是弱類型編程語言,變量可以接收任何類型的數據,也就是說JS中的函數可以返回任何類型的數據,當然也可以不返回任何數據。返回數據使用return語句。
JS中的函數在調用的時候,實參可以隨意,例如調用以上的sum函數,可以這樣調用:sum(),沒有傳任何實參的時候a和b變量沒有賦值,則a和b都是undefined。也可以這樣調用sum(10),這樣就表示a變量賦值10,b變量仍然是undefined。還可以這樣調用:sum(1,2),這樣則表示a是1,b是2。
第二種:如果是把函數的聲明當做類進行定義這種方式較多
函數名 = function(形式參數列表){
函數體;
}
例如:
sum = function(a, b){
return a + b;
}
(3)JS中的函數定義在腳本塊中,頁面在打開的時候,函數并不會自動執行,函數是需要手動調用才能執行的。
(4)由于JS是一種弱類型編程語言,所以函數不能同名,沒有重載機制
(5)這樣的代碼順序是可以的,頁面打開的時候會先進行所有函數的聲明,函數聲明優先級較高。
<script type="text/javascript">
sayHello();
function sayHello(){
alert("Hello JS");
}
</script>
(6)用戶點擊按鈕,調用函數
<script type="text/javascript">
function sayHello(){
alert("hello js");
}
</script>
<input type="button" value="hello" onclick="sayHello();"/>
(1)局部變量:函數的形參是局部變量,另外使用var關鍵字在函數體中聲明的變量是局部變量,函數執行結束之后,局部變量的內存就釋放了。
(2)全局變量:在函數體外聲明的變量屬于全局變量,另外不使用var關鍵字聲明的變量無論位置在哪,它都是全局變量,全局變量在瀏覽器關閉時銷毀。
語法格式是:
function sum(a, b){
if("number" === typeof a && "number"=== typeof b){
return a + b;
}
alert("數據格式不合法");
return 0;
}
typeof運算符的運算結果都是全部小寫的字符串
"undefined"
"number"
"string"
"boolean"
"object"
"function"
ES6版本之前的數據類型有6種
只有一個值undefined,變量聲明沒賦值,系統默認賦值undefined
(1)Number類型包括哪些值:0,1,-1,3.14,12,300,NaN,Infinity
(2)parseInt()函數
(3)parseFloat()函數
(4)Math.ceil()函數:向上取整
(5)isNaN()函數
(1)可以使用單引號,也可以用雙引號
(2)JS中的字符串包括小String,也包括大String,小String屬于原始類型,大String是JS的內置對象,大String屬于Object類型。
(3)無論大String還是小String,它們的屬性和方法都是通用的。
(4)字符串中常用方法講一些,主要講解字符串的substr()和substring()的區別。
(1)該類型只有一個值:null
(2)typeof運算符的執行結果是"object"
(1)只有兩個值:true和false
(2)Boolean()函數
(3)JS中的if語句自動調用Boolean()函數。
(1)JS中如何定義一個類。
(2)JS中如何創建一個對象。
(3)JS中如何訪問對象屬性,調用對象的方法。
(4)JS中的一個函數,既是函數聲明,又是類的定義,同時函數名也可以看做構造方法名。直接調用函數表示普通函數調用,如果使用new運算符來調用該函數則會創建對象。
(5)使用prototype屬性動態的給對象擴展屬性以及方法。
除了以上6種類型之外,還有兩種類型分別叫做:Symbol和BigInt
(1)=、==、===三者的區別
(2)null NaN undefined三者類型不同,null和undefined的值可以等同
(1)blur失去焦點
(2)change下拉列表選中項改變,或文本框內容改變
(3)click鼠標單擊
(4)dblclick鼠標雙擊
(5)focus獲得焦點
(6)keydown鍵盤按下
(7)keyup鍵盤彈起
(8)load頁面加載完畢
(9)mousedown鼠標按下
(10)mouseover鼠標經過
(11)mousemove鼠標移動
(12)mouseout鼠標離開
(13)mouseup鼠標彈起
(14)reset表單重置
(15)select文本被選定
(16)submit表單提交
(1)在標簽中使用事件句柄的方式注冊事件
<body onload="sayHello()"></body>
(2)在頁面加載完畢后使用JS代碼給元素綁定事件
<script>
window.onload = sayHello;
</script>
<script>
window.onload = function(){
}
</script>
重點:通過事件注冊,理解回調函數的概念
這是一種錯誤的寫法:
<body>
<script type="text/javascript">
var elt = document.getElementById("btn");
</script>
<input type="button" id="btn" value="mybtn"/>
</body>
這樣寫:
<body>
<input type="button" id="btn" value="mybtn"/>
<script type="text/javascript">
var elt = document.getElementById("btn");
</script>
</body>
或者這樣寫:
<body>
<script type="text/javascript">
window.onload = function(){
var elt = document.getElementById("btn");
}
</script>
<input type="button" id="btn" value="mybtn"/>
</body>
運算符就講這一個,告訴學生其它運算符和java一樣用。void主要講:javascript:void(0)的用法。
告訴學生控制語句和Java一樣用,課堂上不再講解。只講一下for..in語句的使用,使用for..in語句遍歷數組,以及遍歷一個對象的屬性。
(1)創建數組
(2)JS中的數組特點
(3)JS中數組對象常用方法:push,pop,join,reverse等。
(4)數組遍歷
(1)new Date() 獲取當前系統時間
(2)new Date().getTime()獲取時間戳
(3)new Date().getFullYear()、getMonth()等方法。
BOM: Browser Object Model(瀏覽器對象模型),通過BOM的對象和方法可以完成瀏覽器窗口的操作,例如:關閉瀏覽器,前進,后退,修改地址欄上的地址等,這些操作都屬于BOM。BOM的頂級內置對象是window。
DOM: Document Object Model(文檔對象模型),通過DOM的對象和方法可以完成網頁中元素的增刪改,讓網頁產生動態效果,DOM的頂級內置對象是document。
(1)正則表達式是一門獨立的學科,不止用在JS中
(2)正則表達式專門用來做字符串格式匹配的
參考30分鐘入門正則表達式:
^ 字符串開始
$ 字符串結束
\s 空白
* 0~N次
+ 1~N次
? 0或1次
{3} 3次
{3,} 3~N次
{3,5} 3~5次
(a|b) a或b
[a-z] a到z
[^abc] 不是abc
(1)qq號正則
(2)必須由數字和字母組成,不能含有其它符號的正則
(3)給學生一些常用的正則表達式
(1)var regExp = new RegExp("^[1-9][0-9]{4,}$");
(2)var regExp = /^[1-9][0-9]{4,}$/;
寫一個校驗用戶名只能由數字和字母組成的案例
(1)用戶名不能為空
(2)用戶名必須在6-14位之間
(3)用戶名只能由數字和字母組成,不能含有其它符號(正則表達式)
(4)密碼和確認密碼一致,郵箱地址合法。
(5)統一失去焦點驗證
(6)錯誤提示信息統一在span標簽中提示,并且要求字體12號,紅色。
(7)文本框再次獲得焦點后,清空錯誤提示信息,如果文本框中數據不合法要求清空文本框的value
(8)最終表單中所有項均合法方可提交
document.getElementById()
document.getElementsByName()
document.getElementsByTagName()
以上三個函數告知學生很重要
change事件
window.setInterval()
window.clearInterval()
主要兩個函數
捎帶著提一下window.setTimeout()
<table>
<thead></thead>
<tbody id="userListTbody"></tbody>
</table>
<script>
var html = "";
html += "<tr>";
html += "<td>";
html += "zhangsan";
html += "</td>";
html += "<td>";
html += "2000-10-11";
html += "</td>";
html += "</tr>";
html += "<tr>";
html += "<td>";
html += "lisi";
html += "</td>";
html += "<td>";
html += "2001-10-11";
html += "</td>";
html += "</tr>";
var userListTbody = document.getElementById("userListTbody");
userListTbody.innerHTML = html;
<script>
會使用F12調試面板:第一會調錯;第二會定位并查看HTML頁面元素。
if(window.top != window.self){
window.top. location = window.self. location;
}
window.history.back(); window.history.go(-1); window.history.go(1);
提示一下document.location.href也可以完成同樣功能
數據交換作用
描述一個班級的總人數,另外包括描述班級中每個學生的信息,這樣的JSON怎么寫
(1)直接在瀏覽器地址欄上寫URL,get請求。
(2)點擊頁面超鏈接,get請求。
(3)提交form表單,可以是get,也可以是post。
(4)window.open(url);
(5)window.location.href=url;
(6)document.location.href=url;
*請認真填寫需求信息,我們會在24小時內與您取得聯系。