JavaScript字符串对象、日期对象、定时器

String字符串对象

String对象用于处理文本(字符串)。

toString||String()转换为字符串,不能转换null和undefined

    var a=10;
    console.log(a.toString());
    var b=20;
    console.log(String(b));
创建字符串

new String(); String类型有默认length属性,表示字符串包含多少个字符(空格也是字符)。

字符串方法

charAt():返回字符串指定位置的字符;字符串第一个字符下标为0,如果参数不在0与string.length之间,则返回一个空字符串。

search():查找字符串指定字符的位置,只能查找到第一个匹配的位置,如果找不到则返回-1。

substring(start,stop):star、stop为非负的整数,如果省略stop则返回的子串会一直到字符串结尾。

该方法返回一个新的字符串从start(包括start)到stop-1(不包括stop)的所有字符,长度为stop减start。

如果start=stop,返回一个长度为0的字符串;如果start>stop,则提取子串之前会先交换这两个参数。

slice(start,end):start、end可以为负数

该方法提取字符串的某个部分,并以新的字符串返回被提取的部分。包括字符串从start(包括start)开始到end(不包括end)结束为止的所有字符。

start、end如果为负数,则参数规定的是从字符串的尾部开始算起的位置,如-1指的是最后一个字符,以此类推。

substr(start,length):start可以为负数、length可选

该方法返回一个新的字符串,包含从star(包括start)处开始的length个字符;如果没有指定length则为从start到结尾的字符。

因ECMAscript未对此方法进行标准化,因此反对使用。

String 对象的方法 slice()、substring() 和 substr() (不建议使用)都可返回字符串的指定部分。slice() 比 substring() 要灵活一些,因为它允许使用负数作为参数。slice() 与 substr() 有所不同,因为它用两个字符的位置来指定子串,而 substr() 则用字符位置和长度来指定子串。

replace(ragexp/substr,replacement)用于在字符串中用一些字符替换另一些字符。

返回一个新的字符串,用replacement替换regexp第一次匹配或所有匹配之后得到的。

如果regexp具有全局标志 g,那么replace()将替换所有匹配的子串;否则默认只替换第一个匹配的子串

    var str="hello world";
    console.log(str.replace("l","*"));
    console.log(str.replace(/l/g,"*"));

split(separator,howmany):用于把一个字符串分割字符串数组。

separator为字符串或者表达式,从该参数地方分割字符串。howmany可选规定返回的数组最大长度,如果设置返回的字符串不会超过这个参数;如果没有设置整个字符串都会分割不考虑长度。

返回的数组不包含separator自身。如果把空字符串(“ “)作为separator,则字符串每个字符之间都会被分割。

concat(stringX…)用于将一个或多个字符串拼接起来,获得一个新的字符串。

indexOf()返回某个指定的字符在字符串中首次出现的位置,在字符串中从前向后搜索,如果没有则返回-1。

lastIndexOf()返回某个指定的字符在字符串中最后出现的位置,在字符串中从后向前搜索,如果没有则返回-1。

Date日期对象

Date对象用于处理日期和时间。

创建Date对象语法:

var myDate=new Date()

Date对象属性constructor(返回对创建次对象的Date函数的引用)和prototype(使有能力向对象添加属性和方法)。

Date对象方法

getFullYear():可返回一个表示年份的4位数字

getMonth():可返回表示月份的数字,返回0(一月)~11(十二月)的一个整数

getDate():可返回月份的某一天,返回1~31之间的一个整数

getDay():可返回表示星期的某一天的数字,返回0(周日)~6(周六)之间的一个整数

getMilliseconds():可返回当前时间的毫秒数,返回0~999之间的一个整数

getTime():可返回距1970年1月1日到现在的毫秒数

JavaScript计时事件

一次性定时器setTimeout()

setTimeout(code,millisec)

setTimeout()第一个参数是含有JavaScript语句的代码串,第二个参数指在执行代码前需要等待的毫秒数。只会执行一次。

clearTimeout(id_of_settimeout)

clearTimeout()可取消由setTimeout()方法设置的timeout。其参数必须是由setTimeout()返回的ID值。

循环定时器setInterval()

setInterval(code,millisec)

setInterval()方法可按照指定的周期(以毫秒计)来调用函数或计算表达式。setInterval()方法会不停地调用函数,直到clearInterval()被调用或窗口关闭。

clearInterval(id_of_setinterval)

clearInterval()可取消由setInterval()设置的timeout。其参数必须是由setInterval()返回的ID值。

用一次性定时器模拟循环定时:

    <input type="button" value="开始/暂停" id="timebtn" />
    <input type="button" value="重置" id="timeclear"/>
    <input type="text" id="timetext" value="0" />
    <script>
        var i=0;
        var j=0;
        var t=null;
        var btn1=document.getElementById("timebtn1");
        var clear=document.getElementById("timeclear1");
        var text=document.getElementById("timetext");
        function time(){        
            text.value=i;        
            i+=1;
            t=setTimeout("time()",30);
        }
        function stop(){
            i=0;
            j=0;
            setTimeout(text.value=0,0)
            clearTimeout(t);
        }
        btn1.onclick=function(){
            if(j==0){
                time();
                j=1;
            }else if(j==1){
                clearTimeout(t);
                j=0;
            }
        }
        clear.onclick=function(){
            stop();
        }
    </script>
    
    
    

再来一个倒计时吧:

    <input type="date" id="inputdate" />
    <input type="button" id="timebtn2" value="设置日期" />
    <input type="button" id="timeclear2" value="暂停" />
    <div id="timelast"></div>
    <script>
        var date1 = document.getElementById("inputdate");
        var btn11 = document.getElementById("timebtn2");
        var btn22 = document.getElementById("timeclear2");
        btn11.onclick = function() {
            var str = date1.value;
            year2 = parseInt(str.slice(0, 4));
            month2 = parseInt(str.slice(5, 7));
            day2 = parseInt(str.slice(-2));
            t = setInterval('daojishi(year2,month2,day2,"timelast")', 30)
        }
        btn22.onclick = function() {
            clearInterval(t)
        }
        function daojishi(year, month, day, divid) {
            var today = new Date();
            var setday = new Date(year, month - 1, day);
            var lefttime = setday.getTime() - today.getTime();
            var seconds = parseInt(lefttime / 1000);
            var milliseconds=lefttime%1000;
            var second=seconds%60;
            var minutes=(seconds-second)/60%60;
            var hours=(seconds-second-minutes*60)/(60*60)%24
            var days=(seconds-second-minutes*60-hours*60*60)/(60*60*24);
            var div = document.getElementById(divid);
            div.innerHTML = "距离" + year + "年" + month + "月" + day + "日还有" + days + "天" + hours + "小时" + minutes + "分" + second + "秒" + milliseconds + "毫秒";
        }
    </script>
    
    

JavaScript函数、Math对象、数组

函数

函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。

函数的格式
function functionname(参数列表){
    执行代码块;
    return 返回值;
}

function:关键词,全小写

functionname:函数名,用来标识函数的名字,区分大小写,习惯使用驼峰式命名(moveSlide),css为下划线

参数列表:由外部向函数传入的内容

return:从函数内部向外传递内容(函数会停止执行)

    //无参无返回函数
    function name1(){
        代码块;
    }
    //有参无返回函数
    function name2(a){
        代码块;
    }
    //无参有返回函数
    function name3(){
        代码块;
        return 123;
    }
    //有参有返回函数
    function name4(a){
        代码块;
        return 123;
    }
函数调用

在调用函数时,可以向其传递值,这些值称为参数。这些参数可以在函数中使用。可以使用任意多的参数,由”,”分隔。

如果没有返回值/参数,则不写;变量和参数必须以一致的顺序出现。

return给函数返回值,调用函数后可以获取到return的部分。使用return会跳出函数,阻止函数后面语句执行。

    function sum(num1,num2){
        return num1 + num2;
    }
    //函数调用
    var r=sum(3,5)
局部变量和全局变量

在函数内部声明的变量是局部变量,只能在函数内部访问它。(作用域是局部的)局部变量在函数运行以后就会被释放,不再存在。

在函数外部声明的变量是全局变量,网页上的所有脚本和函数都能访问它。全局变量在页面关闭后被删除。全局变量声明方式,不使用var关键字或在函数外部声明

  1. 变量查找首先在函数内部调用之前去查找,如果找到就调用查找到的离得最近的那个变量

  2. 变量查找在函数内部前面没有找到,在调用后面找到一个局部变量,则调用时此变量的值为undefined

    function abc(){
        abc="abc";
        abc="abcd";
        alert(abc);//此时弹出abcd

        alert(abcd);//此时弹出undefined
        abcd="abcd"
    }
匿名变量

匿名变量也叫尚未声明的变量,该变量将被自动作为全局变量声明。

匿名函数

匿名函数指函数没有名字,直接运行。

    function(x,y){
        return x+y;
    }

Math对象

Math对象用于执行数学任务。

    Math.min(1,2,3);//1 获取若干个数中的最小值

    Math.max(1,2,3);//3 获取若干个数中的最大值

    Math.ceil(1.2);//2 对数进行上舍入

    Math.floor(1.8);//1 对数进行下舍入

    Math.round(1.5);//2 把数四舍五入为最接近的整数

    Math.random();// 0~1之间的随机数(不包含0和1)

    //给一个min、max,就能产生一个在最大值最小值之间的随机数,并且包括min、max

    console.log(Math.floor(Math.random()*(max-min+1)+min));

    console.log(Math.round(Math.random()*(max-min)+min));

    console.log(parseInt(Math.random()*(max-min+1)+min));

数组

1.数组概念

数组是一种保存数据的有序列表。数组可以用一个变量名存储所有的值,并且可以用变量名访问任何一个值。数组中的每个元素都有自己的ID,以便它可以很容易地被找到。数组的大小可以动态调整,可以随着数据的添加自动增长以容纳新增数据。

2.数组定义

(1). 常规方式

    var arr1=new Array();
    arr1[0]=1;
    arr1[1]=2;
    arr1[2]=3;

(2). 简洁方式

    var arr2=new Array(1,2,3);
    var arr3=new Array();//空数组

(3). 字面

    var arr4=[1,2,3];
    var arr5=[];//空数组
3.数组取值/赋值

数组是有序数据列表,取值和赋值都是通过下标得到。

下标:用来表示每个数据的位置信息,从0开始计数。

    var arr=[1,2,3];
    var a=arr[0];//取值
    arr[1]=10;//赋值
    arr[3]=20;//错误写法,数组越界

Array数组对象

数组元素的插入删除

push(元素):向数组的末尾添加一个或多个元素,并返回新的长度

unshift(元素):向数组的开头添加一个或更多元素,并返回新的长度

pop():删除数组的最后一个元素,把数组长度减1,并返回删除元素的值;如果这个数组已经为空,则不改变数组,并返回undefined值

shift():删除数组的第一个元素,并返回删除元素的值;如果数组为空,则比进行任何操作,返回undefined值

splice():该方法向/从数组中添加/删除项目,然后返回被删除的项目

splice(起始位置,长度,添加内容(可选)):该方法从起始位置开始,删除长度个元素

splice(起始位置,0,插入元素1,插入元素2,插入元素3…):从起始位置删除0个元素,然后把要插入的元素从起始位置插入进数组

数组元素的替换

splice(要替换元素的起始位置,替换长度,新替换元素1,新替换元素2…)

数组的拼接

contact():用于连接两个或多个数组;不会改变现有数组,仅仅会返回被连接数组的一个副本

数组元素之间添加分隔符

join():该方法把数组中的所有元素放入一个字符串,元素通过括号中的参数作为分隔符进行分隔的

数组元素的排序

sort():用于对数组的元素进行排序(按照ASCII表的顺序排序,而非数值大小)

    //按数值大小排序
    function sortNumber(a,b){
        return a-b;//a,b表示数组中的任意两个元素,若return>0 b前a后;若return<0 a前b后
        //a-b输出从小到大排序,b-a输出从大到小排序
    }
    console.log(arr.sort(sortNumber));

二维数组

二维数组指的是数组中的每个元素都是一个数组。多用来进行矩阵相关操作。

    var arr=[[1,2,3],[4,5,6],[7,8,9]];//二维数组

    arr[i][j];//二维数组获取方式

JavaScript全选反选

input的checked属性

通过点击切换按钮,实现选框的选中/取消选中效果。主要用于购物车等。

    <style>
        ul.inputul{
            list-style-type:none;
        }
    </style>
    <input type="button" id="inputall" value="全选" /><input type="button" id="inputnotall" value="反选" /><input type="checkbox" id="inputspecial" />
    <ul class="inputul">
        <li><span></span><input type="checkbox"></li>
        <li><span></span><input type="checkbox"></li>
        <li><span></span><input type="checkbox"></li>
        <li><span></span><input type="checkbox"></li>
        <li><span></span><input type="checkbox"></li>
        <li><span></span><input type="checkbox"></li>
    </ul>
    <script>
        var spans=document.querySelectorAll(".inputul span");
        var all=document.querySelector("#inputall");
        var notall=document.querySelector("#inputnotall");
        var inputcheck=document.querySelectorAll(".inputul input");
        var special=document.querySelector("#inputspecial");

        for(var i=0;i<spans.length;i++){
            spans[i].innerHTML=i+1+".";
        }
        all.onclick=function(){
            for(var i=0;i<inputcheck.length;i++){
                inputcheck[i].checked=true;
            }            
            special.checked=true;
        }
        notall.onclick=function(){
            var sum=0;
            for(var i=0;i<inputcheck.length;i++){
                inputcheck[i].checked=!inputcheck[i].checked;
            }
            for(var i=0;i<inputcheck.length;i++){
                if(inputcheck[i].checked==false){
                    break;
                }
                sum++;
            }
            if(sum==inputcheck.length){
                special.checked=true;
            }else{
                special.checked=false;
            }
        }
        var sums=0;
        for(var i=0;i<inputcheck.length;i++){
            inputcheck[i].onclick=function(){
                for(var i=0;i<inputcheck.length;i++){
                    if(inputcheck[i].checked==false){
                        break;
                    }
                    sums++;
                }
                if(sums==inputcheck.length){
                    special.checked=true;
                }else{
                    special.checked=false;
                }
                sums=0;
            }
        }
    </script>
    
    
    

JavaScript显示隐藏及Tab切换

获取元素

querySelector()方法

语法:document.querySelector(CSS selectors)

CSS选择器:类型String,指定一个或多个匹配元素的CSS元素,可以使用它们的id,类,类型,属性,属性值等来选取元素。对于多个选择器,使用逗号隔开,返回一个匹配的元素。

接受一个参数,通过元素的css选择器查找元素。如果找到相应的元素则返回该元素的HTMLDivElement对象;如果不存在,则返回null。仅仅匹配指定选择器的第一个元素

    document.querySelector("#div1");//获取id为div1的元素

    document.querySelector(".div1");//获取class为div1的第一个子元素
querySelectorAll()方法

语法:document.querySelectorAll(CSS selectors)

接受一个参数,将返回一个对象数组,这个数组保存着所有符合选择器的节点列表。

    document.querySelectorAll("li");//获取所有li元素,返回数组

    docuemnt.querySelectorAll(".list li");//获取所有class为list元素下的所有li元素,返回数组
querySelector和getElement区别

querySelector获取的元素是静态的,通过其他方法增加或删除其获取的元素,其获取的元素对象不会发生变化

getElement获取的元素是动态的,通过其他方法增加或删除其获取的元素,其获取的元素对象会动态变化

className属性

语法:object.className=className

className属性设置或返回元素的class属性。

    <style>
        .divshow{
            width:200px;
            height:200px;
            background:aquamarine;
        }
    </style>
    <input type="button" id="activebtn" value="显示/隐藏" />
    <div id="divactive" class="divshow"></div>
    <script>
        var btn=document.querySelector("#activebtn");
        var div=document.querySelector("#divactive");

        btn.onclick=function(){
            if(div.className=="divshow"){
                div.className="";
            }else{
                div.className="divshow";
            }
        }
    </script>
    
    
    

this变量

永远指向其所在函数的所有者,如果没有所有者时指向window(窗口)

Tab切换

tab切换(选项卡切换),实现效果点击按钮,分别切换按钮对应的div

    <style>
        .divtab0{
            position:relative;
            width:200px;
            height:200px;
        }
        .divtab{        
            position:absolute;
            top:0;
            width:200px;
            height:200px;
            background-color:lime;
            font-size:50px;
            text-align:center;
            line-height:200px;
            display:none;
        }
        .tabbtncolor{
            background-color:aqua;
        }
    </style>
    <input type="button" class="tabbtn tabbtncolor" style="background-color:lime;" value="按钮一" 
    /><input type="button" class="tabbtn tabbtncolor" value="按钮二" 
    /><input type="button" class="tabbtn tabbtncolor" value="按钮三" />
    <div class="divtab0">
        <div class="divtab" style="display:block;">1</div>
        <div class="divtab">2</div>
        <div class="divtab">3</div>
    </div>
    <script>
        var inputs=document.querySelectorAll(".tabbtn");
        var divs=document.querySelectorAll(".divtab");
        for(var i=0;i<inputs.length;i++){
            inputs[i].index=i;
            inputs[i].onclick=function(){
                for(var j=0;j<inputs.length;j++){
                    inputs[j].style.backgroundColor="";
                    divs[j].style.display="none";
                }
                this.style.backgroundColor="lime";
                divs[this.index].style.display="block";
            }
        }
    </script>
    
    
    
1
2
3

JavaScript数据类型转换、输出

数据类型

console.log()主要是方便调试JavaScript,它打印在console中,不会影响页面操作。

typeof获取数据类型

    var a=100;//number数字类型

    var a="200";//string字符串类型

    var a;//undefined未定义类型

    var a=true;//boolean布尔类型

    var a=[1,2,3];//array数组类型

    var a=null;//null空类型

    var a={};//object对象类型

    console.log(typeof 123);//获取类型

类型转换

1.显式类型转换

Number():将字符串转换为数字,只能转换数值类型的字符串,有字母就不能转换,能转换为小数,多位小数不能转换true和false分别转换成1和0

parseInt():将字符串转换为数字,从左到右提取字符串中的整数,遇到非数字结束,只能取整

parseFloat():能够识别字符中的小数

Boolean():除了空字符串、-0、0、NaN、null和undefined其他都为true

String():将数字转化为字符串

2.隐式类型转换
    console.log(12+"34");//1234 数字和字符用 + 号连接时结果为字符串

    console.log(true+1);//2 数字和布尔用 + 号连接结果为数字

    console.log(false-"2");//-2  - 号前后都转换为数字, * 、 / 、 > 、 < 、也是一样

输出

ECMAScript使用C语言风格的注释,包括单行注释和块级注释(多行注释)。

  1. alert()警告窗

  2. console.log()控制台打印

  3. document.write()文档输出

  4. document.title()标题栏显示

    alert("Hello1");//弹出警告窗

    console.log("Hello2");//控制台打印

    document.write("Hello3");//文档输出

    document.title("Hello4");//标题栏显示

If...Else、Switch、For循环、While循环

JavaScript If…Else语句

条件语句用于基于不同的条件来执行不同的动作。

if...else

1.if语句——只有当指定条件为true时,使用该语句来执行代码

语法:

    if(条件){
        只有当条件为true时执行的代码
    }

2.if...else语句——当条件为true时执行代码,当条件为false时执行其他代码

语法:

    if(条件){
        当条件为true时执行的代码
    }else{
        当条件不为true时执行的代码
    }

3.if...else if...else语句——使用该语句来选择多个代码块之一来执行

语法:

    if(条件 1){
        当条件 1 为true时执行的代码
    }else if(条件 2){
        当条件 2 为true时执行的代码
    }else{
        当条件 1 和条件 2 都不为true时执行的代码
    }

JavaScript Switch语句

选择语句switch语句用于基于不同的条件来执行不同的动作

语法:

    switch(n){
        case 1:
            执行代码块 1;
            break;
        case 2:
            执行代码块 2;
            break;
        default:
            n与case 1 和 case 2 不同时执行的代码;
    }

原理:首先设置表达式n(通常是一个变量)。随后表达式的值会与结构中的每个case作比较。如果存在匹配,则与该case关联的代码块会被执行。

break 用来阻止代码自动地向下一个case运行(否则执行完一个case会继续执行下一个case);default用来规定匹配不存在时做的事情。每个case后一定要加break;default相当于else

JavaScript For循环

循环可以将代码块执行指定的次数,主要用于数量方面有一定范围限制,为多个类似或同一类型的标签添加同样的或有规律可循的动作。

语法:

    for(表达式1;判断表达式2;表达式3){
        被执行的代码块
    }

表达式 1 在循环开始前执行;判断表达式 2 定义运行循环的条件;表达式 3 在循环已被执行后执行

(1)表达式1用来初始化所用的变量,可以初始化一个(或多个)值,它是可选的

    for(var i=0,len=cars.length;i<len;i++){
        alert(i);
    }

(2)表达式2用于评估初始变量的条件,它也是可选的;如果表达式2返回true,则循环再次开始,如果返回false,则循环将结束

如果省略表达式2,必须在循环内提供break,否则循环无法停止,可能造成浏览器崩溃

(3)表达式3会增加初始变量的值。增量可以是负数(i- -)或者更大(i=i+8)它也是可选的

JavaScript While循环

只要指定条件为true,循环就可以一直执行代码,可能导致浏览器崩溃

while循环

语法:

    while(){
        需要执行的代码
    }
do/while循环

do/while循环是while循环的变体。该循环会在检查条件是否为真之前执行一次代码块,然后如果条件为真的话,就会重复这个循环

语法:

    do{
        需要执行的代码
    }
    while(条件)        

JavaScript Break和Continue语句

break语句

break语句用于跳出循环。break语句跳出循环后,会继续执行该循环之后的代码(如果有)。

continue语句

continue语句用于跳过循环中的一个迭代。continue语句中断循环中的迭代,如果出现了指定条件,然后继续循环中的下一个迭代。

JavaScript常用事件

onblur                元素失去焦点

onchange            用户改变域的内容

onclick                鼠标单击某个对象

ondblclick            鼠标双击某个对象

onerror                当加载文档或图像时发生某个错误

onfocus                元素获得焦点

onkeydown            某个键盘的键被按下

onkeypress            某个键盘的键被按下或按住

onkeyup                某个键盘的键被松开

onload                某个页面或者图像被完成加载

onmousedown            某个鼠标按键被按下

onmousemove            鼠标被移动

onmouseout            鼠标从某个元素移开

onmouseover            鼠标被移到某个元素之上

onmouseup            某个鼠标按键被松开

JavaScript基础

JavaScript简介

JavaScript是一种基于对象(object)和事件驱动(even driven)并具有相对安全性的客户端脚本语言。同时也是一种广泛用于客户端Web开发的脚本语言,常用来给HTML网页添加动态功能,是一种动态、弱类型、基于原型的语言,内置支持类。

  1. JavaScript是一种轻量级的编程语言。
  2. JavaScript是可插入HTML页面的编程代码。
  3. JavaScript插入HTML页面后,可由所有现代浏览器执行。
  4. JavaScript可以让网页呈现各种动态效果。
JavaScript组成

核心ECMAscript——提供核心语言的功能(基础语言)

ECMAscript描述了语法、类型、语句、关键字、保留字、运算符、对象这些内容。ECMAscript定义了脚本语言的所有属性、方法和对象。

JavaScript/ActionScript/ScriptEase等其他语言通过实现ECMAScript作为其功能的基准。

文档对象模型DOM(document object model)——提供访问和操作网页内容的方法和接口。

浏览器对象模型BOM(browser object model)——提供与浏览器交互的方法和接口。

JavaScript特点
  1. 一种解释性执行的脚本语言。

  2. 一种基于对象的脚本语言。

  3. 一种简单弱类型脚本语言。

  4. 一种相对安全脚本语言。

  5. 一种事件驱动脚本语言。

  6. 一种跨平台性脚本语言。

JavaScript语法
  1. 区分大小写
  2. 弱类型变量
  3. 行尾的分号可有可无(建议都写)
  4. 括号{}用于代码块
  5. 注释方式同于C和Java

JavaScript引入

第一种:直接写在script标签内

script最好放在body之后,处理交互事件,等到内容显示之后载入;否则放在head标签内可能会造成加载延迟,或者覆盖代码(因html加载方式是从上到下加载的)。

    <html>
        <head>
            <meta charset="utf-8" />
            <title></title>
        </head>
        <body></body>
        <script>
            alert("hello");
        </script>
    </html>
第二种:引入js文件
    <html>
        <head>
            <meta charset="utf-8" />
            <title></title>
        </head>
        <body></body>
        <script src="js/index.js" type="text/javascript"></script>
    </html>
第三种:在标签内引入(不推荐)
    <html>
        <head>
            <meta charset="utf-8" />
            <title></title>
        </head>
        <body>
            <input type="button" name="btn" id="btn" value="按钮" onclick="alert('点击我!')" />
        </body>
    </html>

JavaScript基础语法

alert()

让浏览器弹出一个窗口,窗口里的内容就是alert()中的内容

    <script type="text/javascript">
        alert("Hello World!");
    </script>

单行注释

用“//”注释内容,不可换行

多行注释

用“/**/”注释内容,可以换行

    <script type="text/javascript">
        /*var a=0;
        var b=1;
        var c=2;*/
        alert("Hello World!");//注释语句
    </script>
元素的获取

为了把事件写在script标签中,可以先获取到标签,主要有以下几种方法:

  1. document.getElementById();//通过标签id值来获取标签;

  2. document.getElementsByClassName();//通过标签的class值来获取标签(返回的是一个数组,将所有相同class名的标签都返回);

  3. document.getElementsByTagName();//通过标签的名字来获取标签(返回的是一个数组,将所有相同的标签名的标签都返回);

  4. document.getElementsByName();//通过标签的name值来获取标签,常用于选择表单元素(返回的是一个数组,将所有相同的name值的标签返回)。

onclick事件绑定

onclick事件会在对象被点击时发生。单击事件是在同一元素上发生了鼠标按下事件之后又发生了鼠标放开事件时才发生的。

    <input type="button" name="btn" id="btnclick" value="按钮" />
    <div id="divclick" style="width:100px;height:100px;background-color:pink;"></div>
    <script>
        document.getElementById("btnclick").onclick=function(){
            document.getElementById("divclick").style.display="none";
        }
    </script>
    
    
onmouseover事件和onmouseout事件

onmouseover属性在鼠标移动到元素上时触发。

onmouseout属性在鼠标指针移动到元素外时触发。

    <input type="button" name="btn" id="btnmouse" value="按钮" />
    <div id="divmouse" style="width:100px;height:100px;background-color:purple;"></div>
    <script>
        var btn=document.getElementById("btnmouse");
        var odiv=document.getElementById("divmouse");
        btn.onmouseover=function(){
            odiv.style.display="none";
        }
        btn.onmouseout=function(){
            odiv.style.display="block";
        }
    </script>
    
    
变量

变量首先是一个容器,可以用来存放数据,而且存放在这个容器中的数据可以发生变化。变量不仅可以是数字,可以是任意数据类型。

“var” + “变量名” + “=” + “值” + “;” 如var a=12;

变量命名规范:

  1. 区分大小写;
  2. 第一个字符必须是字母、下划线_或美元符号$
  3. 其他字符可以是字母、下划线、美元符号或数字;
  4. 不能含空格;
  5. 不能以关键字或保留字命名关键字保留字点这里
JavaScript数据类型

typeof函数查看数据类型

1.null内容为空,表示一个空的值,可以创建数组、创建时间、创建字符串。

2.undefined没有赋值或不存在的变量类型,仅仅在判断函数参数是否传递时有用。

3.number数字类型:

包含整数、浮点数、科学计数法(1.2e5)、负数、NaN(Not a Number)和Infinity。number类型的数可以进行加、减、乘、除、求余、自增、自减运算。

4.string字符串类型:

字符串是以单引号''或双引号""括起来的任意文本。

''""本身只是一种表示方式,不是字符串的一部分。

因此”abc”只有a、b、c三个字符;当字符串既包含单引号又包含双引号时,用转义字符\来标识,如”I\’m \”OK\”!”,表示字符串内容是I’m “OK”!

5.boolean布尔类型,布尔只有true和false,布尔常用在条件测试中。

6.Array数组类型

7.object对象类型

JavaScript运算符

1.赋值运算符=赋值仅仅是把给变量赋值,如a=5

+= a+=5相当于a=a+5

-= a-=5相当于a=a-5

*= a*=5相当于a=a*5

/= a/=5相当于a=a/5

%= a%=5相当于a=a%5

2.算数操作符

+-*/ 求模/取余 %

3.关系操作符

大于 > 小于 < 小于等于 <= 大于等于 >= 不等于 !=

等于 == 此情况下,只要值相同就返回True

全等于=== 此情况需要值和类型都要匹配才能返回True

关系操作符返回的都是布尔值

4.条件操作符

5.逻辑操作符

&&||!

6.递增递减操作符

++--

j=i++等同于j=i;i=i+1 先赋值 后运算

j=++i等同于i=i+1;j=i 先运算 后赋值

操作符优先级

逻辑非>算术操作符>关系操作符>逻辑与 逻辑或>条件操作符>赋值操作符

操作符书写

JavaScript书写:y=(x+2)*(((x+1)/3-2)/4+5)

相当于数学中的:y=(x+2)*{[(x+1)/3-2]/4+5}

小括号 提升优先级

中括号 数组 [1,2,3,4,5]

大括号 对象 function(){}

CSS3媒体查询

CSS3媒体查询也就是指@media 查询

媒体查询不需要像CSS3其他属性一样添加前缀。

@media 查询

使用 @media 查询,就可以针对不同的媒体类型定义不同的样式。

@media 可以针对不同屏幕尺寸设置不同样式,特别是针对响应式页面。

当改变浏览器大小过程中,页面会根据浏览器的宽度和高度重新渲染页面。

CSS语法

    @media mediatype and|not|only (media feature){
        CSS-Code;
    }

也可以针对不同的媒体使用不同stylesheets:

    <link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css" />

mediatype媒体类型

all 用于所有设备

print 用于打印机和打印预览

screen 用于电脑屏幕,平板电脑,智能手机等

speech 用于屏幕阅读器等发声设备

媒体特性

媒体特性书写方式为:

媒体特性:媒体特性指定值

1.最大宽度max-width

max-width指媒体类型小于或等于指定的宽度时,样式生效。

    @media screen and (max-width:480px){
        .aside{
            display:none;
        }
    }

上面表示当屏幕小于或等于480px时,侧边栏(.aside)将被隐藏。

2.最小宽度min-width

min-width指媒体类型大于或等于指定宽度时,样式生效。

    @media screen and (min-width:1200px){
        .nav{
            width:1000px;
        }
    }

上面表示当屏幕大于或等于1200px时,导航栏(.nav)宽度为1000px。

3.多个媒体特征使用

媒体查询可以使用关键词and将多个媒体特性结合在一起。一个媒体查询可以包含0到多个表达式,表达式又可以包含0到多个关键字,以及一种媒体类型。

当屏幕在500px~900px之间时,body的背景色为金色,如下所示:

    @media screen and (min-width:500px) and (max-width:900px){
        body{
            background-color:gold;
        }
    }
4.设备屏幕的输出宽度Device Width

在只能设备上,可以根据屏幕设备的尺寸来设置相应的样式(或者调用相应的样式文件)。同样对于屏幕设备可以使用min/max对应参数。

    <link rel="stylesheet" media="screen and (max-device-width:480px)" href="iphone.css" />

上述代码指“iphone.css”样式适用于最大设备宽度为480px。

5.not关键词

使用关键词“not”是用来排除某种制定的媒体类型,也就是用来排除符合表达式的设备。 也就是说not关键词表示对后面的表达式执行反操作。

    @media not print and (max-width:1200px){样式代码}

上述代码表示:样式代码将被使用在除打印设备和设备宽度小于1200px下的所有设备中。

6.only关键词

only用来指定某种特定的媒体类型,可以用来排除不支持媒体查询的浏览器。

only很多时候用来对不支持Media Query但却支持Media Type的设备隐藏样式表的。其主要有:

支持媒体特性的设备,正常调用样式,此时可以认为only不存在;

不支持媒体特性但又支持媒体类型的设备,这样就会不读样式,因其首先读取only而非screen;

另外不支持Media Query的浏览器,不论是否支持only,样式都不会被采用。

LESSCSS初使用

首先,用到less你的电脑必须有HBuilder并安装插件。

LESS介绍

LESSCSS是一种动态样式语言,属于CSS预处理语言的一种,使用类似CSS的语法,为CSS赋予动态语言的特性,如变量、继承、运算、函数等,更方便CSS的编写和维护。

LESSCSS可以在多种语言、环境中使用,包括浏览器端、桌面客户端。

想要了解更多,请点击这里

变量

变量可以让我们单独定义一系列通过的样式,当你需要的时候调用。这样对全局模式时候只要修改几行代码就可以了。

LESS源码:

    @color:pink;

    #header{
        color:@color;
    }
    h3{
        color:@color;
    }

编译后的CSS:

    #header{
        color:pink;
    }
    h3{
        color:pink;
    }

混合(Mixins)

混合可以将一个定义好的class A轻松引入到另一个class B中,从而简单实现class B继承class A中的所有属性。还可以带参数地调用。

LESS源码:

    .wrap(@radius:5px){
        -webkit-border-radius:@radius;
        -moz-border-radius:@radius;
        -ms-border-radius:@radius;
        -o-border-radius:@radius;
        border-radius:@radius;
    }
    #header{
        .wrap;
    }
    #footer{
        .wrap(10px);
    }

编译后的CSS:

    #header{
        -webkit-border-radius:5px;
        -moz-border-radius:5px;
        -ms-border-radius:5px;
        -o-border-radius:5px;
        border-radius:5px;
    }
    #footer{
        -webkit-border-radius:10px;
        -moz-border-radius:10px;
        -ms-border-radius:10px;
        -o-border-radius:10px;
        border-radius:10px;
    }

嵌套

我们可以在一个选择器中嵌套另一个选择器来实现继承,这样大大减少代码量,并且代码更加清晰。

LESS源码:

    #header{
        h2{
            font-size:20px;
        }
        div{
            font-size:12px;
            a{
                text-decoration:none;
                &:hover{
                    border-width:1px;
                }
            }
        }
    }

编译后的CSS:

    #header h2{
        font-size:20px;
    }
    #header div{
        font-size:12px;
    }
    #header div a{
        text-decoration:none;
    }
    #header div a:hover{
        border-width:1px;
    }

函数和运算

运算提供了加减乘除操作;我们既可以做属性值和颜色的运算,这样就可以实现属性值之间的复杂关系。

LESS源码:

    @the-border:1px;
    @base-color:#111;
    @red:#842210;

    #header{
        color:(@base-color * 3);
        border-left:@the-border;
        border-right:(@the-border * 2);
    }
    #footer{
        color:(@base-color + #003300);
        border-color:desaturate(@red,10%);
    }

编译后的CSS:

    #header{
        color:#333;
        border-left:1px;
        border-right:2px;
    }
    #footer{
        color:#114411;
        border-color:#7d2717;
    }

CSS3弹性布局

resize属性

resize属性规定是否可由用户调整元素的尺寸。

若希望此属性生效,需设置元素的overflow:auto/hidden/scroll。

resize:none | both | horizontal | verticalnone用户无法调整元素的尺寸;both用户可以调整元素的高度和宽度;horizontal用户可调整元素的宽度;vertical用户可调整元素的高度。

示例如下:

    <style>
        .resize1{
            width:200px;
            height:200px;
            resize:both;
            overflow:auto;
            background-color:fuchsia;
        }
    </style>
    <div class="resize1"></div>
    
    

box-flex属性

通过box-flex属性可以让子容器针对父容器的宽度按一定比例进行划分。

使用时父级必须设置display:box;

Chrome必须添加-webkit-前缀才会生效

box-orient定义子容器的排列方式

box-orient:horizontal | verticalhorizontal子容器水平排列;vertical子容器垂直排列。

box-derection定义子容器的排列顺序

box-direction:normal | reversenormal正常的,按照从左到右或从上到下;reverse反转,从右到左或从下到上。

box-align子容器的垂直对齐方式

box-align:start | center | endstart(默认)居顶对齐;center居中对齐;end居底对齐。

box-pack子容器的水平对齐方式

box-pack:start | center | end | justifystart(默认)居左对齐;center居中对齐;end居右对齐;justify水平等分父容器的宽度。

    <style>
        div.tanxingbuju{
            height:500px;
            color:black;
            font-size:20px;
            display:-webkit-box;
            -webkit-box-orient:vertical;
            -webkit-box-direction:reverse;
        }
        .tanxingbuju div{
            margin:0;
            padding:0;
        }
        .tanxingbuju > div:nth-child(1){
            -webkit-box-flex:1;
            background-color:pink;
        }
        .tanxingbuju > div:nth-child(2){
            -webkit-box-flex:4;
            display:-webkit-box;
            -webkit-box-orient:horizontal;
            -webkit-box-align:center;
            -webkit-box-direction:normal;
            background-color:aqua;
        }
        .tanxingbuju > div:nth-child(3){
            -webkit-box-flex:1;
            background-color:lime;
        }
        .tanxingbuju > div > div:nth-child(1){
            -webkit-box-flex:2;
            background-color:red;
            height:150px;
        }
        .tanxingbuju > div > div:nth-child(2){
            -webkit-box-flex:3;
            background-color:olive;
            height:80px
        }
    </style>
    <div class="tanxingbuju">
        <div>第一</div>
        <div>
            <div>左</div>
            <div>右</div>
        </div>
        <div>第三</div>
    </div>
    
    
第一
第三