zoukankan      html  css  js  c++  java
  • day13 JS Dom

    js两种存在形式
    1:文件
    2:块
    放到body标签底部 防止加载js超时页面反应慢的问题

    声明变量
    name = "sb"; //全局变量
    var age=18; //局部变量

    字符串
    var name = "alex"
    name.charAt(1) //获取第一个元素
    name.substring(0,3) //切片
    name.indexOf('a') //获取'a'的下标
    name.length //获取name长度

    数组 字典
    var li= [11,22,33] //var li = Array('11,22,33') 创建效果一样
    li.push(44) //往后插入44
    li.unshift(00) //往前插入00
    li.splice(1,0,'sb') //往指定位置(下标为1)插入'sb' 中间元素必须是0
    li.pop() //从后面移除一个
    li.shif() //前边移除一个
    li.splice(1,2) //从第一个下标拿走两个,2指的是个数
    li.slice() //切片拿
    concat //合并 n=['test'] m=li.concat(n)
    li.reverse() //反转

    var dic = {'k1':'v1'}


    序列化反序列化
    JSON.stringify(dic) //序列化
    JSON.parse(s) //反序列化

    循环语句(列表两种for循环,字典一种)
    li = [11,22,33,44];
    for (var item in li){
    console.log(item,li[item]);
    } //循环出来的是li列表的下标或字典的key

    for (var i=0;i<li.length;i++){
    console.log(i,li[i])
    }


    异常处理
    try{

    }catch(e){

    }finally{

    }


    函数
    普通函数
    function func1(arg){
    console.log(arg);
    return "sb";
    }
    var ret = func1(123);
    console.log(ret);
    匿名函数
    自执行函数
    (function(arg){
    console.log(111,arg); })('SB');
    面向对象
    http://www.cnblogs.com/wupeiqi/articles/5369773.html


    第二篇:Dom
    document
    1查找元素 基本的有三个
    tags = document.getElementsByTagName('h1'); //通过tag找
    document.getElementById //通过Id找
    document.getElementsByClassName //通过class找

    document.getElementsByName(username) //通过name获取,用于input标签
    2操作元素
    tags[0].innerText = '123'


    innerText 对div中间的内容的值进行获取修改用




    例子:按钮,数字自加
    <body>
    <div>
    <div id="num">1</div>
    <input type="button" value="+1" onclick="Add()" >
    </div>
    <script>
    function Add() {
    var nid = document.getElementById('num');
    var text= nid.innerText;
    text = parseInt(text);
    text +=1;
    nid.innerText = text;

    }
    </script>
    </body>




    例子:搜索框 onfocus onblur
    <body>
    <input type="text" id="search" value="please input keywords" onfocus="Focus();"onblur="Blur();" >
    <script>
    function Focus(){
    var nid = document.getElementById('search'); //找到它
    var value = nid.value; //获取他的内容
    if (value =="pelease input keywords"){
    nid.value = "";
    }
    }

    function Blur(){
    var nid = document.getElementById('search'); //找到它
    var value = nid.value; //获取他的内容
    if (!value.trim()){
    nid.value="please input keywords"
    }
    }

    </script>
    </body>




    创建标签(两种方式)
    <body>
    <div id="container"></div>
    <a href="http://www.sou.com" onclick="return AddElement();">添加</a>
    <script>
    function AddElement(){
    /*
    //创建标签,添加至container中
    var nid = document.getElementById('container');
    var tag = "<input type='text'>";
    nid.innerHTML = tag;
    return false
    */
    var createObj = document.createElement('a'); //通过对象的方式创建标签
    createObj.href = "http://www.so.com";
    createObj.innerText = "搜索";

    var nid=document.getElementById('container');
    nid.appendChild(createObj);

    console.log(createObj);
    return false;

    }
    </script>
    </body>




    标签属性
    <div> 没有name属性,如果要设置默认不存在时的属性(自定义属性) 需要用 setAttribute('name','aaa')
    className = class //obj.classNmae = '';
    对于style, nid.style.fontSize = ''; //-后的字母换成大写去掉杠
    对于所有标签属性都的可以用 getAttribute get... del...


    提交表单
    //可以用submit 还可以用js 加onclick实现
    //搜狗的地址:https://www.sogou.com/web?query=aa
    <body>
    <form id="form1" action="https://www.sogou.com/web" method="get">
    <input name="query" type="text"/>
    <div onclick="Submit();">提交</div>
    </form>
    <script>
    function Submit(){
    document.getElementById('form1').submit();
    }
    </script>
    </body>

    第二个例子

    <body>
    <form id="form1" action="https://www.sogou.com/web" method="get">
    <input name="query" type="text"/>
    <input type="submit" onclick="return MySubmit();" value="提交"/>
    </form>
    <script>
    function MySubmit(){
    var q =document.getElementsByName('query')[0];
    if(q.value.trim()){
    return true;
    }else{}
    alert("输入内容")
    return false
    }
    </script>
    </body>



    定时器跑马灯
    //setInterval
    //clearInterval
    //setTimeout

    <head>
    <meta charset="UTF-8">
    <title>你有新短消息</title>
    </head>
    <body>
    <script>
    setInterval("Func()",1000);
    function Func(){
    var text = document.title;
    var firstChar = text.charAt(0);
    var subText = text.substring(1,text.length);
    var newTitle = subText + firstChar;
    document.title = newTitle
    }
    </script>
    </body>




    http://www.cnblogs.com/wupeiqi/articles/5369773.html
  • 相关阅读:
    居中
    redis之列表操作及在django中操作等相关内容-124
    模型类序列化器ModelSerializer的使用等相关内容-84
    序列化类Serializer的基础使用等相关内容-83
    redis的基础使用等相关内容-123
    django框架前后端混合项目之子评论、后台管理页面富文本编辑器、修改头像、修改密码等相关内容-81
    vue框架前后端分离项目之短信验证码、登录、注册接口及前端登陆注册功能等相关内容-122
    web开发模式及drf的介绍等相关内容-82
    django框架前后端混合项目之侧边栏及点赞点踩功能等相关内容-80
    django框架前后端混合项目之首页轮播图、主页、后台管理、头像显示等相关内容-79
  • 原文地址:https://www.cnblogs.com/dribs/p/5430766.html
Copyright © 2011-2022 走看看