了解js-javaScript一篇足矣

当前位置:

首页 > temp > JavaScript教程 >

了解js-javaScript一篇足矣

1.javaScript

js.后台打印日志

console.log() --->控制台正常语句
document.write();文档打印，向页面输出内容

基本的语法

变量定义变量需要用关键字 ‘var’

 int  i =10; var i=10 
 有五种类型： number 数值类型，boolean类型 String类型，object 对象类型，undefined 未定义类型  
注意:
	1.var可以省略不写,建议保留
	2.最后一个分号可以省略,建议保留
	3.同时定义多个变量可以用","隔开，公用一个‘var’关键字. var c = 45,d='qwe',f='68';

typeof操作符
- 写法：typeof(变量名) 或 typeof 变量名
- null与undefined的区别：
  
  null: 对象类型，已经知道了数据类型，但对象为空。
  undefined：未定义的类型，并不知道是什么数据类型。
转换函数
- parseInt();将一个字符串转成整数如果一个字符串包含非数字符则返回一个NAN
- inNAN()：转换判断是否能换一个数字如果是非数据返回true isNAN=is not a number

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script type="text/javascript">
    var i = 5;   //整数
    var f = 3.14;  //浮点
    var b = true;  //布尔
    var c = 'a';  //字符串
    var str = "abc";   //字符串
    var d = new Date();  //日期
    var u;   //未定义类型
    var n = null; //空
    document.write("整数：" + typeof(i) + "<br/>");
    document.write("浮点 ：" + typeof(f) + "<br/>");
    document.write("布尔：" + typeof(b) + "<br/>");
    document.write("字符：" + typeof(c) + "<br/>");
    document.write("字符串：" + typeof(str) + "<br/>");
    document.write("日期：" + typeof(d) + "<br/>");
    document.write("未定义的类型：" + typeof(u) + "<br/>");
    document.write("null：" + typeof(n) + "<br/>");
</script>
</body>
</html>

==和=== 的区别

var i = 2;
var j = "2"; 
alert(i==j); // ==比较的仅仅是数值, true
alert(i===j); // ===比较的是数值和类型.false

函数

什么是函数函数类似于java里的方法用于封装一些可重复使用的代码块

普通函数

function 函数名（形参列表）{
    函数体
    [return 返回值]--》可加
}
调用函数
var resule = 函数名（实参列表）
</实例>
       //定义一个函数：计算两个数字之和
    function add(a, b) {
        return a+b;
    }

    //调用函数
    var v = add(1, 2);

    document.write("1, 2之和：" + v);
   </实例>

匿名函数：也叫回调函数，类似于java里的函数接口里的方法
```
function(形参列表){
    函数体
    [return 返回值;]
}
```
特点

参数列表里面直接写参数的变量名，不写var

函数没有重载，后面的直接把前面的覆盖了

js事件

事件介绍：

HTML 事件是发生在 HTML 元素上的“事情”，是浏览器或用户做的某些事情
事件通常与函数配合使用，这样就可以通过发生的事件来驱动函数执行。

属性	此事发生在何时
onclick	用户点击于事件
ondblclick	用户双击事
onchange	内容被改变
onblur	失去焦点
onfocus	获得焦点
onload	加载完成后（一张页面或图片加载）
onsubmit	确定按钮被点击表单提交
onkeydown	某个键盘键按下
onkeypress	某个键盘被按住
onkeyup	某个键盘被松开
onmousedown	鼠标按钮被按下。
onmouseout	鼠标从某元素移开。
omouseover	鼠标移到某个元素之上
onmousemove	鼠标被移动

事件绑定

使用事件的二种方式

普通函数方式

<标签属性="js代码，调用函数"></标签>

匿名函数方式

<script>
    标签对象.事件属性 = function(){
        //执行一段代码
    }
</script>

点击事件

需求：每点击一次按钮弹出hello

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
<!--方式一：设置标签的属性-->
<input type="button" value="点我吧" onclick="sayHello()"/>
<!--方式二：派发事件匿名函数标签对象事件属性 =function(){}-->
<input id ="inputId" type="button" value="干我吧"/>
<script>
        function sayHello() {
            document.write("hello");
        }
       //这个方法中的getElementById会介绍到
    document.getElementById("inputId").onclick =function () {
            document.write("你好")
    }
</script>
</body>
</html>
<script src="my.js"></script>

获得焦点（onfocus）和失去焦点

需求：给输入框设置和失去焦点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
<input id ="inputId" type="text" onfocus="onfou(this)" onblur="onblu()" value="hello..">

<script>
function onfou(t){
    //this 表示形参指的是input里的内容 ,t实参调用this
    console.log(t.value);
   // document.write(t.value);
}
function onblu() {
    console.log("你好");
}
</script>
</body>
</html>
<script src="my.js"></script>

内容改变

需求：给select设置内容改变事件

<body>
    <!--内容改变(onchange)-->
    <select onchange="changeCity(this)">
        <option value="bj">北京</option>
        <option value="sh">上海</option>
        <option value="sz">深圳</option>
    </select>

</body>
<script>
    function changeCity(obj) {
        console.log("城市改变了"+obj.value);
    }
</script>

等xx加载完成(onload) 可以把script放在body的后面/下面, 就可以不用了

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function initData() {
            // 标签对象.value = "";
            var inputEle = document.getElementById("inputId");
            inputEle.value = "你好..";
        }

    </script>
</head>
<!--onload: 等xx加载完成-->
<body onload="initData()">
    <input id="inputId" type="text" value="hello..."/>
</body>

正则表达式

正则表达的语法

对象形式：var len =new RegExp(正则表达式)

直接定义：var reg =/正则表达式/;

常用方法

test(string) String为要校验的字符串返回值为bolean类型正确返回true

常见正则表达式

符号	作用
\d	数字
\D	非数字
\w	单词：a-zA-z0-9
\W	非单词
.	任意字符匹配
{n}	匹配n次
{n,}	大于或等于n次
{n,m}	在n次和m次之间
+	1~n次
*	0-n次
?	0-1次
^	匹配开头
$	匹配结尾
[a-zA-Z]	英文字母
[a-zA-Z0-9]	英文字母和数字
[xyz]	字符集合, 匹配所包含的任意一个字符
没了

使用示例

需求:

出现任意数字3次
只能是英文字母的, 出现6~10次之间
只能由英文字母和数字组成，长度为4～16个字符，并且以英文字母开头
手机号码: 以1开头, 第二位是3,4,5,6,7,8,9的11位数字

步骤:

创建正则表达式

调用test()方法

<SCRIPT>
^和$没有啥特殊的含义只是表示开头和结尾哦
//出现任意数字3次
var len =/^/d{3}$/
//校验字符串
len.text(123)->true
//只能是英文字母出现6-10次
var len1 =/^[a-zA-Z[6-10]]$/
//3 用户名：只能由英文字母和数字组成，长度为4～16个字符，并且以英文字母开头
    var reg3  =/^[a-zA-Z][a-zA-Z0-9]{3,15}$/;
    var str3 = "zs";
   // alert(reg3.test(str3));
//4. 手机号码: 以1开头, 第二位是3,4,5,6,7,8,9的11位数字
    //var reg4  =/^1[3456789]\d{9}$/i; //忽略大小写的
    var reg4  =/^1[3456789]\d{9}$/; //不忽略大小写的
    var str4 = "188245899";
 alert(reg4.test(str4));
</script>

内置对象Array数组【重点】

和java的数组不同它类似像java中的所有的存对象的合集整合了java中list，array和map

语法

var arr = new Array(size)
var arr =new Array(elment1,element2,element3,.....)
var arr=[element1,element2,element3,.....];最常用

数组的特点为

数组中的每个元素可以是任意类型比较开放
数组的度可以变更加像java中的List

<script>
//方式一new Array(Size)
    var array01 = new Array(4);
   array01[0]=1;
   array01[1]=2;
    //方式二 new Array(ele,ele...)
    var array02 = new array02(1,2,34,5,6);
    //方式三
    var array02=[2,34,566,45,90];
    //任意类型
var array04 = [1, 2, 3, "哈哈"];
</script>

数组常见的方法

ApI介绍

concat():连接两上或更多的数组，并返回结果

join：把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔

reverse 颠倒数组中的元素的顺序

    //3.常用的方法
    //3.1 concat() 连接两个或更多的数组，并返回结果。【重点】
    var array05 = [1, 2, 3, 4];
    var array06 = ["哈哈", "你好", 100, 200];
    var array07 = array05.concat(array06);
    console.log(array07);

    //3.2 join() 把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。
    var str =   array05.join("**");
    console.log(str);

    //3.3 reverse() 颠倒数组中元素的顺序。
    array06 =  array06.reverse();
    console.log(array06);

数组里面再入数组就是二维数组

    //4.二维数组
    //方式一:
    var citys = new Array(3);
    citys[0] = ["深圳", "广州", "东莞", "惠州"];
    citys[1] = ["武汉", "黄冈", "黄石", "鄂州", "荆州"];
    citys[2] = ["济南", "青岛", "烟台", "淄博", "聊城"];

    var citys02 = [
        ["深圳", "广州", "东莞", "惠州"],
        ["武汉", "黄冈", "黄石", "鄂州", "荆州"],
        ["济南", "青岛", "烟台", "淄博", "聊城"]
    ];

    for (var i = 0; i < citys02.length; i++) {
        var cityArray = citys02[i];
        
        console.log(cityArray);

        for(var j = 0;j<=cityArray.length;j++){
            console.log(cityArray[j]);
        }
    }

3.2. 日期常用方法

3.2.1API介绍

方法	描述
Date()	返回当日的日期和时间。
getDate()	从 Date 对象返回一个月中的某一天 (1 ~ 31)。
getDay()	从 Date 对象返回一周中的某一天 (0 ~ 6)。
getMonth()	从 Date 对象返回月份 (0 ~ 11)。
getFullYear()	从 Date 对象以四位数字返回年份。
getHours()	返回 Date 对象的小时 (0 ~ 23)。
getMinutes()	返回 Date 对象的分钟 (0 ~ 59)。
getSeconds()	返回 Date 对象的秒数 (0 ~ 59)。
getMilliseconds()	返回 Date 对象的毫秒(0 ~ 999)。
getTime()	返回 1970 年 1 月 1 日至今的毫秒数。
parse()	返回1970年1月1日午夜到指定日期（字符串）的毫秒数。
setDate()	设置 Date 对象中月的某一天 (1 ~ 31)。
setMonth()	设置 Date 对象中月份 (0 ~ 11)。
setFullYear()	设置 Date 对象中的年份（四位数字）。
setYear()	请使用 setFullYear() 方法代替。
setHours()	设置 Date 对象中的小时 (0 ~ 23)。
setMinutes()	设置 Date 对象中的分钟 (0 ~ 59)。
setSeconds()	设置 Date 对象中的秒钟 (0 ~ 59)。
setMilliseconds()	设置 Date 对象中的毫秒 (0 ~ 999)。
setTime()	以毫秒设置 Date 对象。
toLocaleString()	根据本地时间格式，把 Date 对象转换为字符串。

<script>
    //1.创建日期对象
    var myDate =  new Date();

    //2.调用方法
    console.log("年:" + myDate.getFullYear());
    console.log("月:" + (myDate.getMonth()+1));
    console.log("日:" + myDate.getDate());
    console.log("时:" + myDate.getHours());
    console.log("分:" + myDate.getMinutes());
    console.log("秒:" + myDate.getSeconds());
    console.log("毫秒:" + myDate.getMilliseconds());

    console.log(myDate.toLocaleString()); //打印本地时间    2019-12-06 12:02:xx
    //console.log(myDate);


</script>

js的BOM

Browser Object Model ,浏览器对象模型. 为了便于对浏览器的操作，JavaScript封装了对浏览器中各个对象，使得开发者可以方便的操作浏览器中的各个对象。

3.2.BOM里面的五个对象

3.2.1window: 窗体对象

方法	作用
alert()	显示带有一段消息和一个确认按钮的警告框
confirm()	显示带有一段消息以及确认按钮和取消按钮的对话框
setInterval('函数名()',time)	按照指定的周期（以毫秒计）来调用函数或计算表达式
setTimeout('函数名()',time)	在指定的毫秒数后调用函数或计算表达式
clearInterval()	取消由 setInterval() 设置的 Interval()。
clearTimeout()	取消由 setTimeout() 方法设置的 timeout。

<body>
    <input type="button" value="开始" onclick="startSayHello()"/>
    <input type="button" value="结束" onclick="stopSayHello()"/>

<script>
    //1.弹出警告框  window.alert("不能删除!!!");widow可以省略
    //alert("不能删除!!!");

    //2.弹出确认框
    //var flag = confirm("您确认删除吗?");
    //console.log("flag="+flag);
    //if(flag){
        //请求服务器 删除
    //}

    //3.周期执行 setInterval('函数名()',time)  eg: setInterval("sayHello()",1000);
    //setInterval("sayHello()",10000);

    //4.延迟执行  5s之后调用sayHello()
    //setTimeout("sayHello()",5000);
    var intervalFlag;
    function startSayHello() {
        //每隔1s开始打印hello...
        intervalFlag = setInterval("sayHello()",100);
    }
    function stopSayHello() {
        //停止打印sayHello()
        clearInterval(intervalFlag);
    }
    function sayHello() {
        console.log("hello..");
    }
</script>

location.href:获取路径

location.href = "http://www.baidu.com"; 设置路径,跳转到百度页面

dom介绍（重要）

1. 什么是dom

DOM：Document Object Model，文档对象模型。是js提供的，用来访问网页里所有内容的(标签,属性,标签的内容)

2. 什么是dom树

当网页被加载时，浏览器会创建页面的DOM对象。DOM对象模型是一棵树形结构：网页里所有的标签、属性、文本都会转换成节点对象，按照层级结构组织成一棵树形结构。
- 整个网页封装成的对象叫document
- 标签封装成的对象叫Element
- 属性封装成的对象叫Attribute
- 文本封装成的对象叫Text

一切皆节点，一切为对象

3.1. 获取标签

方法	描述	返回值
`document.getElementById(id)`	根据id获取标签	`Element`对象
`document.getElementsByName(name)`	根据标签name获取一批标签	`Element`类数组
`document.getElementsByTagName(tagName)`	根据标签名称获取一批标签	`Element`类数组
`document.getElementsByClassName(className)`	根据类名获取一批标签	`Element`类数组

  //1.根据id获得
    var inputEle = document.getElementById("inputId");

    //2.根据标签名获得
    var inputELes = document.getElementsByTagName("input");
    console.log(inputELes.length); //8

    //3.根据类名获得
    var inputELes02 =  document.getElementsByClassName("inputClass");
    console.log(inputELes02.length); //4

3.2. 操作标签

方法	描述	返回值
`document.createElement(tagName)`	创建标签	`Element`对象
`parentElement.appendChild(sonElement)`	插入标签
`element.remove()`	删除标签
`document.createTextNode()`	创建文本

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>操作标签体</title>
</head>
<body>
<input type="button" value="获取d1的标签体内容" onclick="getHtml()">
<input type="button" value="设置d1的标签体内容" onclick="setHtml()">
<div id="d1">
   你好
    <p>嘿小黑马你好</p>
</div>

<script>
    var d1 = document.getElementById("d1");
    function getHtml() {
        var html = d1.innerHTML;
        alert(html);
    }

    function setHtml() {
        d1.innerHTML = "<h1>深圳大马哥JavaEE</h1>";
    }
</script>
</body>
</html>

作操属性

每个标签Element对象提供了操作属性的方法

方法名	描述	参数
`getAttribute(attrName)`	获取属性值	属性名称
`setAttribute(attrName, attrValue)`	设置属性值	属性名称, 属性值
`removeAttribute(attrName)`	删除属性	属性名称

好了就介绍到这里啦，欢迎留言呀！

出处：https://www.cnblogs.com/pyb4334/p/14530261.html

栏目列表