前端学习day08：js第三天

其他 2019-04-08 18:19:19 阅读次数: 0

作用域链：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>$美少女战士$</title>
</head>
<body>
<script>
    function a(){
        var b = {
            name :'',
            sex:'',
            eat:function(){
            },
            play:function(){
            }
        };
        return b;  // 指向b函数的地址
    }
    var global = 100;
    var demo = a();  //a 函数直接销毁  按道理来说 a not defined
    demo();
    demo();
</script>
</body>
</html>

js获取元素：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>$美少女战士$</title>
    <style>
   /*属性选择器  E[属性名="属性值"] */
        .dv {
        }
        input[type="text"] {
        }
        input[index='1'] {
        }
        input[class^="as"]{/* //^ 开头 *包含  $ 结束*/
            /*挑选类名以as字符开头的Input标签元素*/
        }
    </style>
</head>
<body>
<input type="text" index="1"  class="asd">
<input type="text" class="as" >
<input type="button" >
<div class="dv"></div>
<div class="dv"></div>
<div class="dv" id="dv1"></div>
<div class="dv a"></div>
<div class="dv b"></div>
<script>
  /*  var dv = document.getElementById('dv1')
    var dvs = document.getElementsByClassName('dv') // 数组
    dvs[0].style.width='200px'
    dvs[0].style.height='200px'
    dvs[0].style.backgroundColor='#342512'*/
    var divs = document.getElementsByTagName('div') // 一组 数组
    console.log(divs)
    //查询选择器方法
    var a = document.querySelector('div:nth-of-type(-n+3)') //css选择器方法
    var a = document.querySelectorAll('div:nth-of-type(-n+3)') //css选择器方法
    // 一个数组 [,,]  document.querySelector  他只能返回一个 即使数组 他也只返回数组第一个
var input = document.querySelectorAll('input[class^="as"]')
    console.log(input)
</script>
</body>
</html>

对象：

扫描二维码关注公众号，回复： 5813636 查看本文章 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>$美少女战士$</title>
</head>
<body>
<script>
/*对象  引用类型  无序键值对的集合  属性+方法
* 定义：糖衣法
* var obj = { } */
function  a () {
  console.log(this)  // this 指的是顶级对象window
}
var obj = {
    /*this 指本对象*/
    id:1200,
    name:'wangdafa',
    salary:2300,
    hobby:"18years old  girls",
    eat:function () {
        console.log(this.name+"喜欢吃榴莲")
    }
}
/*遍历对象 for in*/
for(var index in obj){
    /*判断数据的类型  判断基本数据类型   typeof
    * 引用 类型 instanceof*/
    /*不是对象的属性进行输出*/
   /* var obj1 = {}
    console.log(obj1 instanceof Object )*/
   /*if(!条件){}   条件不成立 则进行{}里面的代码*/
    if(!(obj[index] instanceof Object)){
        console.log(index,obj[index])
    }
}
</script>
</body>
</html>

字符创对象方法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>$美少女战士$</title>
</head>
<body>
<script>
    /*1:charAt() 根据下标返回第几个字符*/
    var str = 'abcdef' //字符串以数组方式存储
  /* console.log(str.charAt(3))*/
   console.log(str.charCodeAt(3)) // d a 97 A 65
    /*连接字符串  concat()*/
    /*var str1 = str.concat('hhhhh','kkkkk')*/
    console.log(str+'hhhhhkkkk')
    /*indexof()  返回值是子串在父串里开始的第一个下标
    如果查找失败则返回-1
    * string.indexOf(substring)   substring 子串
      string.indexOf(substring,start)  start 是从哪个下标开始找起*/
    console.log(str.indexOf('de',4))
    var  str2 = "http://localhost:63342/5.html?name='lili'&&sex='女'"
    /*截取子串 slice(start ,end )*/
    var askIndex = str2.indexOf('?')
    var a = str2.slice(askIndex+1)
    console.log('当前子串'+a)
    /*将字符串转换成数组  split('分隔符')*/
//name='lili'&&sex='女'
    var b = a.split('&&') // b = [ 'name="lili"','sex="女"']
    var obj = {}
    for(var i =0;i<b.length;i++){
       // shuxm 代表属性名变量
        var shuxm = b[i].split('=')[0]; //属性名 [name ,'lili']
        obj[shuxm] =b[i].split('=')[1]
    }
    console.log(obj)
</script>
</body>
</html>

时间对象：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>$美少女战士$</title>
</head>
<body>
<script>
    /*三元表达式  条件?表达式1：表达式2  true 执行 1 */
    var time = new Date()
    //Wed Mar 27 2019 11:22:54 GMT+0800 (中国标准时间)  1970 1月1日
    console.log(time.valueOf())//1553657061549 ms 数
    console.log(time.getTime())//1553657061549 ms 数
    /* 2019-03-27  11:29:34 */
    /* 格式化时间函数 2019-03-27  11:29 */
    function formatTime(T) {
        var year = T.getFullYear() // 年
        var mounth = T.getMonth()+1 //月  0 月开始  11代表12月
        var day = T.getDate() //一月中的第几天 1 开始
        var hour = T.getHours();
        var minutes = T.getMinutes(); // 11:03 ===> 11 : 3
        var seconds = T.getSeconds();
        console.log(year,mounth,day,hour,minutes,seconds)
        var timeStr = year+'-'+(mounth>10?mounth:('0'+mounth)) +'-'+(day>10?day:'0'+day)+'   '+
            (hour>10?hour:'0'+hour)+':'+(minutes>10?minutes:'0'+minutes)+':'+
            ( seconds>10?seconds:'0'+seconds);
        return timeStr;
    }
    var T = new Date()
    var a = formatTime(T) ;
    console.log(a)
</script>
</body>
</html>

js操作文本：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>$美少女战士$</title>
</head>
<body>
<button class="btn">点击</button>
<div class="dv">
    var a = document.querySelector('div:nth-of-type(-n+3)') //css选择器方法
    var a = document.querySelectorAll('div:nth-of-type(-n+3)') //css选择器方法
</div>
<script>
var btn = document.querySelector('.btn')
var div = document.querySelector('.dv')
    /*
    * 1：点击按钮 按钮身上绑定点击事件
    * 2：替换div里的文本内容 对象.innerText 获取  对象.innerText = '内容'
    * */
    /*触发 才执行 回调函数*/
    btn.onclick = function () {
       /*div.innerText = '哈哈哈嘿嘿嘿 '*/
       div.innerHTML= '<a href="http://baidu.com">百度</a> '
    }
    console.log('safffffffffffff')
</script>
</body>
</html>

js操作属性：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>$美少女战士$</title>
</head>
<body>
<a href="http://baidu.com" target="">百度</a>
<button id="btn">点击热点文字链接地址</button>
<script src="获取元素.js"></script>
<script>
   /* var obj = {
        name:'lili',
        1:'rty'
    }
    obj.name   不可以获取属性名是数字的属性
    obj.1
    obj['1']
    obj['name'] 可以获取属性名是数字的属性
    obj['index'] ="123"*/
    /*  默认属性  对象.属性名  对象['属性名']*/
    var btn =  my$('#btn');
    var mya = my$('a') ;
    /*1:点击按钮*/
    btn.onclick = function () {
       /*修改链接和热点文字*/
       mya.innerText = '火狐'
       mya.href = 'https://home.firefoxchina.cn/'
    }
/*自定义属性*/
</script>
</body>
</html>

点击小图切换大图：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        img:nth-of-type(-n+4) {
            width:200px;
            height:200px;
            float:left;
        }
        img:nth-of-type(5) {
            width:800px;
            height:auto;
        }
    </style>
</head>
<body>
<img src="images/fj1.png" alt="">
<img src="images/fj2.png" alt="">
<img src="images/fj3.png" alt="">
<img src="images/fj4.png" alt="">
<div style="clear:both"></div>
<img src="images/bigimg.png" alt="" id="bigimg">

<script>
    window.onload = function () {
        var imgs = document.querySelectorAll('img:nth-of-type(-n+4)')//获取前四张图片
        // console.log(imgs)
        var bigImg = document.querySelector('#bigimg')//获取第五张图片
        // console.log(bigImg)
        for(var i=0;i<imgs.length;i++){//四张小图片分别是imgs[0],imgs[1],imgs[2],imgs[3]
            imgs[i].onmouseover = function () {//点击事件,点击之后执行function里的代码
                var srcs = this.src//获取点击的小图片的路径
                // console.log(srcs)
                bigImg.src=srcs;//修改大图片的路径
            }
        }

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

表单元素：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>$美少女战士$</title>
    <style>
    form {
        width: 500px;
    }
    input,select{
        display: block;
    }
    </style>
</head>
<body>
<!--表单-->
<form action="" method="get"  name="form1">
    <fieldset>
    <legend>学生信息</legend>
    昵称：  <!--required-->
    <input type="text" required name="username">
    密码:
    <input type="password" required  name="password" >
    邮箱:
    <input type="email" >
    <select name="city" id="">
        <option value="0" >北京</option>
        <option value="1"  >北京</option>
        <option value="2"  selected>成都</option>
        <option value="3"  >北京</option>
        <option value="4"  >北京</option>
    </select>
    爱好:
    <input type="checkbox" style="display:inline-block" name="hobby" checked > 运动
    <input type="checkbox" style="display:inline-block" name="hobby" > 唱歌
    <input type="submit" id="sub">
    </fieldset>
</form>
<script>
    /*表单元素通过name名字获取
    * 获取表单元素的值 对象.value*/
    var form = document.form1;//整个表单
    /*表单的下拉列表里的选项  form.selectname.options */
    console.log(form.password.value)
    console.log(form.city.options)
    var ops = form.city.options //数组
    ops[2].innerText = '成都'
    ops[2].value = '45'
    console.log(ops[2])
    /*提交事件*/
     document.getElementById('sub').onclick= function(){
    }
    var count = 0;
    var chk = form.hobby
    for(var i =0;i<chk.length ; i++ ){
         if(!chk[i].checked){
               //不被选中的有几个
             console.log(chk[i])
         }
    }
</script>

</body>
</html>

自定义属性：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>$美少女战士$</title>
</head>
<body>
<div >div元素1</div>
<div >div元素2</div>
<div >div元素3</div>
<div class="a">div元素4</div>
<script src="获取元素.js"></script>
<script>
    /*自定义属性   作用：保存数据  区分*/
    /*js操作自定义属性
    * 设置：document.setAttribute('属性名',‘属性值’)
    * 获取：document.getAttribute('属性名') ===>返回值字符串
    * 移除：document.removeAttribute('属性名')*/
    var divs = my$All('div');
    for(var i = 0;i<divs.length;i++){
        divs[i].setAttribute('index',i)
        console.log(divs[i].getAttribute('index'))
        if(i === 3){
            divs[i].removeAttribute('class')
        }
    }
</script>
</body>
</html>

排他思想：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>$美少女战士$</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: #a71d5d;
            float: left;
            margin-left: 50px;
        }
    </style>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<script>
    var divs = document.getElementsByTagName('div')
    for(var i =0;i<divs.length;i++){
        divs[i].onmouseover = function () {
            /*先全部变成上面默认背景色*/
            for(var j =0;j<divs.length;j++){
                divs[j].style.backgroundColor ='#a71d5d'
            }
            this.style.backgroundColor = 'yellow'
        }
    }
    for(var i =0;i<divs.length;i++){
        divs[i].onmouseout = function () {
            /*先全部变成上面默认背景色*/
            // for(var j =0;j<divs.length;j++){
            //     divs[j].style.backgroundColor ='#a71d5d'
            // }
            this.style.backgroundColor = '#a71d5d'
        }
    }
</script>
</body>
</html>

选项卡切换：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            padding:0;
            margin:0;
            box-sizing: border-box;
        }
        .tab {
            border:black 1px solid;
            width:600px;
            height:auto;
            margin: 300px auto;

        }
        .tab-title {
            width:600px;
        }
        .tab-title li {
            width:25%;
            height:50px;
            float:left;
            background-color: #9ff3ff;
            color:gold;
            font-size:25px;
            list-style: none;
            line-height: 50px;
            text-align: center;
        }
        .tab-body {
            width:600px;
            height:auto;
            position: relative;
        }
        .tab-body li {
            width:100%;
            height:500px;
            background-color: pink;
            color: orange;
            font-size: 40px;
            list-style: none;
            line-height: 500px;
            text-align: center;
            position: absolute;
            top:50px;
            left:0;
            display: none;
        }
    </style>
</head>
<body>
<div class="tab">
    <ul class="tab-title">
        <li style="background-color: greenyellow">国内新闻</li>
        <li>国外新闻</li>
        <li>娱乐新闻</li>
        <li>科技新闻</li>
    </ul>
    <ul class="tab-body">
        <li style="display: block">中国十大最美城市</li>
        <li>习大大访问法国</li>
        <li>《四季》：好听到爆</li>
        <li>震惊：苹果公司竟于昨日倒闭</li>
    </ul>
</div>
<script src="获取元素.js"></script>
<script>
    window.onload=function(){
        var TitleLis = my$All('.tab-title li')//获取类名为title的ul中的li，结果为数组
        var BodyLis = my$All('.tab-body li')//获取类名为body的ul中的li，结果为数组
        // console.log(TitleLis,BodyLis)
        for (var i=0;i<TitleLis.length;i++){
            TitleLis[i].setAttribute('index',i)//将小li在数组中的下标标记为index
            TitleLis[i].onmouseover = function () {//鼠标移入上面四个小li时执行
                var index = this.getAttribute('index')//将小li的下标保存
                // console.log(index)
                for (var j=0;j<BodyLis.length;j++){
                    TitleLis[j].style.backgroundColor='#9ff3ff'//将所有小li的背景色变回蓝色
                    BodyLis[j].style.display="none"//将所有大li隐藏
                }
                TitleLis[index].style.backgroundColor='greenyellow'//改变下标为index的小li的颜色
                BodyLis[index].style.display='block'//显示下标为index的大li
            }
        }
    }
</script>
</body>
</html>

js中遍历对象的方法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    //遍历对象的方法：
    var obj = {
        'name':'张三',
        'age' :'22',
        'sex' :'男'
    }
    Object.prototype.pro1=function () {};//在原型链上添加属性
    Object.defineProperty(obj,'country',{Enumerable:true,value:'ccc'});//可枚举
    Object.defineProperty(obj,'nation',{Enumerable:false});//不可枚举
    obj.contry = 'china';
//方法1：for...in
    //遍历输出的是对象自身的属性以及原型链上可枚举的属性（不含Symbol属性），原型链上的属性最后输
    //出说明先遍历的是自身的可枚举属性，后遍历原型链上的
    for(var index in obj) {
        console.log(index,obj[index])
    }
    //输出为：name 张三
    //      age 22
    //      sex 男
    //      contry china
    //      prol f(){}



// //方法2：Object.keys()
//     //遍历对象返回的是一个包含对象自身可枚举属性的数组（不含Symbol属性）
//     Object.keys(obj).forEach(function(index){
//         console.log(index,obj[index])
//     })
//     //输出为：name 张三
//     //      age 22
//     //      sex 男
//     //      contry china



// //方法3：Objcet.getOwnPropertyNames()
//     //输出对象自身的可枚举和不可枚举属性的数组,不输出原型链上的属性
//     Object.getOwnPropertyNames(obj).forEach(function(index) {
//         console.log(index, obj[index])
//     });
//     //输出为：name 张三
//     //      age 22
//     //      sex 男
//     //      country ccc
//     //      nation undefined
//     //      contry china

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

猜你喜欢

转载自blog.csdn.net/weixin_43800846/article/details/88861268
今日推荐
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
国产云输入法——仅华为无云端数据上传安全问题
开源日报 | 工业开源项目OGG 1.0；姐姐，你要和我一起配置火狐吗；苹果AI遥遥落后？Fedora 40
开放签电子签章：停止新增，优化体验，前进更进（五一假期前工作）
开源日报 | 中学生开源前端动画引擎；全球首个Llama3 8B中文版开源模型；联想电脑恐出局；Linus讽刺AI炒作
“百模大战”必有一战 | 2024中国“百模大战”竞争格局分析
周排行
Family Tree 题解
BZOJ 1093 最大半连通子图 SCC + DP
幂等处理
Spring----学习（2）----XML 配置Bean 自动装配
SQL Server 远程更新目标表数据
HIbernate3.6 环境搭建
特殊符号正则表达式
【Linux】第一章 进程的理解
843. n-皇后问题（dfs+输出各种情况）
空间数据库2
每日归档
更多
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)
2024-04-22(39)
2024-04-21(0)
2024-04-20(6)
2024-04-19(5)
2024-04-18(0)
2024-04-17(5)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022