《精通Javascript+jquery》学习拾零

 

HTML:

LABEL

• 例子

•  <LABEL FOR="oCtrlID" ACCESSKEY="1"> #<SPAN style="text-decoration:underline;" mce_style="text-decoration:underline;">1</SPAN>: 按 Alt+1 将焦点设置为文本框 </LABEL> <INPUT TYPE="text" NAME="TXT1" VALUE="绑定示例 1" SIZE="20" TABINDEX="1" ID="oCtrlID">

 

CSS:

包含选择符

• 语法：
  E1 E2 { sRules }
• 说明：
  包含选择符。选择所有被 E1 包含的 E2 。
• 示例：
  table td { font-size:14px; }
  div.sub a { font-size:14px; }

子对象选择符

• 语法：
  E1 > E2 { sRules }
• 说明：
  子对象选择符。选择所有作为 E1 子对象的 E2 。
• 示例：
  body > p { font-size:14px; }
  /* 所有作为body的子对象的p对象字体尺寸为14px */
  div ul>li p { font-size:14px; }

position

• 子块的Top和Left属性是以其上第一个设置position属性为relative或absolute的父块为基础的，从左至右（Top从上自下）增加。

 

JavaScript:

isNaN

• 语法：
  isNaN(numValue)
• 参数：
  必选项 numvalue 参数为要检查是否为 NAN 的值。
• 返回值：
  返回一个 Boolean 值，指明提供的值是否是保留值 NaN （不是数字）。
• 说明：
  如果值是 NaN， 那么 isNaN 函数返回 true ，否则返回 false 。 使用这个函数的典型情况是检查 parseInt 和 parseFloat 方法的返回值。
  还有一种办法，变量可以与它自身进行比较。 如果比较的结果不等，那么它就是 NaN 。 这是因为 NaN 是唯一与自身不等的值。

 

DHTML(JavaScript):

childNodes和parentNode

• childNodes与children，parentNode与parentElement功能一致，但是children与parentElement不符合W3C标准。

getAttribute

• 语法：
  vAttrValue = object.getAttribute(sAttrName [, iFlags])
• 参数：
  sAttrName
  Required. String that specifies the name of the attribute.
  iFlags
  Optional. Integer that specifies one or more of the following flags: 0 Default. Performs a property search that is not case-sensitive, and returns an interpolated value if the property is found. 1 Performs a case-sensitive property search. To find a match, the uppercase and lowercase letters in sAttrName must exactly match those in the attribute name. If the iFlags parameter for getAttribute is set to 1 and this option is set to 0 (default), the specified property name might not be found. 2 Returns the value exactly as it was set in script or in the source document.

createElement,createTextNode,appendChild,innerHTML（前三个是DOM提供的方法）

• 例子：

• function createNodeExample(){ var oPNode = document.createElement("P"); var oTextNode = document.createTextNode("Henrik Larsson"); oPNode.appendChild(oTextNode); document.body.appendChild(oPNode); }  

• 说明：
  创建一个P元素节点，创建一个文本节点，将文本节点加到P元素节点中，将P元素节点加到body元素节点中。
• 相同结果的例子：

• function createNodeExample2(){ document.body.innerHTML = "<P>Henrik Larsson</P>"; }  

事件监听机制

• 简单通用方法：
  object.eventProperty = function(){...}
  只能为对象添加单一的事件监听，且无法摘除该事件监听。

• window.onload = function(){ var P = document.getElementById("P"); P.onload = function(){ alert("fired"); } }  

• 添加，摘除时间监听方法：
  attachEvent,detachEvent,addEventListener,removeEventListenter（前两个是IE特有的方法，后两个是支持标准DOM浏览器的方法，如FF）
  可以同时为对象附加或摘除多个事件监听，单不同的浏览器间差异较大。

• function OperatorOnclick(){ alert("clicked"); oP.detachEvent("onclick",OperatorOnclick);//摘除事件监听（IE） oP.removeEventListenter("click",OperatorOnclick,false)//摘除事件监听，false表示是冒泡方式而非捕获方式的事件监听（标准DOM浏览器,如FF） } var oP; window.onload = function(){ oP = document.getElementById("PsId"); oP.attachEvent("onclick",OperatorOnclick);//添加事件监听（IE） oP.addEventListener("click",OperatorOnclick,false)//添加事件监听（标准DOM浏览器,如FF） }  

• 使用事件对象event：
  IE中event是作为window对象的一个子对象，标准DOM浏览器中event对象是独立的。
  传递事件参数时IE从window.event对象中获得，而标准DOM必须将event作为唯一的参数传递进方法内。
  通过浏览器判断解决了事件兼容性，同时也能够同时响应多个事件。

• function handle(oEvent){ if(window.event) oEvent = window.event;//处理浏览器兼容性 if(oEvent.type == "click") alert("鼠标单击") else if(oEvent.type == "mouseover") alert("鼠标移动到上方"); } window.onload = function(){ var oP = document.getElementById("PsId"); oP.onclick = handle; oP.onmouseover = handle; //... }  

prompt

• 语法：
  vTextData = window.prompt( [sMessage] [, sDefaultValue])
• 参数：
  sMessage Optional. String that specifies the message to display in the dialog box. By default, this parameter is set to "".
  sDefaultValue Optional. String that specifies the default value of the input field. By default, this parameter is set to "undefined".
• 返回值：
  String or Integer. Returns the value typed in by the user.
• 说明：
  Displays a dialog box that prompts the user with a message and an input field.
• 示例：
  window.prompt("请输入一个数字","0");

insertRow

• 描述：
  Creates a new row (tr) in the table, and adds the row to the rows collection.
• 语法：
  oTR = object.insertRow( [iIndex])
• 参数：
  iIndex Optional. Integer that specifies where to insert the row in the rows collection. The default value is -1, which appends the new row to the end of the rows collection.
• 返回值：
  Returns the tr element object if successful, or null otherwise.

insertCell

• 描述：
  Creates a new cell in the table row (tr), and adds the cell to the cells collection.
• 语法：
  oTD = TR.insertCell( [iIndex])
• 参数：
  iIndex Optional. Integer that specifies where to insert the cell in the tr. The default value is -1, which appends the new cell to the end of the cells collection.
• 返回值：
  Returns the td element object if successful, or null otherwise.

deleteRow和deleteCell

• 例子：

• var oTable = document.getElementById("tableId"); oTable.rows[2].deleteCell(0); oTable.deleteRow(2);