PythonWeb_JavaScript_10_bj

于 2018-12-06 13:10:30 发布
阅读量254 收藏
点赞数
分类专栏： 自然语言处理 文章标签： 人工智能
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42758896/article/details/84698622
版权

节点的增删改查及属性的操作

增：document.createElement
xxx.appendChild(node)

删：xxx.removeChild(node)

查：document.getElementById(id)

属性：xxx.setAttribute()
xxx.getAttribute()

01_siblings.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DOM编程</title>
    <script>
        function changeAttr(){
            //获取对象
            var pEle1 = document.getElementById('p');
            //以当前对象为基准,查找"弟弟"节点
            var pEle2 = pEle1.nextSibling.nextSibling;
            //设置属性
            pEle2.setAttribute('align','center');
        }
    </script>
</head>
<body>
    <p id="p">段落1</p>	
    <p>段落2</p>
    <input type="button" value="单击我,让第二个段落居中" onclick="changeAttr()">
</body>
</html>

一、DOM编程

1.Node对象

1.1属性

firstChild

描述:返回指定节点的第一个子节点

语法:node node.firstChild

lastChild

描述:返回指定节点的最后一个子节点

语法:node node.lastChild

parentNode

描述:返回当前节点的父节点

语法:node node.parentNode

nextSibling

描述:返回当前节点的下一个兄弟节点(弟弟)

语法:node node.nextSibling

previousSibling

描述:返回当前节点的上一个兄弟节点(哥哥)

语法:node node.previousSibling

02_relationship.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DOM编程</title>
    <script>
        function changeAttr(){
            //获取段落对象  爹.弟弟.弟弟.第一个儿子.弟弟
            var pEle = document.getElementById('p');
            //以段落对象为基准，获取div对象
            var divEle = pEle.parentNode;
      //分布打印测试
      //window.alert(divEle);
            //获取div对象的"弟弟"节点--ul
            var ulEle = divEle.nextSibling.nextSibling;
      //分布打印测试
      //window.alert(ulEle);
            //获取ul对象的第一个li节点
            var liEle = ulEle.firstChild.nextSibling;
            //控制li节点的属性
            liEle.setAttribute('type','circle');
        }
    </script>
</head>
<body>
    <div>
        <p id="p">我是段落1</p>
        <p>我是段落2</p>
    </div>
  #text
    <ul>
    #text
        <li>我是li1</li>
        <li>我是li2</li>
    </ul>
    <input type="button" value="单击我,控制第一个li的类型" onclick="changeAttr()">
</body>
</html>


03_relationship_jQuery.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DOM编程</title>
    <script src="scripts/jquery-2.0.2.min.js"></script>
    <script>
        function changeAttr(){
            $('#p').parent().next().children().eq(0).attr('type','circle');
        }
    </script>
</head>
<body>
    <div>
        <p id="p">我是段落1</p>
        <p>我是段落2</p>
    </div>
    <ul>		
        <li>我是li1</li>
        <li>我是li2</li>
    </ul>
    <input type="button" value="单击我,控制第一个li的类型" onclick="changeAttr()">
</body>
</html>

1.2方法

replaceChild

描述:节点替换

语法:node node.replaceChild(newChild,oldChild)

改：将段落替换为图像
04_replaceChild.html




DOM编程



111


我是段落


222




2.Document对象

2.1方法

getElementsByTagName()

描述:获取文档中指定标记名称所形成的集合(数组)

语法:NodeList document.getElementsByTagName(tagName)

查：统计页面中所有段落的数量
05_getElementsByTagName.html




DOM编程



段落1


段落2



标题1


段落1


标题2





删：删除页面内所有段落
06_removeChild.html




DOM编程



我是BODY内的H1


段落1


段落2



我是DIV内的标题1


段落1


我是DIV内的标题2





查：获取DIV内的段落数量
07_getElementsByTagName.html




DOM编程



我是BODY内的H1


段落1


段落2



我是DIV内的标题1


段落1




  • 中华人民共和国




  • 中华人民共和国




  • 中华人民共和国




我是DIV内的标题2





改：改变段落内容
08_changeContent.html




DOM编程



我是段落




createTextNode()

描述:创建文本节点

语法:TextNode document.createTextNode(string)

增：创建段落，内容自定
09_createTextNode.html




DOM编程





3.Element对象

3.1方法

getElementsByTagName()

描述:获取指定元素中包含指定标记名称所形成的集合(数组)

语法:NodeList Element.getElementsByTagName(tagName)

二、HTML DOM

套路：
A.选定对象
B.控制—》属性、内容、节点的增删

HTML DOM提供针对处理HTML文档的API.

1.选取对象

Element document.getElementById(string id)

NodeList document.getElementsByTagName(string tagName)

NodeList Element.getElementsByTagName(string tagName)

2.属性控制

A.对于单个单词的HTML标记属性即HTML DOM对象属性;

10_attribute.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML DOM</title>
    <script>
        function changeAttr(){
            //1.获取对象
            var pEle = document.getElementById('p');
            //2.设置属性			
            pEle.align = 'center';
        }
    </script>
</head>
<body>
    <p id="p">我是段落</p>
    <input type="button" value="单击我，让段落居中" onclick="changeAttr()">
</body>
</html>

11_attribute.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML DOM</title>
    <script>
        function changeImage(){
            //获取对象
            var imageEle = document.getElementById('image');
            //设置属性
            imageEle.src = 'images/5b3df123N15e0ae37.jpg';

        }
        function changeLink(){
            //获取对象
            var linkEle = document.getElementById('link');
            //设置属性
            linkEle.href = 'http://www.baidu.com';
            linkEle.target = '_blank';
        }
    </script>
</head>
<body>
    <p><a href="#" id="link">百度</a></p>
    <input type="button" value="单击我,让链接生效" onclick="changeLink()">
    <p><img src="images/5b3c6885Na37cc2e5.jpg" alt="" id="image"></p>
    <input type="button" value="单击我,换图片" onclick="changeImage()">
    
</body>
</html>

12_captcha.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>刷新验证码</title>
    <style>
        body,p,div,h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dd,form,input,select,table,tr,td,th,tbody,thead,tfoot{
            margin: 0;
            padding: 0;
        }
        ul,ol{
            list-style: none;
        }
        a{
            color: #000;
            text-decoration: none;
        }
        img{
            border: 0;
        }
        table{
            border-collapse: collapse;
            border-spacing: 0;
        }
        #container{
            width:800px;
            margin: 0 auto;
        }
        #container table{
            width: 100%;
        }
        #container td{
            padding: 10px;
            border:1px solid #ccc;
        }
    </style>
    <script>
        function refreshCaptcha(){
            //1.获取对象
            var captchaEle = document.getElementById('captcha');
            //2.设置属性
            captchaEle.src = 'captcha.php?rnd=' + Math.random();
        }
    </script>
</head>
<body>
    <div id="container">
    <form action="" method="post">
        <table>
            <tr>
                <td>用户名</td>
                <td><input type="text" name="username" id="username"></td>
            </tr>
            <tr>
                <td>密码</td>
                <td><input type="password" name="password" id="password"></td>
            </tr>
            <tr>
                <td>确认密码</td>
                <td><input type="password" name="password2" id="password2"></td>
            </tr>
            <tr>
                <td>验证码</td>
                <td><input type="text" name="captcha"><img src="captcha.php" alt="" id="captcha"><a href="#" onclick="refreshCaptcha()">看不清,换一张</a></td>
            </tr>
            <tr>
                <td>&nbsp;</td>
                <td><input type="submit" value="免费注册"></td>
            </tr>
        </table>
    </form>
    </div>

</body>
</html>

B.对于合成词的HTML标记属性(如table标记的cellpading、cellspacing属性)
  在HTML DOM编程时,采用"驼峰标记法"命名(如cellPadding、cellSpacing)

13_table.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML DOM</title>
    <script>
        function changeAttr(){
            //1.获取对象
            var tableEle = document.getElementById('table');
            //2.设置属性
            tableEle.width = '500';
            tableEle.border = '3';
            //注意:cellPadding和cellSpacing的写法
            tableEle.cellSpacing = '0';
            tableEle.cellPadding = '20';
        }
    </script>
</head>
<body>
    <table id="table">
        <tr>
            <td>中国</td>
            <td>中国</td>
        </tr>
        <tr>
            <td>中国</td>
            <td>中国</td>
        </tr>
        <tr>
            <td>中国</td>
            <td>中国</td>
        </tr>
    </table>
    <input type="button" value="单击我,控制表格的属性" onclick="changeAttr()">
</body>
</html>

C.对于HTML标记的class属性,在HTML DOM编程时使用className取代;
(因为class是ECMAScript中的关键字)

14_class.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML DOM</title>
    <style type="text/css">
        .f1{
            font-size:30px;
            color:#f00;
        }
    </style>
    <script>
        function applyClass(){
            //1.获取对象
            var pEle = document.getElementById('p');
            //2.设置属性(注意className的写法)
            pEle.className = 'f1';
        }
    </script>
</head>
<body>
    <p id="p">中华人民共和国万岁</p>
    <input type="button" value="单击我,为段落使用f1CSS类" onclick="applyClass()">
</body>
</html>

D.对于HTML标记的布尔属性(如单/复选框的checked、列表项的selected属性)在HTML DOM编程时采用boolean类型表示;

15_checkbox.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML DOM</title>
    <script>
        function checkedItem(){
            //1.获取对象
            var checkboxEle = document.getElementById('checkbox');
            //2.设置属性
            //选中
            checkboxEle.checked = true;
            //禁用
            checkboxEle.disabled = true;
        }
    </script>
</head>
<body>
    <p><input type="checkbox" id="checkbox"></p>
    <p><input type="button" value="单击我,让复选框选中" onclick="checkedItem()"></p>
</body>
</html>

E.在HTML DOM编程时,某些HTMLDOM对象有自己特有的属性/方法;

17_form.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML DOM</title>
    <style>
        .button{
            display: inline-block;
            cursor: pointer;
            width: 120px;
            height: 30px;
            text-align: center;
            line-height: 30px;
            border:1px solid #333;
        }
    </style>
    <script>
        function submitForm(){
            //获取对象
            var formEle = document.getElementById('form');
            //调用表单对象的submit()方法以提交表单
            formEle.submit();
        }
    </script>
</head>
<body>
    <form id="form" action="1.php" method="post">
        <table width="100%" cellpadding="10" cellspacing="0" border="1">
            <tr>
                <td>用户名</td>
                <td><input type="text" name="username" id="username"></td>
            </tr>
            <tr>
                <td>邮箱</td>
                <td><input type="text" name="email" id="email"></td>
            </tr> 
            <tr>
                <td>&nbsp;</td>
                <td><b onclick="submitForm()" class="button">免费注册</b></td>
            </tr>
        </table>
    </form>
</body>
</html>

3.HTMLDocument对象

getElementsByName()方法

描述:获取文档中name属性相同的对象的组成的集合(数组)

语法:NodeList document.getElementsByName(string name)

16_MailList.html 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>QQ邮箱</title>
    <script>

        //单击"控制复选框"时调用;
        function controlCkboxClick(){
            //1.获取"控制复选框"对象
            var controlCkboxEle = document.getElementById('controlCkbox');
            //2.获取name为mailCkbox的复选框组成的集合(数组)
            var mailCkboxEles = document.getElementsByName('mailCkbox');
            //3.遍历mailCkbox的复选框集合,依次让每个成员的状态与控制复选框相同
            for(var n=0;n<mailCkboxEles.length;n++){
                mailCkboxEles[n].checked = controlCkboxEle.checked;
            }
            //调用控制按钮的自定义函数
            controlBtnStatus();
        }

        //获取被选定的"邮件复选框"的数量
        function getCheckedNum(){
            //计数器
            var count = 0;
            //邮件复选框集合
            var mailCkboxEles = document.getElementsByName('mailCkbox');
            for(var n=0;n<mailCkboxEles.length;n++){
                //只有当前邮件复选框被选定,计数器才加1
                if(mailCkboxEles[n].checked){
                    count++;
                }
            }
            return count;
        }

        //在单击每一个"邮件复选框"时调用
        function mailCkboxClick(){
            //获取"控制复选框"对象
            var controlCkboxEle = document.getElementById('controlCkbox');
            //获取name为mailCkbox的复选框组成的集合(数组)
            var mailCkboxEles = document.getElementsByName('mailCkbox');
            //原始方法
            /*
      if(邮件复选框集合的数量 == 被选定的邮件复选框数量){
         控制复选框被选定;
      } else {
          控制复选框不被选定
      }

            if(mailCkboxEles.length==getCheckedNum()){
                controlCkboxEle.checked = true;
            } else {				
                controlCkboxEle.checked = false;
            }
            */
            //简捷方法
            controlCkboxEle.checked = mailCkboxEles.length==getCheckedNum();
            //调用控制按锯的自定义函数
            controlBtnStatus();
        }

        //控制按钮的状态
        function controlBtnStatus(){
            var recycleBtnEle = document.getElementById('recycleBtn');
            var deleteBtnEle = document.getElementById('deleteBtn');
            //原始方式
            /*
            if(至少有一个邮件复选框被选定){
                放入回收站的按钮可用; 
                彻底删除的按钮可用;
            } else {
                放入回收站的按钮不可用;
                彻底删除的按钮不可用;
            }

            if(getCheckedNum()>=1){
                recycleBtnEle.disabled = false; 
                deleteBtnEle.disabled =  false;
            } else {
                recycleBtnEle.disabled = true;
                deleteBtnEle.disabled = true;
            }
            */
            //简捷方法
            recycleBtnEle.disabled = deleteBtnEle.disabled = !getCheckedNum()>=1; 
             
        }
    </script>
</head>
<body>
    <div id="container">
        <table width="100%" cellpadding="10" cellspacing="0" border="1">

            <tr>
                <td colspan="3">
                    <input type="button" value="放入回收站" disabled id="recycleBtn">
                    <input type="button" value="彻底删除" disabled id="deleteBtn">
                </td>
            </tr>

            <tr>
                <td><input type="checkbox" name="controlCkbox" id="controlCkbox" onclick="controlCkboxClick()"></td>
                <td>主题</td>
                <td>发信人</td>
            </tr>

            <tr>
                <td><input type="checkbox" name="mailCkbox" onclick="mailCkboxClick()"></td>
                <td>关于HTML的问题</td>
                <td>张三@sina.com.cn</td>
            </tr>

            <tr>
                <td><input type="checkbox" name="mailCkbox" onclick="mailCkboxClick()"></td>
                <td>老师,救命呀</td>
                <td>李四@sohu.com</td>
            </tr>

            <tr>
                <td><input type="checkbox" name="mailCkbox" onclick="mailCkboxClick()"></td>
                <td>老师,JavaScript怎么这么难呀</td>
                <td>wuhua@tedu.cn</td>
            </tr>

            <tr>
                <td><input type="checkbox" name="mailCkbox" onclick="mailCkboxClick()"></td>				
                <td>拼多,拼多多</td>
                <td>ali@ali.com</td>
            </tr>

            <tr>
                <td><input type="checkbox" name="mailCkbox" onclick="mailCkboxClick()"></td>				
                <td>奔跑步,小兔子</td>
                <td>ad@yahoo.com</td>
            </tr>

        </table>
    </div>
</body>
</html>

只有在全选的时候，控制复选框才应该被选中
问题是：如何证明全选呢？
集合的数量==集合中被选定的数量

集合的数量
document.getElementsByName(‘mailckbox’).length;

if(document.getElementsByName(‘mailckbox’).length == a
()){
控制复选框被选定
} else {
控制复选框不被选定
}

集合中被选定的数量 —》封成自定义函数 a()

回收站的实现—只需要在数据表添加一个字段来标识记录的状态即可

放入回收站/恢复—》UPDATE语句

放入回收站
UPDATE news SET isDeleted = 1 WHERE id = 80;

恢复
UPDATE news SET isDeleted = 0 WHERE id = 80;

彻底删除
DELETE FROM news WHERE id = 80;

单击"控制复选框"时要同时控制按钮的状态
单击"邮件复选框"时要同时控制按钮的状态

最好，将控制按钮状态的语句封装成自定义函数 a()

诗酒chèn年华
关注
专栏目录
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值