html css javascript jquery vue2基础

HTML、CSS、JS、jQuery Vue2 CDN模式

快速安装 vscode + live server插件
在桌面建一个文件夹,新建一个文件index.html 使用vscode打开文件夹访问index.html

学习网站

html+css+javascript 文档网站

简称mdn,对当下html, css, javascript 描述具有权威的解释之一的网站
mdn链接

html+css常用代码

vue-demo页面

vue2官网

ui框架官网 element ui

学习视频

html+css的学习视频:

html+css的学习视频

javascript+jquery的学习视频:

javascript+jquery的学习视频

vue2+vue3的学习视频,只看vue2的部分:

vue2+vue3的学习视频,只看vue2的部分

html节点

 <!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <!--TDK三剑客-->
        <title>文档标题</title>
        <meta name="Keywords" content="英文逗号分隔的关键词列表(始终与页面有关)">
        <meta name="Description" content="页面描述,150字内,搜索引擎根据选择此描述来显示搜索结果。">
        <!--防浏览器缩放异常-->
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover" />
        
        <!--设备优先使用谷歌内核适配-->
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        
        <!--以webkit Chromium谷歌内核渲染页面-->
        <meta name="renderer" content="webkit">
        
        <!--防页面缓存-->
        <meta http-equiv="Expires" content="0">
        <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
        <meta http-equiv="Pragma" content="no-cache" />
        <style>
            a{
                text-decoration: none; //不要下划线
            }
            #container{
                display: flex;
                align-items: center;
            }
        </style>
    </head>
    <body>
        <div id="container">
            <span class="container-text">111<span>
            <span class="container-text">222<span>
        </div>
        <a href="https://www.baidu.com">
        <img src="https://www.qianduange.cn/upload/article/banner.png">
        
        <h1>大标题全文唯一</h1>
        <h2>副标题</h2>
        <h6>最小标题</h6>
 
        <form>
            <input type="text" placeholder="输入文本" value="" >
			<input type="hidden" placeholder="隐藏域" value="" >
			<input type="radio" placeholder="单选"  name="" id="">
			<input type="checkbox" placeholder="多选"  name="" id="">
            <textarea placeholder="多行文本"  name="" id=""></textarea>
        </form>
 
        <script>
            var a=1;
            console.log(a);
        <script>
    </body>
</html>
复制

css节点

     width: 365px;  /*宽度*/
    height: 32px;   /*高度*/
 
    font-size: 34px; /*字体大小*/
    color: #333333; /*字体颜色*/
    line-height: 38px; /*行高*/
    text-align : center; /*文字居中 left居左 right居右*/
    font-family: PingFang SC, '微软雅黑';  /*字体*/ 
    font-weight: bold; /*加粗 normal正常 100-900数值 500以上加粗*/
 
    background-color: #FFFFFF; /*背景颜色*/
    background: url('//assets.huibo.com/images/bg_login.png') no-repeat; /*背景图*/
    background-size: 100% 100%; /* 背景图铺满 */
 
    border : 1px solid #eee; /*一个像素的边框线*/
    
    border-radius : 10px; /*四个角都是圆角*/
    border-radius : 10px 10px 10px 10px; /*上右下左圆角*/
 
    float:left; float:right; /*靠左侧浮动 靠最右侧浮动 */
 
    position : absolute; /*绝对定位,会使元素脱离正常的文档流,需要父级节点写relative,不然相对于body定位*/
    position : relative /*相对自己定位,调整top,left , 不会会使元素脱离正常的文档流*/
    position : fixed /*固定与窗口定位  */
    z-index:1; /* 层级1-100000000*/
    left:0; /*距离左边的距离*/
    top:0; /*距离上边的距离*/
    right:0; /*距离右边的距离*/
    bottom:0; /*距离下边的距离*/
    overflow: hidden; /*超出部分隐藏*/
    overflow: visible; /*超出部分显示*/
    margin: 10px 20px 30px 40px; /*上右下左*/ 兄弟节点使用使用margin
    padding:  10px 20px 30px 40px; /*上右下左*/ 父子节点使用padding
    margin-top: 10px; /*距离上间距*/
    padding-top: 10px; /*指定元素内容区顶部与该元素内边距边缘之间的空间大小*/
 
    display     : block; ///块级元素
    display     : inline-block; //行内元素
   
    /*flex垂直居中对齐*/
    display     : flex;
    align-items : center;
    
    /*flex水平居中对齐*/
    display     : flex;
    justify-content : center;
    
    /*flex水平垂直居中对齐*/
    display         : flex;
    align-items     : center;
    justify-content : center;
    
	/*子节点 自动换行 --start--*/
	.list{
	    display: flex;
	    flex-wrap: wrap;
	}
	.item{
	    flex-shrink: 0;
	    margin: 0 16rpx 16rpx 0;
	}
	/*子节点 自动换行 --end--*/
	
    /*伪类*/
    :hover{ /* 移入交互*/
 
    }
    :active{ /* 通常是点击交互*/
 
    }
    :first-child 和 :last-child{ /* 第一个同级子元素 最后一个同级子元素 */
 
    }
    :nth-child(1){ /* css中,下标从从1开始 */
 
    } 
	/*css英文数字自动跟随行尾换行*/
	word-break: break-all; 
	
	 /*css省略号 同时防止数字及英文文本溢出*/
	.ellipsis{
	    overflow: hidden;
	    white-space: nowrap;
	    word-break: break-all;
	    text-overflow: ellipsis;
	}
	.ellipsis2{ /*显示多行，省略号*/
	    text-overflow: -o-ellipsis-lastline;
	    overflow: hidden;
	    text-overflow: ellipsis;
	    display: -webkit-box;
	    -webkit-line-clamp: 2; /* 2行省略 */
	    line-clamp: 2; /* 2行省略 */
	    -webkit-box-orient: vertical;
	}
	
	/* input placeholder设置样式*/
	::-webkit-input-placeholder{
	    color: #cccfdb;
	}
	:-moz-placeholder{
	    color: #cccfdb;
	}
	::-moz-placeholder{
	    color: #cccfdb;
	}
	:-ms-input-placeholder{
	    color: #cccfdb;
	}
	/*清除浮动*/
	.clearfix:after{
	    content: "";
	    display: block;
	    height: 0;
	    clear: both;
	    visibility: hidden;
	}
	/*滚动条*/
	*{
		scrollbar-width: thin; /*浏览器滚动条窄边*/
	}
	/* 针对Webkit内核浏览器（如Chrome、Safari等） */
	::-webkit-scrollbar {
		width: 5px; /* 滚动条宽度 */
		border-radius: 5px;
	}
	::-webkit-scrollbar-thumb{
		background-color: #DCDEEC;
		border-radius: 5px;
		cursor: pointer;
	}
	::-webkit-scrollbar-thumb:hover{
		background-color: #9a9ba5;
	}
	复制

JavaScript编程基础

 alert('1111') //弹窗一个弹窗
 
//定义一个变量
 
var a=1; // 数字
let a=1; // 数字
const a=1; // 数字
 
let name = "Alice"; // 字符串
let isStudent = true; // 布尔值
 
//判断
if(name == 'Alice'){
    console.log('我是Alice')
}else if(name == 'Tom'){
    console.log('Tom')
}else{
    console.log('我是谁?')
}
 
document.getElementById("container1")  //全文找id返回单个元素
document.getElementsByClassName("container2") //全文找class 返回元素数组
document.getElementsByTagName('h1') //全文找标签 <h1> <a> 
document.querySelector(".container2")  //class id 返回第一个匹配的元素
document.querySelectorAll(".container2")   //class id 返回所有匹配的元素
document.createElement()  //创建一个新的HTML元素但不将其添加到DOM中
document.appendChild() //将一个节点添加到指定父节点的子节点列表的末尾
document.removeChild() //从DOM中删除一个节点
 
addEventListener()  //事件监听器  
removeEventListener() //移除事件监听器
 
var setTimeoutAlert = setTimeout(funtion(){  //延时器 ,延迟多久后执行,只执行一次
   alert('1秒后执行')
},1000)  
clearTimeout(setTimeoutAlert) //清除延时器
 
var a=1;
var setAdd = setInterval(funtion(){ //定时器,定时每隔多久执行,一直执行
   a++;
},1000)  
clearInterval(setAdd) //清除定时器
 
cookie //每个域名下的所有Cookie总数不能超过3000个左右，每个Cookie的最大尺寸通常为4KB
 
localStorage和sessionStorage //永久缓存和浏览器关闭前缓存复制

String字符串常见操作

1. 字符串连接

使用 + 运算符可以将多个字符串连接在一起。

 let str1 = "Hello, ";
let str2 = "world!";
let result = str1 + str2;
console.log(result); // 输出: Hello, world!复制

2. 字符串长度

使用 length 属性获取字符串的长度。

 let text = "Hello";
console.log(text.length); // 输出: 5复制

3. 字符串查找

返回指定值首次出现的位置，如果未找到则返回 -1。

 let str = "Hello, world!";
console.log(str.indexOf("world")); // 输出: 7复制

4. 字符串提取

slice(start, end)：提取从 start 到 end（不包括 end）之间的字符。

 let str = "Hello, world!";
console.log(str.slice(0, 5)); // 输出: Hello复制

substring(start, end)：类似于 slice()，但是不能接受负数作为参数。
```
 console.log(str.substring(7, 12)); // 输出: world复制
```
substr(start, length)：从 start 开始提取指定长度的字符。
```
 console.log(str.substr(7, 5)); // 输出: world复制
```

5. 字符串替换

replace(oldValue, newValue)：替换某个子字符串为新的子字符串。注意默认只替换第一次出现的匹配项。

 let str = "Hello, world!";
console.log(str.replace("world", "JavaScript")); // 输出: Hello, JavaScript!复制

若要替换所有匹配项，可以使用正则表达式并添加全局标志 g：

 let text = "one two one two";
console.log(text.replace(/one/g, "three")); // 输出: three two three two复制

6. 字符串大小写转换

toUpperCase()：转换为大写。

 let str = "hello";
console.log(str.toUpperCase()); // 输出: HELLO复制

toLowerCase()：转换为小写。

 console.log(str.toLowerCase()); // 输出: hello复制

7. 字符串拆分

split(separator, limit)：根据指定的分隔符分割字符串，返回一个数组。

 let str = "apple,banana,cherry";
console.log(str.split(",")); // 输出: ["apple", "banana", "cherry"]复制

8. 字符串模板（ES6）

使用反引号（`）创建模板字符串，允许嵌入变量和表达式。

 let name = "Alice";
let age = 25;
console.log(`My name is ${name} and I am ${age} years old.`); 
// 输出: My name is Alice and I am 25 years old.复制

这些只是JavaScript中一些基本的字符串操作方法。通过组合使用这些方法，可以实现更复杂的字符串处理逻辑，满足各种开发需求。

Array数组常见操作

循环

 let arr = [1, 2, 3];
for(let i=0; i<arr.length; i++){
    console.log(arr[i]); // 输出: 1, 2, 3
}复制

使用 forEach 循环遍历数组

 let arr = [1, 2, 3];
arr.forEach(function(value) {
    console.log(value);  // 输出: 1, 2, 3
});复制

添加元素到数组的末尾

 let arr = [1, 2, 3];
arr.push(4);
console.log(arr); // 输出: [1, 2, 3, 4]复制

在数组开头添加一个或多个元素，并返回数组的新长度。

 let arr = [1, 2, 3];
arr.unshift(0);
console.log(arr); // 输出: [0, 1, 2, 3]复制

根据索引位置移除数组中的元素，还可以指定要移除的元素数量。

 let arr = [1, 2, 3];
let removed = arr.splice(1, 1); // 从索引1开始，移除1个元素
console.log(arr); // 输出: [1, 3] 因为从索引1处移除了值为2的元素复制

数组连接

 let arr = [1, 2, 3];
let newArr = arr.concat([4, 5]);
console.log(newArr); // 输出: [1, 2, 3, 4, 5]复制

返回找到的第一个匹配项的索引，如果没有找到则返回-1

 let arr = [1, 2, 3];
let index = arr.indexOf(2);
console.log(index); // 输出: 1复制

判断数组是否包含某个值，返回布尔值

 let arr = [1, 2, 3];
let hasTwo = arr.includes(2);
console.log(hasTwo); // 输出: true复制

创建一个新数组，其结果是对原数组中的每个元素调用提供的函数后的返回值

 let arr = [
    { name: 'Alice', age: 25 },
    { name: 'Bob', age: 30 },
    { name: 'Charlie', age: 35 }
];
let names = arr.map(function(item) {
    return item.name;
});
console.log(names); // 输出: ["Alice", "Bob", "Charlie"]复制

过滤、筛选

 let arr = [
    { name: 'Alice', age: 25 },
    { name: 'Bob', age: 30 },
    { name: 'Charlie', age: 35 }
];
let noBobArray = arr.filter((item) => item.name !== 'Bob');
console.log(noBobArray); 
// 输出: [
//          { name: 'Alice', age: 25 },
//          { name: 'Charlie', age: 35 }
//      ]复制

查找元素

 	var value = [1, 5, 10, 15].find((value, index)=> { //返回匹配中的第一个值, 未找到返回undefined
	  return value > 9;
	}) // 10
	
	var index = [1, 5, 10, 15].findIndex((value, index)=> { //返回匹配中第一个的下标,未找到返回-1
	  return value > 9;
	}) // 2复制

slice() 提取不会修改原数组

 let fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
let citrus = fruits.slice(1); // 从索引1开始到结尾
console.log(citrus); // 输出: ["Orange", "Lemon", "Apple", "Mango"]
 
let citrusShort = fruits.slice(1, 3); // 从索引1开始到索引3之前
console.log(citrusShort); // 输出: ["Orange", "Lemon"]
 
let citrusNegative = fruits.slice(-3, -1); // 从倒数第三个元素开始到倒数第一个元素前
console.log(citrusNegative); // 输出: ["Lemon", "Apple"]复制

Object对象见操作

 当然，以下是按照您提供的格式整理的关于操作JavaScript对象`person`的示例：
 
```javascript
var person = {
    name: "Alice",
    age: 25,
    isStudent: true
};
var person1={
	name:'Tom',
	money:'2000元'
}
 
//合并两个对象
var person2 = Object.assign({}, person, person1); 
/*
var person2 = {
    name: "Tom", // 'Tom' 覆盖了 'Alice'
    age: 25, // 来自于 person 对象
    isStudent: true, // 来自于 person 对象
    money: '2000元' // 来自于 person1 对象
};
 
*/
// 访问属性
console.log(person.name); // 输出: Alice
console.log(person['name']); // 输出: Alice
 
// 修改属性
person.age = 26; // 修改属性
console.log(person.age); // 输出: 26
 
// 添加新属性
person['money'] = 1000; // 添加一个属性
console.log(person.money); // 输出: 1000
 
// 删除属性
delete person.isStudent; // 删除一个属性
console.log(person.isStudent); // 输出: undefined
 
// 检测属性是否存在
// 使用 in 运算符
console.log("name" in person); // 输出: true
 
// 使用 hasOwnProperty() 方法
console.log(person.hasOwnProperty("name")); // 输出: true
 
// 遍历对象属性使用 for...in 循环
for (var key in person) {
    console.log(key); // 输出: name, age, money
    console.log(person[key]); // 输出: Alice, 26, 1000
}
 复制

jQuery简化DOM操作

  $('div'); // 选取所有的<div>元素
 
    $('.class'); // 选取所有具有特定类名的元素
 
    $('.class'); // 选取具有特定ID的元素
    $('.class').parent(); //找当节点的父级   
    $('.class').parents(".parent");  //一直向上查找所有父级元素,返回一个节点数组
    $('.class').closest(".parent"); //一直向上查找祖先元素,仅返回第一个匹配的祖先元素
    $('.class').siblings()  //所有同胞元素
    $('.class').siblings('selector') //匹配到的全部同级元素
    $('.class').next() //下一个同胞元素
    $('.class').prev() //前一个同胞元素
 
    $('.class').each(function(index, element){
        $(this) //指向当前节点
        $(element) //指向当前节点
    })
    var defult_obj = {a:1,b:2,c:3}
    var new_obj = {d:4,e:5,f:6};
    //合并两个对象
    var merge_obj = $.extend(defult_obj, new_obj);
    // merge_obj = {a:1,b:2,c:3,d:4,e:5,f:6}
 
    //遍历数组(没有附加参数)
    var array = [1,2,3,4,5];
    $.each(array, function(i, value) {
        this;   //this指向当前元素
        i;     //i表示array当前下标
        value;   //value表示array当前元素
    });
 
    //遍历对象(没有附加参数)
    var object = {a:1,b:2,c:3}
    $.each(object, function(name, value) {
        this;   //this指向当前属性的值
        name;   //name表示object当前属性的名称
        value;   //value表示object当前属性的值
    });
    var html = $('div').html(); // 获取<div>内的HTML内容
 
    $('div').html('<p>New content</p>');  // 设置<div>内的HTML内容
 
    $('div').addClass('newClass'); //添加类名,写样式
    $('div').removeClass('oldClass'); //删除类名,写样式
 
    $('div').attr('data-value'); // 获取<div>元素的data-value属性值
 
    $('img').attr('src'); // 获取<img>元素的src属性值
    $('img').attr('src', 'newImage.jpg'); // 设置<img>元素的src属性值
 
    $('button').click(function() {
        alert('Button clicked!');
    });
    $('button').on('click', function() {
        alert('Button clicked!');
    });
    $('body').on('click','button', function() {
        alert('Button clicked!');
    });
 
 
    $.ajax({
        url: '/test/demo',
        success: function(result){
            $('#container').html(result);
        }
    });
 
    $.get('/test/demo?a=1&b=2', function(res) {
        console.log(res);
    });
 
    $.post('/test/demo', {name: 'John', time: '2pm'}, function(res) {
        console.log(res);
    });
 复制

Vue2 cdn模式模板

vue2官网

ui框架官网 element ui

 <!DOCTYPE html>
<html>
 
<head>
    <meta charset="UTF-8">
    <title>Vue2 cdn模式</title>
    <link rel="stylesheet" href="https://assets.cdn.com/cdn_pkg/company-vue-element/company-vue-element.css">
    <script src="https://assets.cdn.com/js/jquery-1.8.3.min.js"></script>
    <script src="https://assets.cdn.com/cdn_pkg/h5-vant/vue.min.js"></script>
    <script src="https://assets.cdn.com/cdn_pkg/pc-vue-element/element.js"></script>
</head>
 
<body>
    <div id="app">
        <template>
            <span>Message: {{ msg }}</span>
            <div v-bind:id="dynamicId"></div>
            <div :id="dynamicId"></div>
            <a :href="link_url"></a>
            <button @click="handleAdd()">添加数量</button>
            <input v-model="addNum" :value="addNum">
            <img :src="img_url">
            <p v-if="isRender">现在你看到我了</p>
            <p v-show="isShow">现在你看到我了</p>
 
            <button @click.stop="handleClick">1111</button>
 
            <ul id="example-1">
                <li v-for="item in items" :key="item.message">
                    {{ item.message }}
                </li>
            </ul>
 
 
            <div v-bind:class="{ 'active': isActive, 'disable': isDisable }"
                :class="['container', errorClass, isDisable ? 'disable':'']"></div>
 
 
            <!--vue element ui的组件 所有的组件标签都需要结尾渲染的标签-->
            <el-row>
                <el-button>默认按钮</el-button>
                <el-button type="primary">主要按钮</el-button>
                <el-button type="success">成功按钮</el-button>
                <el-button type="info">信息按钮</el-button>
                <el-button type="warning">警告按钮</el-button>
                <el-button type="danger">危险按钮</el-button>
            </el-row>
            <el-input-number v-model="num" @change="handleChange" :min="1" :max="10" label="描述文字"></el-input-number>
            <el-date-picker v-model="dateValue1" type="date" placeholder="选择日期">
            </el-date-picker>
        </template>
    </div>
 
    <script>
        const item = {
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
        };
 
        var VueDom = new Vue({
            el: '#app',
            //存放码表,变量
            data() {
                return {
                    msg: 'Hello World', // 定义消息字符串
                    dynamicId: 1, // 定义动态ID
                    link_url: 'http://www.baidu.com', // 定义链接URL
                    img_url: '//assets.huibo.com/img/company/login/banner.png', // 定义图片URL
                    isRender: true, // 定义渲染状态，true为渲染，false为不渲染
                    isShow: true, // 定义显示状态，true为可见，false为不可见
 
                    addNum: 0, // 定义计数器初始值
 
                    items: [ // 定义列表项，包含两条消息
                        { message: 'Foo' },
                        { message: 'Bar' }
                    ],
                    //获取,界面数据 对象存储
                    a_age: 1,
                    b_age: 2,
 
                    isActive: true, // 定义活跃状态
                    isDisable: false, // 定义禁用状态
                    errorClass: 'error', // 定义错误类名
 
                    num: 1, // 定义数字值
                    dateValue1: ''
                };
            },
            computed: { //计算属性
                total() {
                    return this.a_age + this.b_age; //console.log(this.total);
                }
            },
            watch: { //监听器
                total(val, old) {
                    console.log(val);
                },
            },
            //请求接口,准备数据, 以下内容已经设置完成：响应式数据、计算属性、方法和侦听器,还未渲染html节点
            created() {
            },
            mounted() {//渲染完节点
            },
            //节点销毁之前,处理监听事件
            beforeDestroy() {
 
            },
            //节点销毁之后
            destroyed() {
 
            },
            methods: { //方法集合
                navTo(name) {
                    window.location.href = `/${name}.html`;
                },
                handleClick($event) {
                    console.log($event.target.innerText);
                },
                handleAdd() {
                    this.addNum++;
                },
                aNumAdd() {
                    this.a_age++;
                },
                bNumAdd() {
                    this.b_age++;
                },
                handleChange(value) {
                    console.log(value);
                }
            }
        });
    </script>
</body>
</html>复制

php smart +html

     <div>{/$a/}</div>
 
    {/if $is_contact/}
        <div>111</div>
    {/else/}
        <div>222</div>
    {//if/}
 
    {/if !empty($resume_list)/} //判断不为空
 
        {/foreach $resume_list as $k => $v/}
 
        <div data-val="{/$v['job_id']/}" class="{/if $k == 0/}first{//if/}">
            {/if $v['station']/}{/$v['station']/}{//if/}
        </div>
 
        {//foreach/}
 
    {//if/}
    <div data-val="6001" class="first">销售代表</div>
    <div data-val="6002">人力资源</div>
    <div data-val="6003">普工</div>复制

 //html中的js代码 
注释代码 //单行注释或者连接空格后注释 
//代码结尾 打空格后 再注释,不然php模板编辑会报错
var account_id = '{/$account_id/}'; //账户id
 
//字符串变量使用''包裹
var string = '{/$string/}';
 
//数字或对象或数组用
var number = {/if $number/}{/$number/}{/else/}0{//if/};
var array = {/if !empty($array)/}{/$array/}{/else/}[]{//if/};
 
 
//取值
    var a = {/$a/}
//赋值
{/$a=2/}
 
//if判断
{/if $is_contact/}
    11
{//if/}
 
 
{/if $is_contact/}
22
{/else/}
33
{//if/}
 
//循环
 
{/if !empty($resume_list)/} //判断不为空
    {/foreach $resume_list as $k => $v/}
 
    <div class="{/if $k == 0/}first{//if/}">
        {/if $v['station']/}{/$v['station']/}{//if/}
    </div>
 
    {//foreach/}
 
{//if/}
 
 
 
//构造js 变量的数据组
var allJobList = [
        {job_id:'',station:'全部职位'},
        {/if !empty($job_list)/}
            {/foreach $job_list as $key=>$val/}
                {
                    job_id: '{/$val['job_id']/}',
                    station: '{/$val['station']/}'
                },
            {//foreach/}
        {//if/}
];
 
//  var allJobList = [
                        {job_id:'', station:'全部职位'},
                        {job_id: '204',station: '销售代表'}, 
                        {job_id: '205',station: '人力资源'}, 
                    ]
 
 
//月薪
var salaryItems = [{value: '0', label: '期望月薪不限'}];
{/foreach $salaries as $key => $value/}
    salaryItems.push({value: '{/$key/}', label: '{/$value/}'});
{//foreach/}
 
var salaryItems = [{value: '0', label: '期望月薪不限'}];
salaryItems.push({value: '1', label: '2000'});
salaryItems.push({value: '2', label: '3000'});
salaryItems.push({value: '3', label: '4000'});
 
 
{/include file="chat/chat.html"/} //在template目录内 /chat/chat.html中定义的代码
 复制

jq ajax 使用es6 Promise封装请求

     window.$http={
        post:function(url, params, options){
            return new Promise((resolve, reject) => {
                window.$http.ajax(url, params, 'POST').then(res=>{
                    resolve(res);
                }).catch(err=>{
                    reject(err);
                })
            });
        },
        get:function(url,options){
            return new Promise((resolve, reject) => {
                window.$http.ajax(url, {}, 'GET').then(res=>{
                    resolve(res);
                }).catch(err=>{
                    reject(err);
                })
            });
        },
        //以防使用ajax请求时，可手动配置
        ajax:function(url, params, method, options){
            return new Promise((resolve, reject) => {
                $.ajax({
                    type: method || 'POST',
                    url: url,
                    data: params,
                    async: true, // 设置为false实现同步请求
                    dataType:'json',
                    headers: {
                    },
                    ...options,
                    success: function(res){
                        //账号失效
                        if(res.isNeedLogin){
                            window.location.reload();
                            reject();
                            return;
                        }
                        if(res.status || (!res.status && res.code==200)){
                            resolve(res);
                            return;
                        }
                        //不报错,打印出来
                        if ([40002].includes(res.code)) {
                            console.log(res.code);
                            reject(res);
                            return false;
                        }
                        if ([40003,40004,40005].includes(res.code)) {
                            $.anchorMsg(res.msg);
                            reject(res);
                            return false;
                        }
                        reject(res);
                    },
                    error: function(xhr, textStatus, errorThrown) {
                        // 处理错误的响应，包括断网情况
                        if (textStatus === 'timeout') {
                            // 请求超时
                            $.anchorMsg('请求超时，请检查网络连接');
                            console.log('请求超时，请检查网络连接');
                        } else if (xhr.status === 0) {
                            // 断网或跨域问题
                            // $.anchorMsg('网络连接失败，请检查网络或跨域设置');
                            console.error('网络连接失败，请检查网络或跨域设置');
                        } else if (xhr.statusText == "parsererror" && xhr.responseText) {
                            document.documentElement.innerHTML = xhr.responseText;
                        }else {
                            // 其他错误
                            // $.anchorMsg('发生错误：' + errorThrown);
                            console.error('发生错误：' + errorThrown);
                        }
                        reject(errorThrown); // 返回错误信息
                    }
                });
            });
        },
    }复制

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<!--TDK三剑客-->
	<title>文档标题</title>
	<meta name="Keywords" content="英文逗号分隔的关键词列表(始终与页面有关)">
	<meta name="Description" content="页面描述,150字内,搜索引擎根据选择此描述来显示搜索结果。">
	<!--防浏览器缩放异常-->
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover" />

	<!--设备优先使用谷歌内核适配-->
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

	<!--以webkit Chromium谷歌内核渲染页面-->
	<meta name="renderer" content="webkit">

	<!--防页面缓存-->
	<meta http-equiv="Expires" content="0">
	<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
	<meta http-equiv="Pragma" content="no-cache" />
	<style>
	a{
	text-decoration: none; //不要下划线
	}
	#container{
	display: flex;
	align-items: center;
	}
	</style>
	</head>
	<body>
	<div id="container">
	<span class="container-text">111<span>
	<span class="container-text">222<span>
	</div>
	<a href="https://www.baidu.com">
	<img src="https://www.qianduange.cn/upload/article/banner.png">

	<h1>大标题全文唯一</h1>
	<h2>副标题</h2>
	<h6>最小标题</h6>

	<form>
	<input type="text" placeholder="输入文本" value="" >
	<input type="hidden" placeholder="隐藏域" value="" >
	<input type="radio" placeholder="单选" name="" id="">
	<input type="checkbox" placeholder="多选" name="" id="">
	<textarea placeholder="多行文本" name="" id=""></textarea>
	</form>

	<script>
	var a=1;
	console.log(a);
	<script>
	</body>
	</html>

	width: 365px; /宽度/
	height: 32px; /高度/

	font-size: 34px; /字体大小/
	color: #333333; /字体颜色/
	line-height: 38px; /行高/
	text-align : center; /文字居中 left居左 right居右/
	font-family: PingFang SC, '微软雅黑'; /字体/
	font-weight: bold; /加粗 normal正常 100-900数值 500以上加粗/

	background-color: #FFFFFF; /背景颜色/
	background: url('//assets.huibo.com/images/bg_login.png') no-repeat; /背景图/
	background-size: 100% 100%; /* 背景图铺满 */

	border : 1px solid #eee; /一个像素的边框线/

	border-radius : 10px; /四个角都是圆角/
	border-radius : 10px 10px 10px 10px; /上右下左圆角/

	float:left; float:right; /靠左侧浮动靠最右侧浮动 /

	position : absolute; /绝对定位,会使元素脱离正常的文档流,需要父级节点写relative,不然相对于body定位/
	position : relative /相对自己定位,调整top,left , 不会会使元素脱离正常的文档流/
	position : fixed /固定与窗口定位 /
	z-index:1; /* 层级1-100000000*/
	left:0; /距离左边的距离/
	top:0; /距离上边的距离/
	right:0; /距离右边的距离/
	bottom:0; /距离下边的距离/
	overflow: hidden; /超出部分隐藏/
	overflow: visible; /超出部分显示/
	margin: 10px 20px 30px 40px; /上右下左/ 兄弟节点使用使用margin
	padding: 10px 20px 30px 40px; /上右下左/ 父子节点使用padding
	margin-top: 10px; /距离上间距/
	padding-top: 10px; /指定元素内容区顶部与该元素内边距边缘之间的空间大小/

	display : block; ///块级元素
	display : inline-block; //行内元素

	/flex垂直居中对齐/
	display : flex;
	align-items : center;

	/flex水平居中对齐/
	display : flex;
	justify-content : center;

	/flex水平垂直居中对齐/
	display : flex;
	align-items : center;
	justify-content : center;

	/子节点自动换行 --start--/
	.list{
	display: flex;
	flex-wrap: wrap;
	}
	.item{
	flex-shrink: 0;
	margin: 0 16rpx 16rpx 0;
	}
	/子节点自动换行 --end--/

	/伪类/
	:hover{ /* 移入交互*/

	}
	:active{ /* 通常是点击交互*/

	}
	:first-child 和 :last-child{ /* 第一个同级子元素最后一个同级子元素 */

	}
	:nth-child(1){ /* css中,下标从从1开始 */

	}

	/css英文数字自动跟随行尾换行/
	word-break: break-all;

	/css省略号同时防止数字及英文文本溢出/
	.ellipsis{
	overflow: hidden;
	white-space: nowrap;
	word-break: break-all;
	text-overflow: ellipsis;
	}
	.ellipsis2{ /显示多行，省略号/
	text-overflow: -o-ellipsis-lastline;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2; /* 2行省略 */
	line-clamp: 2; /* 2行省略 */
	-webkit-box-orient: vertical;
	}

	/* input placeholder设置样式*/
	::-webkit-input-placeholder{
	color: #cccfdb;
	}
	:-moz-placeholder{
	color: #cccfdb;
	}
	::-moz-placeholder{
	color: #cccfdb;
	}
	:-ms-input-placeholder{
	color: #cccfdb;
	}
	/清除浮动/
	.clearfix:after{
	content: "";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
	}
	/滚动条/
	*{
	scrollbar-width: thin; /浏览器滚动条窄边/
	}
	/* 针对Webkit内核浏览器（如Chrome、Safari等） */
	::-webkit-scrollbar {
	width: 5px; /* 滚动条宽度 */
	border-radius: 5px;
	}
	::-webkit-scrollbar-thumb{
	background-color: #DCDEEC;
	border-radius: 5px;
	cursor: pointer;
	}
	::-webkit-scrollbar-thumb:hover{
	background-color: #9a9ba5;
	}

	alert('1111') //弹窗一个弹窗

	//定义一个变量

	var a=1; // 数字
	let a=1; // 数字
	const a=1; // 数字

	let name = "Alice"; // 字符串
	let isStudent = true; // 布尔值

	//判断
	if(name == 'Alice'){
	console.log('我是Alice')
	}else if(name == 'Tom'){
	console.log('Tom')
	}else{
	console.log('我是谁?')
	}

	document.getElementById("container1") //全文找id返回单个元素
	document.getElementsByClassName("container2") //全文找class 返回元素数组
	document.getElementsByTagName('h1') //全文找标签 <h1> <a>
	document.querySelector(".container2") //class id 返回第一个匹配的元素
	document.querySelectorAll(".container2") //class id 返回所有匹配的元素
	document.createElement() //创建一个新的HTML元素但不将其添加到DOM中
	document.appendChild() //将一个节点添加到指定父节点的子节点列表的末尾
	document.removeChild() //从DOM中删除一个节点

	addEventListener() //事件监听器
	removeEventListener() //移除事件监听器

	var setTimeoutAlert = setTimeout(funtion(){ //延时器 ,延迟多久后执行,只执行一次
	alert('1秒后执行')
	},1000)
	clearTimeout(setTimeoutAlert) //清除延时器

	var a=1;
	var setAdd = setInterval(funtion(){ //定时器,定时每隔多久执行,一直执行
	a++;
	},1000)
	clearInterval(setAdd) //清除定时器

	cookie //每个域名下的所有Cookie总数不能超过3000个左右，每个Cookie的最大尺寸通常为4KB

	localStorage和sessionStorage //永久缓存和浏览器关闭前缓存

	let str1 = "Hello, ";
	let str2 = "world!";
	let result = str1 + str2;
	console.log(result); // 输出: Hello, world!

	let str = "Hello, world!";
	console.log(str.indexOf("world")); // 输出: 7

	let str = "Hello, world!";
	console.log(str.slice(0, 5)); // 输出: Hello

	let str = "Hello, world!";
	console.log(str.replace("world", "JavaScript")); // 输出: Hello, JavaScript!

	let text = "one two one two";
	console.log(text.replace(/one/g, "three")); // 输出: three two three two

	let str = "hello";
	console.log(str.toUpperCase()); // 输出: HELLO

	let str = "apple,banana,cherry";
	console.log(str.split(",")); // 输出: ["apple", "banana", "cherry"]

	let name = "Alice";
	let age = 25;
	console.log(`My name is ${name} and I am ${age} years old.`);
	// 输出: My name is Alice and I am 25 years old.

	let arr = [1, 2, 3];
	for(let i=0; i<arr.length; i++){
	console.log(arr[i]); // 输出: 1, 2, 3
	}

	let arr = [1, 2, 3];
	arr.forEach(function(value) {
	console.log(value); // 输出: 1, 2, 3
	});

	let arr = [1, 2, 3];
	arr.push(4);
	console.log(arr); // 输出: [1, 2, 3, 4]

	let arr = [1, 2, 3];
	arr.unshift(0);
	console.log(arr); // 输出: [0, 1, 2, 3]

	let arr = [1, 2, 3];
	let removed = arr.splice(1, 1); // 从索引1开始，移除1个元素
	console.log(arr); // 输出: [1, 3] 因为从索引1处移除了值为2的元素

	let arr = [1, 2, 3];
	let newArr = arr.concat([4, 5]);
	console.log(newArr); // 输出: [1, 2, 3, 4, 5]

	let arr = [1, 2, 3];
	let index = arr.indexOf(2);
	console.log(index); // 输出: 1

	let arr = [1, 2, 3];
	let hasTwo = arr.includes(2);
	console.log(hasTwo); // 输出: true

	let arr = [
	{ name: 'Alice', age: 25 },
	{ name: 'Bob', age: 30 },
	{ name: 'Charlie', age: 35 }
	];
	let names = arr.map(function(item) {
	return item.name;
	});
	console.log(names); // 输出: ["Alice", "Bob", "Charlie"]

html css javascript jquery vue2基础

HTML、CSS、JS、jQuery Vue2 CDN模式

学习网站

html+css+javascript 文档网站

html+css常用代码

vue-demo页面

vue2官网

ui框架官网 element ui

学习视频

html+css的学习视频:

javascript+jquery的学习视频:

vue2+vue3的学习视频,只看vue2的部分:

html节点

css节点

JavaScript编程基础

String字符串常见操作

1. 字符串连接

2. 字符串长度

3. 字符串查找

4. 字符串提取

5. 字符串替换

6. 字符串大小写转换

7. 字符串拆分

8. 字符串模板（ES6）

Array数组常见操作

循环

使用 forEach 循环遍历数组

添加元素到数组的末尾

在数组开头添加一个或多个元素，并返回数组的新长度。

根据索引位置移除数组中的元素，还可以指定要移除的元素数量。

数组连接

返回找到的第一个匹配项的索引，如果没有找到则返回-1

判断数组是否包含某个值，返回布尔值

创建一个新数组，其结果是对原数组中的每个元素调用提供的函数后的返回值

过滤、筛选

查找元素

slice() 提取不会修改原数组

Object对象见操作

jQuery简化DOM操作

Vue2 cdn模式 模板

vue2官网

ui框架官网 element ui

php smart +html

jq ajax 使用es6 Promise封装请求

微信扫一扫：分享

Vue2 cdn模式模板

	var value = [1, 5, 10, 15].find((value, index)=> { //返回匹配中的第一个值, 未找到返回undefined
	return value > 9;
	}) // 10

	var index = [1, 5, 10, 15].findIndex((value, index)=> { //返回匹配中第一个的下标,未找到返回-1
	return value > 9;
	}) // 2

	let fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
	let citrus = fruits.slice(1); // 从索引1开始到结尾
	console.log(citrus); // 输出: ["Orange", "Lemon", "Apple", "Mango"]

	let citrusShort = fruits.slice(1, 3); // 从索引1开始到索引3之前
	console.log(citrusShort); // 输出: ["Orange", "Lemon"]

	let citrusNegative = fruits.slice(-3, -1); // 从倒数第三个元素开始到倒数第一个元素前
	console.log(citrusNegative); // 输出: ["Lemon", "Apple"]

	当然，以下是按照您提供的格式整理的关于操作JavaScript对象`person`的示例：

	```javascript
	var person = {
	name: "Alice",
	age: 25,
	isStudent: true
	};
	var person1={
	name:'Tom',
	money:'2000元'
	}

	//合并两个对象
	var person2 = Object.assign({}, person, person1);
	/*
	var person2 = {
	name: "Tom", // 'Tom' 覆盖了 'Alice'
	age: 25, // 来自于 person 对象
	isStudent: true, // 来自于 person 对象
	money: '2000元' // 来自于 person1 对象
	};

	*/
	// 访问属性
	console.log(person.name); // 输出: Alice
	console.log(person['name']); // 输出: Alice

	// 修改属性
	person.age = 26; // 修改属性
	console.log(person.age); // 输出: 26

	// 添加新属性
	person['money'] = 1000; // 添加一个属性
	console.log(person.money); // 输出: 1000

	// 删除属性
	delete person.isStudent; // 删除一个属性
	console.log(person.isStudent); // 输出: undefined

	// 检测属性是否存在
	// 使用 in 运算符
	console.log("name" in person); // 输出: true

	// 使用 hasOwnProperty() 方法
	console.log(person.hasOwnProperty("name")); // 输出: true

	// 遍历对象属性使用 for...in 循环
	for (var key in person) {
	console.log(key); // 输出: name, age, money
	console.log(person[key]); // 输出: Alice, 26, 1000
	}

	$('div'); // 选取所有的<div>元素

	$('.class'); // 选取所有具有特定类名的元素

	$('.class'); // 选取具有特定ID的元素
	$('.class').parent(); //找当节点的父级
	$('.class').parents(".parent"); //一直向上查找所有父级元素,返回一个节点数组
	$('.class').closest(".parent"); //一直向上查找祖先元素,仅返回第一个匹配的祖先元素
	$('.class').siblings() //所有同胞元素
	$('.class').siblings('selector') //匹配到的全部同级元素
	$('.class').next() //下一个同胞元素
	$('.class').prev() //前一个同胞元素

	$('.class').each(function(index, element){
	$(this) //指向当前节点
	$(element) //指向当前节点
	})
	var defult_obj = {a:1,b:2,c:3}
	var new_obj = {d:4,e:5,f:6};
	//合并两个对象
	var merge_obj = $.extend(defult_obj, new_obj);
	// merge_obj = {a:1,b:2,c:3,d:4,e:5,f:6}

	//遍历数组(没有附加参数)
	var array = [1,2,3,4,5];
	$.each(array, function(i, value) {
	this; //this指向当前元素
	i; //i表示array当前下标
	value; //value表示array当前元素
	});

	//遍历对象(没有附加参数)
	var object = {a:1,b:2,c:3}
	$.each(object, function(name, value) {
	this; //this指向当前属性的值
	name; //name表示object当前属性的名称
	value; //value表示object当前属性的值
	});
	var html = $('div').html(); // 获取<div>内的HTML内容

	$('div').html('<p>New content</p>'); // 设置<div>内的HTML内容

	$('div').addClass('newClass'); //添加类名,写样式
	$('div').removeClass('oldClass'); //删除类名,写样式

	$('div').attr('data-value'); // 获取<div>元素的data-value属性值

	$('img').attr('src'); // 获取<img>元素的src属性值
	$('img').attr('src', 'newImage.jpg'); // 设置<img>元素的src属性值

	$('button').click(function() {
	alert('Button clicked!');
	});
	$('button').on('click', function() {
	alert('Button clicked!');
	});
	$('body').on('click','button', function() {
	alert('Button clicked!');
	});


	$.ajax({
	url: '/test/demo',
	success: function(result){
	$('#container').html(result);
	}
	});

	$.get('/test/demo?a=1&b=2', function(res) {
	console.log(res);
	});

	$.post('/test/demo', {name: 'John', time: '2pm'}, function(res) {
	console.log(res);
	});

	<div>{/$a/}</div>

	{/if $is_contact/}
	<div>111</div>
	{/else/}
	<div>222</div>
	{//if/}

	{/if !empty($resume_list)/} //判断不为空

	{/foreach $resume_list as $k => $v/}

	<div data-val="{/$v['job_id']/}" class="{/if $k == 0/}first{//if/}">
	{/if $v['station']/}{/$v['station']/}{//if/}
	</div>

	{//foreach/}

	{//if/}
	<div data-val="6001" class="first">销售代表</div>
	<div data-val="6002">人力资源</div>
	<div data-val="6003">普工</div>

	//html中的js代码
	注释代码 //单行注释或者连接空格后注释
	//代码结尾打空格后再注释,不然php模板编辑会报错
	var account_id = '{/$account_id/}'; //账户id

	//字符串变量使用''包裹
	var string = '{/$string/}';

	//数字或对象或数组用
	var number = {/if $number/}{/$number/}{/else/}0{//if/};
	var array = {/if !empty($array)/}{/$array/}{/else/}[]{//if/};


	//取值
	var a = {/$a/}
	//赋值
	{/$a=2/}

	//if判断
	{/if $is_contact/}
	11
	{//if/}


	{/if $is_contact/}
	22
	{/else/}
	33
	{//if/}

	//循环

	{/if !empty($resume_list)/} //判断不为空
	{/foreach $resume_list as $k => $v/}

	<div class="{/if $k == 0/}first{//if/}">
	{/if $v['station']/}{/$v['station']/}{//if/}
	</div>

	{//foreach/}

	{//if/}



	//构造js 变量的数据组
	var allJobList = [
	{job_id:'',station:'全部职位'},
	{/if !empty($job_list)/}
	{/foreach $job_list as $key=>$val/}
	{
	job_id: '{/$val['job_id']/}',
	station: '{/$val['station']/}'
	},
	{//foreach/}
	{//if/}
	];

	// var allJobList = [
	{job_id:'', station:'全部职位'},
	{job_id: '204',station: '销售代表'},
	{job_id: '205',station: '人力资源'},
	]


	//月薪
	var salaryItems = [{value: '0', label: '期望月薪不限'}];
	{/foreach $salaries as $key => $value/}
	salaryItems.push({value: '{/$key/}', label: '{/$value/}'});
	{//foreach/}

	var salaryItems = [{value: '0', label: '期望月薪不限'}];
	salaryItems.push({value: '1', label: '2000'});
	salaryItems.push({value: '2', label: '3000'});
	salaryItems.push({value: '3', label: '4000'});


	{/include file="chat/chat.html"/} //在template目录内 /chat/chat.html中定义的代码

	window.$http={
	post:function(url, params, options){
	return new Promise((resolve, reject) => {
	window.$http.ajax(url, params, 'POST').then(res=>{
	resolve(res);
	}).catch(err=>{
	reject(err);
	})
	});
	},
	get:function(url,options){
	return new Promise((resolve, reject) => {
	window.$http.ajax(url, {}, 'GET').then(res=>{
	resolve(res);
	}).catch(err=>{
	reject(err);
	})
	});
	},
	//以防使用ajax请求时，可手动配置
	ajax:function(url, params, method, options){
	return new Promise((resolve, reject) => {
	$.ajax({
	type: method \|\| 'POST',
	url: url,
	data: params,
	async: true, // 设置为false实现同步请求
	dataType:'json',
	headers: {
	},
	...options,
	success: function(res){
	//账号失效
	if(res.isNeedLogin){
	window.location.reload();
	reject();
	return;
	}
	if(res.status \|\| (!res.status && res.code==200)){
	resolve(res);
	return;
	}
	//不报错,打印出来
	if ([40002].includes(res.code)) {
	console.log(res.code);
	reject(res);
	return false;
	}
	if ([40003,40004,40005].includes(res.code)) {
	$.anchorMsg(res.msg);
	reject(res);
	return false;
	}
	reject(res);
	},
	error: function(xhr, textStatus, errorThrown) {
	// 处理错误的响应，包括断网情况
	if (textStatus === 'timeout') {
	// 请求超时
	$.anchorMsg('请求超时，请检查网络连接');
	console.log('请求超时，请检查网络连接');
	} else if (xhr.status === 0) {
	// 断网或跨域问题
	// $.anchorMsg('网络连接失败，请检查网络或跨域设置');
	console.error('网络连接失败，请检查网络或跨域设置');
	} else if (xhr.statusText == "parsererror" && xhr.responseText) {
	document.documentElement.innerHTML = xhr.responseText;
	}else {
	// 其他错误
	// $.anchorMsg('发生错误：' + errorThrown);
	console.error('发生错误：' + errorThrown);
	}
	reject(errorThrown); // 返回错误信息
	}
	});
	});
	},
	}