zoukankan html css js c++ java

【Python之路Day16】前端知识篇之Dom、JQuery

Dom

文档对象模型（Document Object Model，缩写DOM），是W3C组织推荐的处理可扩展置标语言的标准编程接口。

HTML DOM 定义了访问和操作 HTML 文档的标准方法。
DOM 将 HTML 文档表达为树结构。

我们最为关心的是，DOM把网页和脚本以及其他的编程语言联系了起来。DOM属于浏览器，而不是JavaScript语言规范里的规定的核心内容。

1. HTML DOM 树

2.查找元素

1、直接查找

<script>
    document.getElementById('id');              //根据ID获取一个标签,在文档中改值必须唯一
    document.getElementsByName('name');          //根据name属性获取标签集合,类似于id,name是给元素分配名字,但区别于ID,不是必须唯一.
    document.getElementsByClassName('classname');  //根据class属性获取标签集合
    document.getElementsByTagName('div');            //根据标签名获取标签集合元素
    #nav;    //id=nav的元素    通过CSS选择器选取元素
    div;     //所有<div>元素    通过CSS选择器选取元素
    .warning;  //所有在class属性之中包含了warnning的元素  通过CSS选择器选取元素
    //也可以使用属性选择器:
    p[lang='en'];   //所有使用英文的段落 如<p lang='en'>
    *[name='tom']   //所有包含name=tom的属性的元素
    
    //组合使用:
    div, #log  //所有<div>元素,以及id=log的元素
    
    //文档中的所有的元素, document.all()
    document.all[0] //文档中的第一个元素
    document.all["navbar"]  //id或name未navbar的元素
    
</script>

2. 间接查找

parentNode          // 父节点
childNodes          // 所有子节点
firstChild          // 第一个子节点
lastChild           // 最后一个子节点
nextSibling         // 下一个兄弟节点
previousSibling     // 上一个兄弟节点
 
parentElement           // 父节点标签元素
children                // 所有子标签
firstElementChild       // 第一个子标签元素
lastElementChild        // 最后一个子标签元素
nextElementtSibling     // 下一个兄弟标签元素
previousElementSibling  // 上一个兄弟标签元素

3. 节点和元素的区别

Node: 既包含元素又包含内容
Element：只包含元素

PS：换行也是元素

4. 操作

1) 值

innerText     //文本
outerText    //
outerHTML     //
innerHTML   //HTML内容value           // 值

<body>
    <div id="hehe">
        <p>1</p>;
        <p>2</p>
        <p>3</p>
    </div>
    <script>
        var tag = document.getElementById('hehe');
        console.log(tag.innerText);
    </script>
</body>

//代码执行结果：
1

2

3

innerText

<body>
    <div id="hehe">
        <p>1</p>;
        <p>2</p>
        <p>3</p>
    </div>
    <script>
        var tag = document.getElementById('hehe');
        console.log(tag.innerHTML);
    </script>
</body>

//执行结果;

        <p>1</p>
        <p>2</p>
        <p>3</p>

innerHTML

<body>
    <div id="hehe">
        <p>1</p>;
        <p>2</p>
        <p>3</p>
    </div>
    <script>
        var tag = document.getElementById('hehe');
        console.log(tag.value);
    </script>
</body>
//结果：
undefined

value

<body>
    <div id="hehe">
        <p>1</p>;
        <p>2</p>
        <p>3</p>
    </div>
    <script>
        var tag = document.getElementById('hehe');
        console.log(tag.outerHTML);
    </script>
</body>

//结果：
<div id="hehe">
        <p>1</p>;
        <p>2</p>
        <p>3</p>
    </div>

outerHTML

2) Class操作

className      //获取所有类名
classList.add   //添加类
classList.remove     //删除类

<body id="body" class="Iambody">
    <div class="hehe">
        <p>1</p>;
        <p>2</p>
        <p>3</p>
    </div>
    <div class="haha">
        <a>4</a>
        <a>5</a>
    </div>
    <script>
        var tag = document.getElementById('body');
        var a = tag.className;
        console.log(a);
    </script>
</body>

//结果：
Iambody

className

<body id="body" class="Iambody">
    <div class="hehe">
        <p>1</p>;
        <p>2</p>
        <p>3</p>
    </div>
    <div class="haha">
        <a>4</a>
        <a>5</a>
    </div>
    <script>
        var tag = document.getElementById('body');
        var a = tag.className;
        tag.classList.add('NewClass');
        console.log(tag);
    </script>
</body>

//结果：
<body id="body" class="Iambody NewClass">
    <div class="hehe">
        <p>1</p>;
        <p>2</p>
        <p>3</p>
    </div>
    <div class="haha">
        <a>4</a>
        <a>5</a>
    </div>
    <script>
        var tag = document.getElementById('body');
        var a = tag.className;
        tag.classList.add('NewClass');
        console.log(tag);
    </script>

</body>

classList.add

<body id="body" class="Iambody">
    <div class="hehe">
        <p>1</p>;
        <p>2</p>
        <p>3</p>
    </div>
    <div class="haha">
        <a>4</a>
        <a>5</a>
    </div>
    <script>
        var tag = document.getElementById('body');
        var a = tag.className;
        tag.classList.add('NewClass');
        tag.classList.remove('Iambody');
        console.log(tag);
    </script>
</body>


//执行结果：
<body id="body" class="NewClass">
    <div class="hehe">
        <p>1</p>;
        <p>2</p>
        <p>3</p>
    </div>
    <div class="haha">
        <a>4</a>
        <a>5</a>
    </div>
    <script>
        var tag = document.getElementById('body');
        var a = tag.className;
        tag.classList.add('NewClass');
        tag.classList.remove('Iambody');
        console.log(tag);
    </script>

</body>

classList.remove

3）属性

//获取属性：
    getAttribute(属性名)
//设置属性：
    setAttribute(属性名)
//移除属性：
    removeAttribute(属性名)
//全选，反选，取消的时候用：
    tb.checked = true || flase;
    PS: 不要和上述的几个属性混搭，否则会出bug；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <input type="button" value="全选" onclick="CheckAll();"/>
    <input type="button" value="取消" onclick="Cancel();"/>
    <input type="button" value="反选" onclick="Reverse();"/>
    <table border="1px">
        <thead>
            <tr>
                <th>序号</th>
                <th>巴拉</th>
                <th>PIUPIU</th>
            </tr>
        </thead>
        <tbody id="tb">
            <tr>
                <td><input type="checkbox"/></td>
                <td>22</td>
                <td>33</td>
            </tr>
            <tr>
                <td><input type="checkbox"/></td>
                <td>22</td>
                <td>33</td>
            </tr>
            <tr>
                <td><input type="checkbox"/></td>
                <td>22</td>
                <td>33</td>
            </tr>
            <tr>
                <td><input type="checkbox"/></td>
                <td>22</td>
                <td>33</td>
            </tr>
            <tr>
                <td><input type="checkbox"/></td>
                <td>22</td>
                <td>33</td>
            </tr>
            <tr>
                <td><input type="checkbox"/></td>
                <td>22</td>
                <td>33</td>
            </tr>
        </tbody>

        <script>
            function CheckAll(){
                //先找到表格内容
                var tb = document.getElementById('tb');
                var tr = tb.children;
                console.log(tr);
                //而后循环
                for(i=0;i<tr.length;i++){
                    //console.log(tr[i].firstElementChild.firstElementChild);
                    ck = tr[i].firstElementChild.firstElementChild;
                    //ck.setAttribute('checked','checked');
                    //也可以使用
                    ck.checked = true;
                }
            }
            function Cancel(){
                //先找到表格内容
                var tb = document.getElementById('tb');
                var tr = tb.children;
                console.log(tr);
                //而后循环
                for(i=0;i<tr.length;i++){
                    //console.log(tr[i].firstElementChild.firstElementChild);
                    ck = tr[i].firstElementChild.firstElementChild;
                    //ck.removeAttribute('checked');
                    //也可以使用
                    ck.checked = false;
                }
            }
            function Reverse(){
                //先找到表格内容
                var tb = document.getElementById('tb');
                var tr = tb.children;
                console.log(tr);
                //而后循环
                for(i=0;i<tr.length;i++){
                    //console.log(tr[i].firstElementChild.firstElementChild);
                    ck = tr[i].firstElementChild.firstElementChild;
                    //console.log(ck.checked);
                    if(ck.checked){
                        ck.checked=false;
                    }else{
                        ck.checked=true;
                    }

                    //也可以使用ck.checked = true;
                }
            }
        </script>
    </table>
</body>
</html>

全选、反选、取消Demo

4）实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
        <input type="text" id="i1"  value="请输入关键字" onfocus="Focus();" onblur="Blur();" />
        <input id="i2" type="text" value="提交"/>
    <script type="text/javascript">
        //捕捉焦点
        function Focus(){
            var tag = document.getElementById("i1");
            if(tag.value == '请输入关键字'){
                tag.value = '';
                console.log('focus');
            }
        }
        //失去焦点时的函数操作
        function Blur(){
            var tag = document.getElementById("i1");
            var va = tag.value.trim();
            if(va.length == 0){
                tag.value = '请输入关键字';
                console.log('blur');
            }
        }

    </script>
</body>
</html>

搜索框-输入关键字，点击后消失

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .item{
            position: relative;
            padding: 30px;
        }
        /*.item span{*/
            /*position: absolute;*/
            /*top: 30px;*/
            /*left: 52px;*/
            /*opacity: 1;*/
        /*}*/
    </style>
</head>
<body>
    <div class="item">
        <a onclick="Favor(this);">赞1</a>
    </div>
    <div class="item">
        <a onclick="Favor(this);">赞2</a>
    </div>
    <div class="item">
        <a onclick="Favor(this);">赞3</a>
    </div>

    <script>
        function Favor(ths){
            //ths==> 形参this, ==> 谁触发事件就是谁
            console.log(ths);
            //添加span标签


            var position = 'absolute';
            var top = 30;
            var left = 52;
            var opacity= 1;
            var fontSize = 10;

            var tag = document.createElement('span');
            //+1内容
            tag.innerText = '+1';
            tag.top = top + "px";
            tag.left = left + "px";
            tag.opacity = opacity;
            tag.fontSize = fontSize + "px";
            tag.position = position;

            //获取父标签,追加tag
            ths.parentElement.appendChild(tag);

            //创建定时器
            var interval = setInterval(function () {
                top -= 10;
                left += 10;
                opacity -= 0.1;
                fontSize += 5;
                //重新赋值
                tag.style.top = top + "px";
                tag.style.left = left + "px";
                tag.style.opacity = opacity;
                tag.style.fontSize = fontSize + "px";
                tag.style.position = position;


                if(opacity == 0){
                    //移除定时器
                    clearInterval(interval);
                    //移除+1标签
                    ths.parentElement.removeChild(tag);
                }
            },50);
        }
    </script>
</body>
</html>

点赞 Demo

计时器：
    setInterval(funcation(){

    },50)
    clearInterval()
定时器：
    setTimeout()
    clearTimeout()
创建标签， 定时器(大小，位置，透明度)
1. this ， 特殊的形参--》 触发事件的标签
2. createElement
3. appendChild
4. setInterval创建定时器
    clearInterval删除定时器
5. removeChild

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .hide{
            display: none !important;
        }
        .shadow{
            position: fixed;
            top:0;
            bottom: 0;
            left:0;
            right: 0;
            background-color: rgba(0,0,0,.6);
            z-index:100;
        }
        .modal{
            background-color: aliceblue;
            height: 200px;
             400px;
            position: fixed;
            left:50%;
            top:50%;
            margin-left: -200px;
            margin-top: -100px;
            z-index: 101;
        }
    </style>
</head>
<body>
    <div style="height: 2000px; background-color: #dddddd; margin: 0">
        <input  type="button" value="点我呀,点我呀!" onclick="ShowModal();"/>

    </div>
    <div id="shadow" class="shadow hide"></div>
    <div id="modal" class="modal hide">
        <!--如果a标签什么都不做的话,就是用下面的语法javascript:void(0);来做占位符,类似于Python中的pass;-->
        <a href="javascript:void(0);" onclick="HideModal();">取消</a>
    </div>

    <script>
        function ShowModal(){
            var t1 = document.getElementById('shadow');
            var t2 = document.getElementById('modal');
            t1.classList.remove('hide')
            t2.classList.remove('hide')
        }
        function HideModal(){
            var t1 = document.getElementById('shadow');
            var t2 = document.getElementById('modal');
            t1.classList.add('hide')
            t2.classList.add('hide')
        }

    </script>

</body>
</html>

模态对话框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .backtop{
            position: fixed;
            right: 20px;
            bottom:20px;
            color:red;
        }
        .hide{
            display: none;
        }
    </style>
</head>
<!--返回顶部实例-->
<body onscroll="BodyScroll();">
    <div style="height: 2000px;background-color: #dddddd"></div>
    <div id="back" class="backtop hide" onclick="BackTop();">返回顶部</div>

    <script>
        function BackTop(){
            document.body.scrollTop = 0;   //直接返回顶部
        }
        function BodyScroll(){
            console.log('heihei');
            var tag = document.getElementById('back');
            var s = document.body.scrollTop;
            if(s >= 100){     //距离顶部大于100像素的时候显示, 显示时只要移除hide样式即可
                tag.classList.remove('hide');
            }else{
                tag.classList.add('hide');
            }

        }

    </script>
</body>
</html>

scrollTop返回顶部

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="status" style="color:red;"></div>
    <input type="button" onclick="DeleteEmail();" value="删除所选邮件"/>

    <script>
        function DeleteEmail(){
            var tag = document.getElementById('status');
            tag.innerText="删除成功";
            setTimeout(function(){
                tag.innerText = '';
            },5000)
        }


    </script>
</body>
</html>

定时器效果之删除邮件提示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<!--检验用户输入是否合法-->
<body>
    <form action="http://www.baidu.com/">
        <input type="text" id="username">
        <input type="submit" value="提交" onclick="return SubmitForm();"/>
        <!--onclick中的return意义在于, 如果执行函数返回值是true的话,继续执行,如果为False的话,会中断执行,不再往后继续-->

    </form>
    <script>
        function SubmitForm(){
            var user = document.getElementById('username');
            if(user.value.length > 0){
                //可以提交
                return true;
            }else{
                //输入为空,不能提交
                alert('用户输入用户名不能为空!');
                return false;
            }
        }
    </script>

</body>
</html>

用户输入检查合法性输入

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .hide{
            display: none;
        }
        .menu{
             200px;
            height: 600px;
            border: 1px solid #dddddd;
            overflow: auto;
        }
        .menu .item .title{
            height: 40px;
            line-height: 40px;
            background-color: #2459a2;
            color: white;
        }
    </style>
</head>
<body>
<div class="menu">
        <div class="item">
            <div class="title" onclick="ShowMenu(this);">菜单一</div>
            <div class="body">
                <p>内容一</p>
                <p>内容一</p>
                <p>内容一</p>
                <p>内容一</p>
                <p>内容一</p>
            </div>

        </div>
        <div class="item">

            <div class="title"  onclick="ShowMenu(this);">菜单二</div>
            <div class="body hide">
                <p>内容二</p>
                <p>内容二</p>
                <p>内容二</p>
                <p>内容二</p>
                <p>内容二</p>
                <p>内容二</p>
            </div>
        </div>
        <div class="item">
            <div class="title"  onclick="ShowMenu(this);">菜单三</div>
            <div class="body hide">
                <p>内容三</p>
                <p>内容三</p>
                <p>内容三</p>
                <p>内容三</p>
                <p>内容三</p>
                <p>内容三</p>
            </div>

        </div>
    </div>

    <script src="plugin/jquery-1.12.4.js"></script>
    <script>
        function ShowMenu(ths){
            //将Dom转换为JQuery --> $(ths)
            //先找到下一个标签,移除hide
            $(ths).next().removeClass('hide');
            //找到父标签,再找到父标签的兄弟标签,而后找所有父标签中的子子孙孙中查找body,添加hide
            $(ths).parent().siblings().find('.body').addClass('hide');
        }
    </script>

</body>
</html>

分级菜单显示

5）标签操作

创建标签

// 方式一, 对象方式创建,也是推荐的方式
var tag = document.createElement('a');
tag.innerText = "Tom";
tag.className = "c1";
tag.href = "http://www.cnblogs.com/dbq";
 
// 方式二
var tag = "<a class='c1' href='http://www.cnblogs.com/dbq'>Tom</a>";

操作标签

    <div id ='pa'>piupiupiu</div>
    <script>
        var p = document.getElementById('pa');
        var obj = "<input type='text' />";
        p.insertAdjacentHTML('beforeEnd',obj);
        p.insertAdjacentElement('afterBegin',document.createElement('p'));

    </script>

//注意：第一个参数只能是'beforeBegin'、 'afterBegin'、 'beforeEnd'、 'afterEnd'

//执行结果：
<div id="pa"><p></p>piupiupiu<input type="text"></div>


//方式二：
<div id ='pa'>piupiupiu</div>
<script>
        var p = document.getElementById('pa');
        var tag = document.createElement('a');
        p.appendChild(tag);
        p.insertBefore(tag,p[1]);
</script>
//执行结果        
<div id="pa">piupiupiu<a></a></div>

6）样式操作

    <div id="hehe">hehehe</div>
    <script>
        var tag = document.getElementById('hehe');
        tag.style.fontSize = '30px';
        tag.style.color = 'green';
    </script>

7) 位置操作

总文档高度
document.documentElement.offsetHeight
  
当前文档占屏幕高度
document.documentElement.clientHeight
  
自身高度
tag.offsetHeight
  
距离上级定位高度
tag.offsetTop
  
父定位标签
tag.offsetParent
  
滚动高度
tag.scrollTop
 
/*
    clientHeight -> 可见区域：height + padding
    clientTop    -> border高度
    offsetHeight -> 可见区域：height + padding + border
    offsetTop    -> 上级定位标签的高度
    scrollHeight -> 全文高：height + padding
    scrollTop    -> 滚动高度
    特别的：
        document.documentElement代指文档根节点
*/

8) 提交表单

    <input id='form' type="text" /> 
   
    <script>
        document.getElementById('form').submit();
    </script>

9) 其他操作

console.log                 输出框
alert                       弹出框
confirm                     确认框
  
// URL和刷新
location.href               获取URL
location.href = "url"       重定向
location.reload()           重新加载
  
// 定时器
setInterval                 多次定时器
clearInterval               清除多次定时器
setTimeout                  单次定时器
clearTimeout                清除单次定时器

10) 事件，非常重要

属性	当以下情况发生时，出现此事件	FF	N	IE
onabort	图像加载被中断	1	3	4
onblur	元素失去焦点	1	2	3
onchange	用户改变域的内容	1	2	3
onclick	鼠标点击某个对象	1	2	3
ondblclick	鼠标双击某个对象	1	4	4
onerror	当加载文档或图像时发生某个错误	1	3	4
onfocus	元素获得焦点	1	2	3
onkeydown	某个键盘的键被按下	1	4	3
onkeypress	某个键盘的键被按下或按住	1	4	3
onkeyup	某个键盘的键被松开	1	4	3
onload	某个页面或图像被完成加载	1	2	3
onmousedown	某个鼠标按键被按下	1	4	4
onmousemove	鼠标被移动	1	6	3
onmouseout	鼠标从某元素移开	1	4	4
onmouseover	鼠标被移到某元素之上	1	2	3
onmouseup	某个鼠标按键被松开	1	4	4
onreset	重置按钮被点击	1	3	4
onresize	窗口或框架被调整尺寸	1	4	4
onselect	文本被选定	1	2	3
onsubmit	提交按钮被点击	1	2	3
onunload	用户退出页面	1	2	3

对于事件需要注意的要点：

this
event
事件链以及跳出

this标签当前正在操作的标签，event封装了当前事件的内容。

实例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset='utf-8' >
        <title>拥有时不知珍惜，失去时方觉可惜。——请珍惜每一滴水。&nbsp;&nbsp;</title>
        <script type='text/javascript'>
            function Go(){
                var content = document.title;
                var firstChar = content.charAt(0)
                var sub = content.substring(1,content.length)
                document.title = sub + firstChar;
            }
            setInterval('Go()',1000);
        </script>
    </head>
    <body>
    </body>
</html>

Title轮播

onfocus, 获取焦点， 等于一个函数，就是捕捉
onblur, 离开焦点
onclick, 点击

1. this, 当前触发事件的标签
2. 全局事件绑定， windows.onKeyDown = funcation();
3. event, 特殊参数，包含了事件的相关的内容
4. 默认事件
    比如a标签默认动作，跳转
    比如submit默认动作，提交
    优先级：
        自定义优先级比默认优先级高，如：a、submit标签
        checkbox的是默认事件先执行，自定义事件后执行


<input type="submit" value="提交" onclick="return SubmitForm();"/>
<!--onclick中的return意义在于, 如果执行函数返回值是true的话,继续执行,如果为False的话,会中断执行,不再往后继续-->

PS: 如果a标签什么都不做的话,就是用下面的语法javascript:void(0);来做占位符,类似于Python中的pass;

jQuery

jQuery是一个类库(Python中的叫做模块)，jQuery能帮助我们在文档中找到关心的元素，并且对这些元素进行操作：添加内容、编辑HTML属性和CSS属性、定义事件处理程序，以及执行动画。还拥有Ajax工具来动态发起HTTP请求，以及一些通用的工具函数来操作对象和数组。

jQuery基础：

jQuery蒂尼了一个全局函数：jQuery()，在类库的使用中，还有一个快捷别名： $ ,这是唯一的两个变量。

var divs = $("div")
//返回0个或多个DOM元素，这就是jQuery对象。

版本：

1.12.. --> ..
2.x --- IE9已不再支持，so，建议使用1.12

查找

选择器

基本选择器
#id id选择器
element 标签选择器
.class 类选择器
* 所有
#i1,#i2,#i3 组合选择器

层级选择器：

中间有空格，层级选择器 #i1 .c1就是从 #i1中的的子子孙孙中找
> 从儿子中找
+next 下一个
~sibilant 兄弟中找

操作：

CSS
属性的操作

html()
text()
val()

文本的操作

事件

底层一样，但是在此基础上JQuery还做了优化
1. 如何使用JQuery绑定
2. 当文档加载完毕后，自动执行！ ###重要！

$(function(){
...
})

3. 延迟绑定：

$("ul").delegate("l1","click",funcation(){
...
})

现增加，现绑定

PS: 一定要先找到父标签，ul，相当于选择器
4. return false; 后面也就不提交了，和Dom里一样；

扩展：

$.xxx来执行，如 $.login
form表单验证

Ajax：

AJAX即“Asynchronous JavaScript and XML”（异步的JavaScript与XML技术），指的是一套综合了多项技术的浏览器端网页开发技术。Ajax的概念由杰西·詹姆士·贾瑞特所提出
大白话：偷偷发请求

执行JQuery：

JQuery.xxx
$.xxx

JQuery的循环

.each()

更多>>>

参考：

　　http://www.cnblogs.com/wupeiqi/articles/5643298.html

查看全文

相关阅读:
构建WebGL目标时的内存考量
 译作感想
 sign
VS code搭建C环境
 003 总线
 计算机混淆概念（更新……）
002计算机硬件性能指标
 001计算机基本组成与工作过程
 Linux虚拟机手动安装eclipse
VMware安装vmtools实现宿主机和虚拟机共享粘贴板

原文地址：https://www.cnblogs.com/dubq/p/5807229.html