java解析jsp视频文件

转载

代码魔术师之手 2025-01-07 13:39:40

文章标签 java解析jsp视频文件 javascript 数组字符串 json 文章分类 Java 后端开发

序——按钮提示

事件：用户操作
onmouseover

class在js里要写成className才能用！！！

java解析jsp视频文件_json

选项卡

java解析jsp视频文件_java解析jsp视频文件_02

1.style加样式行间；
2.style取样式行间；
3.对于同一个元素：要么只动class要么只动style；
4.多个input要用函数统一写→提取行间事件

提取行间事件

匿名函数：没有函数名！
1.function 名字（）
{
……
}
oBtn.οnclick=名字

2.oBtn.οnclick=function()
{
……
}

但是2有个问题如果放在head里程序加载不出来，因为onclick的部分找不到对应的id（程序自上到下运行，到了id那找不到自动终端停止）
解决上面问题的方法： window.onload→页面加载完之后发生
外面套一个
window.οnlοad=function（）
{
你的东西
}

行为样式结构三者分离！！

收件箱里一堆input（勾选框）怎么解决：
getElementsByTagname（）{}
数组概念引入

利用循环合并：

这样做又有个问题：邮箱邮件未知多少个，你不能写死多少个
直接写成i<aDiv.length

邮箱的全选不选
\

this ：当前发生事件的元素

通过js加index可以，但是行内html不可以加会不兼容？
和面向对象有关？？后面说

innerHTML:

java解析jsp视频文件_javascript_03

flex布局方式好好了解一下啊！！！！

js基础！！！

js组成

1.ECMAScript：翻译器、翻译； →核心
2.DOM Document Object Model HTML 操作HTML的能力；
3.BOM Browser Object Model 浏览器 window；

兼容性问题：
ECMA：几乎没有兼容问题；
DOM：有一些操作不兼容；
BOM：没有兼容问题（完全不兼容）；

变量类型

alert（typeof a) -->
console.log(‘a’) -->

number、string、boolean、undefined、object、function；
一个变量最好只存一种数据类型；

字符串转数字

var a=‘12’
alert(parseInt(a)+1) -->13
alert(isNan(a)) ->true or false
隐式类型转换：
1.a=5，b=‘5’；
ab -->true 先转换类型，然后比较；
a=b -->false 不转换类型，直接比；

2.a+b； ‘12‘+’5‘=’125‘
a-b； ‘12‘-’5‘=7 number

3.parseInt parseFloat
局部变量（在函数里面定义的变量；）

<script>
        function aaa()
        {
            var a=12;
        }
        function bbb()
        {
            alert(a);
        }
    </script>

闭包

<script>
        function aaa()
        {
            var a=12;
                function bbb()
            {
                alert(a);
            }
        }
    </script>

这时候弹出的a在函数bbb里未定义，但是bbb在大的aaa函数里，所以还是可以正常弹出，这就叫闭包；
aaa：父函数
bbb：子函数
闭包：子函数可以使用父函数的局部变量；
以前也用过→
闭包的应用：回头再说

给变量取名字

匈牙利命名法：
1.类型前缀：
数组：a
布尔值：b
浮点数：f
函数：fn
整数：i
对象：o
正则表达式：re
字符串：s
变体变量：v

2.首字母大写

常用运算符

12%5 2 求余数用于隔行变色、秒转时间
parseInt转int型
i=i+1 ===== i+=1
i*=1 ------- i=i*1
!= 不等于改变类型之后判断
!== 也是不等于和===一样就是说做判断时不改变类型
&& 与，并且
|| 或者或
！否非

条件语句

if----------------------------------------------------------------------------------
if（条件1）
{
语句1
}
else if （条件）
{
语句2
}
else
{
语句n
}

swich-----------------------------------------------------------------------------
swich（变量）
{
case 值1：
语句1
break；
case值2：
语句1
break；
………
default：（默认值）
语句n
}

三目运算符 ?:
条件?语句1:语句2

循环语句

跳出： break continue
break：中断中断整个循环程序跳出来
continue：继续中断这一次的循环

什么是真，什么是假：
真：true 非0的数字非空字符串（’ ‘这种算非空）非空对象
假：false 数字0 空字符串’‘ 空对象null undefined

Json

就是字典形式！

var json={a:12,b:5,c:'acx',};
        json.b++;
        alert(json.b);

json和数组的区别：
1…json索引可以写成json[‘a’]，索引下标为字符串；数组用数字索引；
2…json没有length，数组有；
3…怎么循环json呢（没有lenth）：
数组循环：

var arr1=[1,5,9,8,7,1,'+65'];
        for(var i=0;i<arr1.length;i++)
        {
            alert('第'+i+'个东西：'+arr1[i]);
        }

或者

for(var i in arr1)
            {
                alert('第'+i+'个东西是'+arr1[i]);
            }

jason只能用for in 遍历

var json={a:12,b:5,c:'acx',};
        for(var i in json)
        {
            alert('第'+i+'个东西是'+json[i]);
        }

建议：数组都用以前的for length；json都用for in；

函数返回值

简单例子：就是把12返回给show()这个函数

<script>
        function show()
        {
            return 12;
        }
        alert(show());
    </script>

函数传参

arguments可变参/不定参 →数组

<script>
        window.onload=function()
        {
            function sum()
            {
                var result=0;
                for(var i=0;i<arguments.length;i++)
                {
                    result+=arguments[i];
                }
                return result;
            };
            alert(sum(12,5,9,6,7,25,6,6,8,2,3,6,9));
        }      
    </script>

是个数组存了所有的参数！！

css函数用来获取/设置样式的

css(oDiv, ‘width’) 获取样式；
css(oDiv, ‘width’, ‘200px’) 设置样式、
注意上面的css是一个函数！！！！

<script>
        function css()
        {
            if(arguments.length==2)
            {
                return arguments[0].style[arguments[1]]; //两个就是获取样式
            }
            else
            {
                arguments[0].style[arguments[1]]=arguments[2]; //三个是设置样式
            }   
        }

        window.onload=function()
        {
            var oDiv=document.getElementById('div1');
            alert(css(oDiv,'width'));  //获取oDiv的width样式
            css(oDiv,'background','green'); //设置更改红变绿
        }      
    </script>

<body>
    <div id="div1" style="width:200px;height: 200px;background:red"></div>
</body>

现在有个问题，这里面1，2，3好乱改名字！

<script>
        function css(obj,name,value)
        {
            if(arguments.length==2)
            {
                return obj.style[name]; //两个就是获取样式
            }
            else
            {
                obj.style[name]=value; //三个是设置样式
            }   
        }

        window.onload=function()
        {
            var oDiv=document.getElementById('div1');
            alert(css(oDiv,'width'));  //获取oDiv的width样式
            css(oDiv,'background','green'); //设置更改红变绿
        }      
    </script>
</head>
<body>
    <div id="div1" style="width:200px;height: 200px;background:red"></div>
</body>

改成 obj name value来代替
注意！！！这个style只能操作行间样式不能操作style表里的

解决办法：currentStyle来替代style 但是不兼容问题存在只兼容IE
Chrome FF 怎么做：getComputesStyle（oDiv，null）（第二个参数没用随便定）意思是得到oDiv的style →IE9不支持这个！！！
所以：
currentStyle在FF中是undefined，在IE是object →用真假if语句

<style>
        #div1 {
            width:200px;
            height: 200px;
            background:red;
        }
    </style>
    <script>
        window.onload=function()
        {
            var oDiv=document.getElementById('div1');
            if (oDiv.currentStyle)  //不用写=true因为本身如果是object自动为真
            {
                //走IE
                alert(oDiv.currentStyle.width);
            }
            else
            {
                //走FF
                alert(getComputedStyle(oDiv,false).width);
                console.log('测试测试');
            };
        }
    </script>

99%的兼容问题都用这种办法处理
把这种常用功能封装便捷使用。

<script>
        function getStyle(obj,name)
        {
            if(obj.currentStyle)
            {
                return obj.currentStyle[name];
            }
            else
            {
                return getComputedStyle(obj,false)[name];
            }
        };
            
        window.onload=function()
        {
            var oDiv=document.getElementById('div1');
            alert(getStyle(oDiv,'width'));
        }
    </script>

封装的思想，建立一个函数拿过来用；

复合样式：background、border；
单一样式：width，height；

数组基础

定义

var a=[1,2,3,4,5,6]样一般用这个
var arr=new Array(12,5,8,9)

length的小功能：
可以获取也可以设置如果a.length=3 则alert(arr)=1,2,3;
例子：可以快速清空数组的值a.length=0;

s数组的添加

<script>
    var arr=[1,2,3];
    arr.push(4); //输出1，2，3，4 尾部添加
    arr.pop(); //输出1，2  尾部删除
    arr.shift(); //输出2，3 删除头部
    arr.unshift(5); //输出5，1，2，3 头部加东西
    arr.splice(1,1);   // 输出1,3 从第二个开始删，删除1个| 删除元素的用法splice(起点，长度)
    arr.splice(1,0,'a','b','c');  // 输出1,2,'a','b','c',3|插入用法splice(起点，长度，元素……)
    arr.splice(1,2,'a','b'); //输出1,'a','b'|替换操作
</script>

两数组连接

<script>
    var a=[1,2,3];
    var b=[4,5,6];
    a.concat(b); //输出1，2，3，4，5，6
    b.concat(a); //输出4，5，6,1，2，3
</script>

<script>
    var a=[1,2,3,4];
    a.join('-');  //输出1-2-3-4
</script>

数组排序

<script>
    var a = [1, 'zoom', 'float', 2, 3, 'alpha', 4];
    a.sort();
    alert(a);  //输出 1,2,3,4,alpha,float,zoom
    //但是实际会排序金额等，例如淘宝钱数排序等
    var b = [112, 95814, 3547, 25, 10, 20, 29];
    b.sort();
    alert(b);   //输出10,112,20,25,29,3547,95814
    //可以看到，不是按照顺序排列的！！！
    //他是把数字作为字符串来排序的，先第1位，然后第2位比较这样；
    //原因：数组的sort只认识字符串
    //解决办法：
    b.sort(function (n1, n2) {
        if (n1 < n2) {
            return -1; //只要是负数就够了
        }
        else if (n1 > n2) {
            return 1;
        }
        else {
            return 0;
        }
    }
    );
    alert(b);   //现在输出10,20,25,29,112,3547,95814
    //所以上述if函数有个简化写法
    var c = [112, 95814, 3547, 25, 10, 20, 29];
    c.sort(function (n1, n2) {
        return n1-n2; //也是在输出负数/整数/0，同样效果
    }
    );
    alert(c); //现在输出10,20,25,29,112,3547,95814
</script>

定时器

什么是定时器

<script>
    function show()
    {
        alert('a');
    };
    setInterval(show,1000);  //每隔100毫秒弹出来一次
    setTimeout(show,1000);  //只执行一次！
</script>

如何停止一个定时器

<script>
    window.onload=function()
    {
        var oBtn1=document.getElementById('btn1');
        var oBtn2=document.getElementById('btn2');
        var timer;
        console.log('测试');

        oBtn1.onclick=function()
        {
            timer=setInterval(function(){
                    alert('a');
            },3000);
        };
        oBtn2.onclick=function()
        {
            clearInterval(timer);
        };
    };   
</script>
</head>

<body>
    <input id="btn1" type="button" value="开启"/>
    <input id="btn2" type="button" value="关闭"/>
</body>

数码时钟

要点：
1.用图片控制时间，先用js调用图片，for语句来更改图片的路径；
把能修改的字符串和图片关联，用索引调用，字符串是几就能调出来第几张图片

for(var i=0;i<aImg.length;i++){
                    aImg[i].src='img/'+str[i]+'.png';
                };   //1.修改图片路径的方法！！！接下来就要控制修改字符串

2.调用时间函数来控制字符串；
有几个问题：时间函数出来的都是数字，且个位数前面没有0，要用一套if语句把数字都变成双位且都是字符串（输出的时候用+号方便）

function toDou(n){   //让时间数字中6转为06且都转为字符串！
            if (n<10){
                return '0'+n ;
            }
            else{
                return ''+n;
            }    //加空字符串保证返回字符串；
        }

var oDate=new Date();     //new用来创建一个对象 后面具体讲
                var aImg=document.getElementsByTagName('img');
                // var str='015365';
                var str=toDou(oDate.getHours())+toDou(oDate.getMinutes())+toDou(oDate.getSeconds());
                for(var i=0;i<aImg.length;i++){
                    aImg[i].src='img/'+str[i]+'.png';
                };   //1.修改图片路径的方法！！！接下来就要控制修改字符串

最后要用到定时器来调整刷新，每秒刷新一次

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>获取日期</title>
    <style>
        body{
            background: #000;
            color:white;
            font-size:100px;
        };
    </style>
    <script>//思路：用js来修改图片的路径控制数字变化；调用时间函数控制这个变化；然后让他动起来！
        function toDou(n){   //让时间数字中6转为06且都转为字符串！
            if (n<10){
                return '0'+n ;
            }
            else{
                return ''+n;
            }    //加空字符串保证返回字符串；
        }
        window.onload=function(){
            tick=function(){ //注意把该放进去的东西都放进去，每次更新都要调用的东西
                var oDate=new Date();     //new用来创建一个对象 后面具体讲
                var aImg=document.getElementsByTagName('img');
                // var str='015365';
                var str=toDou(oDate.getHours())+toDou(oDate.getMinutes())+toDou(oDate.getSeconds());
                for(var i=0;i<aImg.length;i++){
                    aImg[i].src='img/'+str.charAt(i)+'.png';   //因为str[0]不兼容，换成这个可以，调取字符串的某一位
                };   //1.修改图片路径的方法！！！接下来就要控制修改字符串
            }
            setInterval(tick,1000);   
            tick(); //执行一次tick函数，这样不会出现延迟
        }
        
    </script>
</head>
<body>
    <img src="img/0.png"/>
    <img src="img/0.png"/>
    :
    <img src="img/0.png"/>
    <img src="img/0.png"/>
    :
    <img src="img/0.png"/>
    <img src="img/0.png"/>
</body>
</html>

还有问题：
本质问题：alert(str[0])这句话在低版本不兼容！
解决办法：

总结一下：
1.Date对象：var oDate=new Date
2.getHours();
3.字符串连接；
4.空位补零；
5.str兼容性问题 str.charAt(i)通用

年月日的问题：
1.getFullYear()
2.getMonth()+1
3.getDate()
4.星期：getDay()
0 周日
1 周一
2 ……
3
4
5
6 周六

延时提示框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>延时功能</title>
    <!-- 功能：鼠标移入div1出现div2，且移入div2不会消失 -->
    <style>
        #div1{
            float:left;
            margin-right:20px;
            width:50px;
            height: 50px;
            background:red;
        }
        #div2{
            float:left;
            display:none;
            width:100px;
            height: 100px;
            background:gray;
        }
    </style>

    <script>
        window.onload=function(){
            var oDiv1=document.getElementById('div1');
            var oDiv2=document.getElementById('div2');
            var timer=null;
            oDiv1.onmouseover=function(){
                clearTimeout(timer); //加这个避免让红灰之间移动时灰框闪来闪去
                oDiv2.style.display='block';
            };
            oDiv1.onmouseout=function(){
                timer=setTimeout(function(){
                    oDiv2.style.display='none';
                },500);
            };
            oDiv2.onmouseover=function(){
                clearTimeout(timer);
            };
            oDiv2.onmouseout=function(){
                timer=setTimeout(function(){
                    oDiv2.style.display='none';
                },500);
            }
        }
    </script>
</head>
<body>
    <div id="div1"></div>
    <div id="div2"></div>
</body>
</html>

但是上述有很多需要合并的地方，太复杂：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>延时功能</title>
    <!-- 功能：鼠标移入div1出现div2，且移入div2不会消失 -->
    <style>
        #div1{
            float:left;
            margin-right:20px;
            width:50px;
            height: 50px;
            background:red;
        }
        #div2{
            float:left;
            display:none;
            width:100px;
            height: 100px;
            background:gray;
        }
    </style>

    <script>
        window.onload=function(){
            var oDiv1=document.getElementById('div1');
            var oDiv2=document.getElementById('div2');
            var timer=null;
            oDiv2.onmouseover=oDiv1.onmouseover=function(){
                clearTimeout(timer); //加这个避免让红灰之间移动时灰框闪来闪去
                oDiv2.style.display='block';
            };
            oDiv2.onmouseout=oDiv1.onmouseout=function(){ //可以合并！
                timer=setTimeout(function(){
                    oDiv2.style.display='none';
                },500);
            };
        }
    </script>
</head>
<body>
    <div id="div1"></div>
    <div id="div2"></div>
</body>
</html>

无缝滚动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #div1{
            width:200px;
            height: 100px;
            background: red;
            position: absolute;
            left:200px;
            top:300px;
            margin:50px;
        }
    </style>
</head>

<body>
    <div id="div1" onclick="alert(this.offsetLeft)"></div>  <!--输出250，是div1距离左边的距离，会加上margin，很方便-->
</body>
</html>
<!-- 获取：offsetLeft/offsetTop
offsetWidth/offsetHeight -->

获取：offsetLeft/offsetTop offsetWidth/offsetHeight

无缝滚动思路：用定时器，每隔一段时间把div1的left改大一点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        #div1{
            width:480px;
            height:230px;
            margin:100px auto;
            position:relative;  /*因为用大的ul来移动，小图片位置绝对*/
            background:red;
        }
        #div1 ul{
            position:absolute;
        }
        #div1 ul li{
            float:left;
            width:120px;
            height:108px;
            list-style:none;
        }
    </style>

    <script>
        window.onload=function(){
            var oDiv=document.getElementById('div1');
            var oUl=oDiv.getElementsByTagName('ul')[0];
            setInterval(function(){
                oUl.style.left=oUl.offsetLeft-2+'px';
            },30);
        }
    </script>
</head>

<body>
    <div id="div1">
        <ul>
            <li><img src="1.png"></li>
            <li><img src="2.png"></li>
            <li><img src="3.png"></li>
            <li><img src="4.png"></li>
        </ul>
    </div>
</body>
</html>

现在可以移动，但是存在问题，移过去之后后面的补不上来了。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>无缝滚动</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        #div1{
            width:480px;
            height:230px;
            margin:100px auto;
            position:relative;  /*因为用大的ul来移动，小图片位置绝对*/
            overflow:hidden;  /*设置了8个，所以要多的隐藏掉*/
        }
        #div1 ul{
            position:absolute;
        }
        #div1 ul li{
            float:left;
            width:120px;
            height:108px;
            list-style:none;
        }
    </style>

    <script>
        window.onload=function(){
            var oDiv=document.getElementById('div1');
            var oUl=oDiv.getElementsByTagName('ul')[0];
            var aLi=oUl.getElementsByTagName('li');
            oUl.innerHTML=oUl.innerHTML+oUl.innerHTML; //oUl的内容多了一份
            oUl.style.width=aLi[0].offsetWidth*aLi.length+'px'; //把oUl的宽度撑开，让li都在一行
            
            setInterval(function(){
                if(oUl.offsetLeft<-oUl.offsetWidth/2){   //left值为负，要注意！！！！
                    oUl.style.left='0';
                };
                oUl.style.left=oUl.offsetLeft-2+'px';
            },30);
        }
    </script>
</head>

<body>
    <div id="div1">
        <ul>
            <li><img src="1.png"></li>
            <li><img src="2.png"></li>
            <li><img src="3.png"></li>
            <li><img src="4.png"></li>
        </ul>
    </div>
</body>
</html>

加上了左右滚动：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>无缝滚动</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        #div1{
            width:480px;
            height:230px;
            margin:100px auto;
            position:relative;  /*因为用大的ul来移动，小图片位置绝对*/
            overflow:hidden;  /*设置了8个，所以要多的隐藏掉*/
        }
        #div1 ul{
            position:absolute;
        }
        #div1 ul li{
            float:left;
            width:120px;
            height:108px;
            list-style:none;
        }
    </style>

    <script>
        window.onload=function(){
            var oDiv=document.getElementById('div1');
            var oUl=oDiv.getElementsByTagName('ul')[0];
            var aLi=oUl.getElementsByTagName('li');
            var speed=2;
            // 可以写成oUl.innerHTML+=oUl.innerHTML;
            oUl.innerHTML=oUl.innerHTML+oUl.innerHTML; //oUl的内容多了一份
            oUl.style.width=aLi[0].offsetWidth*aLi.length+'px'; //把oUl的宽度撑开，让li都在一行
            var move=function(){
                if(oUl.offsetLeft<-oUl.offsetWidth/2){   //left值为负，要注意！！！！
                    oUl.style.left='0';
                };
                oUl.style.left=oUl.offsetLeft+speed+'px';
            }
            var timer=setInterval(move,30);
            oDiv.onmouseover=function(){
                clearInterval(timer);
            };
            oDiv.onmouseout=function(){
                timer=setInterval(move,30);
            }
            var oA=document.getElementsByTagName('a');
            oA[0].onclick=function(){
                speed=-2;
            };
            oA[1].onclick=function(){
                speed=2;
            };

        }
    </script>
</head>

<body>
    <a href="javascript:;">向左走</a>
    <a href="javascript:;">向右走</a>
    <div id="div1">
        <ul>
            <li><img src="1.png"></li>
            <li><img src="2.png"></li>
            <li><img src="3.png"></li>
            <li><img src="4.png"></li>
        </ul>
    </div>
</body>
</html>

总结：
setInterval 间隔型； clearInterval
setTimeout 延时型只执行一次！cleaTimeout
charAt方法来找数组里的数、

DOM

DOM基础—document

DOM节点
标签 CSS
元素 JS
节点 DOM

<script>
        window.onload=function(){
            var oUl=document.getElementById('ul1');
            alert(oUl.childNodes.length); //childNodes。length表示子节点的长度
        };    //输出5！！！注意，把空节点也算上了
    </script>
</head>
<body>
    <ul id="ul1">   //这里算空节点
        <li></li>
        <li></li>
    </ul>
    sdfsdflk   //这个是文本节点
    <span></span> //这个是元素节点
</body>

childNotes

怎么解决呢？？

<script>
        window.onload=function(){
            var oUl=document.getElementById('ul1');
            for(var i=0;i<oUl.childNodes.length;i++){
                //nodeType==3   -> 文本节点
                //nodeType==1   -> 元素节点
                alert(oUl.childNodes[i].nodeType);       
            }
        };    
    </script>
</head>
<body>
    <ul id="ul1">  
        <li></li>
        <li></li>
    </ul>
    sdfsdflk   
    <span></span> 
</body>

用nodeType来判断，3是文本节点，1是元素节点

if (oUl.childNodes[i].nodeType==1){
                    oUl.childNodes[i].style.background='red';
                }

适用所有的浏览器的操作
有个更好用的东西：children

var oUl=document.getElementById('ul1');
            alert(oUl.children.length);
            for(var i=0;i<oUl.children.length;i++){
                oUl.children[i].style.background='red';
            }

children选出所有的元素节点

注意：子节点只算第一层的！！！！！！
如果li里面有个span 不算子节点！！！哈哈哈

父节点

oUl.parentNode 检查父节点
应用：隐藏→调用到父节点，整体隐藏

<script>
        window.onload=function(){
            var aA=document.getElementsByTagName('a');
            for(var i=0;i<aA.length;i++){
                aA[i].onclick=function(){
                    this.parentNode.style.display='none';
                };
            };

        }   
    </script>
</head>
<body>
    <ul id="ul1">  
        <li>sfasfsdf <a href="javascript:;">隐藏</a></li>
        <li>sfa撒旦发射点发射点f <a href="javascript:;">隐藏</a></li>
        <li>sfasf水电费33sdf <a href="javascript:;">隐藏</a></li>
        <li>fs1231232df <a href="javascript:;">隐藏</a></li>
    </ul>

offsetParent ?
css
绝对定位，根据谁定位？
根据有定位的父级的位置进行定位，如果父亲没定位，继续一级一级往上找到body为止

相对定位绝对定位？？？？？好好看看！！！

<style>
        #div1{
            width: 200px;
            height: 200px;
            background:gray;
            margin:100px;
        }
        #div2{
            width:100px;
            height: 100px;
            background: red;
            position:absolute;
            left:50px;
            top: 50px;  /*父亲没有定位，所以灰盒子移动红盒子不和他一起动*/
        }
    </style>
<body>
    <div id="div1">
        <div id="div2"></div>
    </div>
</body>

java解析jsp视频文件_字符串_04

<style>
        #div1{
            width: 200px;
            height: 200px;
            background:gray;
            margin:100px;
            position: relative;
        }
        #div2{
            width:100px;
            height: 100px;
            background: red;
            position:absolute;
            left:50px;
            top: 50px;  /*父亲没有定位，所以灰盒子移动红盒子不和他一起动*/
        }
    </style>

    <script>
        window.onload=function(){
            var oDiv1=document.getElementById('div1');
            var oDiv2=document.getElementById('div2');
            //把div2中能获取定位的父级style改变
            oDiv2.offsetParent.style.background='black';
        }
    </script>
<body>
    <div id="div1">
        <div id="div2"></div>
    </div>

获取的是有关定位的父级元素

如果div1不给定位的话：

将变成这样：

java解析jsp视频文件_json_05

颜色加在了body上

其他的

firstChild 首个子节点低版本用不出问题，空节点不算
lastChild 最后一个
firstElementChild首个元素子节点用于高版本浏览器，反而低版本不兼容！！！！下同
lastElementChild
兄弟节点：
有兼容性问题
nextSibing下一个兄弟节点
nextElementSibling
previousSibing
previousElementChild

所以要用if来解决这个兼容问题f

DOM操作元素属性

<script>
        window.onload=function(){
            var oTxt=document.getElementById('txt');
            var oBtn=document.getElementById('btn');
            oBtn.onclick=function(){
                // oTxt.value='sdfsdfsdfd';
                // oTxt['value']='sdfsdfn';
                oTxt.setAttribute('value','s;ldijfsd');
            };
        }
    </script>
</head>
<body>
    <input id="txt" type="text"/>
    <input id="btn" type="button" value="提交"/>
</body>

dom用oTxt.setAttribute(属性名name,想要的value)来操作
获取getAttribute (名称,值)
移除removeAttribute (名称)

className的用处

选定具体的class来进行修饰

<script>
        window.onload=function(){
            var oUl1=document.getElementById('ul1');
            var aLi=oUl1.getElementsByTagName('li');
            for(var i=0;i<aLi.length;i++){
                if (aLi[i].className=='box'){
                    aLi[i].style.background='red';
                }
            }
        }
    </script>
</head>
<body>
    <ul id="ul1">
        <li></li>
        <li class="box"></li>
        <li></li>
        <li></li>
        <li class="box"></li>
        <li></li>
        <li></li>
        <li class="box"></li>
        <li class="box"></li>
        <li></li>

    </ul>
</body>

但是这样过于麻烦
封装成函数把

function getByClass(oParent,sClass){
            var aEle=oParent.getElementsByTagName('*');
            var aResult=[];
            for(var i=0;i<aEle.length;i++){
                if(aEle[i].className==sClass){
                    aResult.push(aEle[i]);
                }
            }
            return aResult;
        }

调用这个函数就很轻松了

window.onload=function(){
            var oUl=document.getElementById('ul1');
            var aBox=getByClass(oUl,'box');
            for(var i=0;i<aBox.length;i++){
                aBox[i].style.background='red';
            }

DOM操作应用

创建DOM appendChild

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        window.onload=function(){
            oBtn=document.getElementById('btn');
            oUl=document.getElementById('ul1');
            oTxt=document.getElementById('txt');
            oBtn.onclick=function(){
                var oLi=document.createElement('li');
                oUl.appendChild(oLi);
                oLi.innerHTML=oTxt.value;
            }
        }
    </script>
</head>
<body>
    <input id="txt" type="text"/>
    <input id="btn" type="button" value="创建"/>
    <ul id="ul1"> </ul>
</body>
</html>

java解析jsp视频文件_json_06

但是存在问题，一般微博新写的东西都在顶端

插入元素 insertBefore

父级.insertBefore(子节点，在谁之前)

<script>
        window.onload=function(){
            oBtn=document.getElementById('btn');
            oUl=document.getElementById('ul1');
            oTxt=document.getElementById('txt');
            oBtn.onclick=function(){
                var oLi=document.createElement('li');
                var aLi=oUl.getElementsByTagName('li');
                oLi.innerHTML=oTxt.value;
                if(aLi.length>0){
                    oUl.insertBefore(oLi,aLi[0]);
                };
                else{
                    oUl.appendChild(oLi);
                };
            };
        }
    </script>
</head>
<body>
    <input id="txt" type="text"/>
    <input id="btn" type="button" value="创建"/>
    <ul id="ul1"> </ul>
</body>

这里为了保持兼容，应用了if：
如果没有li就正常添加第一个；如果有li就插在第一个位置；

删除DOM

父级.removeChild(子集）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        window.onload=function(){
            var oUl=document.getElementById('ul1');
            var aLi=oUl.getElementsByTagName('li');
            var aA=oUl.getElementsByTagName('a');
            for(var i=0;i<aA.length;i++){
                aA[i].onclick=function(){
                    oUl.removeChild(this.parentNode);
                }
            }
        }
    </script>
</head>
<body>
    <ul id="ul1">
        <li>sdfsdf<a href="javascript:;">删除</a></li>
        <li>sdfwe'r'we'rwerwersdf<a href="javascript:;">删除</a></li>
        <li>sdse'r'feserfef<a href="javascript:;">删除</a></li>
        <li>sdf121sdf<a href="javascript:;">删除</a></li>
    </ul>
</body>
</html>

文档碎片这东西应该不怎么用了，可能会问到

文档碎片可以提高DOM操作性能（理论上）：
就相当于，我加li时先添加到文档碎片中，等所有操作都做完了再由文档碎片加入到整个文件中，只需要渲染一次，快！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>w nt</title>
    <script>
        window.onload=function(){
            var oUl=document.getElementById('ul1');
            var oFrag=document.createDocumentFragment();
            for(var i=0;i<100000;i++){
                var oLi=document.createElement('li');
                oFrag.appendChild(oLi)
                // oUl.appendChild(oLi);   之前直接存，现在先存一个包里

            };
            oUl.appendChild(oFrag);
        }
    </script>
</head>
<body>
    <ul id="ul1"></ul>
</body>
</html>

DOM高级应用

表格应用

隔行变色问题：

<script>
        window.onload=function(){
            var oldColor='';//为了存储表格原本的颜色，防止鼠标移入移出变色把原来的颜色覆盖！
            var oTab=document.getElementById('tab1');
            // alert(oTab.tBodies[0].rows[1].cells[1].innerHTML);
            //只有table有的简易操作，第一个tBody（tBody）可以有很多个，rows行，cell这一行的所有单元格
            for(var i=0;i<oTab.tBodies[0].rows.length;i++){
                oTab.tBodies[0].rows[i].onmouseover=function(){
                    oldColor=this.style.background;
                    this.style.background='green';
                };                
                oTab.tBodies[0].rows[i].onmouseout=function(){
                    this.style.background=oldColor;
                };
                if (i%2)
                {
                    oTab.tBodies[0].rows[i].style.background='gray';
                }
            }
        }

表格的增删改查：
增加：document.createElement
删除：removeChild 注意选择父级
查找：模糊查找用toLowerCase()全转为小写
search()搜查并返回出来值
关键词查找：split()
筛选：搜索之后只弹出筛选过的：用到匹配后display='block’就可以

注意：appendChild属性：
//注意：appendChild有两个效果：1.先把元素从原有父级上删掉；
//2.添加到新的父级元素上！！！！所以不需要加removeChild（）

关于数组排序：

数组里的东西默认都是字符串，如果你要

alert(arr1);

java解析jsp视频文件_字符串_07

会弹出这个

必须要加alert(arr1.innerHTML);

列表、表格排序思路：

列表实际上不是数组不能直接用sort
所以直接把列表转成数组，但是要注意，不能直接转列表的值，列表本身每个li可以作为数组的每个object且通过索引找到，然后通过数组转成值来排序，最后再赋给列表；

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。

上一篇：nginx UDP转发域名

下一篇：用js写mongodb脚本

提问和评论都可以，用心的回复会被更多人看到评论

发布评论

相关文章

官方博客	全部文章	热门标签	班级博客
了解我们	网站地图	意见反馈

鸿蒙开发者社区	51CTO学堂
51CTO	软考资讯