Javascript_15_DOM_select の演習-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

Javascript_15_DOM_select の演習

黄舟

Jan 18, 2017 pm 04:55 PM

Javascript_15_DOM_select 演習

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=GBK">
    <title>DOM_select练习</title>
    <style type="text/css">
    a:link,a:visited{
        color: blue;
        text-decoration: none;
    }
    a:hover{
        color: red;
    }
    table{
      color:white;
      font-weight: bold;
        border: #008FF0 dashed 1px;
    }
    table th{
        border: #008FF0 dashed 1px;
        background-color: grey;
    }
    table td{
        border: #008FF0 dashed 1px;
    }
      .div_class{
        height:50px;
        width:50px;
        float:left;
        margin-right:30px;
      }
      #div_id_text{
        clear:left;
        margin-top:20px;
      }
    </style>
  </head>
  <body>    
＝＝＝＝＝＝＝＝＝＝＝＝＝＝我是分割线＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
    /*
     * 需求：单击按钮添加附件，删除附件
     思路：将按钮封装到行里面，变成增加行，删除行对象
     */
    <script type="text/javascript">
      function addFile_1(){
        /*
         * <!--tr>
        <td><input type="file" /> </td>
        <td><a href="javascript:void(0)">删除附件</a></td>
        </tr-->
         * 将文件选取框定义在行对象中的单元格Td
         * 删除按钮也定义在单元格Td
         * 所以只要给表格创建新的行和单元格即可。
         */
        var oTab= document.getElementById("tab_id_1");
        var oTr= oTab.insertRow();
        var oTd_file = oTr.insertCell();
        var oTd_del = oTr.insertCell();
        oTd_file.innerHTML = "<input type=&#39;file&#39; />";
        oTd_del.innerHTML  = "<a href=&#39;javascript:void(0)&#39; onclick=&#39;deleteFile(this)&#39;>删除附件</a>";
//      oTd_del.innerHTML = "<img src=&#39;1.jpg&#39; alt=&#39;删除附件&#39; onclick=&#39;deleteFile(this)&#39; />";
      }
      function deleteFile(oA){
        //a父节点是td，td的父节点才是tr
        var oTr = oA.parentNode.parentNode;
        oTr.parentNode.removeChild(oTr);
      }
    </script>  
    <table id="tab_id_1">
      <tr>
        <td><a href="javascript:void(0)" onclick="addFile_1()">添加附件</a></td>
      </tr>
      <!--tr>
        <td><input type="file" /> </td>
        <td><a href="javascript:void(0)">删除附件</a></td>
      </tr-->
    </table>
＝＝＝＝＝＝＝＝＝＝＝＝＝＝我是分割线＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
    /*
     *需求： 实现二级联动菜单
     */
    <script type="text/javascript">
      function selectCharacter_3(){
        var arr_1=[&#39;林黛玉&#39;,&#39;史湘云&#39;,&#39;薛宝钗&#39;,&#39;妙玉&#39;];
        var arr_2=["诸葛亮","刘备","周瑜","孙权"];
        var arr_3=[&#39;林冲&#39;,&#39;鲁智深&#39;,&#39;武松&#39;,&#39;李逵&#39;];
        var arr_4=[&#39;唐僧&#39;,&#39;孙悟空&#39;,&#39;猪八戒&#39;,&#39;沙和尚&#39;];
        var collStory = {"选择名著":[&#39;选择人物&#39;]
        ,"红楼梦":arr_1
        ,"三国演义":arr_2
        ,"水浒传":arr_3
        ,"西游记":arr_4};
    //获取两个下拉菜单对象。 
        var oSelect_3 = document.getElementById("select_id_3");
        var oSelect_4 = document.getElementById("select_id_4");
        //获取到底选择的是哪部名著。
        var index = oSelect_3.selectedIndex;
        var name=oSelect_3.options[index].innerHTML;
        //将子菜单中的内容清空一下。
        oSelect_4.length = 0;//下面这种方法也可以
        /*
      for(var x=0;x<oSelect_4.options.length; ){
     oSelect_4.removeChild(oSelect_4.options[x]);
     }*/
        //通过键(名字)到容器去获取对应的人物数组。
        var arr = collStory[name];
        //遍历这个数组。并将这个数组的元素封装成option对象，添加到子菜单中
        for(var x=0; x<arr.length; x++){
          var oOption = document.createElement("option");
          oOption.innerHTML = arr[x];
          oSelect_4.appendChild(oOption);
         }
      }
      function selectCharacter_2(){
        //var arr_1=["诸葛亮","刘备","周瑜","孙权"];
        var collStory = {"选择名著":[&#39;选择人物&#39;]
        ,"红楼梦":[&#39;林黛玉&#39;,&#39;史湘云&#39;,&#39;薛宝钗&#39;,&#39;妙玉&#39;]
        ,"三国演义":["诸葛亮","刘备","周瑜","孙权"]
        ,"水浒传":[&#39;林冲&#39;,&#39;鲁智深&#39;,&#39;武松&#39;,&#39;李逵&#39;]
        ,"西游记":[&#39;唐僧&#39;,&#39;孙悟空&#39;,&#39;猪八戒&#39;,&#39;沙和尚&#39;]};
    //获取两个下拉菜单对象。 
        var oSelect_3 = document.getElementById("select_id_3");
        var oSelect_4 = document.getElementById("select_id_4");
        //获取到底选择的是哪部名著。
        var index = oSelect_3.selectedIndex;
        var name=oSelect_3.options[index].innerHTML;
        //将子菜单中的内容清空一下。
        //oSelect_4.length = 0;//下面这种方法也可以
      for(var x=0;x<oSelect_4.options.length; ){
     oSelect_4.removeChild(oSelect_4.options[x]);
     }
        //通过键(名字)到容器去获取对应的人物数组。
        var arr = collStory[name];
        //遍历这个数组。并将这个数组的元素封装成option对象，添加到子菜单中
        for(var x=0; x<arr.length; x++){
          var oOption = document.createElement("option");
          oOption.innerHTML = arr[x];
          oSelect_4.appendChild(oOption);
         }
      }
      function selectCharacter_1(){
        //var arr_1=["诸葛亮","刘备","周瑜","孙权"];
        var collStory = {"选择名著":[&#39;选择人物&#39;]
        ,"红楼梦":[&#39;林黛玉&#39;,&#39;史湘云&#39;,&#39;薛宝钗&#39;,&#39;妙玉&#39;]
        ,"三国演义":["诸葛亮","刘备","周瑜","孙权"]
        ,"水浒传":[&#39;林冲&#39;,&#39;鲁智深&#39;,&#39;武松&#39;,&#39;李逵&#39;]
        ,"西游记":[&#39;唐僧&#39;,&#39;孙悟空&#39;,&#39;猪八戒&#39;,&#39;沙和尚&#39;]};
        //alert(collStory);//返回[object Object]
      //alert(collStory["三国演义"]);//"诸葛亮","刘备","周瑜","孙权"
      //alert(collStory["三国演义"].length);//4
    //获取两个下拉菜单对象。 
        var oSelect_3 = document.getElementById("select_id_3");
        var oSelect_4 = document.getElementById("select_id_4");
        //获取到底选择的是哪部名著。
        var index = oSelect_3.selectedIndex;
        var name=oSelect_3.options[index].innerHTML;
        //alert(name);//三国演义
        //将子菜单中的内容清空一下。
        oSelect_4.length = 0;//下面这种方法也可以
        /*
      for(var x=0;x<oSelect_4.options.length; ){
     oSelect_4.removeChild(oSelect_4.options[x]);
     }*/
        //通过键(名字)到容器去获取对应的人物数组。
        var arr = collStory[name];
        //alert(arr==arr_1);//true
        //alert(arr);
        //遍历这个数组。并将这个数组的元素封装成option对象，添加到子菜单中
        for(var x=0; x<arr.length; x++){
          var oOption = document.createElement("option");
          oOption.innerHTML = arr[x];
          oSelect_4.appendChild(oOption);
         }
      }
    </script>
    <select id="select_id_3" onchange="selectCharacter_3()">
      <option>选择名著</option>
      <option>红楼梦</option>
      <option>三国演义</option>
      <option>水浒传</option>
      <option>西游记</option>
    </select>
    <select id="select_id_4">
      <option>选择人物</option>
    </select>
    <hr />
＝＝＝＝＝＝＝＝＝＝＝＝＝＝我是分割线＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
    /*
     *需求： 实现二级联动菜单
     */
<script type="text/javascript">
      function selectCity(){
        var  collCities = [[&#39;选择城市&#39;]
                  ,[&#39;海淀区&#39;,&#39;朝阳区&#39;,&#39;东城区&#39;,&#39;西城区&#39;]
                  ,[&#39;济南&#39;,&#39;青岛&#39;,&#39;烟台&#39;,&#39;威海&#39;]
                  ,[&#39;沈阳&#39;,&#39;大连&#39;,&#39;鞍山&#39;,&#39;抚顺&#39;]
                  ,[&#39;石家庄&#39;,&#39;保定&#39;,&#39;邯郸&#39;,&#39;廊坊&#39;]];
        //获取两个下拉菜单对象。 
        var oSelect_1 = document.getElementById("select_id_1");
        var oSelect_2 = document.getElementById("select_id_2");
        //获取到底选择的是哪个省。
        var index = oSelect_1.selectedIndex;
        //通过角标到容器去获取对应的城市数组。
        var arrCities = collCities[index];
        //将子菜单中的内容清空一下。
        oSelect_2.length = 0;
        //遍历这个数组。并将这个数组的元素封装成option对象，添加到子菜单中
        for(var x=0; x<arrCities.length; x++){
          var oOption = document.createElement("option");
          oOption.innerHTML = arrCities[x];
          oSelect_2.appendChild(oOption);
        }
      }
    </script>
    <select id="select_id_1" onchange="selectCity()">
      <option>选择省市</option>
      <option>北京</option>
      <option>山东</option>
      <option>辽宁</option>
      <option>河北</option>
    </select>
    
    <select id="select_id_2">
      <option>选择城市</option>
    </select>    
＝＝＝＝＝＝＝＝＝＝＝＝＝＝我是分割线＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
    /*
     * 需求：点击三个DIV区域，让文字分别显示相应的颜色
     */
    <script type="text/javascript">
      function changeColor_1(oDiv){
        var colorVal = oDiv.style.backgroundColor;
        document.getElementById("div_id_text").style.color = colorVal;
      }
    </script>
    <div class="div_class" id="div_id_1" style="background-color:red" onclick="changeColor_1(this)"></div>
    <div class="div_class" id="div_id_2" style="background-color:green" onclick="changeColor_1(this)"></div>
    <div class="div_class" id="div_id_3" style="background-color:blue" onclick="changeColor_1(this)"></div>
    <div id="div_id_text">
      <pre class="brush:php;toolbar:false">
1 林黛玉 可叹停机德,堪怜永絮才.玉带林中挂,金簪雪里埋. 
2 薛宝钗 可叹停机德,堪怜永絮才.玉带林中挂,金簪雪里埋. 
3 贾元春 二十年来辩是谁,榴花开处照宫闱.三春争及初春景?虎兕相逢大梦归. 
4 贾探春 才自清明志自高,生于末世运偏消.清明涕泣江边望,千里东风一梦遥. 
5 史湘云 富贵又为何?襁褓之间父母违.展眼吊斜辉,湘江水逝楚云飞. 
6 妙玉 欲洁何曾洁?云空未必空.可怜金玉质,终陷淖泥中. 
7 贾迎春 子系中山狼,得志便猖狂.金闺花柳质,一载赴黄粱. 
8 贾惜春 堪破三春景不长,缁衣顿改昔年装.可怜绣户侯门女,独卧青灯古佛旁. 
9 王熙凤 凡鸟偏从末世来,都知爱慕此生才.一从二令三人木,哭向金陵事更哀. 
10 贾巧姐 势败休云贵,家亡莫论亲.偶因济村妇,巧得遇恩人. 
11 李纨 桃李春风结子完,到头谁似一盆兰.如冰水好空相妒,枉与他人作笑谈. 
12 秦可卿 情天情海幻情深,情既相逢必主淫,漫言不肖皆出荣,造衅开端实在宁.

＝＝＝＝＝＝＝＝＝＝＝＝＝＝我是分割线＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ /* * 需求：选择下拉列表框，让文字分别显示相应的颜色 select对象中的集合options：获取 select 对象中 option 对象的集合。 */ <script> function changeColor_3(){ var oSelect = document.getElementsByName("selectColor_b")[0]; //select 对象中的selectedIndex 属性， //设置或获取选中选项位于 select 对象中的位置。 var index=oSelect.selectedIndex; alert(index); var collOption = oSelect.options; var text=collOption[index].innerHTML; //alert(text); var value=collOption[index].value; alert(value); var color_1=collOption[index].style.backgroundColor; alert(color_1); document.getElementById("div_id_text").style.color = color_1; } function changeColor_2(){ var oSelect = document.getElementsByName("selectColor_a")[0]; //获取所有的option。 /*with (oSelect) { var collOption = options; alert(collOption[selectedIndex].innerHTML); }*/ var colorVal = oSelect.options[oSelect.selectedIndex].value; document.getElementById("div_id_text").style.color = colorVal; } </script>

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

JavaScriptエンジン：実装の比較Apr 13, 2025 am 12:05 AM

さまざまなJavaScriptエンジンは、各エンジンの実装原則と最適化戦略が異なるため、JavaScriptコードを解析および実行するときに異なる効果をもたらします。 1。語彙分析：ソースコードを語彙ユニットに変換します。 2。文法分析：抽象的な構文ツリーを生成します。 3。最適化とコンパイル：JITコンパイラを介してマシンコードを生成します。 4。実行：マシンコードを実行します。 V8エンジンはインスタントコンピレーションと非表示クラスを通じて最適化され、Spidermonkeyはタイプ推論システムを使用して、同じコードで異なるパフォーマンスパフォーマンスをもたらします。

ブラウザを超えて：現実世界のJavaScriptApr 12, 2025 am 12:06 AM

現実世界におけるJavaScriptのアプリケーションには、サーバー側のプログラミング、モバイルアプリケーション開発、モノのインターネット制御が含まれます。 2。モバイルアプリケーションの開発は、ReactNativeを通じて実行され、クロスプラットフォームの展開をサポートします。 3.ハードウェアの相互作用に適したJohnny-Fiveライブラリを介したIoTデバイス制御に使用されます。

next.jsを使用してマルチテナントSaaSアプリケーションを構築する（バックエンド統合）Apr 11, 2025 am 08:23 AM

私はあなたの日常的な技術ツールを使用して機能的なマルチテナントSaaSアプリケーション（EDTECHアプリ）を作成しましたが、あなたは同じことをすることができます。まず、マルチテナントSaaSアプリケーションとは何ですか？マルチテナントSaaSアプリケーションを使用すると、Singの複数の顧客にサービスを提供できます

next.jsを使用してマルチテナントSaaSアプリケーションを構築する方法（フロントエンド統合）Apr 11, 2025 am 08:22 AM

この記事では、許可によって保護されたバックエンドとのフロントエンド統合を示し、next.jsを使用して機能的なedtech SaaSアプリケーションを構築します。 FrontEndはユーザーのアクセス許可を取得してUIの可視性を制御し、APIリクエストがロールベースに付着することを保証します

JavaScript：Web言語の汎用性の調査Apr 11, 2025 am 12:01 AM

JavaScriptは、現代のWeb開発のコア言語であり、その多様性と柔軟性に広く使用されています。 1）フロントエンド開発：DOM操作と最新のフレームワーク（React、Vue.JS、Angularなど）を通じて、動的なWebページとシングルページアプリケーションを構築します。 2）サーバー側の開発：node.jsは、非ブロッキングI/Oモデルを使用して、高い並行性とリアルタイムアプリケーションを処理します。 3）モバイルおよびデスクトップアプリケーション開発：クロスプラットフォーム開発は、反応および電子を通じて実現され、開発効率を向上させます。

JavaScriptの進化：現在の傾向と将来の見通しApr 10, 2025 am 09:33 AM

JavaScriptの最新トレンドには、TypeScriptの台頭、最新のフレームワークとライブラリの人気、WebAssemblyの適用が含まれます。将来の見通しは、より強力なタイプシステム、サーバー側のJavaScriptの開発、人工知能と機械学習の拡大、およびIoTおよびEDGEコンピューティングの可能性をカバーしています。

javascriptの分解：それが何をするのか、なぜそれが重要なのかApr 09, 2025 am 12:07 AM

JavaScriptは現代のWeb開発の基礎であり、その主な機能には、イベント駆動型のプログラミング、動的コンテンツ生成、非同期プログラミングが含まれます。 1）イベント駆動型プログラミングにより、Webページはユーザー操作に応じて動的に変更できます。 2）動的コンテンツ生成により、条件に応じてページコンテンツを調整できます。 3）非同期プログラミングにより、ユーザーインターフェイスがブロックされないようにします。 JavaScriptは、Webインタラクション、シングルページアプリケーション、サーバー側の開発で広く使用されており、ユーザーエクスペリエンスとクロスプラットフォーム開発の柔軟性を大幅に改善しています。

pythonまたはjavascriptの方がいいですか？Apr 06, 2025 am 12:14 AM

Pythonはデータサイエンスや機械学習により適していますが、JavaScriptはフロントエンドとフルスタックの開発により適しています。 1. Pythonは、簡潔な構文とリッチライブラリエコシステムで知られており、データ分析とWeb開発に適しています。 2。JavaScriptは、フロントエンド開発の中核です。 node.jsはサーバー側のプログラミングをサポートしており、フルスタック開発に適しています。

See all articles