TypechoJoeTheme

九肽荷尔蒙's Blog

用户名
密码
用户名
邮箱

九肽荷尔蒙

浅尝辄止,贪得无厌

JavaScript笔记(二)

2021-10-26
/
0 评论
/
56 阅读
/
正在检测是否收录...
10/26

JavaScript

学习目标

1、DOM 文档对象模型
    简介
    如何获取标签元素对象
    标签元素创建
    标签元素删除
    标签元素修改
    
    标签元素的属性设置获取
    标签元素样式进行设置获取
    标签元素中的内容设置获取
    标签元素样式设置获取2
2、BOM 浏览器对象模型  window---定时器
    子对象:document
           history
           location
           navigator
           screen

一、DOM 文档对象模型

1、介绍
Document Object Model文档对象模型  将文档中的每一个标签元素以及属性等看成一个节点,进行增删改查操作   
2、标签元素的获取
var ele = document.getElementById("ID名")//返回值原生的js标签对象
var eles = document.getElementsByClassName("cc")//返回值HTMLCollection
var inps = document.getElementsByTagName("input");//返回值HTMLCollection
var sexs = document.getElementsByName("username");//返回值NodeList(2)
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        window.onload =  function(){
            //根据id获取元素1 设置背景为green
             var div1 = document.getElementById("box");//原生的js标签对象
             console.log(div1)
            // div1.style.backgroundColor = "RGB(0,255,0)";
            //根据class值获取元素 设置红色背景
            var divs = document.getElementsByClassName("cc");//返回值HTMLCollection
            console.log(divs)
            divs[0].style.backgroundColor = "red";//从集合中获取单独的标签元素进行设置
            //根据标签名获取元素 设置蓝色背景
            var inps = document.getElementsByTagName("input");//返回值HTMLCollection
            console.log(inps);
            inps[0].style.backgroundColor = "grey";
            //根据name属性获取元素 设置粉红背景
            var sexs = document.getElementsByName("username");//返回值NodeList(2)
            sexs[0].style.backgroundColor = "pink";
        }

    </script>
</head>
<body>
    <div id="box" class="aa bb cc">元素1</div>
    <div class="cc">元素2</div>
    <input type="text" name="username">
    <input type="radio" name="sex" value="1">
    <input type="radio" name="sex" value="0">
</body>
</html>
3、标签元素的新增
creatElement(新增标签名)----创建
父元素.insertBefore(新增,参照物)----放入指定位置
父元素.appendChild()---------添加到父元素内部末尾
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        window.onload = function(){
            //创建
            var img1 = document.createElement("img");
            img1.src = "./images/smile.gif";
            //放入到body中
            var body1 = document.body;
            //body1.appendChild(img1);
            //放在参照物之前
            var div1 = document.getElementById("box");
            body1.insertBefore(img1,div1);
        }
    </script>
</head>
<body>
    <div id="box">参照物</div>
</body>
</html>
4、标签元素的删除
自己.remove() 自己移除自己
自己.parentNode.removeChild() 由父级元素移除子元素
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        window.onload = function(){
            var div1 = document.getElementsByClassName("box")[0];
            //div1.remove();
            div1.parentNode.removeChild(div1);
        }
    </script>
</head>
<body>
    <div class="box">待移除标签</div>
</body>
</html>
5、标签元素的修改
父元素.replaceChild(new元素,old元素)
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        window.onload = function(){
            //删除
            var div1 = document.getElementsByClassName("box")[0];
            //div1.remove();
            //div1.parentNode.removeChild(div1);

            //修改
            var img1 = document.createElement("img");
            img1.src = "./images/smile.gif";

            var div2 = document.getElementsByClassName("box")[1];
            var parent1 = document.body;
            parent1.replaceChild(img1,div2);
        }
    </script>
</head>
<body>
    <div class="box">待移除标签</div>
    <div class="box">待替换标签</div>
</body>
</html>
6、标签属性的操作
setAttribute("属性名","属性值") 设置属性
getAttribute("属性名") 获取属性值
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        window.onload=function(){
            //当按钮1被点击显示图片 早上好  点击按钮2显示下午好
            var inps = document.getElementsByTagName("input");
            var img1 = document.getElementsByTagName("img")[0];
            for(var i=0;i<inps.length;i++){
                if(i==0){
                    inps[i].onclick = function(){
                        img1.setAttribute("src","./images/smile.gif");
                        img1.setAttribute("alt","按钮1点击加载失败");
                        img1.setAttribute("title","早上好");
                        var width1 = img1.getAttribute("width");
                        console.log(width1)
                    }
                }else{
                    inps[i].onclick = function(){
                        img1.setAttribute("src","./images/afternoon.gif");
                        img1.setAttribute("alt","按钮2点击加载失败");
                        img1.setAttribute("title","下午好");
                }
                }
            }

        }
    </script>
</head>
<body>
    <input type="button" value="按钮1">
    <input type="button" value="按钮2">
    <img src="./images/moon.gif" width="100px;">
</body>
</html>
7、标签中样式操作
标签.style.样式属性 = “属性值”
添加某选择器改变预定义的样式  eg:class=content
标签.setAttribute("class","content")
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .content{
            width: 200px;
            height: 200px;
            background-color: yellow;
            border-radius: 50%;
        }

    </style>
    <script>    
       function change(){
           var div1 = document.getElementById("box");
           //div1.style.width = "200px";
           //div1.style.height = "200px";
           //div1.style.backgroundColor = "yellow";
           //div1.style.borderRadius = "50%"
           div1.setAttribute("class","content");
       }
    </script>
</head>
<body>
    <input type="button" value="显示" onclick="change()">
    <div id="box"></div>
</body>
</html>
8、标签元素内容操作
双标记中的内容:
   innerHTML  操作标签中的所有--包含子标签和文本内容
   innerText  只操作标签中文本

input中的值--及value属性对应的值
    标签元素.value

总原则:当在等号左边代表设置值,反之代表获取值
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        function getValue(){
            //获取
           // var box1 = document.getElementById("box1");
           // var text1 = box1.innerText;
           // alert(text1);

            // var box2 = document.getElementById("box2");
            // var text2 = box2.innerHTML;
            // alert(text12);

            // var box3 = document.getElementById("box3");
            // var text3 = box3.value;
            // alert(text3);
            //设置值
            var box1 = document.getElementById("box1");
            //box1.innerText = "易烊千玺";
            box1.innerHTML = "<h1>易烊千玺</h1>";

            var box3 = document.getElementById("box3");
            box3.value = "cuihua";

            if(box1.innerText=="文本内容"){//获取值

            }
        }
    </script>
</head>
<body>
    <input type="button" value="测试按钮" onclick="getValue()">
    <div id="box1">文本内容1</div>
    <div id="box2"><h1>文本内容2</h1></div>
    <input type="text" name="username" value="admin" id="box3">
</body>
</html>

二、BOM 浏览器对象模型

window全局对象,浏览器加载页面时生成的一个全局的对象,即为浏览器对象模型
1. 简介
2. window下的子元素
   document 文档对象
   history  浏览器端存储的历史信息
   location 浏览器中的当前页面地址  相当a
   navigator 存储浏览器的相关信息
   screen 屏幕相关信息
   
使用时可以省略window不写
   window.document.getElement……
   window.alert()
   window.confirm()
   window.prompt()    
1、定时器
1、超时定时器(一次性定时器)---定时炸弹
    var id = setTimeOut(js代码块或函数,时间毫秒)
    clearTimeOut(定时器创建时的返回值)

2、周期性定时器(循环定时器)---闹铃
    var id = setInterval(js代码块或函数,时间毫秒)
    clearInterval(定时器创建时的返回值)

作用:页面的广告弹窗  轮播图   数据推送
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        //1、超时定时器
       // window.setTimeout("fn()",2000);
    //    var time = window.setTimeout(fn,2000);//建议使用
    //     function fn(){
    //         alert("boom~~~");
    //     }

    //     window.clearTimeout(time);//清除超时定时器

    //2、周期性定时器
        var time = window.setInterval(fn,2500);
        function fn(){
            alert("懒虫起床")
        }
        window.clearInterval(time);

    </script>
</body>
</html>
轮播图:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>    
</head>
<body>
    <img src="./images/img1.jpg" width="500" height="500">
    <script>
        setInterval(fn,2000);
        var i = 1;
        function fn(){
            i++;
            i = i>3?1:i;
           var img1 =  document.getElementsByTagName("img")[0];
           img1.setAttribute("src","./images/img"+i+".jpg");
        }
    </script>
</body>
</html>
2、history
window.history.forward() 前进
history.back()后退
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
      
            function go1(){
                window.history.forward();//前进>
            }
            function back1(){
                window.history.back();//后退<
            }

    </script>
</head>
<body>
    <input type="button" value="前进" onclick="go1()">
    <input type="button" value="后退" onclick="back1()">
    <a href="http://cts.ujiuye.com/login">有就业</a>
</body>
</html>
3、location
  window.location.reload刷新
  window.location.href当前地址设置
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
      
            function go1(){
                window.history.forward();//前进>
            }
            function back1(){
                window.history.back();//后退<
            }
            function fresh1(){
                window.location.reload();
            }
            function jump1(){
                window.location.href = "http://cts.ujiuye.com/login";
            }

    </script>
</head>
<body>
    <input type="button" value="前进" onclick="go1()">
    <input type="button" value="后退" onclick="back1()">
    <input type="button" value="刷新" onclick="fresh1()">
    <input type="button" value="跳转" onclick="jump1()">
    <a href="http://cts.ujiuye.com/login">有就业</a>
</body>
</html>

三、jQuery

1、是什么
2、特点
3、如何使用
4、语法特点
5、文档就绪
6、js元素对象与jQuery对象之间的转换
1.jQuery是什么 特点
是一个js的函数库
可以大大减减少代码的书写---写得少做得多
链式语法
易学易用
2.jQuery使用
1、下载jQuery的核心js文
    https://jquery.com/download/
    jquery-3.5.1.js  开发版(源代码)
    jquery-3.5.1.min.js 压缩版(体积小 效率高 安全性高)
   在CDN上引入
2、引入到页面中
    <script src="js/jquery-3.5.1.min.js"></script>
        或
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
3、使用jQuery
    $("选择器").函数().函数().函数()
    jQuery()主要函数  或  $()
       
3.文档就绪
js中:  window.onload = function(){}
jQuery:
    jQuery(document).ready(function(){}) 标准版1
    $(document).ready(function(){}) 标准版2
    $(function(){}) 简写版
        
        
js中文档就绪和jQuery中的文档就绪区别:
       1、jQuery中的文档就绪有简写版
       2、jQuery中的文档就绪可以出现多次,js中只能有一次成立
       3、加载时机不同
            js中文档就绪是等待页面中元素,样式,图片全部完成加载后才执行文档就绪中的代码块
            jQuery中文档就绪是等待页面中元素加载后就开始执行文档就绪中的代码块
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/jquery-3.5.1.min.js"></script>
    <script>
        window.onload = function(){
            document.getElementById("box").onclick = function(){
                this.innerText = "易烊千玺";
            }
        }
        // $(function(){
        //       $("#box").click(function(){
        //         this.innerText = "易烊千玺";
        //       })  

        // })

    </script>
</head>
<body>
    <div id="box">迪丽热巴</div>
    <div id="box2">迪丽热巴</div>
</body>
</html>
4.js&jQuery对象的转换
实际jQuery中对象 = js中DOM对象封装在集合中
    
jQuery对象 --》js对象
    jQuery对象[index]  或者  jQuery对象.get(index)
    
js对象 --》 jQuery对象
    $(js对象)
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/jquery-3.5.1.min.js"></script>
    <script>
        $(function(){

            //获取js对象
           //var box1 = document.getElementById("box");
           //获取jQuery对象  不能直接使用js中的属性
        //    var box1 = $("#box");
           //将jQuery对象转换为js对象后  再去使用js中的属性
           //box1 = box1[0];
        //    box1 = box1.get(0);
            // console.log(box1.innerText);

            //获取jQuery对象
           // var box2 = $("#box");
           //获取js对象  不能直接使用jQuery中的函数
           var box2 = document.getElementById("box");
           //将js对象转换为jQuery对象后  在使用jQuery中的属性
           box2 = $(box2);
           console.log(box2.text());
        })
    </script>
</head>
<body>
    <div id="box">测试文字1</div>
</body>
</html>

朗读
赞(0)
版权属于:

九肽荷尔蒙's Blog

本文链接:

http://sleeve.top/index.php/archives/152/(转载时请注明本文出处及文章链接)

评论 (0)
IP信息

人生倒计时

今日已经过去小时
这周已经过去
本月已经过去
今年已经过去个月

最新回复

  1. fixotaigujup
    2021-12-19

    Urgent imh.mhsz.sleeve.top.vrg.rd intuitively akinetic antiphospholipid [URL=http://damcf.org/drug/sildenafil-vendo/]viagra generique 75 mg[/URL] [URL=http://cocasinclair.com/product/dutas/]retail sale dutas[/URL] [URL=http://graphicatx.com/cialis-in-brazil/]prices of viagra, cialis, lavitra[/URL] [URL=http://nicaragua-magazine.com/item/synthroid/]synthroid online stores[/URL] [URL=http://americanazachary.com/product/lyrica/]lyrica kaufen leipzig[/URL] [URL=http://nicaragua-magazine.com/purchase-kamagra-without-prescription/]generic kamagra 100mg pills[/URL] [URL=http://staffordshirebullterrierhq.com/item/ed-super-advanced-pack/]ed super advanced pack generico online sicuro[/URL] [URL=http://gasmaskedlestat.com/keftab/]buy keftab[/URL] [URL=http://telugustoday.com/product/doxazosin/]buy doxazosin online[/URL] [URL=http://staffordshirebullterrierhq.com/item/jelly-pack-15/]low priced jelly pack 15[/URL] [URL=http://johncavaletto.org/amoxicillin/]amoxicillin[/URL] [URL=http://homemenderinc.com/product/viagra/]acheter du viagra 50 pills[/URL] [URL=http://nutrabeautynutrition.com/pill/cialis-strong-pack-60/]cialis strong pack 60 without pres[/URL] [URL=http://solepost.com/product/prednisone/]prednisone by check[/URL] uncertain arriving viagra advertisement buy dutas online in usa cialis generic synthroid online europe lyrica kaufen leipzig generic kamagra lowest purchase kamagra without prescription ed-super-advanced-pack prescription usa buy keftab generic for doxazosin best generic jelly pack 15 online amoxicillin can you order viagra online cialis-strong-pack-60 en china prednisone by check perimenopausal futile http://damcf.org/drug/sildenafil-vendo/ sildenafil vendo http://cocasinclair.com/product/dutas/ buy dutas online in usa buy dutas online in usa http://graphicatx.com/cialis-in-brazil/ cialis http://nicaragua-magazine.com/item/synthroid/ china synthroid online http://americanazachary.com/product/lyrica/ lyrica http://nicaragua-magazine.com/purchase-kamagra-without-prescription/ kamagra sans ordonnances http://staffordshirebullterrierhq.com/item/ed-super-advanced-pack/ cheap ed super advanced pack without a prescription http://gasmaskedlestat.com/keftab/ buy keftab online http://telugustoday.com/product/doxazosin/ doxazosin tablets http://staffordshirebullterrierhq.com/item/jelly-pack-15/ jelly-pack-15 online canadian http://johncavaletto.org/amoxicillin/ comprar amoxicillin en internet http://homemenderinc.com/product/viagra/ buy viagra online in ireland http://nutrabeautynutrition.com/pill/cialis-strong-pack-60/ buy cialis strong pack 60 w not prescription http://solepost.com/product/prednisone/ prednisone dozirovkamg guaranteed lowest price complexities frustrating ethics.

  2. buying stromecto
    2021-12-19
  3. etufghufeaje
    2021-12-19

    Night wpu.gvif.sleeve.top.yjr.rh relationship; adult magnesium [URL=http://otrmatters.com/item/lowest-cost-propecia/]propecia[/URL] [URL=http://memoiselle.com/product/proscar/]proscar online next day shipping[/URL] [URL=http://thatpizzarecipe.com/amoxil/]amoxil[/URL] [URL=http://anguillacayseniorliving.com/item/prednisone-discount-prices/]40 prednisone from top rated[/URL] [URL=http://johncavaletto.org/drugs/levitra-20mg-achat/]buy generic levitra online with echeck[/URL] [URL=http://washingtonsharedparenting.com/clomid/]clomid panama[/URL] [URL=http://mrcpromotions.com/drug/tretinoin-canada/]buy cheap tretinoin[/URL] [URL=http://anguillacayseniorliving.com/drugs/retin-a/]quebec retin a[/URL] [URL=http://americanazachary.com/product/propecia/]fastest delivery propecia[/URL] [URL=http://celebsize.com/soft-pack-40/]soft-pack-40 online[/URL] [URL=http://americanazachary.com/drugs/xenical/]medicine xenical[/URL] [URL=http://nicaragua-magazine.com/cheap-generic-substitute-doxycycline/]doxycycline[/URL] [URL=http://wow-70.com/pill/cytotec/]buy cytotec online free pills[/URL] [URL=http://damcf.org/drug/diclofenac/]diclofenac come si usa[/URL] fraction lowest cost propecia proscar online next day shipping generic amoxil no perscription prednisone levitra 20mg achat 50 mg clomid online uk tretinoin canada products like retin a real propecia without a prescription soft-pack-40 xenical doxycycline doxycycline online no presciption is buying cytotec from canada safe diclofenac come si usa lubricant adjuvants, intoxicating http://otrmatters.com/item/lowest-cost-propecia/ cheap generic propecia pills http://memoiselle.com/product/proscar/ proscar through mail http://thatpizzarecipe.com/amoxil/ amoxil sites http://anguillacayseniorliving.com/item/prednisone-discount-prices/ prednisone drug company prednisone online order guide http://johncavaletto.org/drugs/levitra-20mg-achat/ levitra uk pharmacy http://washingtonsharedparenting.com/clomid/ buy clomid without prescription http://mrcpromotions.com/drug/tretinoin-canada/ buy tretinoin online canada http://anguillacayseniorliving.com/drugs/retin-a/ retin a http://americanazachary.com/product/propecia/ propecia and mexico other products like propecia http://celebsize.com/soft-pack-40/ soft-pack-40 http://americanazachary.com/drugs/xenical/ xenical http://nicaragua-magazine.com/cheap-generic-substitute-doxycycline/ doxycycline http://wow-70.com/pill/cytotec/ cytotec http://damcf.org/drug/diclofenac/ diclofenac sin receta en farmacias introducing disorientation without.

  4. jonn2
    2021-12-19
  5. jonn1
    2021-12-19