Javascript入门

最新推荐文章于 2024-06-24 14:30:19 发布
最新推荐文章于 2024-06-24 14:30:19 发布
阅读量165 收藏
点赞数 1
分类专栏： PHP燕十八笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/coco1118/article/details/85161410
版权

js与DOM的关系

  • DOM对象：把div body p等节点树看成一个对象。
  • html源码在内存里形成一个DOM对象（文档对象），
  • 浏览器有渲染html代码功能;

  • 浏览器内部有个一js的解释器/执行器/引擎,

  • 我们在html里写一个js代码，js代码被引擎所执行，而执行结果就是对DOM的操作，

  • 对DOM操作结果，就是我们常看到的特效，如图片漂浮，文字便是。

js

引入js
  1. 直接写在html页面中
<script>
code...
</script>
  1. 引入外部js文件
<script src='02.js'>
</script>

注意：此处scirpt标签内不能写js代码！

变量声明

用var声明，不用var会污染全局！
变量名由 $ 、数字、字母、_、组成，不能以数字开头。

变量类型

字符串、数字、布尔、数组、对象、Null、Undefined
数组：var cars=["Audi","BMW","Volvo"];
调用字段值有一种方法：

console.log(person[0])

对象：var person={firstname:"Bill", lastname:"Gates", id:5566};
调用字段值有两种方法：

console.log(cars[‘id’])
console.log(cars.id)
运算符

需要注意逻辑运算符：

 var c=5||2;
    document.write(c)//5

而php中，

$c=5||2;
var_dump($c);//bool(true)
控制结构

遍历：

  • 遍历数组：
For of 遍历（需要ES6支持）

1.	for(let value of arr){
2.					console.log("第四种遍历方式\t"+value);
3.				}

一般的方法：for(var i=0;i<10;i++){}

  • 遍历对象：
For-in 遍历

for (var k in arr){
    console.log(arr[index]);
    console.log(index);
}

参考：js数组遍历和对象遍历

内置对象

JavaScript 中的所有事物都是对象：字符串、数字、数组、日期，等等。
在 JavaScript 中，对象是拥有 属性和方法的 数据。

常用属性和方法
String对象
  • length属性：长度
  • concat(string)：连接2个或更多字符串
  • indexOf(string) 查找字符串出现位置
    注释： indexOf() 方法对大小写敏感！
    注释： 如果要检索的字符串值没有出现，则该方法返回 -1。
    可用str.indexOf(search)>-1来检测是否存在字符串。
  • substr(start[,length] )截取字符串
  • toLowerCase() 转换成小写
  • toUpperCase() 转换成大写
  • replace(regexp/substr,replacement) 字符串替换
Date日期对象
  • getFullYear() 返回4位年份
  • getMonth()
  • getDate()
  • getDay() 返回星期数0-6
  • getHours()
  • getMinutes()
  • getSeconds()
  • getMilliseconds()
Math对象
  • ceil(x) 向上取整
  • floor(x) 向下取整
  • min(x,…) 返回最小值
  • max(x,…) 返回最大值
  • pow(x,y) 返回x的y次方
  • randow(x) 返回0-1之间的随机数 [0,1)
  • round(x) 四舍五入
  • sqrt(x) 开平方根
Array对象
  • concat(arrayX,arrayX,…,arrayX) 连接两个或多个数组并返回新数组
  • join(separator) 把数组中的所有元素放入一个字符串并返回
  • pop() 删除并返回数组的最后一个元素
  • push() 向数组的末尾添加一个或多个元素，并返回新的长度
  • shift() 把数组的第一个元素从其中删除，并返回第一个元素的值
  • unshift() 向数组的开头添加一个或更多元素，并返回新的长度
  • sort(sortby) 对数组的元素进行排序,并返回排序后的array对象
    若省略参数，是按照字符编码的顺序进行排序。
<script type="text/javascript">

function sortNumber(a,b)
{
return a - b
}

var arr = new Array(6)
arr[0] = "10"
arr[1] = "5"
arr[2] = "40"
arr[3] = "25"
arr[4] = "1000"
arr[5] = "1"

document.write(arr + "<br />")
document.write(arr.sort(sortNumber))

</script>
  • reverse() 颠倒数组中元素的顺序，并返回重新排序后的array对象
  • slice(start,end) 返回数组的一个片段
  • splice() 方法向/从数组中添加/删除项目，然后返回被删除的项目、
window对象

window对象是浏览器宿主对象，和js语言无关。

window对象方法
  • close() 方法用于关闭浏览器窗口
<html>
<head>
<script type="text/javascript">
function closeWin()
  {
  myWindow.close()
  }
</script>
</head>
<body>

<script type="text/javascript">
myWindow=window.open('','','width=200,height=100')
myWindow.document.write("This is 'myWindow'")
</script>

<input type="button" value="Close 'myWindow'"
onclick="closeWin()" />

</body>
</html>
  • open() 方法用于打开一个新的浏览器窗口或查找一个已命名的窗口
window对象的子对象

navigator属性

  • appCodeName 浏览器的代码名
  • appName 浏览器的名称
  • appVersion 浏览器的平台和版本信息
  • platform 浏览器的操作系统类型
  • userAgent 用户代理信息
  • cookieEnabled 是否支持cookie

location（地址栏）属性

  • host 主机名
  • port 端口
  • href 地址
  • pathname 当前 URL 的路径部分
  • protocol 协议
  • search 查询的字符串
  • assign(url) 页面跳转

history（历史记录）属性

  • length 历史记录数目
  • back()
  • forward()
  • go()

screen（屏幕对象）属性

  • height 高度
  • width 宽度
  • availHeight 可用高度
  • availWidth 可用宽度
  • colorDepth 颜色

document（文档对象）属性
操作次对象可动态改变页面内容，是js的主战场。

找对象

  • 通过id查询，返回值为对象：document.getElementById()
  • 通过标签查询，返回值为对象集合：document.getElementsByTagName()
  • 通过name查询（对于表单元素来说），返回值为对象集合：document.getElementsByName()
  • 通过class查询，返回值为对象集合：document.getElementsByClassName();
  • 通过子节点查询，返回集合：
    children 非标准属性，但兼容性很好，只包含元素节点，不包含空白节点，childNodes:包含所有类型的节点
    补充：在DOM中，每个部分都为节点，
  • 文档本身是文档节点
  • 所有 HTML 元素是元素节点
  • 所有 HTML 属性是属性节点
  • HTML 元素内的文本是文本节点
  • 注释是注释节点
  • 空白是空白节点

修改对象
在这里插入图片描述

  • CSS属性与DOM对象属性的对应关系：
obj.style.width
obj.style.background

注意 ：如果css属性带有横线，如border-top-style,则把横线去除并横线后首字母大写：

obj.style.borderTopStyle
obj.style.marginLeft
  • 标签属性与DOM对象属性的对应关系：
    绝大部分二者相同，例如：
    imgobj.src属性对应<img src=''>中的src属性。
    也有例外，例如：
    <div class='main'>中，操作class属性用divobj.className

小练习：


点击div，其宽高分别增加10px,border-bottom-width增加1px

<div id="test2" onclick="bian()" style="width: 100px;height:100px;border-bottom-width:10px">
<script>
  function bian() {
        let div=document.getElementById('test2');
        let w=parseInt(div.style.width);
        let h=parseInt(div.style.height);
        let b=parseInt(div.style.borderBottomWidth);
        div.style.width=w+10+'px';
        div.style.height=h+10+'px';
        div.style.borderBottomWidth=b+1+'px'
        div.style.background='purple'
    }
</script>

注意：

  1. parseInt() 函数可解析一个字符串，并返回一个整数
  2. 上述例子中，obj.style只能获取到行内样式，获取不到外部样式，如果写在style标签里，点击div，无效。

补充：获取计算后的css样式：
window方法：getComputedStyle()
语法：

var style = window.getComputedStyle（element [，pseudoElt ]）;

element:
要获取其计算风格的Element。
pseudoElt（可选的）:
指定要匹配的伪元素的字符串。必须省略（或null）常规元素。

在这里插入图片描述
注意：此函数只能获取对象的样式，要改样式还得通过obj.style
上述例子改进如下：

<div id="test2" onclick="bian()" style="width: 100px;height:100px;border-bottom-width:10px">
  function getStyle(obj,attr) {
        return  getComputedStyle(obj,null)[attr];
    }
    function bian() {
        let div=document.getElementById('test2');
        let w=parseInt(getStyle(div,'width'));
        let h=parseInt(getStyle(div,'height'));
        div.style.width=w+10+'px';
        div.style.height=h+10+'px';
    }

删除对象
步骤：

  1. 找到对象
  2. 找到他的父对象parentObj
  3. parentObj.removeChild(子对象)
<div id="test2" onclick="bian()" style="width: 100px;height:100px;">
    <p>1</p>
    <p>2</p>
    <p>3</p>
</div>
<button onclick="shan()">qqq</button>
 function shan() {
        var parent=document.getElementById('test2');
        var last=parent.children[parent.children.length-1];
        parent.removeChild(last)
    }

创建对象
步骤：

  1. 创建对象
  • document.createElement()
  • document.createTextNode()
  • document.createAttribute()
  1. 找到父对象parentObj
  2. parentObj.appendChild(对象)
    小例子：
<div id="test2" style="width: 100px;height:100px;"></div>
<button onclick="add()">增加</button>
<script>
    function add() {
        //创建元素节点。
        var a = document.createElement('a');
        //创建文本节点
        var text = document.createTextNode('链接');
        var parent = document.getElementById('test2');
        
        //添加属性节点方法一
        // a.setAttribute('href','http://baidu.com')
        
        //添加属性节点方法二开始：
        var attr = document.createAttribute('href');//创建属性节点
        attr.value = 'http://baidu.com';
        a.setAttributeNode(attr);
        //添加属性节点方法二结束
        
        a.appendChild(text);
        parent.appendChild(a)
    }
</script>

暴力操作对象
innerHTML 属性设置或返回表格行的开始和结束标签之间的 HTML

联动菜单

<select name="" id="prov" onchange="change()">
    <option value="" disabled>请选择</option>
    <option value="0">北京</option>
    <option value="1">安徽</option>
</select>
<select name="" id="city"></select>
<script>
    function change() {
        var arr = [
            ['朝阳', '海淀', '门头沟'],
            ['淮南', '淮北', '合肥']
        ];
        var sel = document.getElementById('prov');
        var opt = '';
        var len = arr[sel.value].length;
        for (var i = 0; i < len ; i++) {
            opt += "<option value=\"" + i + "\">" + arr[sel.value][i] + "</option>";
        }
        document.getElementById('city').innerHTML=opt;
    }
</script>
定时器

属于window对象。

  1. setTimeout() 在指定的毫秒数后调用函数或计算表达式一次。
  2. setInterval() 按照指定的周期（以毫秒计）来调用函数或计算表达式。

小练习：定时炸弹

  • 使用setInterval实现：
倒计时：
<input type="button" name="time" value="5">
<img src="a.jpg" alt="">
<script>
    function miao() {
        var div = document.getElementsByName('time')[0];
        var time = div.value - 1;
        div.value = time;
        if (time < 1) {
            var img = document.getElementsByTagName('img')[0];
            img.src = 'b.jpg';
            clearInterval(clock)
        }
    }

    var clock = setInterval(miao, 1000)
</script>
  • 使用setTimeout实现
zz这是燕十八老师给的方法：

倒计时：<input type="button" name="time" value="5">
<img src="a.jpg" alt="">
<script>
 function out() {
        var time = document.getElementsByName('time')[0].value - 1;
        document.getElementsByName('time')[0].value = time;
        if (time == 0) {
            var img = document.getElementsByTagName('img')[0];
            img.src = 'b.jpg';
            clearTimeout(clock);
            //这里clock变量在函数内，函数内未定义找不到就会到函数外找，这点与php有所不同。
        } else {
            setTimeout(out, 1000)
        }
    }
    var clock = null;
    clock = window.setTimeout(out, 1000);
</script>
常见事件

表单事件

  1. onfocus() 获得焦点时
  2. onblur() 失去焦点时
  3. onsubmit() 表单提交时
    注意： οnsubmit=“return func()”;func()函数才能拦截提交效果。

鼠标事件

  1. onclick() 点击时
  2. onmouseover() 鼠标移到某元素之上

框架/对象（Frame/Object）事件

  1. onload() 在页面或图像加载完成后立即发生
事件委托

target事件属性应用实例：
五子棋小例子：

样式：

   td{
            width: 100px;
            height: 100px;
            background: #fff;
            border: 1px solid wheat;
        }
        table{
            border: 0;
            border-collapse: collapse;
        }

结构：

<table>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>

行为：

   var i=0;
    document.getElementsByTagName("table")[0].onclick=function (ev) {
        ev.target.style.background=i++%2==0?'black':'pink'
    }

这样写的好处是，不用在25个td上都绑定onclick，节省内存！

js使用正则
  • test() 方法用于检测一个字符串是否匹配某个模式.如果字符串中有匹配的值返回 true ，否则返回 false。
  • exec() 方法用于检索字符串中的正则表达式的匹配。如果字符串中有匹配的值返回该匹配值，否则返回 null。

匹配邮箱小实例：

<form action="12.html" id="form1">
    姓名：<input type="text" name="name" id="name">
    邮箱：<input type="text" name="mail" id="mail">
    <input type="submit" value="提交">
</form>
<script>
    document.getElementById('form1').onsubmit = function () {
        var patt1 = /^[a-zA-Z0-9]{6,12}$/;
        var patt2 = /^\w+@[a-zA-Z0-9\-]+(\.[a-zA-Z0-9\-]+)*$/;
        if (!patt1.test(document.getElementById('name').value)) {
            alert('用户名错误');
            return false;
        }
        if (!patt2.test(document.getElementById('mail').value)) {
            alert('邮箱错误');
            return false;
        }
    }
</script>
Karagrade
关注
专栏目录
Javascript 入门教程
04-21
javasript教程 第1章 JavaScript语言概述.pdf 第2章 JavaScript语言基础.pdf 第3章 JavaScript事件处理.pdf 第4章 JavaScript基于对象编程.pdf 第5章 文档对象模型(DOM).pdf 第6章 String、Math、Array等数据对象.pdf 第7章 Window及相关顶级对象.pdf 第8章 Document对象.pdf 内容 绝对清楚 当然了 因为我只是个初学者,感觉很适合初学者,拿出来和大家共享一下,另外还有这份教程对应的源文件,期待着能给您的学习也能带来帮助,至于这个教程的视频太大,无法上传在上面,所以感
JavaScript入门
aizhulu5776的博客
01-08 75
了解JavaScript 1.概念 JavaScript作为前端三大语言之一HTML5+CSS3+JavaScript，前端语言 2.定义 好好想想，没有js网页会是什么样子~~不活动了，就成了静态了。说大白话，就是让网页动起来的工具语言 3.例子 <!DOCTYPE html> <html lang="en"> <hea...
JavaScript--js基础(详细 全面)
最新发布
Dreamkidya的博客
06-24 1178
本文旨在介绍和学习JavaScript的基础知识。通过本文的阅读，读者将能够了解JavaScript在网页开发中的重要性和作用，掌握其基础语法和概念。不论是初学者还是有一定经验的开发者，都可以通过本文来加深对JavaScript的理解，并提升自己的开发能力。希望读者能够从中获得有益的知识，为日后的学习和实践打下坚实基础。愿读者在学习JavaScript的过程中不断成长，探索更多可能性
Javascript入门(1)
shenqueying的博客
05-22 314
1、什么是javascriptJavaScript 是web上一种功能强大的轻量级编程语言，用于开发交互式的web页面。他不需要进行编译，而是直接嵌入在HTML页面中，由浏览器执行。而java是先由编译器编译为.class文件，在由jvm进行执行。JavaScript 是一种轻量级的编程语言。JavaScript 是可插入 HTML 页面的编程代码。JavaScript 插入 HTML 页面后，可...
JavaScript（入门）
热门推荐
Veer_c的博客
01-10 1万+
什么是 JavaScript？ JavaScript 被设计用来向 HTML 页面添加交互行为。 JavaScript 是一种脚本语言（脚本语言是一种轻量级的编程语言）。 JavaScript 由数行可执行计算机代码组成。 JavaScript 通常被直接嵌入 HTML 页面。 JavaScript 是一种解释性语言（就是说，代码执行不进行预编译）。 所有的人无需购买许可证均可使用 JavaScr...
JavaScript 入门 新手学习笔记
11-17
这篇"JavaScript入门新手学习笔记"提供了全面的学习资源，适合初学者系统性地掌握这一技术。 笔记可能包含了以下关键知识点： 1. **基础语法**：JS的基础包括变量（var、let、const）、数据类型（如字符串、数字、...
java源码书籍-TeachYourselfJavaScriptIn24_4th:JavaScript入门经典（第4版）（SamsTeachY
05-24
《JavaScript入门经典（第4版）》是一本针对初学者的JavaScript编程教程，旨在帮助读者在24小时内掌握JavaScript的基础知识。尽管标题中提到了"Java"，但实际上这本书是关于JavaScript的，这是一种广泛用于网页和...
JavaScript入门系列之知识点总结
10-22
这只是JavaScript入门的冰山一角，还有更多诸如数组、对象、循环、控制流、事件处理、DOM操作等概念需要学习。继续深入，你将能利用JavaScript构建复杂的交互式Web应用。对于初学者来说，不断实践和理解这些基础知识...
JavaScript入门学习书籍推荐
10-30
很多人对学习JavaScript充满热情，但面对市面上琳琅满目的书籍，初学者往往不知如何选择合适的入门书籍。这篇文章将帮助初学者了解推荐的JavaScript学习书籍，并简要介绍每本书的特点。 首先，推荐给新手的书籍是...
javascript学习（入门）
m0_61871870的博客
05-05 1286
/写法一 function 函数名(参数) {函数体 return 返回值;} //写法二 var 方法名 = function(参数) {函数体 return 返回值;一旦执行到return代表函数结束。如果没有return 函数执行完也会返回结果，结果就是undefined参数问题：js可以传任意个参数，也可以不传参数（返回NaN）传参问题：当传入的参数多于形参数量时，多余的参数会放在arguments中，要想操作多余的参数，可以使用…rest。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值