• 随笔【js】


    1.js是大小写敏感的

    2.

    区别 getElementBy ID , getElementsBy Name getElementsBy TagName
    以人来举例说明,人有能标识身份的身份证,有姓名,有类别(大人、小孩、老人)等。
    1. ID 是一个人的身份证号码,是唯一的。所以通过getElementById获取的是指定的一个人。
    2. Name 是他的名字,可以重复。所以通过getElementsByName获取名字相同的人集合。
    3. TagName可看似某类,getElementsByTagName获取相同类的人集合。如获取小孩这类人,getElementsByTagName("小孩")。

    document.getElementsByName(name)
    该方法与 getElementById() 方法相似,但是它查询元素的 name 属性,而不是 id 属性。
    另外,因为一个文档中的 name 属性可能不唯一(如 HTML 表单中的单选按钮通常具有相同的 name 属性),
    所有 getElementsByName() 方法返回的是元素的数组,而不是一个元素。

    <html>
    <head>
    <script type="text/javascript">
    function getElements()
      {
      var x=document.getElementsByName("myInput");
      alert(x.length);
      }
    </script>
    </head>
    <body>
    
    <input name="myInput" type="text" size="20" /><br />
    <input name="myInput" type="text" size="20" /><br />
    <input name="myInput" type="text" size="20" /><br />
    <br />
    <input type="button" onclick="getElements()"
    value="How many elements named 'myInput'?" />
    
    </body>
    </html>

     3.onblur事件:会在对象失去焦点时(比如鼠标离开输入框)发生(比如执行某些代码)

    4.json

     1 <script>
     2 /*json是一种数据格式 和编程语言没有关系 载体是字符串 只要是支持字符串的语言都支持json 
     3 json格式的字符串 转换完之后JSON.parse() 会转换成对象或数组
     4 下面这两个写法 '{"name":"楚慈","skill":"爱人"}'   '["韩越","楚慈","裴志","任家远"]'
     5 都是要在最外层有个‘’的 以为json载体是字符串啊 把这个‘’去掉就成为对象或者数组了就不是json了*/
     6 
     7 //json表示对象的写法 对象使用{} 属性名和属性值都必须用双引号包裹 除非属性值是数字
     8 var jsonObject = '{"name":"楚慈","skill":"爱人"}';
     9     console.log(jsonObject); //{"name":"楚慈","skill":"爱人"}
    10 //jsonboject转换成对象
    11 var obj = JSON.parse(jsonObject); 
    12     console.log(obj);/* Objectname: "楚慈"skill: "爱人"__proto__: Object 转换成了对象*/
    13 //获取转换成对象的数据 用.即可
    14 console.log(obj.name+'---'+obj.skill); //楚慈---爱人
    15 
    16 //json表示数组的写法 []
    17 var jsonArr='["韩越","楚慈","裴志","任家远"]';
    18     console.log(jsonArr); //["韩越","楚慈","裴志","任家远"]
    19 //转换成对应的数组
    20 var result = JSON.parse(jsonArr);
    21     console.log(result);
    22 //输出数组元素
    23 console.log(result[0])//韩越
    24 </script>

     css3 box-shadow属性:向框添加一个或多个阴影。蛮酷炫

    js中标签字符串的拼接

     1.:通过Jquery直接创建标签对象$("<option></option>")

     2.

    var userTableStr='';
    userTableStr +='<table width="750" height="33" border="1">';
    userTableStr += '<tr>';
    userTableStr += '<td width="100"><input type="text" size ="11" value=""/></td>';
    userTableStr += '<td width="100"><input type="text" value="" size ="11"/></td>';
    userTableStr += '<td width="90"><input type="text" value="" size ="8"/></td>';
    userTableStr += '<td width="390">
    全局就是一个userTableStr的空字符串,一直是+=的形式
    ajax中有一个例子

    DOM cloneNode() 方法
    cloneNode() 方法可创建指定的节点的精确拷贝。
    cloneNode() 方法 拷贝所有属性和值。
    该方法将复制并返回调用它的节点的副本。如果传递给它的参数是 true,它还将递归复制当前节点的所有子孙节点。否则,它只复制当前节点。

    jQuery clone() 方法

    clone() 方法生成被选元素的副本,包含子节点、文本和属性

    $("button").click(function(){
        $("p").clone().appendTo("body");
    });

    JS中对象与数组(大括号{}与中括号[])

    一、{ } 大括号,表示定义一个对象,大部分情况下要有成对的属性和值,或是函数。
    如:var LangShen = {"Name":"Langshen","AGE":"28"};
    上面声明了一个名为“LangShen”的对象,多个属性或函数用,(逗号)隔开,因为是对象的属性,
    所以访问时,应该用.(点)来层层访问:LangShen.Name、LangShen.AGE,当然我们也可以用数组的方式来访问,如:LangShen["Name"]、LangShen["AGE"],结果是一样的。

    对象作为参数传递的时候 也就是这样 met({
    type:'get',
    data:'苏格拉底',
    URL:'www.baidu.com'
    })//met是函数名啊
    然后调用的时候 就直接.type就可以

    关于遮罩层 可以自己写啊

      <style>
        .cover { /*遮罩层是自己写的!!!!!!!!!!!!!!!*/
          height: 100%;
          width: 100%; /*这个遮罩层这了整个页面*/
          position: absolute;
          left: 0;
          top: 0;
          background-color: skyblue;
          opacity: .5;/*透明度*/
          display: none;
        }
      </style>
    <div class="cover"></div>

    js: eval() 函数可计算某个字符串,并执行其中的的 JavaScript 代码。
    eval(string)
    eval("x=10;y=20;document.write(x*y)") document.write(eval("2+2"))

    push() 方法可向数组的末尾添加一个或多个元素,并返回新的长度。 unshift()向开头

    箭头函数 
    https://www.liaoxuefeng.com/wiki/1022910821149312/1031549578462080

    (x,y,z)/()/x  => {} /只有一条语句    (x,y,z):多个参数 ()无惨 x:一个参数

    keyup/keydown方法:按键被松开并复位/按下按键

    $(document).ready(function(){
      $("input").keydown(function(){
        $("input").css("background-color","#FFFFCC");
      });
      $("input").keyup(function(){
        $("input").css("background-color","#D6D6FF");
      });
    });

     HTML的label标签     https://www.jianshu.com/p/59b63d07ab04

    <label> 标签为 input 元素定义标签(label)。label 元素不会向用户呈现任何特殊的样式。不过,它为鼠标用户改善了可用性,因为如果用户点击 label 元素内的文本,则会切换到控件本身。<label> 标签的 for 属性应该等于相关元素的 id 元素,以便将它们捆绑起来。

    <!DOCTYPE HTML>
    <html>
    <body>
    
    <form>
      <label for="male">Male</label>
      <input type="radio" name="sex" id="male" />
      <br />
      <label for="female">Female</label>
      <input type="radio" name="sex" id="female" />
    </form>
    <!--点击文字和点击相应的选项框的效果一样-->
    </body>
    </html>
    Label标签有两个属性,一个是for,一个是 accesskey
    for功能:表示这个Lable是为哪个控件服务的,Label标签要绑定了for指定HTML元素的ID或name属性,你点击这个标签的时候,所绑定的元素将获取焦点 ,点击label所包裹内容,自动指向for指定的id或name
    accesskey则定义了访问这个控件的热键( 所设置的快捷键不能与浏览器的快捷键冲突,否则将优先激活浏览器的快捷键)
     

    <a>链接  <a href="javascript:;" >  Click Me  </a>
    记得最初加入以前的Web组时,入职后在工作位上的第一件事情是看web编码规范(XHTML、CSS、JavaScript的编码规范),它里面中就指出:所有不需要打开链接页面的A元素,它的href属性不允许写为”#”,而得使用“javascript:;”

    document.getElementById('search').focus():为元素设置焦点    focus():方法  onfocus:事件   html的 autofocus
    forEach() 方法用于调用数组的每个元素,并将元素传递给回调函数。
    findIndex() 方法返回传入一个测试条件(函数)符合条件的数组第一个元素索引位置
    string.prototype.includes这个方法可以帮你判断一个字符串是否包含另外一个字符串。
     
     
     

    HTML <select> 标签 

    出现这种选择框:

    <select>
      <option value ="volvo">Volvo</option>
      <option value ="saab">Saab</option>
      <option value="opel">Opel</option>
      <option value="audi">Audi</option>
    </select>

    关于nginx 代理服务器   大神篇:https://blog.csdn.net/tsummerb/article/details/79248015 写的很好通俗易懂

    网络请求 token存储
    很多项目里面,需要在用户登录后保持登录状态,使用的不是存储用户名和密码,每次模拟去登录。而是登录成功时,从服务器接受token,
    token是服务器生存的一个字符串,唯一标识一个用户,并且会在一段时间后销毁,所以我门很久不登录app,会要求重新登录。
    利用一个工具类,进行token的存储、删除和读取。登录成功进行存储,下一次打开app进行读取,退出时进行删除。
    如果有refreshtoken,可以进行更新,就不用再次登录。--token作用
    https://www.jianshu.com/p/624a2b95c198

    document.write

    https://www.runoob.com/jsref/met-doc-write.html

        document.write()方法可以用在两个方面:页面载入过程中用实时脚本创建页面内容,以及用延时脚本创建本窗口或新窗口的内容。该方法需要一个字符串参数,它是写到窗口或框架中的HTML内容。这些字符串参数可以是变量或值为字符串的表达式,写入的内容常常包括HTML标记语言。

      记住,在载入页面后,浏览器输出流自动关闭。在此之后,任何一个对当前页面进行操作的document.write()方法将打开—个新的输出流,它将清除当前页面内容(包括源文档的任何变量或值)。因此,假如希望用脚本生成的HTML替换当前页面,就必须把HTML内容连接起来赋给一个变量,使用一个document.write()方法完成写操作。不必清除文档并打开一个新数据流,一个document.write()调用就可完成所有的操作。

      关于document.write()方法还有一点要说明的是它的相关方法document.close()。脚本向窗口(不管是本窗口或其他窗口)写完内容后,必须关闭输出流。在延时脚本的最后一个document.write()方法后面,必须确保含有document.close()方法,不这样做就不能显示图像和表单。并且,任何后面调用的document.write()方法只会把内容追加到页面后,而不会清除现有内容来写入新值。为了演示document.write()方法,我们提供了同一个应用程序的两个版本。一个向包含脚本的文档中写内容,另—个向—个单独的窗口写内容。请在文本编辑器中键人每个文档,以.html文件扩展名保存,并在浏览器中打开文档。

     js 同步加载和异步加载

     setTimeout(function(){
         console.log('定时器开始啦')
     });
     
     new Promise(function(resolve){
         console.log('马上执行for循环啦');
         for(var i = 0; i < 10000; i++){
             i == 99 && resolve();
         }
     }).then(function(){
         console.log('执行then函数啦')
     });
     
     console.log('代码执行结束');
    js执行机制

    10分钟理解JS引擎的执行机制

    js预解析可以解释三个button都一起动

  • 相关阅读:
    页面的三大家族
    封装函数
    图片自动播放的案例
    动画封装
    长图滚动案例+点名册案例
    时钟案例
    伪随机数,随机数种子seed
    numpy.tolist( )函数
    countif( ) 函数判断当前单元格的身份证号码是否重复出现
    Excel技巧
  • 原文地址:https://www.cnblogs.com/yundong333/p/10518140.html
Copyright © 2020-2023  润新知