Js_基础小结

来源：互联网发布：java计算a阶乘之和编辑：程序博客网时间：2024/06/07 18:34

获取元素

变量：在js里使用var  关键字声明的一个用来保存数据的存储空间    2.关系运算符中==和===的区别是什么？!=和!==的区别是什么？      （1）==和===的区别：    ==只需要值相等即为真，类型可以不相等；    ===则必须要值和类型均相等才为真，反之为假。    !=是只要值不相等即为真；    !==则必须要值和类型均不相等。    变量数据类型： string boolean number null underfined    隐式类型转换：当进行类型转换时，系统默认进行的类型转换    显式类型转换：当进行类型转换时，程序员进行的类型转换    数据类型转换： parseInt()  Number  parseFloat() String()    this：永远指向事件或函数的拥有者，如果没有事件或函数则指向window

简介

Js历史：95年 由布兰登.艾克10天，js和java,jsp没有关系Js组成：ECMAScript标准（现在主要运行的ES5） ES6(15,6月)DOM (document Object Model) 文档对象模型BOM (browser Object Model) 浏览器对象模型Js特点：解基弱靠跨1.解释型脚本语言 （编程语言：编辑，编译，运行 ）脚本语言：编辑-> 一行行解释然后运行，没有编译的过程 特点:灵活方便）2.基于对象的3.弱类型语言     //var 可以代表任意类型，而且js里没有类的概念4.靠事件驱动5.跨平台   //只要有浏览器，不管什么平台，我都可以运行Js:优点：1.减少网络传输 2.可以操作HTML标签 缺点：1.兼容性 IE6

引入方式

Js代码必须写在<script>标签之间    1.头部引入    2.外部引入    3.body 标签内底部引入（推荐）    //在控制台 打印括号里面的东西  黑色：字符串；蓝色：数值        console.log("推荐");//js的单行注释（只注释掉一行代码）/* 多行注释 可以注释掉 多行代码 * */

基本语法

1.变量 是数据的载体 var a = 10;  var 修饰符，js里所有变量都用它修饰； a 变量名，自己起名 ； = 赋值运算符 把右面的值复值给左面的变量10 我们的数据 值； 代表这行代码写完，因为计算机很笨，告诉他，已写完

区由不见不驼

1.代码规范  运算符两边加空格2.变量命名规则 区由不见不驼   1.区分大小写   2.由数组，字母，下划线，$组成   3.不能使用 关键字和保留字 作为变量名      关键字：break do instanceof              typeof case else new var              catch finally return void              continue for switch while              function this with default              if throw delete in try       保留字：               abstract int short boolean              export interface static byte             extends long super char              final native class float              throws const goto peivate             double import public   4.见名之意 var myBankMoney   5.不能由数字开头   6.驼峰标识 var myGirlFriendName my_girl_friend_name

数据类型

1.数值（Number） var num = 18;//整形数字   var flo = 3.14;//浮点型数字  浏览器只保留16位精度包括小数点前面的值2.字符串（String)   由引号括起来的就是字符串var str = "栗子";var str1 = '栗子';扩展 var sum = 10 + "50";//数值和字符串 +运算，是拼接，结果：“1010”  控制台  黑色 字符串  ；蓝色  数值var sum = "12" + "12";var sum = 12 + 12;//数值和数值 +运算 是求和3.布尔（Boolean)   只有这两种值  true（真） false（假）应用场景：做一些判断var bool = true;var bool1 = false;4.未定义（undefined）只声明变量，不赋初始值，则这个变量就是undefinedvar u;5.空 null 应用场景：清空一个变量里的值

运算符 + - * / %

    var sum0 = 5 + 2;    var sum1 = 5 - 2;    var sum3 = 5 * 2;    var sum4 = 5 / 2;    var sum5 = 5 % 2;    浏览器在除不开的时候，有个精度差，所以会多一位    3.6666666666..  （JS的语言，除法不会自动取整数）    %扩展 (符号跟前面的值有关系)    var yu2 = -5 % 2; -1   var yu2 = 5 % -2; 1

运算符之组合运算 += -= *= /= %=

var s = 10;//s += 10; //等同于s = s + 10; +=效率高一点//6.自增，自减（++ --）只有变量可以使用自增，自减运算符，常量不可以使用  +_+  -_-//扩展var kuo = 10;           var result = kuo++;//自增运算变量离=近，先用，再自增console.log(result);console.log(kuo);//自增或者自减运算，变量离等号远，先自减，再用var cha = 20;var result2 = --cha;//7.表达式  （变量 / 常量以及 运算符 组成）a++  10   -   --f;//每一个表达式都会返回一个结果//8.语句  我们的代码是由一条条语句组成的  每遇见一个；就代表一条语句

程序的三大结构

程序的三大结构：顺序结构分支结构循环结构            1.关系运算符 > < >= <= != ==2.if     结构：if(判断表达式){    当表达式为true时，执行的代码}//3.if else//结构：if(判断表达式){    //当表达式为true时，执行的代码//}else{    //当表达式为false时，执行的代码//}//3.if else if//结构：if(判断表达式){    //当表达式为true时，执行的代码//}elseif{    //当表达式为true时，执行的代码//}var Age = 65;//每次写if的时候，把else也写上，如果else用不上，再删除//if  只能比else多；//else 只有当临近的上个if的表达式为false才执行//          if(1 <= Age && Age <= 7){//              alert("幼年");//          }else if(8 <= Age && Age <= 18){//              alert("少年");//          }else{//              alert("老狗");//          }//4. 全是if//当你满足某个条件时，不再继续向下判断，则使用if else if else//如果满足某个条件时，继续向下判断，则需使用 if if if if

随机数

随机数是在  0-无限  接近1之间的范围   比如5 - 20 因为是无限接近最大的范围的数，不能等于20，所以我们需要额外加一，也就是取5 -21 范围，然后利用 Math.floor() 向下取整 它返回的是小于或等于函数参数，并且与之最接近的整数。与ceil 相反公式：Math.random() * (最大值 - 最小值 + 1) + 最小值<script type="text/javascript">    var rand = Math.floor(Math.random() * (49 - 3 + 1) + 3);    rand1 = rand % 2;    if(rand1) {        alert("这是一个基数:" + rand);    } else {        alert("这是一个偶数:" + rand);    }</script>

操作Dom

<style type="text/css">    #myDiv{        width: 100px;        height: 100px;        background-color: green;    }</style></head><body>      <div id="myDiv"></div><script type="text/javascript">    var myD=document.getElementById("myDiv");    //document(文档)    //. 的    //getElementById()  (方法：利用ID值获取标签)    //myD就是id名叫myDiv的那个标签    myD.style.width = "800px";    myD.style.backgroundColor = "black";    //js操作的css 带横线的样式，把横线去掉，后面第一个字母大写</script></body>

点击事件

<style type="text/css">    #myDiv{        width: 100px;        height: 100px;        /*background: green;*/    }</style></head><body><div id="myDiv" style="background: green;"></div>    //onclick 事件属性 右面的叫做函数（方法），    //是触发onclick(点击)，执行的方法    //事件代码只是在用户点击相应的标签时吃触发<input type="button" value="点击我变成黑色" id="myInput" onclick="changeColor()"/><script type="text/javascript">     function changeColor(){    var myD=document.getElementById("myDiv");    var myI=document.getElementById("myInput");    //  记住：标签.style.样式名       //只能获取行间内样式或者在JS里设置过的样式的值      //无法获取在css里设置的样式的值->点击第一次，不变色               //标签input 输入框    //var d = document.getElementById    //变量 .value     //变量 .innerHTML = "内容"    if(myD.style.background == "green"){        myD.style.background = "black";        myI.value = "点击我变成绿色"    }else{        myD.style.background = "green";        myI.value = "点击我变成黑色"    }           }       </script></body>

三种提示框

1.警告提示框 alert("你没有权限进行操作") 作用：起到说明提示的作用，也是以后调试常用的2.确认提示框 confirm() 得到布尔值          var money = 1000; var price = 100; var bol = confirm("拥有现金" + money + "确认支付" + price + "元"); if(bol){     if(money > price){         alert("成功支付");     }else{         alert("请充值");     } }else{     alert("取消支付"); } 3.prompt 输入提示框  （"输入的文字"，"默认提示的文字"）              prompt("请输入密码","18");  //得到的结果为用户在输入框里输入的值           var bol = prompt("请输入密码","18"); 确认：bol = 18 取消: bol = null 总结:所有的弹窗都会中断代码的继续执行,直到你让弹窗消失,代码才会向下继续执行

获取input中输入的数值

1: 字符串 *1,最后得到数值2: Number(数值字符串) 最后得到数值3：parseIntvar n1 = Number(document.getElementById("num1").value) ;

js 只能获取行间样式，不能获取css式样

<style type="text/css">    #div_1{    width: 100px;    height: 100px;    background: green;      }</style></head>    <body>        <div id="div_1" style="display: block;"></div>        <input type="button" value="点击" onclick="move()" />             //js 只能获取行间样式，不能获取css式样        <script type="text/javascript">            function move(){                                var a = document.getElementById("div_1");                if(a.style.display == "block"){                    a.style.display = "none";                }else{                    a.style.display = "block";                }            }        </script>    </body>

innerHTML

向body 标签之间插入文字内容，InnerHTML会顶掉原来body 标签之间的内容 改成+= 就好了document.body.innerHTML += "平均数为" + av;

全选反选不选

<!--ul[id=myUL]>li*10>input[type=checkbox]-->        <div id="div_1">            <input type="checkbox" class="a" />            <input type="checkbox" class="a" />            <input type="checkbox" class="a" />            <input type="checkbox" class="a" />            <input type="checkbox" class="a" />                 </div>        <input type="button" value="全选" onclick="selectAll()"/>        <input type="button" value="不选" onclick="selectNo()"/>        <input type="button" value="反选" onclick="selectInverse()"/>        <script type="text/javascript">                document.querySelectorAll("div>input");                function selectAll(){                    for(var i = 0; i < Odiv.length; i++){                        Odiv[i].checked = true;                    }                               }                function selectNo(){                    for(var i = 0; i < Odiv.length; i++){                        Odiv[i].checked = false;                    }                   }                function selectInverse(){                    for(var i = 0; i < Odiv.length; i++){                        if(Odiv[i].checked == true){                            Odiv[i].checked = false;                        }else{                            Odiv[i].checked = true;                        }                                           }                   }        </script>

标题

这里写代码片

0 0