js技巧

1.文档入口函数

 window.onload = function () {
//code 将会在页面的全部代码执行完成之后再去执行。
}

2.弹窗   alert()   警告窗   confirm()   确认框   prompt() 提示窗

3.获取元素

3.1获取id document.getElementById();

3.2获取class  document.getElementsByClassName(className);

3.3获取标签  document.getElementsByTagName(tagName);

4

In   判断一个值是否属于某个数组或者一个属性是否属于一个对象

var mycar = {make: "Honda", model: "Accord", year: 1998};
"make" in mycar // returns true
"model" in mycar // returns true

for in

var obj = {
    "key1":"value1",
    "key2":"value2",
    "key3":"value3"
  };

  function EnumaKey(){
    for(var key in obj ){
      alert(key);
    }
    }

    function EnumaVal(){
      for(var key in obj ){
        alert(obj[key]);
        }
      }
    EnumaKey();
     EnumaVal();

typeof用以获取一个变量或者表达式的类型

  alert(typeof (123));//typeof(123)返回"number" 

  使用typeof来获取一个变量是否存在

  if(typeof a!="undefined"){},而不要去使用if(a)因为如果a不存在(未声明)则会出错,

因为typeof遇到null,数组,对象时都会返回object类型,所以当我们要判断一个对象是否是数组时

或者判断某个变量是否是某个对象的实例则要选择使用另一个关键语法instanceof

instanceof用于判断一个变量是否某个对象的实例

如var a=new Array();alert(a instanceof Array);会返回true,

同时alert(a instanceof Object)也会返回true;这是因为Array是object的子类

5.Void   忽略操作数的值

<a href=”javascript:void(0)”>

<a href=”javascript:;”>

<a href=”#” onclick=”javascript:return false”>

6.运算符优先级

7.成绩查询代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        #dd{
            /*display:inline-block;*/
            width:300px;
            height:35px;
            line-height:35px;
            text-align:center;
            top:8px;
            left:270px;
           position:absolute;
        }
    </style>
</head>
<body>
    <input type ="text" id="ipt">
    <button id="bt" value="查询">查询</button>
    <div id="dd"></div>
</body>
<script>
   var ipt=document.getElementById("ipt");
   var bt=document.getElementById("bt");
   var dd=document.getElementById("dd");
        bt.onclick=function(){
            var score=ipt.value;
            if(score<0){
                dd.innerHTML="输入不正确,请从新输入";
                dd.style.background="#66ff66";
            }
            else if(score<60) {
                dd.innerHTML="不及格,多多努力呦";
                dd.style.background="#ffff00";
            }
            else if(score<70){
                dd.innerHTML="及格了,继续加油";
                dd.style.background="#ff9900";
            }
            else if(score<80){
                dd.innerHTML="良好,你太棒了";
                dd.style.background="#ff3300";
            }
            else if(score<90){
                dd.innerHTML="优秀,别骄傲哟";
                dd.style.background="#99ff00";
            }
            else if(score<100){
                dd.innerHTML="你已经进入神的级别了,快快离开吧";
                dd.style.background="#66ff00";
            }
            else{
                dd.innerHTML="输入不正确,请从新输入";
                dd.style.background="#66ff66";
            }
        }
</script>
</html>

时间: 2024-10-27 08:14:15

js技巧的相关文章

冷门JS技巧

前端已经被玩儿坏了!像console.log()可以向控制台输出图片等炫酷的玩意已经不是什么新闻了,像用||操作符给变量赋默认值也是人尽皆知的旧闻了,今天看到Quora上一个帖子,瞬间又GET了好多前端技能,一些属于技巧,一些则是闻所未闻的冷知识,一时间还消化不过来.现分类整理出来分享给大家,也补充了一些平时的积累和扩展了一些内容. HTML篇 浏览器地址栏运行JavaScript代码 这个很多人应该还是知道的,在浏览器地址栏可以直接运行JavaScript代码,做法是以javascript:开

js技巧--转义符&quot;\&quot;的妙用

js技巧--转义符"\"的妙用 // blueDestiny, never-online // blueDestiny [at] 126.com 通常,我们在动态给定一个container的innerHTML时,通常是样做的: <div id="divc" /> <SCRIPT LANGUAGE="JavaScript"> var div = document.getElementById("divc"

提升开发幸福感的10条JS技巧

总结一些能够提高开发效率的JS技巧,这些技巧很实用,觉得挺好,想推荐给大家,所以有了这篇文章. 生成随机UID const genUid = () => { var length = 20 var soupLength = genUid.soup_.length var id = [] for (var i = 0; i < length; i++) { id[i] = genUid.soup_.charAt(Math.random() * soupLength) } return id.jo

转载:冷门js技巧

前端已经被玩儿坏了!像console.log()可以向控制台输出图片等炫酷的玩意已经不是什么新闻了,像用||操作符给变量赋默认值也是人尽皆知的旧闻了,今天看到Quora上一个帖子,瞬间又GET了好多前端技能,一些属于技巧,一些则是闻所未闻的冷知识,一时间还消化不过来.现分类整理出来分享给大家,也补充了一些平时的积累和扩展了一些内容. HTML篇 浏览器地址栏运行JavaScript代码 这个很多人应该还是知道的,在浏览器地址栏可以直接运行JavaScript代码,做法是以javascript:开

7个有用的JS技巧

就如其他的编程语言一样,JavaScript也具有许多技巧来完成简单和困难的任务. 一些技巧已广为人知,而有一些技巧也会让你耳目一新. 让我们来看看今天可以开始使用的七个JavaScript技巧吧! 数组去重 使用ES6全新的数据结构即可简单实现. var j = [...new Set([1, 2, 3, 3])] 输出: [1, 2, 3] Set的详细用法可以查看ES6入门 数组和布尔值 当数组需要快速过滤掉一些为false的值(0,undefined,false等)使,一般是这样写: m

200多个js技巧代码

1.文本框焦点问题 onBlur:当失去输入焦点后产生该事件 onFocus:当输入获得焦点后,产生该文件 Onchange:当文字值改变时,产生该事件 Onselect:当文字加亮后,产生该文件 <input type="text" value="mm" onfocus="if(value=='mm) {value=''}" onblur="if (value=='') {value='mm'}">点击时文字消失

js 技巧整理

1.动态脚本元素 var script = document.createElement('script'); script.type = 'text/javascript'; script.onload = function(){//非IE alert('script loaded'); }; script.onreadystatechange = function(){//IE if(script.readyState == 'loaded' || script.readyState ==

常用JS技巧[转]

作者:72妃 事件源对象 1 event.srcElement.tagName 2 event.srcElement.type 捕获释放 1 event.srcElement.setCapture(); 2 event.srcElement.releaseCapture(); 事件按键 1 event.keyCode 2 event.shiftKey 3 event.altKey 4 event.ctrlKey 事件返回值 1 event.returnValue 鼠标位置 1 event.x 2

js 技巧 (六)JavaScript[对象.属性]集锦

JavaScript[对象.属性]集锦 SCRIPT 标记 用于包含javascript代码. 语法 属性 LANGUAGE 定义脚本语言 SRC 定义一个URL用以指定以.JS结尾的文件 windows对象 每个HTML文档的顶层对象. 属性 frames[] 子桢数组.每个子桢数组按源文档中定义的顺序存放. feames.length 子桢个数. self 当前窗口. parent 父窗口(当前窗口是中一个子窗口). top 顶层窗口(是所有可见窗口的父窗口). status 浏览器状态窗口

js 技巧 (五)

//设置光标位置 function getCaret(textbox) { var control = document.activeElement; textbox.focus(); var rang = document.selection.createRange();   rang.setEndPoint("StartToStart",textbox.createTextRange()) control.focus(); return rang.text.length; } fu