Document

javawebweb前端开发

2024-02-13
dfer
316
前端 CSDN

web

全球广域网，也叫万维网（www world wide web）,能够通过浏览器访问的网站

前端响应框架，后端响应数据，前端给后端的地址

web前端开发

www制定网页标准

html:结构

css:样式表现

script:动作行为

html,css

html（hypertext markup language）:超文本标记语言（可以引入文件视频音频）

xml:可扩展的标记性语言

不区分大小写

可以用单引号和双引号属性

语法松散

shift+!出结构

img

id不能重复

超链接

controls="controls"

br换行

页面布局盒子模型

通过margin居中

上下0，左右自动

表格边框

表单标签

label聚焦

button长方形单选，radio圆形单选

JS

脚本语言：直接用浏览器打开

css放body里面,js放后面

var可以重复定义

数据类型

函数

对象

JSON

必须使用双引号

BOM(浏览器对象模型)

DOM文档对象模型

设置新的值

字体设置为红色

事件监听

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=, initial-scale=1.0">

<title>JS事件监听</title>

</head>

<body>

<img id="light" src="../快速入门/img/off.gif">

<br>

<br>

<input type="button" value="点亮" οnclick="on()">

<input type="button" value="熄灭" οnclick="off()">

<br>

<br>

<input type="text" id="name" value="ITCAST" οnfοcus="lower()" οnblur="upper()"></input>

<br>

<input type="checkbox" name="hobby"> 电影</input>

<input type="checkbox" name="hobby"> 旅游</input>

<input type="checkbox" name="hobby"> 游戏</input>

<br>

<input type="button" value="全选" οnclick="checkAll()">

<input type="button" value="反选" οnclick="reverse()">

</body>

<script>

function on() {

/* 1.获取img元素对象 */

var img = document.getElementById('light');

img.src = "../快速入门/img/on.gif";

}

function off() {

document.getElementById('light').src = "../快速入门/img/off.gif";

}

function lower() {

//1.获取输入框元素对象

var input = document.getElementById('name');

input.value = input.value.toLowerCase();

}

function upper() {

var input = document.getElementById('name');

input.value = input.value.toUpperCase();

}

function checkAll() {

var hobbys = document.getElementsByName('hobby');

for (let i = 0; i < hobbys.length; i++) {

const element = hobbys[i];

element.checked = true;

}

}

function reverse() {

var hobbys = document.getElementsByName('hobby');

for (let i = 0; i < hobbys.length; i++) {

const element = hobbys[i];

element.checked = false;

}

}

</script>

</html>

VUE

#ID选择器

要使用指令必须要在div中使用

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <script src="js/vue.js"></script>

</head>

<body>

    <div id="app">

        

        <table border="1" cellspacing="0" width="60%">

            <tr>

                <th>编号</th>

                <th>姓名</th>

                <th>年龄</th>

                <th>性别</th>

                <th>成绩</th>

                <th>等级</th>

            </tr>

            <tr align="center" v-for="(user,index) in users">

                <td>{{index+1}}</td>

                <td>{{user.name}}</td>

                <td>{{user.age}}</td>

                <td>

                    <span v-if="user.gender==1">男</span>

                    <span v-if="user.gender==2">女</span>

                </td>

                <td>{{user.score}}</td>

                <td>

                    <span v-if="user.score>=85">优秀</span>

                    <span v-else-if="user.score>=60">及格</span>

                    <span style="color: red;" v-else>不及格</span>

                </td>

            </tr>

        </table>

    </div>

</body>

<script>

    new Vue({

        el: "#app",

        data: {

            users: [

                {

                    name: "Tom",

                    age: 20,

                    gender: 1,

                    score: 78

                }, {

                    name: "Rose",

                    age: 18,

                    gender: 2,

                    score: 86

                }, {

                    name: "Rose2",

                    age: 18,

                    gender: 2,

                    score: 50

                }, {

                    name: "Rose3",

                    age: 18,

                    gender: 1,

                    score: 86

                }

            ]

        }, methods: {

        },

    })

</script>

</html>