105. 修改表格中的内容

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>
<html>

    <head>
         <meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″>
         <title>添加删除记录练习</title>
         <link rel=”stylesheet” type=”text/css” href=”ex_2_style/css.css” />
         <script type=”text/javascript”>
        
             /*
              * 删除tr的响应函数
              */
             function delA() {

                //点击超链接以后需要删除超链接所在的那行
                 //这里我们点击那个超链接this就是谁
                 //获取当前tr
                 var tr = this.parentNode.parentNode;

                //获取要删除的员工的名字
                 //var name = tr.getElementsByTagName(“td”)[0].innerHTML;
                 var name = tr.children[0].innerHTML;

                //删除之前弹出一个提示框
                 /*
                  * confirm()用于弹出一个带有确认和取消按钮的提示框
                  *     需要一个字符串作为参数,该字符串将会作为提示文字显示出来
                  * 如果用户点击确认则会返回true,如果点击取消则返回false
                  */
                 var flag = confirm(“确认删除” + name + “吗?”);

                //如果用户点击确认
                 if(flag) {
                     //删除tr
                     tr.parentNode.removeChild(tr);
                 }

                /*
                  * 点击超链接以后,超链接会跳转页面,这个是超链接的默认行为,
                  *     但是此时我们不希望出现默认行为,可以通过在响应函数的最后return false来取消默认行为
                  */
                 return false;
             };

            window.onload = function() {

                /*
                  * 点击超链接以后,删除一个员工的信息
                  */

                //获取所有额超链接
                 var allA = document.getElementsByTagName(“a”);

                //为每个超链接都绑定一个单击响应函数
                 for(var i = 0; i < allA.length; i++) {
                     allA[i].onclick = delA;
                 }

                /*
                  * 添加员工的功能
                  *     – 点击按钮以后,将员工的信息添加到表格中
                  */

                //为提交按钮绑定一个单击响应函数
                 var addEmpButton = document.getElementById(“addEmpButton”);
                 addEmpButton.onclick = function() {

                    //获取用户添加的员工信息
                     //获取员工的名字
                     var name = document.getElementById(“empName”).value;
                     //获取员工的email和salary
                     var email = document.getElementById(“email”).value;
                     var salary = document.getElementById(“salary”).value;

                    //alert(name+”,”+email+”,”+salary);
                     /*
                      *  <tr>
                             <td>Tom</td>
                             <td>tom@tom.com</td>
                             <td>5000</td>
                             <td><a href=”javascript:;”>Delete</a></td>
                         </tr>
                         需要将获取到的信息保存到tr中
                      */

                    //创建一个tr
                     var tr = document.createElement(“tr”);

                    //设置tr中的内容
                     tr.innerHTML = “<td>”+name+”</td>”+
                                     “<td>”+email+”</td>”+
                                     “<td>”+salary+”</td>”+
                                     “<td><a href=’javascript:;’>Delete</a></td>”;
                                    
                     //获取刚刚添加的a元素,并为其绑定单击响应函数               
                     var a = tr.getElementsByTagName(“a”)[0];
                     a.onclick = delA;
                    
                     //获取table
                     var employeeTable = document.getElementById(“employeeTable”);
                     //获取employeeTable中的tbody
                     var tbody = employeeTable.getElementsByTagName(“tbody”)[0];
                     //将tr添加到tbodye中
                     tbody.appendChild(tr);
                     /*tbody.innerHTML += “<tr>”+
                    
                     “<td>”+name+”</td>”+
                                     “<td>”+email+”</td>”+
                                     “<td>”+salary+”</td>”+
                                     “<td><a href=’javascript:;’>Delete</a></td>”
                    
                     +”</tr>”;*/

                };

            };
         </script>
     </head>

    <body>

        <table id=”employeeTable”>
             <tr>
                 <th>Name</th>
                 <th>Email</th>
                 <th>Salary</th>
                 <th>&nbsp;</th>
             </tr>
             <tr>
                 <td>Tom</td>
                 <td>tom@tom.com</td>
                 <td>5000</td>
                 <td>
                     <a href=”javascript:;”>Delete</a>
                 </td>
             </tr>
             <tr>
                 <td>Jerry</td>
                 <td>jerry@sohu.com</td>
                 <td>8000</td>
                 <td>
                     <a href=”deleteEmp?id=002″>Delete</a>
                 </td>
             </tr>
             <tr>
                 <td>Bob</td>
                 <td>bob@tom.com</td>
                 <td>10000</td>
                 <td>
                     <a href=”deleteEmp?id=003″>Delete</a>
                 </td>
             </tr>
         </table>

        <div id=”formDiv”>

            <h4>添加新员工</h4>

            <table>
                 <tr>
                     <td class=”word”>name: </td>
                     <td class=”inp”>
                         <input type=”text” name=”empName” id=”empName” />
                     </td>
                 </tr>
                 <tr>
                     <td class=”word”>email: </td>
                     <td class=”inp”>
                         <input type=”text” name=”email” id=”email” />
                     </td>
                 </tr>
                 <tr>
                     <td class=”word”>salary: </td>
                     <td class=”inp”>
                         <input type=”text” name=”salary” id=”salary” />
                     </td>
                 </tr>
                 <tr>
                     <td colspan=”2″ align=”center”>
                         <button id=”addEmpButton”>
                         Submit
                     </button>
                     </td>
                 </tr>
             </table>

        </div>

    </body>

</html>

104. 向表格中添加记录

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>
<html>

    <head>
         <meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″>
         <title>添加删除记录练习</title>
         <link rel=”stylesheet” type=”text/css” href=”ex_2_style/css.css” />
         <script type=”text/javascript”>
        
             /*
              * 删除tr的响应函数
              */
             function delA() {

                //点击超链接以后需要删除超链接所在的那行
                 //这里我们点击那个超链接this就是谁
                 //获取当前tr
                 var tr = this.parentNode.parentNode;

                //获取要删除的员工的名字
                 //var name = tr.getElementsByTagName(“td”)[0].innerHTML;
                 var name = tr.children[0].innerHTML;

                //删除之前弹出一个提示框
                 /*
                  * confirm()用于弹出一个带有确认和取消按钮的提示框
                  *     需要一个字符串作为参数,该字符串将会作为提示文字显示出来
                  * 如果用户点击确认则会返回true,如果点击取消则返回false
                  */
                 var flag = confirm(“确认删除” + name + “吗?”);

                //如果用户点击确认
                 if(flag) {
                     //删除tr
                     tr.parentNode.removeChild(tr);
                 }

                /*
                  * 点击超链接以后,超链接会跳转页面,这个是超链接的默认行为,
                  *     但是此时我们不希望出现默认行为,可以通过在响应函数的最后return false来取消默认行为
                  */
                 return false;
             };

            window.onload = function() {

                /*
                  * 点击超链接以后,删除一个员工的信息
                  */

                //获取所有额超链接
                 var allA = document.getElementsByTagName(“a”);

                //为每个超链接都绑定一个单击响应函数
                 for(var i = 0; i < allA.length; i++) {
                     allA[i].onclick = delA;
                 }

                /*
                  * 添加员工的功能
                  *     – 点击按钮以后,将员工的信息添加到表格中
                  */

                //为提交按钮绑定一个单击响应函数
                 var addEmpButton = document.getElementById(“addEmpButton”);
                 addEmpButton.onclick = function() {

                    //获取用户添加的员工信息
                     //获取员工的名字
                     var name = document.getElementById(“empName”).value;
                     //获取员工的email和salary
                     var email = document.getElementById(“email”).value;
                     var salary = document.getElementById(“salary”).value;

                    //alert(name+”,”+email+”,”+salary);
                     /*
                      *  <tr>
                             <td>Tom</td>
                             <td>tom@tom.com</td>
                             <td>5000</td>
                             <td><a href=”javascript:;”>Delete</a></td>
                         </tr>
                         需要将获取到的信息保存到tr中
                      */

                    //创建一个tr
                     var tr = document.createElement(“tr”);

                    //创建四个td
                     var nameTd = document.createElement(“td”);
                     var emailTd = document.createElement(“td”);
                     var salaryTd = document.createElement(“td”);
                     var aTd = document.createElement(“td”);

                    //创建一个a元素
                     var a = document.createElement(“a”);

                    //创建文本节点
                     var nameText = document.createTextNode(name);
                     var emailText = document.createTextNode(email);
                     var salaryText = document.createTextNode(salary);
                     var delText = document.createTextNode(“Delete”);

                    //将文本条件到td中
                     nameTd.appendChild(nameText);
                     emailTd.appendChild(emailText);
                     salaryTd.appendChild(salaryText);

                    //向a中添加文本
                     a.appendChild(delText);
                     //将a添加到td中
                     aTd.appendChild(a);

                    //将td添加到tr中
                     tr.appendChild(nameTd);
                     tr.appendChild(emailTd);
                     tr.appendChild(salaryTd);
                     tr.appendChild(aTd);

                    //向a中添加href属性
                     a.href = “javascript:;”;

                    //为新添加的a再绑定一次单击响应函数
                     a.onclick = delA;

                    //获取table
                     var employeeTable = document.getElementById(“employeeTable”);
                     //获取employeeTable中的tbody
                     var tbody = employeeTable.getElementsByTagName(“tbody”)[0];
                     //将tr添加到tbodye中
                     tbody.appendChild(tr);

                };

            };
         </script>
     </head>

    <body>

        <table id=”employeeTable”>
             <tr>
                 <th>Name</th>
                 <th>Email</th>
                 <th>Salary</th>
                 <th>&nbsp;</th>
             </tr>
             <tr>
                 <td>Tom</td>
                 <td>tom@tom.com</td>
                 <td>5000</td>
                 <td>
                     <a href=”javascript:;”>Delete</a>
                 </td>
             </tr>
             <tr>
                 <td>Jerry</td>
                 <td>jerry@sohu.com</td>
                 <td>8000</td>
                 <td>
                     <a href=”deleteEmp?id=002″>Delete</a>
                 </td>
             </tr>
             <tr>
                 <td>Bob</td>
                 <td>bob@tom.com</td>
                 <td>10000</td>
                 <td>
                     <a href=”deleteEmp?id=003″>Delete</a>
                 </td>
             </tr>
         </table>

        <div id=”formDiv”>

            <h4>添加新员工</h4>

            <table>
                 <tr>
                     <td class=”word”>name: </td>
                     <td class=”inp”>
                         <input type=”text” name=”empName” id=”empName” />
                     </td>
                 </tr>
                 <tr>
                     <td class=”word”>email: </td>
                     <td class=”inp”>
                         <input type=”text” name=”email” id=”email” />
                     </td>
                 </tr>
                 <tr>
                     <td class=”word”>salary: </td>
                     <td class=”inp”>
                         <input type=”text” name=”salary” id=”salary” />
                     </td>
                 </tr>
                 <tr>
                     <td colspan=”2″ align=”center”>
                         <button id=”addEmpButton”>
                         Submit
                     </button>
                     </td>
                 </tr>
             </table>

        </div>

    </body>

</html>

103. 删除一行记录

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″>
<title>添加删除记录练习</title>
<link rel=”stylesheet” type=”text/css” href=”ex_2_style/css.css” />
<script type=”text/javascript”>
    
     window.onload = function(){
        
         /*
          * 点击超链接以后,删除一个员工的信息
          */
        
         //获取所有的超链接
         var allA = document.getElementsByTagName(“a”);
        
         //为每个超链接都绑定一个单击响应函数
         for(var i=0 ; i < allA.length ; i++){
             allA[i].onclick = function(){
                
                 //点击超链接以后需要删除超链接所在的那行
                 //这里我们点击那个超链接this就是谁
                 //获取当前tr
                 var tr = this.parentNode.parentNode;
                
                 //获取要删除的员工的名字
                 //var name = tr.getElementsByTagName(“td”)[0].innerHTML;
                 var name = tr.children[0].innerHTML;
                
                 //删除之前弹出一个提示框
                 /*
                  * confirm()用于弹出一个带有确认和取消按钮的提示框
                  *     需要一个字符串作为参数,该字符串将会作为提示文字显示出来
                  * 如果用户点击确认则会返回true,如果点击取消则返回false
                  */
                 var flag = confirm(“确认删除”+name+”吗?”);
                
                 //如果用户点击确认
                 if(flag){
                     //删除tr
                     tr.parentNode.removeChild(tr);
                 }
                
                 /*
                  * 点击超链接以后,超链接会跳转页面,这个是超链接的默认行为,
                  *     但是此时我们不希望出现默认行为,可以通过在响应函数的最后return false来取消默认行为
                  */
                 return false;
             };
         }
        
     };

   
</script>
</head>
<body>

    <table id=”employeeTable”>
         <tr>
             <th>Name</th>
             <th>Email</th>
             <th>Salary</th>
             <th>&nbsp;</th>
         </tr>
         <tr>
             <td>Tom</td>
             <td>tom@tom.com</td>
             <td>5000</td>
             <td><a href=”javascript:;”>Delete</a></td>
         </tr>
         <tr>
             <td>Jerry</td>
             <td>jerry@sohu.com</td>
             <td>8000</td>
             <td><a href=”deleteEmp?id=002″>Delete</a></td>
         </tr>
         <tr>
             <td>Bob</td>
             <td>bob@tom.com</td>
             <td>10000</td>
             <td><a href=”deleteEmp?id=003″>Delete</a></td>
         </tr>
     </table>

    <div id=”formDiv”>
    
         <h4>添加新员工</h4>

        <table>
             <tr>
                 <td class=”word”>name: </td>
                 <td class=”inp”>
                     <input type=”text” name=”empName” id=”empName” />
                 </td>
             </tr>
             <tr>
                 <td class=”word”>email: </td>
                 <td class=”inp”>
                     <input type=”text” name=”email” id=”email” />
                 </td>
             </tr>
             <tr>
                 <td class=”word”>salary: </td>
                 <td class=”inp”>
                     <input type=”text” name=”salary” id=”salary” />
                 </td>
             </tr>
             <tr>
                 <td colspan=”2″ align=”center”>
                     <button id=”addEmpButton” value=”abc”>
                         Submit
                     </button>
                 </td>
             </tr>
         </table>

    </div>

</body>
</html>

102. DOM增删改练习

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>
<html>
     <head>
         <meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″>
         <title>Untitled Document</title>
         <link rel=”stylesheet” type=”text/css” href=”style/css.css” />
         <script type=”text/javascript”>
        
             window.onload = function() {
                
                 //创建一个”广州”节点,添加到#city下
                 myClick(“btn01”,function(){
                     //创建广州节点 <li>广州</li>
                     //创建li元素节点
                     /*
                      * document.createElement()
                      *     可以用于创建一个元素节点对象,
                      *     它需要一个标签名作为参数,将会根据该标签名创建元素节点对象,
                      *     并将创建好的对象作为返回值返回
                      */
                     var li = document.createElement(“li”);
                    
                     //创建广州文本节点
                     /*
                      * document.createTextNode()
                      *     可以用来创建一个文本节点对象
                      *  需要一个文本内容作为参数,将会根据该内容创建文本节点,并将新的节点返回
                      */
                     var gzText = document.createTextNode(“广州”);
                    
                     //将gzText设置li的子节点
                     /*
                      * appendChild()
                      *      – 向一个父节点中添加一个新的子节点
                      *      – 用法:父节点.appendChild(子节点);
                      */
                     li.appendChild(gzText);
                    
                     //获取id为city的节点
                     var city = document.getElementById(“city”);
                    
                     //将广州添加到city下
                     city.appendChild(li);
                    
                    
                 });
                
                 //将”广州”节点插入到#bj前面
                 myClick(“btn02”,function(){
                     //创建一个广州
                     var li = document.createElement(“li”);
                     var gzText = document.createTextNode(“广州”);
                     li.appendChild(gzText);
                    
                     //获取id为bj的节点
                     var bj = document.getElementById(“bj”);
                    
                     //获取city
                     var city = document.getElementById(“city”);
                    
                     /*
                      * insertBefore()
                      *     – 可以在指定的子节点前插入新的子节点
                      *  – 语法:
                      *         父节点.insertBefore(新节点,旧节点);
                      */
                     city.insertBefore(li , bj);
                    
                    
                 });
                
                
                 //使用”广州”节点替换#bj节点
                 myClick(“btn03”,function(){
                     //创建一个广州
                     var li = document.createElement(“li”);
                     var gzText = document.createTextNode(“广州”);
                     li.appendChild(gzText);
                    
                     //获取id为bj的节点
                     var bj = document.getElementById(“bj”);
                    
                     //获取city
                     var city = document.getElementById(“city”);
                    
                     /*
                      * replaceChild()
                      *     – 可以使用指定的子节点替换已有的子节点
                      *     – 语法:父节点.replaceChild(新节点,旧节点);
                      */
                     city.replaceChild(li , bj);
                    
                    
                 });
                
                 //删除#bj节点
                 myClick(“btn04”,function(){
                     //获取id为bj的节点
                     var bj = document.getElementById(“bj”);
                     //获取city
                     var city = document.getElementById(“city”);
                    
                     /*
                      * removeChild()
                      *     – 可以删除一个子节点
                      *     – 语法:父节点.removeChild(子节点);
                      *        
                      *         子节点.parentNode.removeChild(子节点);
                      */
                     //city.removeChild(bj);
                    
                     bj.parentNode.removeChild(bj);
                 });
                
                
                 //读取#city内的HTML代码
                 myClick(“btn05”,function(){
                     //获取city
                     var city = document.getElementById(“city”);
                    
                     alert(city.innerHTML);
                 });
                
                 //设置#bj内的HTML代码
                 myClick(“btn06” , function(){
                     //获取bj
                     var bj = document.getElementById(“bj”);
                     bj.innerHTML = “昌平”;
                 });
                
                 myClick(“btn07”,function(){
                    
                     //向city中添加广州
                     var city = document.getElementById(“city”);
                    
                     /*
                      * 使用innerHTML也可以完成DOM的增删改的相关操作
                      * 一般我们会两种方式结合使用
                      */
                     //city.innerHTML += “<li>广州</li>”;
                    
                     //创建一个li
                     var li = document.createElement(“li”);
                     //向li中设置文本
                     li.innerHTML = “广州”;
                     //将li添加到city中
                     city.appendChild(li);
                    
                 });
                
                
             };
            
             function myClick(idStr, fun) {
                 var btn = document.getElementById(idStr);
                 btn.onclick = fun;
             }
            
        
         </script>
        
     </head>
     <body>
         <div id=”total”>
             <div class=”inner”>
                 <p>
                     你喜欢哪个城市?
                 </p>

                <ul id=”city”>
                     <li id=”bj”>北京</li>
                     <li>上海</li>
                     <li>东京</li>
                     <li>首尔</li>
                 </ul>
                
             </div>
         </div>
         <div id=”btnList”>
             <div><button id=”btn01″>创建一个”广州”节点,添加到#city下</button></div>
             <div><button id=”btn02″>将”广州”节点插入到#bj前面</button></div>
             <div><button id=”btn03″>使用”广州”节点替换#bj节点</button></div>
             <div><button id=”btn04″>删除#bj节点</button></div>
             <div><button id=”btn05″>读取#city内的HTML代码</button></div>
             <div><button id=”btn06″>设置#bj内的HTML代码</button></div>
             <div><button id=”btn07″>创建一个”广州”节点,添加到#city下</button></div>
         </div>
     </body>
</html>

100. 全选练习

<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>
<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″>
<title>全选练习</title>
<script type=”text/javascript”>

    window.onload = function(){
        
        
         //获取四个多选框items
         var items = document.getElementsByName(“items”);
         //获取全选/全不选的多选框
         var checkedAllBox = document.getElementById(“checkedAllBox”);
        
         /*
          * 全选按钮
          *     – 点击按钮以后,四个多选框全都被选中
          */
        
         //1.#checkedAllBtn
         //为id为checkedAllBtn的按钮绑定一个单击响应函数
         var checkedAllBtn = document.getElementById(“checkedAllBtn”);
         checkedAllBtn.onclick = function(){
            
            
             //遍历items
             for(var i=0 ; i<items.length ; i++){
                
                 //通过多选框的checked属性可以来获取或设置多选框的选中状态
                 //alert(items[i].checked);
                
                 //设置四个多选框变成选中状态
                 items[i].checked = true;
             }
            
             //将全选/全不选设置为选中
             checkedAllBox.checked = true;
            
            
         };
        
         /*
          * 全不选按钮
          *     – 点击按钮以后,四个多选框都变成没选中的状态
          */
         //2.#checkedNoBtn
         //为id为checkedNoBtn的按钮绑定一个单击响应函数
         var checkedNoBtn = document.getElementById(“checkedNoBtn”);
         checkedNoBtn.onclick = function(){
            
             for(var i=0; i<items.length ; i++){
                 //将四个多选框设置为没选中的状态
                 items[i].checked = false;
             }
            
             //将全选/全不选设置为不选中
             checkedAllBox.checked = false;
            
         };
        
         /*
          * 反选按钮
          *     – 点击按钮以后,选中的变成没选中,没选中的变成选中
          */
         //3.#checkedRevBtn
         var checkedRevBtn = document.getElementById(“checkedRevBtn”);
         checkedRevBtn.onclick = function(){
            
             //将checkedAllBox设置为选中状态
             checkedAllBox.checked = true;
            
             for(var i=0; i<items.length ; i++){
                
                 //判断多选框状态
                 /*if(items[i].checked){
                     //证明多选框已选中,则设置为没选中状态
                     items[i].checked = false;
                 }else{
                     //证明多选框没选中,则设置为选中状态
                     items[i].checked = true;
                 }*/
                
                 items[i].checked = !items[i].checked;
                
                 //判断四个多选框是否全选
                 //只要有一个没选中则就不是全选
                 if(!items[i].checked){
                     //一旦进入判断,则证明不是全选状态
                     //将checkedAllBox设置为没选中状态
                     checkedAllBox.checked = false;
                 }
             }
            
             //在反选时也需要判断四个多选框是否全都选中
            
            
            
         };
        
         /*
          * 提交按钮:
          *     – 点击按钮以后,将所有选中的多选框的value属性值弹出
          */
         //4.#sendBtn
         //为sendBtn绑定单击响应函数
         var sendBtn = document.getElementById(“sendBtn”);
         sendBtn.onclick = function(){
             //遍历items
             for(var i=0 ; i<items.length ; i++){
                 //判断多选框是否选中
                 if(items[i].checked){
                     alert(items[i].value);
                 }
             }
         };
        
        
         //5.#checkedAllBox
         /*
          * 全选/全不选 多选框
          *     – 当它选中时,其余的也选中,当它取消时其余的也取消
          *
          * 在事件的响应函数中,响应函数是给谁绑定的this就是谁
          */
         //为checkedAllBox绑定单击响应函数
         checkedAllBox.onclick = function(){
            
             //alert(this === checkedAllBox);
            
             //设置多选框的选中状态
             for(var i=0; i <items.length ; i++){
                 items[i].checked = this.checked;
             }
            
         };
        
         //6.items
         /*
          * 如果四个多选框全都选中,则checkedAllBox也应该选中
          * 如果四个多选框没都选中,则checkedAllBox也不应该选中
          */
        
         //为四个多选框分别绑定点击响应函数
         for(var i=0 ; i<items.length ; i++){
             items[i].onclick = function(){
                
                 //将checkedAllBox设置为选中状态
                 checkedAllBox.checked = true;
                
                 for(var j=0 ; j<items.length ; j++){
                     //判断四个多选框是否全选
                     //只要有一个没选中则就不是全选
                     if(!items[j].checked){
                         //一旦进入判断,则证明不是全选状态
                         //将checkedAllBox设置为没选中状态
                         checkedAllBox.checked = false;
                         //一旦进入判断,则已经得出结果,不用再继续执行循环
                         break;
                     }
                    
                 }
                
                
                
             };
         }
        
        
     };
    
</script>
</head>
<body>

    <form method=”post” action=””>
         你爱好的运动是?<input type=”checkbox” id=”checkedAllBox” />全选/全不选
        
         <br />
         <input type=”checkbox” name=”items” value=”足球” />足球
         <input type=”checkbox” name=”items” value=”篮球” />篮球
         <input type=”checkbox” name=”items” value=”羽毛球” />羽毛球
         <input type=”checkbox” name=”items” value=”乒乓球” />乒乓球
         <br />
         <input type=”button” id=”checkedAllBtn” value=”全 选” />
         <input type=”button” id=”checkedNoBtn” value=”全不选” />
         <input type=”button” id=”checkedRevBtn” value=”反 选” />
         <input type=”button” id=”sendBtn” value=”提 交” />
     </form>
</body>
</html>

97. dom查询练习

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>
<html>
     <head>
         <meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″>
         <title>Untitled Document</title>
         <link rel=”stylesheet” type=”text/css” href=”style/css.css” />
         <script type=”text/javascript”>
        
             /*
              * 定义一个函数,专门用来为指定元素绑定单击响应函数
              *     参数:
              *         idStr 要绑定单击响应函数的对象的id属性值
              *         fun 事件的回调函数,当单击元素时,该函数将会被触发
              */
             function myClick(idStr , fun){
                 var btn = document.getElementById(idStr);
                 btn.onclick = fun;
             }
        
             window.onload = function(){
                
                 //为id为btn01的按钮绑定一个单击响应函数
                 var btn01 = document.getElementById(“btn01”);
                 btn01.onclick = function(){
                     //查找#bj节点
                     var bj = document.getElementById(“bj”);
                     //打印bj
                     //innerHTML 通过这个属性可以获取到元素内部的html代码
                     alert(bj.innerHTML);
                 };
                
                
                 //为id为btn02的按钮绑定一个单击响应函数
                 var btn02 = document.getElementById(“btn02”);
                 btn02.onclick = function(){
                     //查找所有li节点
                     //getElementsByTagName()可以根据标签名来获取一组元素节点对象
                     //这个方法会给我们返回一个类数组对象,所有查询到的元素都会封装到对象中
                     //即使查询到的元素只有一个,也会封装到数组中返回
                     var lis = document.getElementsByTagName(“li”);
                    
                     //打印lis
                     //alert(lis.length);
                    
                     //变量lis
                     for(var i=0 ; i<lis.length ; i++){
                         alert(lis[i].innerHTML);
                     }
                 };
                
                
                 //为id为btn03的按钮绑定一个单击响应函数
                 var btn03 = document.getElementById(“btn03”);
                 btn03.onclick = function(){
                     //查找name=gender的所有节点
                     var inputs = document.getElementsByName(“gender”);
                    
                     //alert(inputs.length);
                    
                     for(var i=0 ; i<inputs.length ; i++){
                         /*
                          * innerHTML用于获取元素内部的HTML代码的
                          *     对于自结束标签,这个属性没有意义
                          */
                         //alert(inputs[i].innerHTML);
                         /*
                          * 如果需要读取元素节点属性,
                          *     直接使用 元素.属性名
                          *         例子:元素.id 元素.name 元素.value
                          *         注意:class属性不能采用这种方式,
                          *             读取class属性时需要使用 元素.className
                          */
                         alert(inputs[i].className);
                     }
                 };
                
                 //为id为btn04的按钮绑定一个单击响应函数
                 var btn04 = document.getElementById(“btn04”);
                 btn04.onclick = function(){
                    
                     //获取id为city的元素
                     var city = document.getElementById(“city”);
                    
                     //查找#city下所有li节点
                     var lis = city.getElementsByTagName(“li”);
                    
                     for(var i=0 ; i<lis.length ; i++){
                         alert(lis[i].innerHTML);
                     }
                    
                 };
                
                 //为id为btn05的按钮绑定一个单击响应函数
                 var btn05 = document.getElementById(“btn05”);
                 btn05.onclick = function(){
                     //获取id为city的节点
                     var city = document.getElementById(“city”);
                     //返回#city的所有子节点
                     /*
                      * childNodes属性会获取包括文本节点在内的所有节点
                      * 根据DOM标签标签间空白也会当成文本节点
                      * 注意:在IE8及以下的浏览器中,不会将空白文本当成子节点,
                      *     所以该属性在IE8中会返回4个子元素而其他浏览器是9个
                      */
                     var cns = city.childNodes;
                    
                     //alert(cns.length);
                    
                     /*for(var i=0 ; i<cns.length ; i++){
                         alert(cns[i]);
                     }*/
                    
                     /*
                      * children属性可以获取当前元素的所有子元素
                      */
                     var cns2 = city.children;
                     alert(cns2.length);
                 };
                
                 //为id为btn06的按钮绑定一个单击响应函数
                 var btn06 = document.getElementById(“btn06”);
                 btn06.onclick = function(){
                     //获取id为phone的元素
                     var phone = document.getElementById(“phone”);
                     //返回#phone的第一个子节点
                     //phone.childNodes[0];
                     //firstChild可以获取到当前元素的第一个子节点(包括空白文本节点)
                     var fir = phone.firstChild;
                    
                     //firstElementChild获取当前元素的第一个子元素
                     /*
                      * firstElementChild不支持IE8及以下的浏览器,
                      *     如果需要兼容他们尽量不要使用
                      */
                     //fir = phone.firstElementChild;
                    
                     alert(fir);
                 };
                
                 //为id为btn07的按钮绑定一个单击响应函数
                 myClick(“btn07”,function(){
                    
                     //获取id为bj的节点
                     var bj = document.getElementById(“bj”);
                    
                     //返回#bj的父节点
                     var pn = bj.parentNode;
                    
                     alert(pn.innerHTML);
                    
                     /*
                      * innerText
                      *     – 该属性可以获取到元素内部的文本内容
                      *     – 它和innerHTML类似,不同的是它会自动将html去除
                      */
                     //alert(pn.innerText);
                    
                    
                 });
                
                
                 //为id为btn08的按钮绑定一个单击响应函数
                 myClick(“btn08”,function(){
                    
                     //获取id为android的元素
                     var and = document.getElementById(“android”);
                    
                     //返回#android的前一个兄弟节点(也可能获取到空白的文本)
                     var ps = and.previousSibling;
                    
                     //previousElementSibling获取前一个兄弟元素,IE8及以下不支持
                     //var pe = and.previousElementSibling;
                    
                     alert(ps);
                    
                 });
                
                 //读取#username的value属性值
                 myClick(“btn09”,function(){
                     //获取id为username的元素
                     var um = document.getElementById(“username”);
                     //读取um的value属性值
                     //文本框的value属性值,就是文本框中填写的内容
                     alert(um.value);
                 });
                
                
                 //设置#username的value属性值
                 myClick(“btn10”,function(){
                     //获取id为username的元素
                     var um = document.getElementById(“username”);
                    
                     um.value = “今天天气真不错~~~”;
                 });
                
                
                 //返回#bj的文本值
                 myClick(“btn11”,function(){
                    
                     //获取id为bj的元素
                     var bj = document.getElementById(“bj”);
                    
                     //alert(bj.innerHTML);
                     //alert(bj.innerText);
                    
                     //获取bj中的文本节点
                     /*var fc = bj.firstChild;
                     alert(fc.nodeValue);*/
                    
                     alert(bj.firstChild.nodeValue);
                    
                    
                 });
                
             };
            
        
         </script>
     </head>
     <body>
         <div id=”total”>
             <div class=”inner”>
                 <p>
                     你喜欢哪个城市?
                 </p>

                <ul id=”city”>
                     <li id=”bj”>北京</li>
                     <li>上海</li>
                     <li>东京</li>
                     <li>首尔</li>
                 </ul>

                <br>
                 <br>

                <p>
                     你喜欢哪款单机游戏?
                 </p>

                <ul id=”game”>
                     <li id=”rl”>红警</li>
                     <li>实况</li>
                     <li>极品飞车</li>
                     <li>魔兽</li>
                 </ul>

                <br />
                 <br />

                <p>
                     你手机的操作系统是?
                 </p>

                <ul id=”phone”><li>IOS</li> <li id=”android”>Android</li><li>Windows Phone</li></ul>
             </div>

            <div class=”inner”>
                 gender:
                 <input class=”hello” type=”radio” name=”gender” value=”male”/>
                 Male
                 <input class=”hello” type=”radio” name=”gender” value=”female”/>
                 Female
                 <br>
                 <br>
                 name:
                 <input type=”text” name=”name” id=”username” value=”abcde”/>
             </div>
         </div>
         <div id=”btnList”>
             <div><button id=”btn01″>查找#bj节点</button></div>
             <div><button id=”btn02″>查找所有li节点</button></div>
             <div><button id=”btn03″>查找name=gender的所有节点</button></div>
             <div><button id=”btn04″>查找#city下所有li节点</button></div>
             <div><button id=”btn05″>返回#city的所有子节点</button></div>
             <div><button id=”btn06″>返回#phone的第一个子节点</button></div>
             <div><button id=”btn07″>返回#bj的父节点</button></div>
             <div><button id=”btn08″>返回#android的前一个兄弟节点</button></div>
             <div><button id=”btn09″>返回#username的value属性值</button></div>
             <div><button id=”btn10″>设置#username的value属性值</button></div>
             <div><button id=”btn11″>返回#bj的文本值</button></div>
         </div>
     </body>
</html>

99. 图片播放器

<!DOCTYPE html>
<html>
     <head>
         <meta charset=”UTF-8″>
         <title></title>
         <style type=”text/css”>
            
             *{
                 margin: 0;
                 padding: 0;
             }
            
             #outer{
                 width: 500px;
                 margin: 50px auto;
                 padding: 10px;
                 background-color: greenyellow;
                 /*设置文本居中*/
                 text-align: center;
             }
         </style>
        
         <script type=”text/javascript”>
            
             window.onload = function(){
                
                 /*
                  * 点击按钮切换图片
                  */
                
                 //获取两个按钮
                 var prev = document.getElementById(“prev”);
                 var next = document.getElementById(“next”);
                
                 /*
                  * 要切换图片就是要修改img标签的src属性
                  */
                
                 //获取img标签
                 var img = document.getElementsByTagName(“img”)[0];
                
                 //创建一个数组,用来保存图片的路径
                 var imgArr = [“img/1.jpg” , “img/2.jpg” , “img/3.jpg” , “img/4.jpg” ,”img/5.jpg”];
                
                 //创建一个变量,来保存当前正在显示的图片的索引
                 var index = 0;
                
                 //获取id为info的p元素
                 var info = document.getElementById(“info”);
                 //设置提示文字
                 info.innerHTML = “一共 “+imgArr.length+” 张图片,当前第 “+(index+1)+” 张”;
                
                
                 //分别为两个按钮绑定单击响应函数
                 prev.onclick = function(){
                    
                     /*
                      * 切换到上一张,索引自减
                      */
                     index–;
                    
                     //判断index是否小于0
                     if(index < 0){
                         index = imgArr.length – 1;
                     }
                    
                     img.src = imgArr[index];
                    
                     //当点击按钮以后,重新设置信息
                     info.innerHTML = “一共 “+imgArr.length+” 张图片,当前第 “+(index+1)+” 张”;
                 };
                
                 next.onclick = function(){
                    
                     /*
                      * 切换到下一张是index自增
                      */
                     index++;
                    
                     if(index > imgArr.length – 1){
                         index = 0;
                     }
                    
                     //切换图片就是修改img的src属性
                     //要修改一个元素的属性 元素.属性 = 属性值
                     img.src = imgArr[index];
                    
                     //当点击按钮以后,重新设置信息
                     info.innerHTML = “一共 “+imgArr.length+” 张图片,当前第 “+(index+1)+” 张”;
                    
                 };
                
                
             };
            
            
         </script>
     </head>
     <body>
         <div id=”outer”>
            
             <p id=”info”></p>
            
             <img src=”img/1.jpg” alt=”冰棍” />
            
             <button id=”prev”>上一张</button>
             <button id=”next”>下一张</button>
            
         </div>
     </body>
</html>

94. dom查询练习

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>
<html>
     <head>
         <meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″>
         <title>Untitled Document</title>
         <link rel=”stylesheet” type=”text/css” href=”style/css.css” />
         <script type=”text/javascript”>
        
             window.onload = function(){
                
                 //为id为btn01的按钮绑定一个单击响应函数
                 var btn01 = document.getElementById(“btn01”);
                 btn01.onclick = function(){
                     //查找#bj节点
                     var bj = document.getElementById(“bj”);
                     //打印bj
                     //innerHTML 通过这个属性可以获取到元素内部的html代码
                     alert(bj.innerHTML);
                 };
                
                
                 //为id为btn02的按钮绑定一个单击响应函数
                 var btn02 = document.getElementById(“btn02”);
                 btn02.onclick = function(){
                     //查找所有li节点
                     //getElementsByTagName()可以根据标签名来获取一组元素节点对象
                     //这个方法会给我们返回一个类数组对象,所有查询到的元素都会封装到对象中
                     //即使查询到的元素只有一个,也会封装到数组中返回
                     var lis = document.getElementsByTagName(“li”);
                    
                     //打印lis
                     //alert(lis.length);
                    
                     //变量lis
                     for(var i=0 ; i<lis.length ; i++){
                         alert(lis[i].innerHTML);
                     }
                 };
                
                
                 //为id为btn03的按钮绑定一个单击响应函数
                 var btn03 = document.getElementById(“btn03”);
                 btn03.onclick = function(){
                     //查找name=gender的所有节点
                     var inputs = document.getElementsByName(“gender”);
                    
                     //alert(inputs.length);
                    
                     for(var i=0 ; i<inputs.length ; i++){
                         /*
                          * innerHTML用于获取元素内部的HTML代码的
                          *     对于自结束标签,这个属性没有意义
                          */
                         //alert(inputs[i].innerHTML);
                         /*
                          * 如果需要读取元素节点属性,
                          *     直接使用 元素.属性名
                          *         例子:元素.id 元素.name 元素.value
                          *         注意:class属性不能采用这种方式,
                          *             读取class属性时需要使用 元素.className
                          */
                         alert(inputs[i].className);
                     }
                 };
                
                
                
                 //查找#city下所有li节点
                
                 var btn04=document.getElementById(“btn04”);
                
                 btn04.onclick=function(){
                    
                 }
                 //alert(btn04);
                 //返回#city的所有子节点
                 //返回#phone的第一个子节点
                 //返回#bj的父节点
                 //返回#android的前一个兄弟节点
                 //读取#username的value属性值
                 //设置#username的value属性值
                 //返回#bj的文本值
                
             };
            
        
         </script>
     </head>
     <body>
         <div id=”total”>
             <div class=”inner”>
                 <p>
                     你喜欢哪个城市?
                 </p>

                <ul id=”city”>
                     <li id=”bj”>北京</li>
                     <li>上海</li>
                     <li>东京</li>
                     <li>首尔</li>
                 </ul>

                <br>
                 <br>

                <p>
                     你喜欢哪款单机游戏?
                 </p>

                <ul id=”game”>
                     <li id=”rl”>红警</li>
                     <li>实况</li>
                     <li>极品飞车</li>
                     <li>魔兽</li>
                 </ul>

                <br />
                 <br />

                <p>
                     你手机的操作系统是?
                 </p>

                <ul id=”phone”><li>IOS</li><li id=”android”>Android</li><li>Windows Phone</li></ul>
             </div>

            <div class=”inner”>
                 gender:
                 <input class=”hello” type=”radio” name=”gender” value=”male”/>
                 Male
                 <input class=”hello” type=”radio” name=”gender” value=”female”/>
                 Female
                 <br>
                 <br>
                 name:
                 <input type=”text” name=”name” id=”username” value=”abcde”/>
             </div>
         </div>
         <div id=”btnList”>
             <div><button id=”btn01″>查找#bj节点</button></div>
             <div><button id=”btn02″>查找所有li节点</button></div>
             <div><button id=”btn03″>查找name=gender的所有节点</button></div>
             <div><button id=”btn04″>查找#city下所有li节点</button></div>
             <div><button id=”btn05″>返回#city的所有子节点</button></div>
             <div><button id=”btn06″>返回#phone的第一个子节点</button></div>
             <div><button id=”btn07″>返回#bj的父节点</button></div>
             <div><button id=”btn08″>返回#android的前一个兄弟节点</button></div>
             <div><button id=”btn09″>返回#username的value属性值</button></div>
             <div><button id=”btn10″>设置#username的value属性值</button></div>
             <div><button id=”btn11″>返回#bj的文本值</button></div>
         </div>
     </body>
</html>

93. 文档的加载

<!DOCTYPE html>
<html>
     <head>
         <meta charset=”UTF-8″>
         <title></title>
         <script type=”text/javascript”>
        
             /*
              * 浏览器在加载一个页面时,是按照自上向下的顺序加载的,
              *     读取到一行就运行一行,如果将script标签写到页面的上边,
              *     在代码执行时,页面还没有加载,页面没有加载DOM对象也没有加载
              *     会导致无法获取到DOM对象
              */
            
            
            
             /*
              * onload事件会在整个页面加载完成之后才触发
              * 为window绑定一个onload事件
              *         该事件对应的响应函数将会在页面加载完成之后执行,
              *         这样可以确保我们的代码执行时所有的DOM对象已经加载完毕了
              *    
              */
             window.onload = function(){
                 //获取id为btn的按钮
                 var btn = document.getElementById(“btn”);
                 //为按钮绑定一个单击响应函数
                 btn.onclick = function(){
                     alert(“hello”);
                 };
             };
            
            
         </script>
     </head>
     <body>
        
         <button id=”btn”>点我一下</button>
        
         <!–<script type=”text/javascript”>
            
             /*
              * 将js代码编写到页面的下部就是为了,可以在页面加载完毕以后再执行js代码
              */
             //获取id为btn的按钮
             var btn = document.getElementById(“btn”);
             //为按钮绑定一个单击响应函数
             btn.onclick = function(){
                 alert(“hello”);
             };
            
         </script>–>
        
     </body>
</html>

94. DOM查询

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>
<html>
     <head>
         <meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″>
         <title>Untitled Document</title>
         <link rel=”stylesheet” type=”text/css” href=”style/css.css” />
         <script type=”text/javascript”>
        
             window.onload = function(){
                
                 //为id为btn01的按钮绑定一个单击响应函数
                 var btn01 = document.getElementById(“btn01”);
                 btn01.onclick = function(){
                     //查找#bj节点
                     var bj = document.getElementById(“bj”);
                     //打印bj
                     //innerHTML 通过这个属性可以获取到元素内部的html代码
                     alert(bj.innerHTML);
                 };
                
                
                 //为id为btn02的按钮绑定一个单击响应函数
                 var btn02 = document.getElementById(“btn02”);
                 btn02.onclick = function(){
                     //查找所有li节点
                     //getElementsByTagName()可以根据标签名来获取一组元素节点对象
                     //这个方法会给我们返回一个类数组对象,所有查询到的元素都会封装到对象中
                     //即使查询到的元素只有一个,也会封装到数组中返回
                     var lis = document.getElementsByTagName(“li”);
                    
                     //打印lis
                     //alert(lis.length);
                    
                     //变量lis
                     for(var i=0 ; i<lis.length ; i++){
                         alert(lis[i].innerHTML);
                     }
                 };
                
                
                 //为id为btn03的按钮绑定一个单击响应函数
                 var btn03 = document.getElementById(“btn03”);
                 btn03.onclick = function(){
                     //查找name=gender的所有节点
                     var inputs = document.getElementsByName(“gender”);
                    
                     //alert(inputs.length);
                    
                     for(var i=0 ; i<inputs.length ; i++){
                         /*
                          * innerHTML用于获取元素内部的HTML代码的
                          *     对于自结束标签,这个属性没有意义
                          */
                         //alert(inputs[i].innerHTML);
                         /*
                          * 如果需要读取元素节点属性,
                          *     直接使用 元素.属性名
                          *         例子:元素.id 元素.name 元素.value
                          *         注意:class属性不能采用这种方式,
                          *             读取class属性时需要使用 元素.className
                          */
                         alert(inputs[i].className);
                     }
                 };
                
                
                
                 //查找#city下所有li节点
                 //返回#city的所有子节点
                 //返回#phone的第一个子节点
                 //返回#bj的父节点
                 //返回#android的前一个兄弟节点
                 //读取#username的value属性值
                 //设置#username的value属性值
                 //返回#bj的文本值
                
             };
            
        
         </script>
     </head>
     <body>
         <div id=”total”>
             <div class=”inner”>
                 <p>
                     你喜欢哪个城市?
                 </p>

                <ul id=”city”>
                     <li id=”bj”>北京</li>
                     <li>上海</li>
                     <li>东京</li>
                     <li>首尔</li>
                 </ul>

                <br>
                 <br>

                <p>
                     你喜欢哪款单机游戏?
                 </p>

                <ul id=”game”>
                     <li id=”rl”>红警</li>
                     <li>实况</li>
                     <li>极品飞车</li>
                     <li>魔兽</li>
                 </ul>

                <br />
                 <br />

                <p>
                     你手机的操作系统是?
                 </p>

                <ul id=”phone”><li>IOS</li><li id=”android”>Android</li><li>Windows Phone</li></ul>
             </div>

            <div class=”inner”>
                 gender:
                 <input class=”hello” type=”radio” name=”gender” value=”male”/>
                 Male
                 <input class=”hello” type=”radio” name=”gender” value=”female”/>
                 Female
                 <br>
                 <br>
                 name:
                 <input type=”text” name=”name” id=”username” value=”abcde”/>
             </div>
         </div>
         <div id=”btnList”>
             <div><button id=”btn01″>查找#bj节点</button></div>
             <div><button id=”btn02″>查找所有li节点</button></div>
             <div><button id=”btn03″>查找name=gender的所有节点</button></div>
             <div><button id=”btn04″>查找#city下所有li节点</button></div>
             <div><button id=”btn05″>返回#city的所有子节点</button></div>
             <div><button id=”btn06″>返回#phone的第一个子节点</button></div>
             <div><button id=”btn07″>返回#bj的父节点</button></div>
             <div><button id=”btn08″>返回#android的前一个兄弟节点</button></div>
             <div><button id=”btn09″>返回#username的value属性值</button></div>
             <div><button id=”btn10″>设置#username的value属性值</button></div>
             <div><button id=”btn11″>返回#bj的文本值</button></div>
         </div>
     </body>
</html>