网页开发 JS基础

news2025/2/25 19:16:14

目录

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.coloradmin.cn/o/1278801.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

基于SpringBoot的旅游信息网【源码好优多】

简介 旅游信息网是一款介绍旅游相关内容的网站&#xff0c;分为前台和后台部分&#xff0c;其中前台用户注册以后可以浏览景点、景点详情、预订景点、酒店、车票、保险、以及浏览旅游攻略、个人信息修改、在线留言等&#xff0c;管理员在后台对景点、攻略、订单信息、酒店信息、…

【java+vue+微信小程序项目】从零开始搭建——健身房管理平台(2)后端跨域、登录模块、springboot分层架构、IDEA修改快捷键、vue代码风格

项目笔记为项目总结笔记,若有错误欢迎指出哟~ 【项目专栏】 【java+vue+微信小程序项目】从零开始搭建——健身房管理平台(1)spring boot项目搭建、vue项目搭建、微信小程序项目搭建 【java+vue+微信小程序项目】从零开始搭建——健身房管理平台(2)后端跨域、登录模块、sp…

mysql手动事务

目录 &#x1f680;&#x1f680; 简要 手动事务使用案例 事务的特性 事务的隔离级别 脏读 不可重复读 幻读 查看事务隔离级别 设置隔离级别 &#x1fae1;&#x1fae1; 简要 mysq事务是自动提交的, 例如insert, update语句等 如下: 想要手动设置mysql事务就需…

SmartSoftHelp8,Web前端性能提升,js,css,html 优化压缩工具

Web前端js&#xff0c;css&#xff0c;html 优化压缩工具 提高web 前端性能&#xff0c;访问速度优化专业工具 CSS&#xff0c;js&#xff0c;html 单文件&#xff0c;多文件 单个&#xff0c;批量压缩优化 web前端优化&#xff1a;减少空格&#xff0c;体积压缩&#xff0…

一文通关物理机Ubuntu22.04融合部署OpenStack

前言 因为博主笔记本是amd的&#xff0c;就最近搞了个小主机&#xff0c;就想装个云平台玩玩&#xff0c;搞了三四天才正儿八经弄完&#xff0c;摸了一大堆错误出来&#xff0c;在文章前面我会将这些需要注意的点列举出来。 环境 物理环境&#xff1a; i5 12450H 32G内存 无线…

Windows微软常用运行库合集2023

微软常用运行库合集适用于Windows系统的运行库合集包&#xff0c;基于微软官方的运行库而制作的&#xff0c;包括了常用的vb&#xff0c;vc2005/2008/2010/2012/2013/2017/2019/2005-2022&#xff0c;Microsoft Universal C Runtime&#xff0c;VS 2010 Tools For Office Runti…

实用工具网站合集值得收藏![搜嗖工具箱]

最近一段时间有点忙&#xff0c;一直没有更新在此给大家说声抱歉哈&#xff0c;有些小伙伴儿私信说想要用到的工具&#xff0c;茶壶儿也会尽可能满足大家&#xff01;今天我们要分享的工具主要有以下几款&#xff0c;我们来一起看一下吧&#xff1f; 一帧秒创 https://aigc.y…

ctfhub技能树_web_web前置技能_HTTP

目录 一、HTTP协议 1.1、请求方式 1.2、302跳转 1.3、Cookie 1.4、基础认证 1.5、响应包源代码 一、HTTP协议 1.1、请求方式 注&#xff1a;HTTP协议中定义了八种请求方法。这八种都有&#xff1a;1、OPTIONS &#xff1a;返回服务器针对特定资源所支持的HTTP请求方法…

jsp 管理员登录界面与登录验证

验证分两种情况 &#xff0c;成功&#xff0c;进入管理员页&#xff0c;可以看信息和删记录 失败&#xff0c;直接给出登录失败&#xff0c;然后重新登录 login.jsp <% page language"java" contentType"text/html; charsetUTF-8"pageEncoding"UTF…

基于51单片机控制恒压供水系统设计

**单片机设计介绍&#xff0c;基于51单片机的篮球计分器设计 文章目录 一 概要二、功能设计设计思路 三、 软件设计原理图 五、 程序六、 文章目录 一 概要 设计一个基于51单片机控制的恒压供水系统是一个复杂的工程&#xff0c;涉及到硬件设计和软件编程等多个方面。以下是一…

TypeScript编程语言学习,为学习HarmonyOS开发做准备

1. 编程语言 ArkTS是HarmonyOS优选的应用开发语言&#xff0c;它在TypeScript&#xff08;TS&#xff09;的基础上&#xff0c;匹配ArkUI扩展&#xff0c;扩展了声明式UI、状态管理等相应的能力。 JavaScript&#xff08;JS&#xff09;&#xff0c;使用在Web应用开发&#xf…

MacOS qemu运行loongarch linux

本文章参考了 https://github.com/LeisureLinux/bilibili/blob/master/scripts/qemu-busybox.sh#L205 windows qemu安装飞腾Aarch64 Loongarch64 操作系统 亲测_qemu安装arm系统-CSDN博客 https://www.cnblogs.com/missed-forest/p/17667862.html 1. 安装qemu brew instal…

在linux服上部署vue+springboot+nginx项目

一、环境准备 1、安装winscp便于可视化操作linux&#xff1a;winscp安装及关联putty使用_putty.exe没有找到_cherishSpring的博客-CSDN博客 2、安装jdk&#xff1a;linux系统安装jdk-CSDN博客 3、安装mysql&#xff1a;Linux7安装mysql数据库以及navicat远程连接mysql-CSDN博…

opencv知识库:利用cv2.resize()函数进行图像缩放

引言 在numpy知识库&#xff1a;深入理解numpy.resize函数和数组的resize方法中&#xff0c;小编较为详细地探讨了numpy的resize函数背后的机理。从结果来看&#xff0c;numpy.resize函数并不适合对图像进行缩放操作。而opencv中的resize函数虽然和numpy的resize函数同名&…

Hdoop学习笔记(HDP)-Part.19 安装Kafka

目录 Part.01 关于HDP Part.02 核心组件原理 Part.03 资源规划 Part.04 基础环境配置 Part.05 Yum源配置 Part.06 安装OracleJDK Part.07 安装MySQL Part.08 部署Ambari集群 Part.09 安装OpenLDAP Part.10 创建集群 Part.11 安装Kerberos Part.12 安装HDFS Part.13 安装Ranger …

《功能磁共振多变量模式分析中空间分辨率对解码精度的影响》论文阅读

《The effect of spatial resolution on decoding accuracy in fMRI multivariate pattern analysis》 文章目录 一、简介论文的基本信息摘要 二、论文主要内容语音刺激的解码任务多变量模式分析&#xff08;MVPA&#xff09;K空间 空间分辨率和平滑对MVPA的影响平滑的具体过程…

SpringBoot+SSM项目实战 苍穹外卖(2)

继续上一节的内容&#xff0c;本节完成新增员工、员工分页查询、启用禁用员工账号、编辑员工、导入分类模块功能代码。 目录 新增员工(完整流程分为以下五个部分)需求分析和设计代码开发功能测试代码完善 (ThreadLocal 线程局部变量)代码提交 员工分页查询代码完善 扩展Spring …

【LeetCode刷题笔记】103. 二叉树的锯齿形层序遍历

创作不易&#xff0c;本篇文章如果帮助到了你&#xff0c;还请点赞 关注支持一下♡>&#x16966;<)!! 主页专栏有更多知识&#xff0c;如有疑问欢迎大家指正讨论&#xff0c;共同进步&#xff01; 更多算法知识专栏&#xff1a;算法分析&#x1f525; 给大家跳段街舞感谢…

【数据结构】 堆排序与TopK问题详解

在学习完堆的创建后&#xff0c;就轮到了标题的两个问题 这两个问题在实际生活中会有比较强的实际问题解决能力 先分别解释一下 堆排序&#xff1a; 运用堆的思想进行排序&#xff0c;时间复杂度为O(NlogN)TopK&#xff1a; 从一大堆数据中选择K个最大或最小的数据&#xff0c…

oj赛氪练习题

数组调整 import java.util.Scanner;public class Main {public static void main(String[] args) {Scanner scanner new Scanner(System.in);int n scanner.nextInt();int k scanner.nextInt();int[] arr new int[n];for (int i 0; i < n; i) {arr[i] scanner.nextIn…