zoukankan html css js c++ java

python web jQuery day16

内容概述：

DOM
    查找：直接查找
          间接查找（节点：包含元素和节点，元素：只包含元素）
          --getElementById
          --getElementsByTagName
    操作：
        值
            innerText
            innerHtml
            value
        class:
            className
            classList.add
            classList.remove
        样式：
            <input type='text' style='color:red;font-size:40px' />
            tag = ...
            tag.style.color = 'red';
            tag.style.fontSize = '40px';
        属性：
            <input id='i1' name='n1' alex='sb' type='text' style="color:red;font-size:40px;"/>
            setAttribute
            getAttribute
            removeAttribute
            
            ===>
                tabObj.checked = true
            ===>jQuery: 操作数据，prop(checked,true)
        
        标签：
            创建标签：
                字符串
                对象
            将标签添加到HTML中
                字符串形式的标签：
                    p1.insertAdjacentHTML('beforeEnd',tag);
                对象形式的标签：
                    p1.insertAdjacentElement('afterBegin',document.createElement('p'))
                    xxx.insertBefore(tag,xxx[1])
        点赞：
            创建标签，定时器（大小，位置，透明度）
            1、this，当前触发事件的标签
            2、createElement
            3、appendChild
            4、setInterval创建定时器
               clearInterval删除定时器
            5、removeChild删除子标签
            
        定时器
            setTimeOut,clearTimeout
            setInterval,clearInter
            
        事件：
            1、this,当前出发事件的标签
            2、全局事件绑定   window.onKeyDown = function(){}
            3、event,包含事件相关内容
            4、默认事件
                自定义优先：a,form
                默认优先：checkbox
JQuery
    模块，Dom和JavaScrip,推荐使用1.12，或1.x的版本，2.x不支持IE9
    
    查找：
        选择器
            id
            标签
            类
            组合(#i1,#i2,#i3)
            层级#i1 .c1 (所有子孙里找)
            $('input:eq=(1),#i1 .item')
            
        筛选器
            $('#i1').find('.item')
            $('#i1').eq(1)
    操作：
        CSS
        属性 *****非常重要
            $('#i1').html() # 获取html内容
            $('#i1').html("<span>123</span>") # 设置html内容
            
            text()
            
            val()
        文本操作
    事件：
        -优化
        1、如何使用jQuery绑定
        2、当文档加载完毕后，自动执行
            $(function(){
            ......
            })
        3、延迟绑定
        4、return false;

内容概要

<!--http://www.cnblogs.com/wupeiqi/p/5643298.html-->

DOM
文档对象模型（Document Object Model，DOM）是一种用于HTML和XML文档的编程接口。它给文档提供了一种结构化的表示方法，可以改变文档的内容和呈现方式。我们最为关心的是，DOM把网页和脚本以及其他的编程语言联系了起来。DOM属于浏览器，而不是JavaScript语言规范里的规定的核心内容。
    查找：直接查找
          间接查找（节点：包含元素和节点，元素：只包含元素）
          --getElementById
          --getElementsByTagName

查找元素

直接查找

document.getElementById             根据ID获取一个标签
document.getElementsByName          根据name属性获取标签集合
document.getElementsByClassName     根据class属性获取标签集合
document.getElementsByTagName       根据标签名获取标签集合

间接查找

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

操作

1、内容

innerText   文本
outerText
innerHTML   HTML内容
innerHTML  
value       值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <input type="text" id="i1"/>
    <a id="i2" href="http://www.baidu.com">百<span>666</span>度</a>
</body>
</html>


#console
t = document.getElementById('i2')
<a id="i2" href="http://www.baidu.com">…</a>
t.innerText    //只显示文本
"百666度"
t.innerHTML    //显示文本家标签
"百<span>666</span>度"

例子

2、属性

attributes                // 获取所有标签属性
setAttribute(key,value)   // 设置标签属性
getAttribute(key)         // 获取指定标签属性
 
/*
var atr = document.createAttribute("class");
atr.nodeValue="democlass";
document.getElementById('n1').setAttributeNode(atr);
*/

实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

    <div id="p1">
        <p>hhh</p>
    </div>

    <input type="button" value="全选" onclick="CheckAll()" />
    <input type="button" value="取消" onclick="CancleAll()"/>
    <input type="button" value="反选" onclick="ReverseAll()"/>

    <table border="1">
        <thead>
            <tr>
                <th>序号</th>
                <th>用户名</th>
                <th>密码</th>
            </tr>
        </thead>
        <tbody id="tb">
            <tr>
                <td><input type="checkbox" /></td>
                <td>2</td>
                <td>22</td>
            </tr>
            <tr>
                <td><input type="checkbox" /></td>
                <td>2</td>
                <td>22</td>
            </tr>
             <tr>
                <td><input type="checkbox" /></td>
                <td>2</td>
                <td>22</td>
            </tr>
            <tr>
                <td><input type="checkbox" /></td>
                <td>2</td>
                <td>22</td>
            </tr>
        </tbody>
    </table>
    <script src="jquery-1.12.4.js"></script>
    <script>
        function CheckAll(){
            /*
            var tb = document.getElementById('tb');
            var trs = tb.children;
            for(var i=0;i<trs.length;i++){
                var current_tr = trs[i];
                var ck = current_tr.firstElementChild.firstElementChild;
                ck.setAttribute('checked','checked');
            }
            */
            $('#tb input[type="checkbox"]').prop('checked',true);
        }
        function CancleAll(){
            /*
            var tb = document.getElementById('tb');
            var trs = tb.children;
            for(var i=0;i<trs.length;i++){
                var current_tr = trs[i];
                var ck = current_tr.firstElementChild.firstElementChild;
                ck.removeAttribute('checked');
            }
            */
            $('#tb input[type="checkbox"]').prop('checked',false);
        }
        function ReverseAll(){
            /*
            var tb = document.getElementById('tb');
            var trs = tb.children;
            for(var i=0;i<trs.length;i++){
                var current_tr = trs[i];
                var ck = current_tr.firstElementChild.firstElementChild;
                if(ck.checked){
                    ck.checked = false;
                    ck.removeAttribute('checked');
                }else{
                    ck.checked = true;
                    ck.setAttribute('checked', 'checked');
                }
            }
            */
            $('#tb input[type="checkbox"]').each(function(i){
                // this  当前标签
                // $(this)当前标签的jQuery对象
                if($(this).prop('checked')){
                    $(this).prop('checked', false);
                }else{
                    $(this).prop('checked', true);
                }
            });
        }
    </script>
</body>
</html>

全选取消反选

实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .hide{
            display: none !important;
          }
        .shade{
            position: fixed;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            /*background-color: black;*/
            /*opacity:0.6;*/
            /*代替上面两个*/
            background-color: rgba(0,0,0,.6);
            z-index: 1000;
        }
        .modal{
            /*让这个div居中层次在最外面*/
            height: 200px;
            width:400px;
            background-color: white;
            position: fixed;
            top: 50%;
            left: 50%;
            margin-left: -200px;
            margin-top: -100px;
            z-index: 1001;
        }
    </style>
</head>
<body>
    <div style="height: 2000px;background-color: #dddddd;">
                                              <!--绑定点击事件  -->
        <input type="button" value="点我" onclick="ShowModal();"/>
    </div>
    <div id="shade" class="shade hide"></div>
    <div id="modal" class="modal hide">
        <!--让a标签什么都不做设置成void-->
        <a href="javascript:void(0);" onclick="HideModal();">取消</a>
    </div>
    <script>
        function  ShowModal() {
            var t1 = document.getElementById('shade');
            var t2 = document.getElementById('modal');
            t1.classList.remove('hide');
            t2.classList.remove('hide');
        }
        function HideModal() {
            var t1 = document.getElementById('shade');
            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>
    <style>
        .item{
            padding: 50px;
            position: relative;
        }
    </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>
    <div class="item">
        <a onclick="Favor(this);">赞4</a>
    </div>
    <script>
        function Favor(ths) {
            //ths形参相当于this,当前出发事件的标签
            var top = 49;
            var left = 71;
            var op = 1;
            var fontSize = 18;

            var tag = document.createElement('span');
            tag.innerText = '+1';
            tag.style.position = 'absolute';
            tag.style.top = top + 'px';
            tag.style.left =left + "px";
            tag.style.opacity = op;
            tag.style.fontSize = fontSize +"px";
            ths.parentElement.appendChild(tag);

            var interval = setInterval(function () {
                top -= 10;
                left += 10;
                fontSize += 5;
                op -= 0.1;

                tag.style.top = top + "px";
                tag.style.left = left + "px";
                tag.style.opacity = op;
                tag.style.fontSize = fontSize + "px";
                if(op <= 0.2){
                    clearInterval(interval);
                    ths.parentElement.removeChild(tag);
                }
            }, 50);
        }
    </script>
</body>
</html>

3、class操作

className                // 获取所有类名
classList.remove(cls)    // 删除指定类
classList.add(cls)       // 添加类

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div id="status" style="color: red;">

    </div>
    <input type="submit" onclick="DeleteStatus();" value="删除" />

    <script>
        function DeleteStatus(){
            var s = document.getElementById('status');
            s.innerText = '删除成功';
            setTimeout(function(){
                s.innerText = "";
            },5000);
        }
    </script>
</body>
</html>

删除一次

4、标签操作

a.创建标签

// 方式一
var tag = document.createElement('a')
tag.innerText = "wupeiqi"
tag.className = "c1"
tag.href = "http://www.cnblogs.com/wupeiqi"
 
// 方式二
var tag = "<a class='c1' href='http://www.cnblogs.com/wupeiqi'>wupeiqi</a>"

b.操作标签

// 方式一
var obj = "<input type='text' />";
xxx.insertAdjacentHTML("beforeEnd",obj);
xxx.insertAdjacentElement('afterBegin',document.createElement('p'))
 
//注意：第一个参数只能是'beforeBegin'、 'afterBegin'、 'beforeEnd'、 'afterEnd'
 
// 方式二
var tag = document.createElement('a')
xxx.appendChild(tag)
xxx.insertBefore(tag,xxx[1])

5、样式操作

var obj = document.getElementById('i1')
 
obj.style.fontSize = "32px";
obj.style.backgroundColor = "red";

实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>             <!--绑定事件,onfocus是获取焦点，onblur是失去焦点，当鼠标点到input框时就会执行该函数-->
    <input id="i1" type="text" value="请输入关键字" onfocus="Focus();" onblur="Blur();"/>

    <script type="text/javascript">
        function  Focus() {
            //console.log(123);
            //获取标签，清空
            var tag = document.getElementById('i1');
            if(tag.value == "请输入关键字"){
                tag.value = "";
            }
        }

        function Blur(){
            //console.log('blur');
            var tag = document.getElementById('i1');
            var val = tag.value;
            if(val.trim().length == 0){
                tag.value = "请输入关键字";
            }
        }
    </script>
</body>
</html>

搜索框

搜索框

6、位置操作

总文档高度
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代指文档根节点
*/

实例：

滚动高度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .hide{
            display: none;
        }
        .back{
            color: red;
            position: fixed;
            bottom: 20px;
            right: 20px;
        }
    </style>
</head>
<body onscroll="BodyScroll();">

    <div style="height: 2000px;background-color: #dddddd;"></div>
    <div id="back" class="back hide" onclick="BackTop();">返回顶部</div>
    <script>
        function BackTop() {
            document.body.scrollTop = 0;
        }
        function  BodyScroll() {
            var s = document.body.scrollTop;
            var t = document.getElementById('back');
            if(s >= 100){
                t.classList.remove('hide');
            }else{
                t.classList.add('hide')
            }
        }
    </script>
</body>
</html>

返回顶部

7、提交表单

document.geElementById('form').submit()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <form id="f1">
        <input type="text"/>
        <!--第一种方式提交-->
        <input type="submit" value="提交"/>
        <a onclick="Submit();">提交</a>
    </form>
    <script> //第二种方式提交
        function Submit() {
            var form = document.getElementById('f1');
            form.submit();
        }
    </script>
</body>
</html>

两种方式提交

8、其他操作

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

例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

    <script>
        var ret = confirm('是否删除？');
        console.log(ret);
    </script>
</body>
</html>

是否删除？

获取当前URL

location.href
"http://localhost:63342/s13/day16/test.html"

重定向跳到其他页面

location.href = "http://www.baidu.com"

事件

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

this
event
事件链以及跳出

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

默认事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <a href="http://www.baidu.com" onclick="ClickB();">百度</a>
    <form>
        <!--自定义先执行，默认后执行-->
        <input type="text"/>
        <input type="submit" onclick="ClickB();"/>
    </form>
    <!--默认事件先执行，自定义再执行-->
    <input type="checkbox" onclick="ClickB();"/>
    <script>
        function ClickB() {
            alert(123)
        }
    </script>
</body>
</html>

jQuery

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .hide{
            display: none;
        }
        .menu{
            width: 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>
            </div>

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

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

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

        </div>
    </div>
    <script src="jquery-1.12.4.js"></script>
    <script>
        function ShowMenu(ths) {
            /*console.log(ths);//Dom中的标签对象
            //$(ths);          //将Dom标签对象转换成jQuery对象*/
            //$(ths)[0]; //jQuery转换Dom
            $(ths).next().removeClass('hide');
            $(ths).parent().siblings().find('.body').addClass('hide');
        }
    </script>
</body>
</html>

左侧菜单

查看全文

相关阅读:
SpringMVC集成Redis（含源码）
MyBatis（SSM框架）接入redis作为二级缓存（含源码）
Cookie、Session和Token认证详解
 CSRF攻击与防御，值得一看
 前端常见浏览器跨域请求解决方案
 通过JS来判断打开的浏览器页面是PC端还是移动端或者是其他形式（navigator.userAgent）
高级Web前端必会面试题知识点，不断更新中。。。
swiper 插件从后台获取数据没问题，css 代码啥的也没问题，但是图片不动，应该怎么解决？
React的decorators装饰器报错@以及后续问题解决
 call、apply、bind三者之间的用法和区别，并手写实现

原文地址：https://www.cnblogs.com/QL8533/p/5800345.html