网页开发 JS基础

目录

JS概述

基本语法

数据类型内置方法

DOM对象

查找标签

绑定事件

操作标签

jQuery

查找标签

绑定事件

操作标签

Ajax请求

数据接口

前后端分离

ajax的使用

JS概述

一门弱类型的编程语言,属于基于对象和基于原型的脚本语言.

1 直接编写<script>console.log('hello yuan')</script>
2 导入文件<script src="hello.js"></script>

基本语法

通过代码来进行学习把

// （1）变量声明赋值
var x = 10;  // 如果不写var则是全局变量// （2）数据类型
var age = 10
var name = "yuan"
var isMarried = false
var names = ["rain","eric","yuan"]
var info = {name:"yuan",age:18,isMarried:false}var info2 = {"name": "yuan","age":22,"sex": true,"son": {"name":"alex","age": 38},"hobby": ["篮球","唱","跳"]
}// （3）运算符
+ - * / ++
+=
> <   <=. >=. ===. !==
&& || !// （4）流程控制语句// 分支语句
if(条件){// 条件为true时,执行的代码}else{// 条件为false时,执行的代码}  switch(条件){case 结果1:// 满足条件执行的结果是结果1时,执行这里的代码..break;case 结果2:// 满足条件执行的结果是结果2时,执行这里的代码..break;...default:// 条件和上述所有结果都不相等时,则执行这里的代码}// 循环语句
while(循环的条件){// 循环条件为true的时候,会执行这里的代码}
// 循环三要素
for(1.声明循环的开始; 2.条件; 4. 循环的计数){// 3. 循环条件为true的时候,会执行这里的代码
}  // （5）函数function add(x,y){return x + y
}
add()

数据类型内置方法

字符串内置方法

var str = "hello world";
console.log( str.length );
str.toUpperCase()
str.toLowerCase()
str.slice(3,6);
str.split(" ");
str.trim();

数组内置方法

var arr = [1,2,3,4,5];
arr.push(6); // 给数组后面追加成员
arr.pop(); // 删除最后一个成员作为返回值arr.shift() // shift是将数组的第一个元素删除
arr.unshift(0)  // unshift是将value值插入到数组的开始var arr = ["a","b","c"];
arr.splice(1,1);
arr.splice(1,0,"b")
arr.splice(1,1,"B")arr.reverse();// slice(开始下标,结束下标)  切片,开区间
arr.slice(1,3)// filter() 高阶函数, 对数组的每一个成员进行过滤,返回符合条件的结果
var arr = [4, 6, 5, 7];function func(num) {  // 也可以使用匿名函数或者箭头函数if (num % 2 === 0) {return num;}
}var ret = arr.filter(func);  // 所有的函数名都可以作为参数传递到另一个函数中被执行
console.log(ret);//  map() 对数组的每一个成员进行处理,返回处理后的每一个成员
var arr = [1, 2, 3, 4, 5];
var ret = arr.map((num) => {return num ** 3;
});
console.log(ret); // [1, 8, 27, 64, 125]

序列化

方法描述
JSON.stringify(obj)把obj对象转换成json格式字符串，会移除对象方法
JSON.parse(str)把符合json语法的字符串转换成js对象

DOM对象

DOM （document Object Model： 文档对象模型）

// 整个html文档,会保存一个文档对象document
// console.log( document ); // 获取当前文档的对象

 

查找标签

  • 直接查找标签

document.getElementsByTagName("标签名")
document.getElementById("id值")
document.getElementsByClassName("类名")

1、方法的返回值是dom对象还是数组

2、document对象可以是任意dom对象，将查询范围限制在当前dom对象

  • 导航查找标签

elementNode.parentElement           // 父节点标签元素
elementNode.children                // 所有子标签
elementNode.firstElementChild       // 第一个子标签元素
elementNode.lastElementChild        // 最后一个子标签元素
elementNode.nextElementSibling     // 下一个兄弟标签元素
elementNode.previousElementSibling  // 上一个兄弟标签元素

  • CSS选择器查找

document.querySelector("css选择器")  //根据css选择符来获取查找到的第一个元素，返回标签对象（dom对象）
document.querySelectorAll("css选择器"); // 根据css选择符来获取查找到的所有元素,返回数组
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
​
​
<div id="i1">DIV1</div>
​
<div class="c1">DIV</div>
<div class="c1">DIV</div>
<div class="c1">DIV</div>
​
​
<div class="outer"><div class="c1">item</div>
</div>
​
​
<div class="c2"><div class="c3"><ul class="c4"><li class="c5" id="i2">111</li><li>222</li><li>333</li></ul></div>
</div>
​
<script>
​// 直接查找
​var ele = document.getElementById("i1");  // ele就是一个dom对象console.log(ele);
​var eles = document.getElementsByClassName("c1"); // eles是一个数组 [dom1,dom2,...]console.log(eles);
​var eles2 = document.getElementsByTagName("div"); // eles2是一个数组 [dom1,dom2,...]console.log(eles2);
​var outer = document.getElementsByClassName("outer")[0];var te = outer.getElementsByClassName("c1");console.log(te);
​// 导航查找
​var c5 = document.getElementsByClassName("c5")[0];console.log(c5);  // c5是一个DOM对象
​console.log(c5.parentElement.lastElementChild);  // 返回值是dom对象console.log(c5.parentElement.children);  // 返回值是dom对象数组console.log(c5.nextElementSibling.nextElementSibling);console.log(c5.parentElement.children);
​// css选择器
​var dom = document.querySelector(".c2 .c3 .c5");console.log(":::",dom);
​var doms = document.querySelectorAll("ul li");console.log(":::",doms);</script>
​
</body>
</html>

 

绑定事件

  • 静态绑定 ：直接把事件写在标签元素中

<div id="div" onclick="foo(this)">click</div>
​
<script>function foo(self){           // 形参不能是this;console.log("foo函数");console.log(self);   }
</script>
  •   动态绑定：在js中通过代码获取元素对象,然后给这个对象进行后续绑定
<p id="i1">试一试!</p>
​
<script>
​var ele=document.getElementById("i1");
​ele.onclick=function(){console.log("ok");console.log(this);    // this直接用};
​
</script>

一个元素本身可以绑定多个不同的事件, 但是如果多次绑定同一个事件,则后面的事件代码会覆盖前面的事件代码

多个标签绑定事件

<ul><li>111</li><li>222</li><li>333</li><li>444</li><li>555</li>
</ul>
​
​
<script>
​var eles = document.querySelectorAll("ul li");for(var i=0;i<eles.length;i++){eles[i].onclick = function (){console.log(this.innerHTML)}}
​
</script>

 

操作标签

<标签名 属性1=“属性值1” 属性2=“属性值2”……>文本</标签名>

  • 文本操作

<div class="c1"><span>click</span></div>
​
<script>
​var ele =document.querySelector(".c1");ele.ondblclick = function (){// 查看标签文本console.log(this.innerHTML)// 设置标签文本this.innerHTML = "<a href='#'>yuan</a>"}
​
​
</script>

  • value操作

像input标签，select标签以及textarea标签是没有文本的，但是显示内容由value属性决定

 <input type="text" id="i1" value="yuan">

测试代码

<script>
​// input标签var ele1 =document.getElementById("i1");console.log(ele1.value);ele1.onmouseover = function (){this.value = "alvin"}
​
</script>

  • css样式操作

<p id="i1">Hello world!</p>
​
​
<script>var ele = document.getElementById("i1");ele.onclick = function (){this.style.color = "red"}
</script>

  • 属性操作

elementNode.setAttribute("属性名","属性值")    
elementNode.getAttribute("属性名")       
elementNode.removeAttribute("属性名");

并不是所有属性都可以像value那样操作。

  • class属性操作

elementNode.className
elementNode.classList.add
elementNode.classList.remove

案例：tab切换

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
​<style>*{margin: 0;padding: 0;}
​.tab{width: 800px;height: 300px;/*border: 1px solid red;*/margin: 200px auto;}
​.tab ul{list-style: none;}
​.tab-title{background-color: #f7f7f7;border: 1px solid #eee;border-bottom: 1px solid #e4393c;}
​.tab .tab-title li{display: inline-block;padding: 10px 25px;font-size: 14px;}
​li.current {background-color: #e4393c;color: #fff;cursor: default;}
​.hide{display: none;}
​
​</style>
</head>
<body>
​
​
<div class="tab"><ul class="tab-title"><li class="current" index="0">商品介绍</li><li class="" index="1">规格与包装</li><li class="" index="2">售后保障</li><li class="" index="3">商品评价</li></ul>
​<ul class="tab-content"><li>商品介绍...</li><li class="hide">规格与包装...</li><li class="hide">售后保障...</li><li class="hide">商品评价...</li></ul>
</div>
​
<script>var titles = document.querySelectorAll(".tab-title li");var contents = document.querySelectorAll(".tab-content li");for (var i = 0;i<titles.length;i++){titles[i].onclick = function () {// (1) 触发事件标签拥有current样式for (var j = 0;j<titles.length;j++){titles[j].classList.remove("current")}
​console.log(this);this.classList.add("current");
​// (2) 显示点击title对应的详情内容var index = this.getAttribute("index");// console.log(this.getAttribute("index"));// console.log(contents[index]);
​for (var z = 0;z<contents.length;z++){contents[z].classList.add("hide");}
​contents[index].classList.remove("hide");}} 
​
</script>
​
</body>
</html>

jQuery

jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的css选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等

目前在市场上, 1.x , 2.x, 3.x 功能的完善在1.x, 2.x的时候是属于删除旧代码,去除对于旧的浏览器兼容代码。3.x的时候增加es的新特性以及调整核心代码的结构

根本上jquery就是一个写好的js文件,所以想要使用jQuery的语法必须先引入到本地

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>

查找标签

/*
​
基本选择器 :
​
$("#id")   
$(".class")  
$("element")  
$(".class,p,div")
​
后代选择器：
$(".outer div") 
​
筛选器：$().first()       $().last()          $().eq()     导航查找：  
​
$("div").children(".test")     
$("div").find(".test")  // 向下查找兄弟标签 
$(".test").next()               
​
// 查找所有兄弟标签  
$("div").siblings()  // 查找父标签：         
$(".test").parent() */

 

绑定事件

1. on 和 off
// 绑定事件
$().on("事件名",匿名函数)
​
// 解绑事件,给指定元素解除事件的绑定
$().off("事件名")
​
2. 直接通过事件名来进行调用
$().事件名(匿名函数)

 

操作标签

  • 文本操作

$("选择符").html()     // 读取指定元素的内容,如果$()函数获取了有多个元素,提取第一个元素
$("选择符").html(内容) // 修改内容,如果$()函数获取了多个元素, 则批量修改内容

  • value操作

$().val()

  • 属性操作

//读取属性值$("选择符").attr("属性名");   // 获取非表单元素的属性值,只会提取第一个元素的属性值
//操作属性$("选择符").attr("属性名","属性值");  // 修改非表单元素的属性值,如果元素有多个,则全部修改

  • css样式操作

获取样式
$().css("样式属性");   // 获取元素的指定样式属性的值,如果有多个元素,只得到第一个元素的值
​
操作样式
$().css("样式属性","样式值").css("样式属性","样式值");
$().css({"样式属性1":"样式值1","样式属性2":"样式值2",....})

  • class 属性操作

$().addClass("class1  class2 ... ...")   // 给获取到的所有元素添加指定class样式
$().removeClass() // 给获取到的所有元素删除指定class样式
$().toggleClass() // 给获取到的所有元素进行判断,如果拥有指定class样式的则删除,如果没有指定样式则添加

  • 节点操作

$("").append(content|fn)      // $("p").append("<b>Hello</b>");

 

Ajax请求

Ajax，一般中文称之为："阿贾克斯"，是英文 “Async Javascript And Xml”的简写，译作：异步js和xml传输数据技术。

ajax的作用： ajax可以让js代替浏览器向后端程序发送http请求，与后端通信，在用户不知道的情况下操作数据和信息，从而实现页面局部刷新数据/无刷新更新数据。

所以开发中ajax是很常用的技术，主要用于操作后端提供的数据接口，从而实现网站的前后端分离。

ajax技术的原理是实例化js的XMLHttpRequest对象，使用此对象提供的内置方法就可以与后端进行数据通信。

数据接口

数据接口，也叫api接口，表示后端提供操作数据/功能的url地址给客户端使用。

客户端通过发起请求向服务端提供的url地址申请操作数据【操作一般：增删查改】

同时在工作中，大部分数据接口都不是手写，而是通过函数库/框架来生成。

前后端分离

在开发Web应用中，有两种应用模式：

  • 前后端不分离

  • 前后端分离

ajax的使用

ajax的使用必须与服务端程序配合使用，但是开发中我们对于ajax请求的数据，不仅仅可以是自己写的服务端代码，也可以是别人写好的数据接口进行调用。

数据接口：

# 天气接口
https://v0.yiketianqi.com/api?unescape=1&version=v91&appid=43656176&appsecret=I42og6Lm&ext=&cityid=&city=
​
# 音乐接口
https://c.y.qq.com/v8/fcg-bin/fcg_v8_toplist_cp.fcg?g_tk=5381&uin=0&format=json&inCharset=utf-8&outCharset=utf-8%C2%ACice=0&platform=h5&needNewCode=1&tpl=3&page=detail&type=top&topid=36&_=1520777874472%E4%BD%9C%E8%80%85%EF%BC%9Atsia%E9%93%BE%E6%8E%A5%EF%BC%9Ahttps://www.jianshu.com/p/67e4bd47d981

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.hqwc.cn/news/238562.html

如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

在 AlmaLinux9 上安装Oracle Database 23c

在 AlmaLinux9 上安装Oracle Database 23c

在 AlmaLinux9 上安装Oracle Database 23c 0. 下载 Oracle Database 23c 安装文件1. 安装 Oracle Database 23c3. 连接 Oracle Database 23c4. &#xff08;谨慎&#xff09;卸载 Oracle Database 23c 0. 下载 Oracle Database 23c 安装文件 版权问题&#xff0c;下载地址请等待…
阅读更多...
怎么让百度快速收录，百度SEO收录工具

怎么让百度快速收录，百度SEO收录工具

百度收录对于一个网站的重要性不言而喻。拥有良好的百度收录意味着网站能够更好地被搜索引擎收录&#xff0c;为用户提供更精准的搜索结果。而怎样实现百度快速收录成为了许多网站管理员关注的焦点。 百度收录的重要性 百度是国内最大的搜索引擎之一&#xff0c;拥有数以亿计的…
阅读更多...
卷积神经网络（VGG-16）猫狗识别

卷积神经网络（VGG-16）猫狗识别

文章目录 一、前言二、前期工作1. 设置GPU&#xff08;如果使用的是CPU可以忽略这步&#xff09;2. 导入数据3. 查看数据 二、数据预处理1. 加载数据2. 再次检查数据3. 配置数据集4. 可视化数据 三、构建VG-16网络四、编译五、训练模型六、模型评估七、保存and加载模型八、预测…
阅读更多...
[github全教程]github版本控制最全教学------- 大厂找工作面试必备!

[github全教程]github版本控制最全教学------- 大厂找工作面试必备!

作者&#xff1a;20岁爱吃必胜客&#xff08;坤制作人&#xff09;&#xff0c;近十年开发经验, 跨域学习者&#xff0c;目前于新西兰奥克兰大学攻读IT硕士学位。荣誉&#xff1a;阿里云博客专家认证、腾讯开发者社区优质创作者&#xff0c;在CTF省赛校赛多次取得好成绩。跨领域…
阅读更多...
8、内部FLASH模拟EEPROM实验(STM32F407)

8、内部FLASH模拟EEPROM实验(STM32F407)

STM32编程方式 在线编程&#xff08;ICP,In-Circuit Programming&#xff09;: 通过JTAG/SWD协议或者系统加载程序(Bootloader)下载用户应用程序到微控制器中。 在程序中编程(IAP,In Application Programming):通过任何一种通信接口(如IO端口,USB,CAN,UART,I2C,SPI等)下载程…
阅读更多...
[论文阅读]Sparse Fuse Dense

[论文阅读]Sparse Fuse Dense

SFD Sparse Fuse Dense: Towards High Quality 3D Detection with Depth Completion 论文网址&#xff1a;SFD 论文代码&#xff1a;SFD 论文简读 本文主要关注如何利用深度完成技术提高三维目标检测的质量。论文提出了一种名为 SFD&#xff08;Sparse Fuse Dense&#xff0…
阅读更多...
iOS简单理解区分MVC、MVP、MVVM

iOS简单理解区分MVC、MVP、MVVM

MVC、MVP、MVVM 前言 这篇文章简单介绍MVC、MVP和MVVM三种架构&#xff0c;并配上一个简单的Swift demo来区分MVC和MVVM两种架构。 MVC 传统MVC 下图是传统结构MVC&#xff0c;可以看到这种结构是紧耦合的&#xff0c;不推荐使用。 苹果的MVC 如下图&#xff0c;这是苹果…
阅读更多...
AWS Remote Control ( Wi-Fi ) on i.MX RT1060 EVK - 1 “建立开发环境”

AWS Remote Control ( Wi-Fi ) on i.MX RT1060 EVK - 1 “建立开发环境”

这个系列的文章将叙述如何借由 NXP 的“evkmimxrt1060_aws_remote_control_wifi_nxp”这支 Sample Code&#xff0c;达到 NXP RT1060EVK 经由 U-Blox EVK-JODY-W263 将资讯传到 AWS 上&#xff0c;并可借由手机对 RT1060 EVK 的 LED 进行远端控制。 整体架构如下图所示&#x…
阅读更多...
漏洞扫描服务是什么

漏洞扫描服务是什么

漏洞扫描服务是维护网络安全的重要一环。通过定期或实时的漏洞扫描&#xff0c;组织可以及时发现并修复可能存在的安全威胁&#xff0c;增强自身网络的安全性。在选择漏洞扫描服务时&#xff0c;需要明确自身的需求和目标&#xff0c;并选择合适的工具和服务提供商。只有这样&a…
阅读更多...
TZOJ 1386 十转换转R进制

TZOJ 1386 十转换转R进制

答案&#xff1a; #include<stdio.h> char fun(int n) {if (n > 0 && n < 10) //如果是小于10进制的return n 48; //ASCII值48else if (n > 10 && n < 16) //如果是大于10进制小于16进制的return n 55; //ASCII值55elseretur…
阅读更多...
《微信小程序开发从入门到实战》学习三十八

《微信小程序开发从入门到实战》学习三十八

4.2 云开发JSON数据库 4.2.9 条件查询与查询指令 在查询数据时&#xff0c;有时需要对查找的数据添加一些限定条件&#xff0c;只获取满足给定条件的数据&#xff0c;这样的查询称为条件查询。 可以在集合引用上使用where方法指定查询条件&#xff0c;再用get方法&#xff0…
阅读更多...
28.线段树与树状数组基础

28.线段树与树状数组基础

一、线段树 1.区间问题 线段树是一种在算法竞赛中常用来维护区间的数据结构。它思想非常简单&#xff0c;就是借助二叉树的结构进行分治&#xff0c;但它的功能却非常强大&#xff0c;因此在很多类型的题目中都有它的变种&#xff0c;很多题目都需要以线段树为基础进行发展。…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023