zoukankan      html  css  js  c++  java
  • javascript记录

    获得HTML页面标签属性的几种方法
    getElementById:
    语法: document.getElementById(id)
    参数:id :必选项为字符串(String)
    返回值:对象; 返回相同id对象中的第一个,如果无符合条件的对象,则返回 null
    example:document.getElementById("id1").value;


    getElementsByName:
    语法: document.getElementsByName(name)
    参数:name :必选项为字符串(String)
    返回值:数组对象; 如果无符合条件的对象,则返回空数组
    example:document.getElementsByName("name1")[0].value;
    document.getElementsByName("name1")[1].value;


    getElementsByTagName:
    语法: object.getElementsByTagName(tagname) object可以是document或event.srcElement.parentElement等
    参数:tagname:必选项为字符串(String)
    返回值:数组对象; 如果无符合条件的对象,则返回空数组
    example:document.getElementsByTagName("p")[0].childNodes[0].nodeValue;
    document.getElementsByTagName("p")[1].childNodes[0].nodeValue;
    例子:
    getElementById 操作表单元素 2007-05-22 14:26<Script language="Javascript">
              
    function CopyStr()
              {
                
    //document.getElementById("TextBox2").value = document.getElementById("TextBox1").value;
              var oBox1 = document.getElementById("TextBox1");
                  
    var oBox2 = document.getElementById("TextBox2");
                  oBox2.value 
    = oBox1.value;
       
         }
           
    </Script>
         
          
    <form name="form1" method="post" action="Default.aspx" id="form1">
           
    <input name="TextBox1" type="text" id="TextBox1" OnKeyup="CopyStr()" /><br />
           
    <input name="TextBox2" type="text" id="TextBox2" />
          
    </form>getElementById 方法 2007-05-22 12:49顾明思义,get-Element-By-Id,就是通过ID来设置/返回HTML标签的属性及调用其事件与方法。用这个方法基本上可以控制页面所有标签,条件很简单就是给每个标签分配一个ID号:

    document.getElementById("link").href;
    document.getElementById("link").target;
    document.getElementById("img").src;
    document.getElementById("img").width;
    document.getElementById("img").height;
    document.getElementById("input").value;

    那么如何取得
    <div></div>以及<a></a>之间的值呢?如<div id="div">aaa</div>中的aaa,<href="#" id="link">bbb</a>中的bbb,也很简单,利用innerHTML就可以了:

    document.getElementById("div").innerHTML;
    document.getElementById("link").innerHTML; 
     
    getElementById 的用法及实例(1) getElementById 方法
    返回具有指定 ID 属性值的第一个对象的一个引用。

    语法
    oElement = document.getElementById(sIDValue)

    参数
    sIDValue 必选项。指明 ID 属性值的字符串

    返回值
    返回 ID 属性值与指定值相同的第一个对象。

    注释
    如果 ID 属于一个集合,getElementById 方法返回集合中的第一个对象。
    getElementById 方法与使用 all 集合上的 item 方法等同。例如,以下代码样本表示如何从 document 对象中取回 ID 为 oDiv 的第一个要素。

    使用 DHTML 对象模型:
    var oVDiv = document.body.all.item("oDiv");
    使用文档对象模型(DOM):
    var oVDiv = document.getElementById("oDiv");

    示例
    以下例子表示如何使用 getElementById 方法返回 ID 属性值 oDiv 的第一次出现。
    <script>
    function fnGetId(){
    //          Returns the first DIV element in the collection.
              var oVDiv=document.getElementById("oDiv1");
    }
    </script>
    <DIV ID="oDiv1">Div #1</DIV>
    <DIV ID="oDiv2">Div #2</DIV>
    <DIV ID="oDiv3">Div #3</DIV>
    <INPUT TYPE="button" VALUE="Get Names" onclick="fnGetId()">
     
     
    getElementById 的用法及实例(2) getElementById 方法
    返回具有指定 ID 属性值的第一个比如说有个网页中有个text框的id叫text1 
    getElementById(text1)就能得到这个text1框的对象,并使用text框的所有属性和方法

     

    这个是JS的一个方法,意思是通过控件ID取得元素的值,如一个form里包函text、label等,他们都是FORM的元素,有一个分配的ID,getElementById()是取得这些元素的text值的。 

    .


    document.formname.name.value 
    document.getElementById("name"); 

    这两个话的意思一样

    .
    程序举例

    <html>
    <head>
    <script type="text/javascript">
    function alignRow()
    {
    var x=document.getElementById('myTable').rows
    x[
    0].align="right"

    }
    </script>
    </head>

    <body>
    <table width="60%" id="myTable" border="1">
    <tr>
    <td>行1 单元格1</td>
    <td>行1 单元格2</td>
    </tr>
    <tr>
    <td>行2 单元格1</td>
    <td>行2 单元格2</td>
    </tr>
    <tr>
    <td>行3 单元格1</td>
    <td>行3 单元格2</td>
    </tr>
    </table>
    <form>
    <input type="button" onclick="alignRow()" value="右对齐第一行文字">
    </form>
    </body>

    </html>



    .

    支队一个单元隔进行对齐

    <html>
    <head>
    <script type="text/javascript">
    function alignCell()
    {
    var x=document.getElementById('myTable').rows[0].cells 
    x[
    0].align="center"

    }
    </script>
    </head>

    <body>
    <table id="myTable" border="1" width="100%">
    <tr>
    <td>单元格1</td>
    <td>单元格2</td>
    </tr>
    <tr>
    <td>单元格3</td>
    <td>单元格4</td>
    </tr>
    </table>
    <form>
    <input type="button" onclick="alignCell()" value="居中对齐第一个单元格的内容">
    </form>
    </body>

    </html>

    ..

    改变colspan的值

    <html>
    <head>
    <script type="text/javascript">
    function setColSpan()
    {
    var x=document.getElementById('myTable').rows[0].cells
    x[
    0].colSpan="2"
    x[
    1].colSpan="6"
    }
    </script>
    </head>

    <body>
    <table id="myTable" border="1">
    <tr>
    <td colspan="4">单元格1</td>
    <td colspan="4">单元格2</td>
    </tr>
    <tr>
    <td>单元格3</td>
    <td>单元格4</td>
    <td>单元格5</td>
    <td>单元格6</td>
    <td>单元格7</td>
    <td>单元格8</td>
    <td>单元格9</td>
    <td>单元格10</td>
    </tr>
    </table>
    <form>
    <input type="button" onclick="setColSpan()" value="改变colspan值">
    </form>
    </body>

    </html>
     



    JS实现跳转的几种方式
    js实现页面跳转的几种方式
    第一种:
    <script language="javascript" type="text/javascript">
    window.location.href
    ="login.jsp?backurl="+window.location.href; 
    </script>

    第二种:
    <script language="javascript">
    alert(
    "返回");
    window.history.back(
    -1);
    </script>

    第三种:
    <script language="javascript">
    window.navigate(
    "top.jsp");
    </script>

    第四种:
    <script language="JavaScript">
    self.location
    ='top.htm';
    </script>

    第五种:
    <script language="javascript">
    alert(
    "非法访问!");
    top.location
    ='xx.jsp';
    </script> 



    判断页面中的ID是否定义
    <script language=javascript>
    function syId(){
    var obj =document.getElementById("syId");
    if (obj ){
        alert(
    "是个对象!!!");
    }
    else{
        alert(
    "不是对象或对象不存在!!!");
    }
    }
    </script>
    <Div id=syId >这是一个Div id为“syId”</Div>
    <input type=button value="查SYID" onclick="syId();">


    判断变量未定义的方法
    <script language = "javascript">
    if(typeof(t2)!="undefined"){   
      
    //存在  
    alert(t1.href); 
    }
    </script>


    链接控制iframe的几种方法
    <href="#" onclick="window['yourIframeId'].src='a.txt'">
    <href=:"#" onclick="javascript:window.open('a.txt','tarpage','')">aa</a>
    <iframe name="tarpage" width="100" height="100">
    <href="###" onclick="document.frame['frm'].location='1.txt'">txt</a>
    <iframe name='frm' width=100 height=100></iframe>

    <body>
    <href="###" onclick="document.all.frm.src='1.txt'">txt</a>
    <iframe id='frm' width=100 height=100></iframe>
    </body>
    <iframe name="tesion" width=100 height=100 src="http://www.netjoin.net"></iframe>
    <href="a.txt" target="tesion">连接</a>


  • 相关阅读:
    自考新教材--p78
    自考新教材--p76_2
    自考新教材--p76_1
    自考新教材--p75
    自考新教材--p70
    自考新教材--p69
    以HTML5及其衍生技术为基础的B/S架构实时视频监控解决方案
    智能化安防视频监控行业发展是如何转变的?
    摄像头视频监控是如何与流媒体服务器云平台连接的?
    如何实现摄像头监控数据实时存储及传输?
  • 原文地址:https://www.cnblogs.com/Excellent/p/740007.html
Copyright © 2011-2022 走看看