a标签的功能性链接

邮件链接

1
<a href="mailto:hyl@126.com">联系我</a>

同理 , 打开迅雷

1
<a href="thunder://QUFodHRwOi8vd3d3LmJhaWR1LmNvbVpa">下载</a>

打开qq

1
<a href="tencent://Message/?Uin=8888888&websiteName=qzone.qq.com&Menu=yes">打开qq</a>

input的 type 的所有值

  • button 定义可点主的按钮
  • checkbox 定义复选框。
  • color 定义拾色器
  • date 定义日期字段（带有 calendar 控件）
  • datetime 定义日期字段（带有 calendar 和 time 控件）
  • datetime-local 定义日期字段（带有 calendar和 time 控件）
  • month 定义日期字段的月（带有 calendar 控件）
  • week 定义日期字段的周（带有 calendar控件）
  • time 定义日期字段的时、分、秒（带有 time 控件）
  • email 定义用于email 地址的文本字段
  • file 定义输入字段和浏览...按钮，供文件上传
  • hidden 定义隐藏输入字段
  • image 定义图像作为提交按钮
  • number 定义带有 spinner 控件的数字字段
  • password 定义密码字段。字段中的字符会被遮蔽
  • radio 定义单选按钮
  • range 定义带有 sider 控件的数字字段
  • reset 定义重置按钮。重置按钮会将所有表单字段重置为初始值。
  • search 定义用于搜索的文本字段
  • submit 定义提交按钮。提交按钮向服务器发送数据。
  • tel 定义用于电话号码的文本字段
  • text 默认。定义单行输入字段，用户可在其中翰入文本。默认是20个字符。
  • url 定义用于URL的文本字段

CSS样式表的优先级

  • 重要性
  • 具体性
  • 就近

CSS使用自定义字体

1
2
3
4
5
6
7
8
@font-face {
    font-family: "myfont";
    src: url('fonts/chunkfive.ttf');
}

h1 {
    font-family: 'myfont';
}

修改行级元素的宽高

一般而言 , 行级元素是不能修改宽高的 , 此时可以将其修改成inline-block

1
2
3
4
5
.btn {
    display: inline-block;
    width: 120px;
    height: 40px;
}

CSS抠图

1
2
3
4
5
6
.icon{
    width: 100px;
    height: 100px;
    background: url(images/icons.jpg) no-repeat no-repeat -570px -280px;
    background-color: #00FFFF;
}

元素定位

  • relative : 相对该元素原来的位置
  • absolute : 相对父元素的位置
  • fixed : 相对于浏览器窗口 , 固定了位置
  • static : 默认 , 正常的文档流

相对原来的位置向左移动了50px

1
2
3
4
.btn {
    position: relative;
    left: 50px;
}

相对父元素的位置 , 左移了50px

1
2
3
4
.btn {
    position: absolute ;
    left: 50px;
}

JS定义常量

1
const num = 100;

JS的函数默认值

和python一样

1
2
3
function func(a,b=2){
    
}

JS的列表解析

1
arr.forEach(item => func(item))

注意浏览器中的JS可以debug

JS创建类

1
2
3
4
5
6
7
8
9
class Person{
    constructor(name,age){
        this.name=name
        this.age=age
    }
    eat(food){
        alert(`${this.name} is eating ${food} now`)
    }
}

注意JS中,文本可能是回车

1
2
3
<div id='myid'>
<img ...>
</div>

此时 , 下面返回的结果是\n

1
document.getElementByID('myid').firstChild

但是document.getElementByID('myid').Children拿到的一定是标签节点

注意JS一样存在迭代闭包提前结束问题

1
2
3
4
5
6
7
8
const allButtons = document.querySelectAll('#button>button')
for (var i=0,i<allButtons.length;i+=1){
    allButtons[i].addEventListener('click',function(){
        var checkbox = allButtons[i].firstChild
        checkbox.checked = ! checkbox.checked
        allButtons[i].style.backgrondColor = checkbox.checked?"green":"red"
    })
}
  • 因为click事件是延迟事件 , 当我们触发这个事件的时候 , for循环已经迭代结束了 (也就是说, 此时的i已经等于allButtons.length了)
  • 解决方案 : 将var全部改为let

获取事件源对象

也就是 : 获取触发事件的对象

1
2
3
buttons.addEventListener('click',function(evt){
   console.log('事件源对象就是':evt.target)
})

$函数的四种用法

  1. $函数的参数是一个匿名函数或箭头函数，传入的函数是页面加载完成后要执行的回调函数
  2. $函教的参数是一个样式表选择器，获取页面元素得到一个 jQuery对象
  3. $函数的参数是一个标签字符串，创建一个元素并获得对应的 jQuery对象
  4. $函数的参数是一个原生的 JavaScript对象，返回与原生 JavaScript对象对应的 jQuery对象

原生AJAX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
var Ajax = {
    get: function(url,fn){
        // XMLHttpRequest对象用于在后台与服务器交换数据
        var xhr=new XMLHttpRequest();
        xhr.open('GET',url,false);
        xhr.onreadystatechange=function(){
            // readyState == 4说明请求已完成
            if(xhr.readyState==4){
                if(xhr.status==200 || xhr.status==304){
                    console.log(xhr.responseText);
                    fn.call(xhr.responseText);
                }
            }
        }
        xhr.send();
    },

    // data应为'a=a1&b=b1'这种字符串格式，在jq里如果data为对象会自动将对象转成这种字符串格式
    post: function(url,data,fn){
        var xhr=new XMLHttpRequest();
        xhr.open('POST',url,false);
        // 添加http头，发送信息至服务器时内容编码类型
        xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
        xhr.onreadystatechange=function(){
            if (xhr.readyState==4){
                if (xhr.status==200 || xhr.status==304){
                    // console.log(xhr.responseText);
                    fn.call(xhr.responseText);
                }
            }
        }
        xhr.send(data);
    }
}