前端开发语言——html、css与JavaScript

最新推荐文章于 2024-04-07 23:35:10 发布

柠七99

最新推荐文章于 2024-04-07 23:35:10 发布

阅读量2k

点赞数

分类专栏： javaWeb 文章标签： javascript ajax

本文链接：https://blog.csdn.net/m0_46657493/article/details/115242259

版权

javaWeb 专栏收录该内容

24 篇文章 1 订阅

订阅专栏

前端开发基本语言
1.javascript:控制页面的行为

2. css:定义页面的样式

3. html:定义页面的内容

在这里插入图片描述

jquery是javaSript中的一个库，jquery是JavaScript中的一个子集。通过使用jquery框架中的一些接口，我们可以更方便的实现一些网页操作在这里插入图片描述

app.js文件

js文件时JavaScript语言文件的扩展名
JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型
JavaScript已经被广泛用于Web应用开发，常用来为网页添加各式各样的动态功能，为用户提供更流畅美观的浏览效。
通常JavaScript脚本是通过嵌入在html中来实现自身的功能的

ajax: 可以用于创建快速动态的网页。ajax是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。

注：Jquery的ajax方法，是以异步（不重新加载整个网页的情况下，对网页的某部分进行更新(局部刷新） 方式发起http网络请求

ajax方法：

ajax() 方法用于执行 AJAX（异步 http）请求
ajax() 方法通过 http请求加载远程数据

//内容还没有加载完就执行该方法
// function load() {
//     alert("load ok");
// }

//ajax
//内容加载完了才执行该方法
//function定义函数
$(function () { //jquery加载方式
    alert("load ok");
    //自己发起网络请求
    //Jquery的ajax方法，是以异步方式发起http网络请求，格式 键:值
    //方法的传入参数，是json格式对象
    let data = { //使用let定义变量
        username:"abc",
        password:"123"
    };
    $.ajax({
        type:"POST", //请求方法 get / post
        url:"data/login.json", //请求路径
        contentType:"application/json", //请求的数据类型(此处以json方式请求)，默认:application/x-www-form-urlencoded
        data:JSON.stringify(data),  //请求数据,如果数据类型是json,需要将json对象转化为字符串
        success:function (r) { //响应状态码200的回调方法
            if (r.success) {
                console.log(r.data1.name);
                //alert(JSON.stringify(r));
            } else {
                alert("success=false");
            }
            //alert(JSON.stringify(r));
        },error:function (jqXHR,textStatus,errorThrown) {//4XX，5XX状态码的错误回调
            console.log("jqXHR={\n"+jqXHR.status+",\n"+jqXHR.statusText+",\n"+jqXHR.responseText
            +"},\ntextStatus="+textStatus+",\nerrorThrown="+errorThrown);
        }
        //失败的函数 error
    });
});

alert(“load ok”)

json的作用：

使用ajax进行前后台数据交换
移动端与服务端的数据交换

json格式：

注：只要是对象就用{}，只要是集合就用[]，例如一下data2就是一个集合

{
  "success": true,
  "message": "ok",
  "data1": {
    "name": "张三"
  },
  
  "data2": [{
    "name": "张三"
  },{
    "name": "李四"
  }],
  
  "data3": [1,2,3]
}

app .css文件
基本的css

1.1 元素选择器：

h1{}
body{}
p{}

1.2 id选择器：

#id{}
li#hello{} 所有id是hello的li标签

1.3类选择器 .class
1.4伪类选择器等

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
	    body{
            background: aquamarine;  <!--定义背景颜色-->
        }
        h4 {
            color : red; <!--字体颜色-->
			font : 40px; <!--font -size  定义字体大小-->
        }	
		#id1 {
	        color : blue;
	    }
		li.id2 {
		    color : green;
		}	
    </style>  
</head>
<body>
     <h4>css</h4>
	 <li id="id1"> hello</li>
	 <li class="id2"> world</li>

</body>
</html>

在这里插入图片描述

index.html文件

<html>
<header>
    <meta charset="UTF-8">
    <title>老王之家</title>
    <link href="app1.css" rel="stylesheet">
    <!--引入jquery文件-->
    <script type="text/javascript" src="js/jquery@3.3.1/jquery.js"></script>
    <!-- 引入javascript文件 -->
    <script type="text/javascript" src="app.js"></script>

    <script>
        //这里是html定义javascript
    </script>
</header>
<!-- 前端字符串的使用，外边用单引号，里面用双引号，或者反过来-->
<!--<body οnlοad="alert('OK');"> -->
<!--自定义函数 js文件中function定义函数 -->
<!--<body οnlοad="load();">-->
    保留信息<br>
    <!--页面跳转 -->
    <!--br 换行-->
    <input type="button" value="跳转到主页" onclick="window.open('home.html')"><br>
    <input type="button" value="跳转到本页面" onclick="window.open('index.html')"><br>
    <a href="home.html">跳转到主页</a><br>
    <a href="index.html">跳转到本页面</a><br>

</body>
</html>

如何访问？
使用package打包（推荐先使用clean清除之后再打包），然后在目录下的target包下找到war包，复制粘贴到tomcat的webapp下，war包会自动解压。
在这里插入图片描述

在这里插入图片描述
访问时网址：

http://localhost:8080/maven-1.0-SNAPSHOT/index.html

柠七99

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
前端开发语言——html、css与JavaScript

前端开发基本语言<a href">前端开发基本语言：html:定义页面的内容css:定义页面的样式javascript:控制页面的行为jquery是javaSript中的一个库，jquery是JavaScript中的一个子集。通过使用jquery框架中的一些接口，我们可以更方便的实现一些网页操作app.js文件 js文件时JavaScript语言文件的扩展名JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型
复制链接

扫一扫