JavaScript基础

最新推荐文章于 2023-02-27 11:40:10 发布
最新推荐文章于 2023-02-27 11:40:10 发布
阅读量263 收藏
点赞数
分类专栏： javaweb linux 大数据 文章标签： javascript 前端 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_51022702/article/details/121750636
版权
大数据 同时被 3 个专栏收录
8 篇文章 0 订阅
订阅专栏
linux
3 篇文章 0 订阅
订阅专栏
javaweb
1 篇文章 0 订阅
订阅专栏

JS

1.介绍

Javascript 语言诞生主要是完成页面的数据验证。因此它运行在客户端，需要运行浏览器来解析执行 JavaScript 代码。 JS 是 Netscape 网景公司的产品，最早取名为 LiveScript;为了吸引更多 java 程序员。更名为 JavaScript。 JS 是弱类型，Java 是强类型。
特点：

  1. 交互性（它可以做的就是信息的动态交互）
  2. 安全性（不允许直接访问本地硬盘）
  3. 跨平台性（只要是可以解释 JS 的浏览器都可以执行，和平台无关）

2.JS与HTML的结合方式

  1. 在head标签中编写js

  2. 通过文件引入

注：当这个 script标签引入JS文件时，该标签中的内容就会被覆盖掉，自能从新写一个script标签

3.变量

数据类型：

  1. 数值型 ： number
  2. 字符串类型： string
  3. 对象类型： object
  4. 布尔类型： boolean
  5. 函数类型： function

特殊值：

  1. undefined : 所有未定义的变量都是 undefined
  2. null : 空值
  3. NaN ： Not a Number 非数值类型

定义变量：

与python很相似
var 变量名;
var 变量名 = 值;

4.关系运算符

  1. == 与 ===

==: 比较的是字面值
===：比较 字面值 和 数据类型

  1. || && ！

&&:

  1. 当全为真时，返回最后一个表达式的值
  2. 当有假时，返回第一个为假的表达式的值

||

  1. 当表达式全为假时，返回最后一个表达式的值
  2. 只要有一个表达式为真。就会把回第一个为真的表达式的值

5.数组

可以看作一个object型的动态数组。
不过有一点比较神奇
当给 arr[100] 复制时 那么他的长度就为 100
尽管数组前面没有赋值！！！

定义方式

var 数组名 = [] ; // 空数组
var 数组名 = [1, 2, “aaa”]; // 赋初始值

6.函数

  1. 与Linux中的编写脚本有点像！！
  2. 他可以不用指定参数个数(也可以指定参数)，可以通过argument[]数组来获取
    这也导致了函数不能重载
  3. 返回值可有可无

定义形式一

function 函数名([形参列表]){ 函数体 }；

定义形式二

var 变量名 = function([形参列表]){ 函数体 };

函数的隐形参数arguments（自在function内）

就是在 function 函数中不需要定义，但却可以直接用来获取所有参数的变量。我们管它叫隐形参数。 隐形参数特别像 java 基础的可变长参数一样。 public void fun( Object … args ); 可变长参数其他是一个数组。 那么 js 中的隐形参数也跟 java 的可变长参数一样。操作类似数组。

7.自定义对象

对象与java中的对象非常像

两种自定义方式
1.

对象的定义： var 变量名 = new Object(); // 对象实例（空对象）
变量名.属性名 = 值; // 定义一个属性
变量名.函数名 = function(){} // 定义一个函数
对象的访问： 变量名.属性 / 函数名();

var 变量名 ={
属性名 ：值，
函数名 ：function
}

8.事件

  1. onload加载完成事件

页面加载完成之后，常用于做页面 js 代码初始化操作

  1. onlick 单击事件

常用于按钮的点击响应操作。

  1. onblur 失去焦点事件

常用用于输入框失去焦点后验证其输入内容是否合法。

  1. onchange 内容改变事件

常用于下拉列表和输入框内容发生改变后操作

  1. onsubmit 表单提交事件

常用于表单提交前，验证所有表单项是否合法。

事件的注册两种
6. 静态注册

  1. 动态注册

案例实操：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        function myOnload() {
            alert("静态加载");
        }
        window.onload = function (){
            alert("动态加载");
        }

    </script>

</head>
<!--<body οnlοad="myOnload();">-->
<!--    <div >ok</div>-->

<!--</body>-->

<body >


</body>
</html>

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

        window.onload = function (){
            // 按钮点击动态绑定
            let elementById = document.getElementById("1001");
            elementById.onclick = function (){
                alert("按钮点击事件");
            }
            // 失去焦点动态绑定
            let element = document.getElementById("1002");
            element.onblur = function (){
                alert("失去焦点事件");
            }
            // 内容改变动态绑定
            let element1 = document.getElementById("1003");
            element1.onchange = function (){
                alert("内容改变事件");
            }

            // 表单提交事件
            let elementById1 = document.getElementById("1004");
            elementById1.onsubmit = function (){
                alert("表单提交事件");
                // return false; // 阻止表单提交
                // return true; 允许表单提交

            }


        }
    </script>
</head>
<body>
    <button id="1001">按钮</button> <br>

    输入框：<input type="text" id = "1002"><br>

    下拉框:<select id="1003">
        <option>哈哈</option>
        <option>啊啊</option>
        <option>背包</option>
    </select><br>
    表单提交:
        <form action="http://localhost:8080" id = "1004" method="get" >
            <input type="submit">
        </form>


</body>
</html>

9.DOM模型

DOM 全称是 Document Object Model 文档对象模型 大白话，就是把文档中的标签，属性，文本，转换成为对象来管理。 那么 它们是如何实现把标签，属性，文本转换成为对象来管理呢。

整个结构是树结构，其实也跟java的结构很像

在这里插入图片描述

document对象的方法介绍

  1. document.getElementById(elementId)

通过标签的 id 属性查找标签 dom 对象，elementId 是标签的 id 属性值

  1. document.getElementsByName(elementName)

通过标签的 name 属性查找标签 dom 对象，elementName 标签的 name 属性值

  1. document.getElementsByTagName(tagname)

通过标签名查找标签 dom 对象。tagname 是标签名

  1. document.createElement( tagName)

通过给定的标签名，创建一个标签对象。tagName 是要创建的标签名

注：

document 对象的三个查询方法，如果有 id 属性，优先使用 getElementById 方法来进行查询 如果没有 id 属性，则优先使用 getElementsByName 方法来进行查询 如果 id 属性和 name 属性都没有最后再按标签名查 getElementsByTagName 以上三个方法，一定要在页面加载完成之后执行，才能查询到标签对象

案例实操

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        // 实现当失去焦点时自动检验内容是否合法(getElementById)
        function myOnblur() {
            // 获取对象
            let id = document.getElementById("1001");
            let value = id.value;
            // 正则表达式
            let pattern = /^\w{5,12}$/;
            // 获取span对象
            let element = document.getElementById("1002");
            if (!pattern.test(value)) {
                element.innerHTML = "输入不合法";
            }else {
                element.innerHTML = "看不到我";
            }
        }

        // 实现复选框的全选 反选 全不选 (getElementByName)
        function checkAll(){
            for (const elementsByNameElement of document.getElementsByName("hobby")) {
                elementsByNameElement.checked = true;
            };
        }
        function checkNo() {
            for (const elementsByNameElement of document.getElementsByName("hobby")) {
                elementsByNameElement.checked = false;
            };
        }
        function checkReserve() {
            for (const elementsByNameElement of document.getElementsByName("hobby")) {
                if (elementsByNameElement.checked == true){
                    elementsByNameElement.checked = false;
                }else
                    elementsByNameElement.checked = true;
            };
        }

        // getElementTag 和getElementByName一样

        // createElement
        window.onload = function (){
            // 1.创建标签对象(在内存中)
            let divElement = document.createElement("div");
            // 2.给标签对象赋值
            // divElement.innerHTML = "我是一个div";
            let text = document.createTextNode("我是一个特殊的标签");
            divElement.appendChild(text);
            // 3.添加到body中
            document.body.appendChild(divElement);
        }



    </script>
</head>
<body>
    用户名：<input type="text" id="1001" onblur="myOnblur()">
            <span id="1002">看不到我</span><br>
    密码： <input type="password" id="1003"><br>

    <input type="checkbox" name="hobby" value="cpp" checked="checked">c++
    <input type="checkbox" name="hobby" value="java" >java
    <input type="checkbox" name="hobby" value="python">python
    <br>

    <button onclick="checkAll()">全选</button>
    <button onclick="checkNo()">全不选</button>
    <button onclick="checkReserve()">反选</button>
    <br>



</body>
</html>

节点(标签对象)的常用属性和方法

  1. 方法：

1.1 getElementsByTagName() 方法，获取当前节点的指定标签名孩子节点
1.2 appendChild( oChildNode ) 方法，可以添加一个子节点，oChildNode

  1. 属性：
childNodes 属性，获取当前节点的所有子节点 
firstChild 属性，获取当前节点的第一个子节点
lastChild 属性，获取当前节点的最后一个子节点 
parentNode 属性，获取当前节点的父节点
nextSibling 属性，获取当前节点的下一个节点 
previousSibling 属性，获取当前节点的上一个节点 
className 用于获取或设置标签的 class 属性值 
innerHTML 属性，表示获取/设置起始标签和结束标签中的内容 
innerText 属性，表示获取/设置起始标签和结束标签中的文本

案例实操

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>dom查询</title>
<link rel="stylesheet" type="text/css" href="style/css.css" />
<script type="text/javascript">
	window.onload = function(){

		//1.查找#bj节点
		
		//2.查找所有li节点
		var btn02Ele = document.getElementById("btn02");
		btn02Ele.onclick = function(){
			let str="";
			for (const elementsByTagNameElement of document.getElementsByTagName("li")) {
				str += elementsByTagNameElement.innerHTML + "\t";
			};
			btn02Ele.innerHTML = str;
		};
		btn02Ele.onblur = function (){
			btn02Ele.innerHTML = "查找所有li节点";
		};
		//3.查找name=gender的所有节点
		var btn03Ele = document.getElementById("btn03");
		btn03Ele.onclick = function(){
			let str="";
			for (const elementsByNameElement of document.getElementsByName("gender")) {
				str = elementsByNameElement.value + "\t";
			};
			btn03Ele.innerHTML = str;
		};
		//4.查找#city下所有li节点

		var btn04Ele = document.getElementById("btn04");
		btn04Ele.onclick = function(){
			let str="";
			let city = document.getElementById("city");

			for (const child of city.getElementsByTagName("li")) {
				str +=  child.innerHTML + "\t";
			};
			btn04Ele.innerHTML = str;

		};
		//5.返回#city的所有子节点
		var btn05Ele = document.getElementById("btn05");
		btn05Ele.onclick = function(){
			let str = "";
			let city = document.getElementById("city");
			for (const childNode of city.childNodes) {
				str += childNode + "\t";
			};
			btn05Ele.innerHTML = str;
		};
		//6.返回#phone的第一个子节点
		var btn06Ele = document.getElementById("btn06");
		btn06Ele.onclick = function(){
			let phone = document.getElementById("phone");
			btn06Ele.innerHTML = phone.firstChild.textContent;
		};
		//7.返回#bj的父节点
		var btn07Ele = document.getElementById("btn07");
		btn07Ele.onclick = function(){
			let bj = document.getElementById("bj");
			btn07Ele.innerHTML = bj.parentNode.innerHTML;
		};
		//8.返回#android的前一个兄弟节点
		var btn08Ele = document.getElementById("btn08");
		btn08Ele.onclick = function(){
			btn08Ele.textContent = document.getElementById("android").previousSibling.textContent;
		};
		//9.读取#username的value属性值
		var btn09Ele = document.getElementById("btn09");
		btn09Ele.onclick = function(){
			btn09Ele.textContent = document.getElementById("username").value;
		};
		//10.设置#username的value属性值
		var btn10Ele = document.getElementById("btn10");
		btn10Ele.onclick = function(){
			btn10Ele.textContent = document.getElementById("username").value = "aa";
		};
		//11.返回#bj的文本值
		var btn11Ele = document.getElementById("btn11");
		btn11Ele.onclick = function(){
			btn11Ele.textContent = document.getElementById("bj").innerText;
		};
	};
</script>
</head>
<body>
<div id="total">
	<div class="inner">
		<p>
			你喜欢哪个城市?
		</p>

		<ul id="city">
			<li id="bj">北京</li>
			<li>上海</li>
			<li>东京</li>
			<li>首尔</li>
		</ul>

		<br>
		<br>

		<p>
			你喜欢哪款单机游戏?
		</p>

		<ul id="game">
			<li id="rl">红警</li>
			<li>实况</li>
			<li>极品飞车</li>
			<li>魔兽</li>
		</ul>

		<br />
		<br />

		<p>
			你手机的操作系统是?
		</p>

		<ul id="phone"><li>IOS</li><li id="android">Android</li><li>Windows Phone</li></ul>
	</div>

	<div class="inner">
		gender:
		<input type="radio" name="gender" value="male"/>
		Male
		<input type="radio" name="gender" value="female"/>
		Female
		<br>
		<br>
		name:
		<input type="text" name="name" id="username" value="abcde"/>
	</div>
</div>
<div id="btnList">
	<div><button id="btn01">查找#bj节点</button></div>
	<div><button id="btn02">查找所有li节点</button></div>
	<div><button id="btn03">查找name=gender的所有节点</button></div>
	<div><button id="btn04">查找#city下所有li节点</button></div>
	<div><button id="btn05">返回#city的所有子节点</button></div>
	<div><button id="btn06">返回#phone的第一个子节点</button></div>
	<div><button id="btn07">返回#bj的父节点</button></div>
	<div><button id="btn08">返回#android的前一个兄弟节点</button></div>
	<div><button id="btn09">返回#username的value属性值</button></div>
	<div><button id="btn10">设置#username的value属性值</button></div>
	<div><button id="btn11">返回#bj的文本值</button></div>
</div>
</body>
</html>
m0_51022702
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js获取tagName ，自定义标签并获取
Jay821的专栏
06-22 6043
var params = $("testId[param]"); for(var i=0; i <params.length; i++){ var paramId = $(params[i]).attr("id"); var paramParentId = $(params[i]).parent().attr("id");
NO.4.JS中一获取tagname的错误
逆时针’Blog
04-18 934
练习JS的时候 遇到这个错误 返回去检查了一下发现是写错方法名了 错误位置第26行，自己写成getElementByTagName去了。 正确写法应该是getElementsByTagName。 自己理解：获取标签，不会像ID一样的是一个，而是多个，多个就需要用复数，所以应该为getElementsByTagName
javascript入门笔记9-认识DOM
weixin_30475039的博客
10-31 99
认识DOM 文档对象模型DOM（Document Object Model）定义访问和处理HTML文档的标准方法。DOM 将HTML文档呈现为带有元素、属性和文本的树结构（节点树）。 将HTML代码分解为DOM节点层次图: HTML文档可以说由节点构成的集合，DOM节点有: 元素节点：上图中、、等都是元素节点，即标...
JavaScript中的关键字“VAR”使用详解
源头活水
03-13 1223
JavaScript的变量也是有作用域的，只是它非常的笼统，就分为全局变量和函数变量。作为全局变量的时候，有没有var 都没有关系，但是，在function中，有var就表示是局部变量，没有var就表示是全局变量。JScript的语法教程里面说在声明变量时忽略var要害字是完全合法的。但是事实经常又证实想当然的结果是不可靠的。　　看看下面这几个例子的结果就知道问题了： 　　　　　　var va
js之选项卡（tag标签）
weixin_33744141的博客
12-24 944
目标效果：点击不同按钮显示不同内容 代码如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> input{backgro...
javascript基础
08-09
javascript基础，适合零基础或初学者简单简洁 ，易于理解
JavaScript 基础
02-16
主要为个人学习笔记 超详细
javascript基础入门.ppt
11-12
JavaScript基础入门 JavaScript是基于对象和事件驱动的解释性语言，其目的就是增强Web客户交互，弥补了HTML的缺陷。JavaScript与Java不同，它们处于不同的公司，属于不同的产品。JavaScript可以使网页更具有交互性...
JavaScript基础学习
最新发布
07-10
JavaScript基础学习
JS创建Tag标签的方法详解
10-19
主要介绍了JS创建Tag标签的方法,结合具体实例形式分析了javascript动态操作页面HTML元素实现tag标签功能的步骤与相关操作技巧,需要的朋友可以参考下
javaScript基础详解
10-20
本文主要介绍了javaScript的基础知识，具有很好的参考价值，下面跟着小编一起来看下吧
JavaScript基础知识
06-03
JS的引入 let的声明 数据类型
JavaScript基础语法
07-11
熟悉js在html文件中的书写位置，认识变量是什么及命名规则规范，了解基本数据类型及其判断与转换，认识一些运算符
Javascript基础.xmind
07-31
JavaScript基础三天总结
JavaScript 面向对象tag栏 切换删除添加修改内容
qq_44829011的博客
05-14 375
js用面向对象的方法实现 tag栏 其中每一个li对应下面的一块内容 切换删除添加修改内容 即Tab类以下的四个功能 点击标签栏的选项可以实现切换的效果 点击 + 可以创建标签栏的选项以及对应的标签页 点击 x 可以删除标签栏的选项以及对应的标签页 双击标签栏选项或者标签页中的内容，可以修改它们的内容 虽然样式比较粗糙 但是功能很全面 ** 先上代码 ** <!DOCTYPE hvar tml> <html> <head> <meta charset="ut
Javascript 获取标签元素
weixin_57385603的博客
02-27 1074
Javascript 获取标签元素
JavaScript Tag标签切换实现的几种方法 原生js + jquery
weixin_30278237的博客
03-28 544
Tab标签切换 效果图： HTML部分: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml">&l...
JavaScript实战练习之-Tag标签
Web前端学习
12-11 1422
新手刚开始学习JS未免有些急躁，迫切的想知道一些网站“特效”是怎么实现的。JS是门实战性很强的语言， 把基础知识学会了还要经过多加练习才能领悟其中的”艺术性“。 第一个例子：    Tab标签切换    效果图：     HTML部分: 标签一 标签二 标签三 内容一内容一 内容
JavaScript基础入门教程
本JavaScript基础教程旨在为初学者提供入门指导，内容覆盖了JavaScript的基础语法和概念，但不深入探讨与动态网页交互、不同浏览器间的差异等高级主题。教程结构清晰，兼顾教程与参考手册的特点，分为五个章节：前两...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值