分類  >  Web前端 >

頭年12月份挑錯經驗總結

tags:    時間:2013-12-10 19:46:24
去年12月份挑錯經驗總結
接手別人做了一半的項目時,由於不了解會犯個種問題,以下12月份個人出bug及學習總結的情況,高手見笑了
IFrame部分:

Iframe標記的使用格式是:

  <Iframe src="URL" width="x" height="x" scrolling="[OPTION]" frameborder="x"></iframe>

  src:文件的路徑,既可是HTML文件,也可以是文本、ASP等;
  width、height:"畫中畫"區域的寬與高;
  scrolling:當SRC的指定的HTML文件在指定的區域不顯不完時,滾動選項,如果設置為NO,則不出現滾動條;如為Auto:則自動出現滾動
條;如為Yes,則顯示;
  FrameBorder:區域邊框的寬度,為了讓'畫中畫'與鄰近的內容相融合,常設置為0。

比如:

  <Iframe src="http://netschool.cpcw.com/homepage" width="250" height="200" scrolling="no" frameborder="0"></iframe>

  二、父窗體與浮動幀之間的相互控制

  在腳本語言與對象層次中,包含Iframe的窗口我們稱之為父窗體,而浮動幀則稱為子窗體,弄清這兩者的關係很重要,因為要在父窗體
中訪問子窗體或相反都必須清楚對象層次,才能通過程序來訪問並控制窗體。

  1、在父窗體中訪問並控制子窗體中的對象

  在父窗體中,Iframe即子窗體是document對象的一個子對象,可以直接在腳本中訪問子窗體中的對象。

  現在就有一個問題,即,我們怎樣來控制這個Iframe,這裡需要講一下Iframe對象。當我們給這個標記設置了ID 屬性后,就可通過文檔
對象模型DOM對Iframe所含的HTML進行一系列控制。

  比如在example.htm里嵌入test.htm文件,並控制test.htm里一些標記對象:
  <Iframe src="test.htm" id="test" width="250" height="200" scrolling="no" frameborder="0"></iframe>
test.htm文件代碼為:
  <html>
   <body>
    <h1 id="myH1">hello,my boy</h1>
   </body>
  </html>
  如我們要改變ID號為myH1的H1標記里的文字為hello,my dear,則可用:
  document.myH1.innerText="hello,my dear"(其中,document可省)
  在example.htm文件中,Iframe標記對象所指的子窗體與一般的DHTML對象模型一致,對對象訪問控制方式一樣,就不再贅述。

  2、在子窗體中訪問並控制父窗體中對象

  在子窗體中我們可以通過其parent即父(雙親)對象來訪問父窗口中的對象。
  如example.htm:
  <html>
   <body onclick="alert(tt.myH1.innerHTML)">
    <Iframe name="tt" src="frame1.htm" width="250" height="200" scrolling="no" frameborder="0"></iframe>
    <h1 id="myH2">hello,my wife</h1>
   </body>
  </html>
  如果要在frame1.htm中訪問ID號為myH2中的標題文字並將之改為"hello,my friend",我們就可以這樣寫:
  parent.myH2.innerText="hello,my friend"
  這裡parent對象就代表當前窗體(example.htm所在窗體),要在子窗體中訪問父窗體中的對象,無一例外都通過parent對象來進行。

  Iframe雖然內嵌在另一個HTML文件中,但它保持相對的獨立,是一個'獨立王國'喲,在單一HTML中的特性同樣適用於浮動幀中。

  試想一下,通過Iframe標記,我們可將那些不變的內容以Iframe來表示,這樣,不必重複寫相同的內容,這有點象程序設計中的過程或
函數,減省了多少繁瑣的手工勞動!另外,至關重要的是,它使頁面的修改更為可行,因為,不必因為版式的調整而修改每個頁面,你只需
修改一個父窗體的版式即可了。

  有一點要注意,Nestscape瀏覽器不支持Iframe標記,但在時下IE的天下,這似乎也無大礙,廣泛採用Iframe標記,既為自己

    三、IFrame也可以編輯文字

    有沒有想過除了表單(<form>)之外還有其它的網頁元素可以編輯文字呢?只要使用IFrame的隱藏的一個屬性就可以使IFrame成為一個文本編輯器。
<html>
<body onload="editer.document.designMode='On'">
<IFrame ID="editer"></IFrame>
</body>
</html>
其中designMode屬性表示IFrame的設計模式的狀態(開/關),還在猶豫什麼呢,快試試吧!
只要巧妙的利用這一特性就可以製作很多意想不到的效果。如果下面我們來做一個圖片編輯器。
<html>
<body onload="imgEditer.document.designMode='On';imgEditer.document.write('<img src=圖片.gif>')">
<IFrame id="imgEditer"></IFrame>
</body>
</html>

小結:

  根據我自己的學習體驗,我總結了幾點學習方法供大家參考:
  1、看到好的網頁,可以在瀏覽器的「編輯」菜單中選擇「源文件」,這時我們就可以看到源程序,學習別人製作網頁的一些方法、技巧和一些特殊或新的HTML標記,有時候通過這種辦法可以學到書本上沒有的東西 
     2、多練習,在做普通的頁面時候盡量手寫HTML標記(比如在計事本中)
     3、對於難記的屬性不必強行記憶,在用到的時候翻一下語法手冊,多用幾次就會熟練掌握了。

ssh集成

SSH集成環境的配置 + mysql (開發環境MyEclipse)
Author:mikelfee

項目開發時的層次關係:
表示層--->業務層--->持久層----------->資料庫

Struts: 表示層 MVC框架,struts主要實現了MVC框架中的C<控制>
Hibernate: 持久層 O/R映射框架,解決阻抗不匹配 (不適合做聚集性的操作,如批量的修

            改和刪除)
Spring: 業務邏輯層 輕量級容器框架,IoC實現了控制反轉以及aop提供了聲明式事物服

           務,對很多框架提供了集成

這三個框架的學習順序: Struts-->Hibernate-->Spring

為了便於描述所以給出了特定的版本號,其他版本以此類推:
* Spring: spring-2.0
   * Struts: struts-1.x (大家都知道struts-2.x實際上可以說是是Webwork的升
            級,比struts1.x輕量級)
* Hibernate: hibernate-3.2.0
還需要一些工具包:
* jstl (標籤庫,需要另外下載)
* 資料庫的jdbc驅動 (這裡以mysql為資料庫,也需要另外下載)

注意如果拷貝jar包時,有重複的就選高版本的jar包

Spring的環境配置:
* spring依賴庫添加到WEB-INF/lib下
* spring_home/dist/spring.jar
* spring_home/lib/jakarta-commons/commons-logging.jar
* spring_home/lib/log4j/log4j-1.2.14.jar
* spring_home/lib/aspectj/*.jar
* spring_home/lib/cglib/*.jar 
   (可選,cglib可以對沒有實現介面的目標對象生成動態代理,
                但是一般情況下還是選用jdk的默認動態代理就可以了,
即建議對業務邏輯層進行實現介面模式編程)
* 拷貝spring配置文件(applicationContext.xml)到src下 (classpath的根)
* 拷貝log4j配置文件(log4j.properties)到src下 (也可用.xml的配置文件)

Struts的環境配置:
* struts依賴庫添加到WEB-INF/lib下
* struts_home/lib/*.jar
* jstl標籤庫 (jstl_home/lib/*.jar)
* 修改web.xml文件,配置ActionServelet
* 拷貝struts配置文件(struts-config.xml)到WEB-INF下
* 提供國際化資源文件, 拷貝MessageResources.properties到src下

Hibernate的環境配置:
* hibernate依賴庫添加到WEB-INF/lib下
* hibernate_home/hibernate3.jar
* hibernate_home/lib/*.jar
* mysql的jdbc驅動 (mysql-connector-java-3.1.14-bin.jar)
* 拷貝hibernate配置文件(hibernate.cfg.xml)到src下
* 拷貝log4j配置文件(log4j.properties)到src下
              (如果和上面重複,就只選取一個)
* 拷貝映射文件xxx.hbm.xml (映射實體到資料庫所需要的映射文件)

為了便於各部分的工作以及他們的集成,各配置文件的基本配置如下:
* Struts配置文件的配置<補充>
        * 在web.xml中配置struts的ActionServlet

<servlet>
<servlet-name>action</servlet-name>
  <servlet-class>
                                         org.apache.struts.action.ActionServle
t
                                      </servlet-class>
  <init-param>
    <param-name>config</param-name>
    <param-value>
                                                   /WEB-INF/struts-config.xml

                                                </param-value>
  </init-param>
  <init-param>
    <param-name>debug</param-name>
    <param-value>2</param-value>
  </init-param>
  <init-param>
    <param-name>detail</param-name>
    <param-value>2</param-value>
  </init-param>
  <load-on-startup>2</load-on-startup>
</servlet>
<!-- Standard Action Servlet Mapping -->
<servlet-mapping>
<servlet-name>action</servlet-name>
  <url-pattern>*.action</url-pattern>
</servlet-mapping>
* struts-config.xml中的配置
* 要有國際化標籤 basename (注意標籤的順序)
<message-resources parameter="MessageResources" />
( <form-beans> 在 <action-mappings> 前面 )
( <action-mappings> 在 <message-resources> 後面 )

* Hibernate配置文件的配置<補充>
* hibernate.cfg.xml中配置
* 資料庫的配置

   <property name="hibernate.connection.url">
       jdbc:mysql://localhost/spring_struts_hibernate
   </property>
   <property name="hibernate.connection.driver_class">
       com.mysql.jdbc.Driver
   </property>
   <property name="hibernate.connection.username">
        root
    </property>
    <property name="hibernate.connection.password">
        mikelfee
    </property>
    <property name="hibernate.dialect">
        org.hibernate.dialect.MySQLDialect
    </property>
* 為了便於調試配置sql輸出語句
    <property name="hibernate.show_sql">true</property>
* tomcat啟動時會自動創建表,不用再另外寫工具類手動
                               創建表
    <property name="hibernate.hbm2ddl.auto">update</property>

* Spring配置文件的配置<補充>
        * 在web.xml中配置spring的filter
* 解決瀏覽器顯示時字符集問題
  <filter>
  <filter-name>Spring character encoding filter</filter-name>
  <filter-class>
              org.springframework.web.filter.CharacterEncodingFilter
          </filter-class>
  <init-param>
  <param-name>encoding</param-name>
  <param-value>GBK</param-value>
  </init-param>
  </filter>
  <filter-mapping>
  <filter-name>Spring character encoding filter</filter-name>
  <url-pattern>/*</url-pattern>
  </filter-mapping>
* 保證hibernate中session的開啟,直到響應客服端
  <filter>
  <filter-name>hibernateFilter</filter-name>
  <filter-class>
           org.springframework.orm.hibernate3.support.OpenSessionInViewFilter

                    </filter-class>
  </filter>
  <filter-mapping>
  <filter-name>hibernateFilter</filter-name>
  <url-pattern>/*</url-pattern>
  </filter-mapping>
* Spring 與 Struts 的集成 (主要讓spring管理struts中的Action)
* 為了使spring中的BeanFactory(重量級的對象)只初始化一次。
                      spring提供了一個listerner,這個listerner可以讀取
                      applicationContext.xml, 讀取后就把BeanFactory創建好放到

                      一個servletContext中,以後用時就可以直接到其中取。
                      listener在web.xml中的配置如下:
<context-param>
<param-name>contextConfigLocation</param-name>
<param-value>
                         classpath*:applicationContext*.xml
                   </param-value>
</context-param>
<listener>
<listener-class>
                org.springframework.web.context.ContextLoaderListener
          </listener-class>
</listener>
* 可以通過以下方法,到servletContext中取得
                               BeanFactory了,這樣BeanFactory就不用多次創建了

        BeanFactory factory = WebApplicationContextUtils
                       .getRequiredWebApplicationContext(request.getSession()

                       .getServletContext());
* 為了解除 struts 在取得業務邏輯時對 spring 的依賴性
                     (依賴查找,上面的BeanFactory的取得就是依賴查找)。
  我們可以將業務邏輯對象通過spring注入給Action,避免在Action
                     中的直接代碼查找。此時就需要將Action放入spring的IoC容器中

  讓spring來管理Action。例如下:
* struts-config.xml中如下,將請求提交給spring中的
                               DelegatingActionProxy(Action的代理類),
                               進行後續操作。
<action path="/login"
        type="org.springframework.web.struts.DelegatingActionProxy"
        name="loginForm"
        scope="request"
>
        <forward name="success" path="/success.jsp"/>
</action>
* applicationContext-xxxx.xml中如下,其中要使用
                               name標籤並且name值要和上面的path值一樣以便得到

                               注入給spring的Action。之中屬性 scope="prototype
"
                               表示創建的Action為多實例的,這樣所創建的Action就

                               是線程安全的。 userManager為注入的業務邏輯對象,

                               在這裡只是個例子。
<bean name="/login" class="com.mikelfee.usermgr.actions.LoginAction"
      scope="prototype">
         <property name="userManager" ref="userManager"/>
</bean>

* Spring 與 Hibernate 的集成 (主要讓spring管理hibernate中的session,
             並且提供聲明式事物)
* 將hibernate的hibernate.cfg.xml注入給spring中
                      LocalSessionFactoryBean的configLocation屬性上,
   從而得到由spring管理的SessionFactory
<!-- 配置sessionFactory -->
<bean id="sessionFactory"
      class="org.springframework.orm.hibernate3.LocalSessionFactoryBean">
<property name="configLocation">      <value>classpath:hibernate.cfg.xml</
value>
/property>
</bean>
* 將hibernate由spring管理的SessionFactory注入給spring中
                     HibernateTransactionManager的sessionFactory屬性上,
  從而得到由spring管理的事務管理器(transactionManager)
<!-- 配置事務管理器 -->
<bean id="transactionManager"
      class="org.springframework.orm.hibernate3.HibernateTransactionManager">

<property name="sessionFactory">
<ref bean="sessionFactory"/>
</property>
</bean>
* spring中aop應用在聲明式事務上
<!-- 配置事物的傳播特性 -->
<tx:advice id="txAdvice" transaction-manager="transactionManager">
<tx:attributes>
<tx:method name="add*" propagation="REQUIRED"/>
<tx:method name="del*" propagation="REQUIRED"/>
<tx:method name="modify*" propagation="REQUIRED"/>
<tx:method name="*" read-only="true"/>
</tx:attributes>
</tx:advice>
<!-- 那些類的那些方法參與事物 -->
<aop:config>
<aop:pointcut id="allManagerMethod" expression=
    "execution(* com.mikelfee.usermanager(xxxx).manager(xxxx).*.*(..))"/>
<aop:advisor advice-ref="txAdvice" pointcut-ref="allManagerMethod"/>
</aop:config>
* 讓spring管理hibernate中的session,需要讓業務邏輯的實現類繼
                     承HibernateDaoSupport(spring給hibernate做的包裝)。其中
                     HibernateTemplate是對hibernate中的Session又做了一層封裝

public class UserManagerImpl
             extends HibernateDaoSupport implements UserManager
                            {
……
this.getHibernateTemplate().save(user);
//this.getSession().save(user);
……
}
* UserManagerImpl中要得到session就必需要注入sessionFactory,
                     其中sessionFactory會傳給HibernateDaoSupport從而得
                     到session。其中logManager只是另一個引用注入的例子。
<bean id="userManager" class="com.mikelfee.usermanager.manager.UserManagerImpl
">
<property name="sessionFactory" ref="sessionFactory"/>
<property name="logManager" ref="logManager"/>
</bean>

到這裡你已經成功的集成了SSH,可以進行web開發了。

終於排好了
--

網摘經典:

. web中的客戶端(瀏覽器)它的主要職責是什麼
  2. web中的伺服器又來做什麼
  3. 客戶端和服務端遵從的約定是什麼(http)
  4. 為什麼要有web容器,它都弄些什麼的,為什麼我們的應用程序要有它呢
  5. 客戶的請求經過哪些步驟才會被自己寫的應用程序接收到,
  6. 伺服器是如何處理多個請求的
  。。。
1.客戶端(瀏覽器)提供的主要功能
  1. 打包, 按照http協議格式,組織發送的內容,
  2. 解析
  1. 按照http協議解析返回的響應內容
  2. 解析html,xml等
  3. 解析Javascript
  3. 提供一些輔助的功能,常見的有
  1. 緩存機制
  2. cookie機制

  。。。
  客戶端已經成標準,很多的基礎功能都已經建好,開發者更多的是界面及一些便捷功能的開發

2. 服務端提供的主要功能
  服務端首先是個很籠統的概念,其提供的功能大致有如下:
  1. 解析, 按照http協議解析客戶端發過來的請求
  2. 根據傳過來的參數,生成動態網頁
  3. 打包,按照http協議的格式組織生成的網頁,回傳給客戶端
  4. 協調處理多個用戶的請求
  5. 查找,根據請求查找對應的處理程序

3. 客戶端,伺服器交互採用的約定
  大凡計算機中涉及到交互的系統,都需要遵照一定的交互規則,即定義信息的格式,以便可以解析,協議就是交

互中的約定,標準協議就是大家都遵從的規則,好處是通用,這點很好理解
  b/s結構採用標準的http協議,

4. web容器
  如上2中,每一次交互,伺服器端除了依據客戶端傳來的參數生成動態網頁外,還要做如下動作
  解析請求,組織請求,處理多用戶的請求,查找對應,對於一個web站點而言,這些功能都是通用的,基礎的,每次都要做的,為了最大化的減少開發者的負擔,就提出了把這些通用基礎的功能提取出來,由一種機制進行管理,提供,這種機制就是web容器

。。。  

5. 一個完整的請求處理過程(依具體的web容器等)
  比如對於tomcat,第一次請求servlet
  客戶端發出請求 -》 web容器接收到請求,按照http協議解析請求 -》web容器生成兩個對象,request,response,並把解析后的內容賦給request對象 -》web容器讀取web.xml根據映射關係找到servlet -》容器載入servlet -》 生成servlet對象 - 》 調用servlet的inti方法 -》 調用service方法,並把request,response傳給service -》 service自動匹配對應的doXXX方法 -》執行的doXXX方法 -》web容器關閉時調用servlet實例的destroy方法,銷毀實例

  上面的過程,沒考慮多 線程的模式,實際上是多線程處理的,由web容器為每一個請求產生一個線程對象,負責處理該請求,響應

  。。。
伺服器離不開線程
傳送數據離不開IO


js部分
1判斷select選項中 是否存在Value="paraValue"的Item
2向select選項中 加入一個Item
3從select選項中 刪除一個Item
4刪除select中選中的項
5修改select選項中 value="paraValue"的text為"paraText"
6設置select中text="paraText"的第一個Item為選中
7設置select中value="paraValue"的Item為選中
8得到select的當前選中項的value
9得到select的當前選中項的text
10得到select的當前選中項的Index
11清空select的項

js 代碼
// 1.判斷select選項中 是否存在Value="paraValue"的Item       
function jsSelectIsExitItem(objSelect, objItemValue) {       
    var isExit = false;       
    for (var i = 0; i < objSelect.options.length; i++) {       
        if (objSelect.options[i].value == objItemValue) {       
            isExit = true;       
            break;       
        }       
    }       
    return isExit;       
}        
  
// 2.向select選項中 加入一個Item       
function jsAddItemToSelect(objSelect, objItemText, objItemValue) {       
    //判斷是否存在       
    if (jsSelectIsExitItem(objSelect, objItemValue)) {       
        alert("該Item的Value值已經存在");       
    } else {       
        var varItem = new Option(objItemText, objItemValue);     
        objSelect.options.add(varItem);    
        alert("成功加入");    
    }       
}       
  
// 3.從select選項中 刪除一個Item       
function jsRemoveItemFromSelect(objSelect, objItemValue) {       
    //判斷是否存在       
    if (jsSelectIsExitItem(objSelect, objItemValue)) {       
        for (var i = 0; i < objSelect.options.length; i++) {       
            if (objSelect.options[i].value == objItemValue) {       
                objSelect.options.remove(i);       
                break;       
            }       
        }       
        alert("成功刪除");       
    } else {       
        alert("該select中 不存在該項");       
    }       
}   
  
  
// 4.刪除select中選中的項   
function jsRemoveSelectedItemFromSelect(objSelect) {       
    var length = objSelect.options.length - 1;   
    for(var i = length; i >= 0; i--){   
        if(objSelect[i].selected == true){   
            objSelect.options[i] = null;   
        }   
    }   
}     
  
// 5.修改select選項中 value="paraValue"的text為"paraText"       
function jsUpdateItemToSelect(objSelect, objItemText, objItemValue) {       
    //判斷是否存在       
    if (jsSelectIsExitItem(objSelect, objItemValue)) {       
        for (var i = 0; i < objSelect.options.length; i++) {       
            if (objSelect.options[i].value == objItemValue) {       
                objSelect.options[i].text = objItemText;       
                break;       
            }       
        }       
        alert("成功修改");       
    } else {       
        alert("該select中 不存在該項");       
    }       
}       
  
// 6.設置select中text="paraText"的第一個Item為選中       
function jsSelectItemByValue(objSelect, objItemText) {           
    //判斷是否存在       
    var isExit = false;       
    for (var i = 0; i < objSelect.options.length; i++) {       
        if (objSelect.options[i].text == objItemText) {       
            objSelect.options[i].selected = true;       
            isExit = true;       
            break;       
        }       
    }             
    //Show出結果       
    if (isExit) {       
        alert("成功選中");       
    } else {       
        alert("該select中 不存在該項");       
    }       
}       
  
// 7.設置select中value="paraValue"的Item為選中   
document.all.objSelect.value = objItemValue;   
      
// 8.得到select的當前選中項的value   
var currSelectValue = document.all.objSelect.value;   
      
// 9.得到select的當前選中項的text   
var currSelectText = document.all.objSelect.options[document.all.objSelect.selectedIndex].text;   
      
// 10.得到select的當前選中項的Index   
var currSelectIndex = document.all.objSelect.selectedIndex;   
      
// 11.清空select的項   
document.all.objSelect.options.length = 0;
selected="selected"




2010,11,23
路徑名中不能有中文,否則圖片無法顯示
2010,11,24
修改資料庫字符集編碼
找到mysql 下my.ini文件修改character-set
2010,11,30
java.lang.string.split
split 方法
將一個字元串分割為子字元串,然後將結果作為字元串數組返回。
stringObj.split([separator,[limit]])
參數
stringObj
必選項。要被分解的 String 對象或文字。該對象不會被 split 方法修改。
separator
可選項。字元串或 正則表達式對象,它標識了分隔字元串時使用的是一個還是多個字元。如果忽

略該選項,返回包含整個字元串的單一元素數組。
limit
可選項。該值用來限制返回數組中的元素個數。

說明
split 方法的結果是一個字元串數組,在 stingObj 中每個出現 separator 的位置都要進行分解

。separator 不作為任何數組元素的部分返回。

示例1:
public class SplitDemo {
public static String[] ss=new String[20];
public SplitDemo() {
 
     String s = "The rain in Spain falls mainly in the plain.";
     // 在每個空格字元處進行分解。
     ss = s.split(" ");   
}
public static void main(String[] args) {

  SplitDemo demo=new SplitDemo();
  for(int i=0;i<ss.length;i++)
  System.out.println(ss[i]);
}

}

程序結果:
The
rain
in
Spain
falls
mainly
in
the
plain.


示例2:
public class SplitDemo {
public static String[] ss=new String[20];
public SplitDemo() {
 
     String s = "The rain in Spain falls mainly in the plain.";
     // 在每個空格字元處進行分解。
     ss = s.split(" ",2);  
}
public static void main(String[] args) {
  SplitDemo demo=new SplitDemo();
  for(int i=0;i<ss.length;i++)
  System.out.println(ss[i]);
}

}
程序結果:
The
rain in Spain falls mainly in the plain.

示例3:
public class SplitDemo {
public static String[] ss=new String[20];
public SplitDemo() {
 
     String s = "The rain in Spain falls mainly in the plain.";
     // 在每個空格字元處進行分解。
     ss = s.split(" ",20);  
}
public static void main(String[] args) {
  SplitDemo demo=new SplitDemo();
  for(int i=0;i<ss.length;i++)
  System.out.println(ss[i]);
}

}
程序結果:
The
rain
in
Spain
falls
mainly
in
the
plain




跳轉部分:

跳轉有問題的時候 ,可能是跳轉條件未滿足

常見的如判斷是否登錄

navigate.js



$.ajax({
           type:"post",
           url:"userLoginAction!getTbUserInSession.action",
           datatype:"json",
           timeout:2000,
           success:function(json){
               var data=eval(json);
               if(data[0].logFlag == "1"){
                   grzy();
               
                   propertyset.submit();
               }else{
                   alert("您還沒有登錄,請先登錄!");
               }
           }
js document對象:
注:頁面上元素name屬性和JavaScript引用的名稱必須一致包括大小寫
否則會提示你一個錯誤信息 "引用的元素為空或者不是對象"
---------------------------------

對象屬性
document.title //設置文檔標題等價於HTML的<title>標籤
document.bgColor //設置頁面背景色
document.fgColor //設置前景色(文本顏色)
document.linkColor //未點擊過的鏈接顏色
document.alinkColor //激活鏈接(焦點在此鏈接上)的顏色
document.vlinkColor //已點擊過的鏈接顏色
document.URL //設置URL屬性從而在同一窗口打開另一網頁
document.fileCreatedDate //文件建立日期,只讀屬性
document.fileModifiedDate //文件修改日期,只讀屬性
document.fileSize //文件大小,只讀屬性
document.cookie //設置和讀出cookie
document.charset //設置字符集 簡體中文:gb2312
---------------------------------
對象方法
document.write() //動態向頁面寫入內容
document.createElement(Tag) //創建一個html標籤對象
document.getElementById(ID) //獲得指定ID值的對象
document.getElementsByName(Name) //獲得指定Name值的對象
---------------------------------

images集合(頁面中的圖象)

a)通過集合引用
document.images //對應頁面上的<img>標籤
document.images.length //對應頁面上<img>標籤的個數
document.images[0] //第1個<img>標籤
document.images[i] //第i-1個<img>標籤

b)通過nane屬性直接引用
<img name="oImage">
document.images.oImage //document.images.name屬性

c)引用圖片的src屬性
document.images.oImage.src //document.images.name屬性.src

d)創建一個圖象
var oImage
oImage = new Image()
document.images.oImage.src="/1.jpg"
同時在頁面上建立一個<img>標籤與之對應就可以顯示

<html>
<img name=oImage>
<script language="javascript">
var oImage
oImage = new Image()
document.images.oImage.src="/1.jpg"
</script>
</html>

----------------------------------

forms集合(頁面中的表單)

a)通過集合引用
document.forms //對應頁面上的<form>標籤
document.forms.length //對應頁面上<form>標籤的個數
document.forms[0] //第1個<form>標籤
document.forms[i] //第i-1個<form>標籤
document.forms[i].length //第i-1個<form>中的控制項數
document.forms[i].elements[j] //第i-1個<form>中第j-1個控制項

b)通過標籤name屬性直接引用
<form name="Myform"><input name="myctrl"></form>
document.Myform.myctrl //document.表單名.控制項名

-----------------------------------
<html>
<!--Text控制項相關Script-->
<form name="Myform">
<input type="text" name="oText">
<input type="password" name="oPswd">
<form>
<script language="javascript">
//獲取文本密碼框的值
document.write(document.Myform.oText.value)
document.write(document.Myform.oPswd.value)
</script>
</html>
-----------------------------------
<html>
<!--Select控制項相關Script-->
<form name="Myform">
<select name="oSelect">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</form>

<script language="javascript">
//遍歷select控制項的option項
var length
length=document.Myform.oSelect.length
for(i=0;i<length;i++)
document.write(document.Myform.oSelect[i].value)
</script>

<script language="javascript">
//遍歷option項並且判斷某個option是否被選中
for(i=0;i<document.Myform.oSelect.length;i++){
if(document.Myform.oSelect[i].selected!=true)
document.write(document.Myform.oSelect[i].value)
else
document.write("<font color=red>"+document.Myform.oSelect[i].value+"</font>")
}
</script>

<script language="javascript">
//根據SelectedIndex列印出選中的option
//(0到document.Myform.oSelect.length-1)
i=document.Myform.oSelect.selectedIndex
document.write(document.Myform.oSelect[i].value)
</script>

<script language="javascript">
//動態增加select控制項的option項
var oOption = document.createElement("OPTION");
oOption.text="4";
oOption.value="4";

推薦閱讀文章

Bookmark the permalink ,來源:互聯網