liaooo

分类： 笔记

  • 自定义WordPress后台登录页面

    一、将下面代码加到主题 functions.php 模版文件的最后：

        <?php   
    function custom_login() {   
    echo '<link rel="stylesheet" tyssspe="text/css" href="' . get_bloginfo('template_directory') . '/custom_login/custom_login.css" />'; }   
    add_action('login_head', 'custom_login');   
    ?>

    二、在所用主题中新建一个名称为：custom_login 的文件夹，并在其中新建：custom_login.css 及制作好的网站 LOGO：logo.png 也放进去。

    三、将下面代码添加到 custom_login.css 中：

     /** 背景及字体 **/    
    HTML,body.login{   
        background:#f2f2f2;   
        font: 14px 'Microsoft YaHei', Arial, Lucida Grande, Tahoma, sans-serif;   
    }   
    /** 去掉链接下划线 **/    
    html a{   
        text-decoration: none;   
    }   
    /** 登录DIV **/    
    #login {   
        background:#fff;   
        border: 1px solid #ccc;   
        width:400px;   
        margin: 40px auto 0;   
        padding: 10px 10px 20px 10px;   
        border-radius:5px;   
        box-shadow:0 4px 10px -1px rgba(200, 200, 200, 0.7);   
    }   
    /** 替换logo **/    
    .login h1 a{   
        background: #fff url(logo.png) no-repeat center;   
        width:400px;   
    }   
    /** 提示 **/    
    .updated, .login .message {   
        background:#fff;   
        border: none;   
        text-align: center;   
    }   
    /** 表单 **/    
    .login form {   
        box-shadow:none;   
        border: none;   
    }   
    #loginform, #registerform, #lostpasswordform{   
        background:transparent;   
        border:none;   
    }   
    /** 按钮 **/    
    .button-primary,.submit .button-primary,#login form .submit input {   
        width:83px;   
        height:25px;   
        font-weight: bold;   
        border:none;   
    }

    另外，也可以将下面代码添加到主题 functions.php 模版文件中，直接将样式写在其中。

        function new_custom_login_logo() {
            echo '<style type="text/css">
                //YOUR CSS Code Here
            </style>';
    }

    四、修改 logo 链接地址

    function custom_loginlogo_url($url) {
return 'https://api.liaooo.cn';
}
add_filter( 'login_headerurl', 'custom_loginlogo_url' );

    [许都博客] https://cloud.tencent.com/developer/article/1835713

  • onmousedown与onmouseup及onclick事件示例

    • onmousedown：用户鼠标按下时触发的事件。
    • onmouseup:鼠标抬起时触发的事件。
    • onclick:鼠标点击后触发的事件（包含了两个动作，及按下与抬起两个过程。）

    示例1：鼠标按下时更换字体背景色，抬起时还原默认颜色。（onmousedown与onmouseup）

    <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>鼠标按下时更换字体背景色，抬起时还原默认颜色。</title>
<style>
 .xuexi{width:200px;height:120px;background:#abcdef;border:1px solid green;}
</style>
<script>
 function downClick(){
  var dd=document.getElementById("dd");
dd.style.background="red";
 }
 function upClick(){
  var dd=document.getElementById("dd");
dd.style.background="#abcdef";
 }
</script>
</head>
<body>
  <div id="dd" onmousedown="downClick();" onmouseup="upClick();" class="xuexi"></div>
</body>
</html>

    示例2:鼠标点击改变字体大小（onclick）

    <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>鼠标点击改变字体大小</title>
<style>
 .xuexi{width:200px;height:120px;background:#abcdef;border:1px solid green;}
</style>
<script>
 function xuexiClick(){
  var dd=document.getElementById("dd");
dd.style.fontSize=30+'px';
 }
</script>
</head>
<body>
  <div id="dd" onclick="xuexiClick();" class="xuexi">我爱学习，学习使我快乐/微笑</div>
</body>
</html>

    另外还有以下鼠标事件：

    • onMouseOver 鼠标经过时触发
    • onMouseOut 鼠标移出时触发
    • onMouseMove 鼠标移动时触

    https://blog.csdn.net/cristina_song/article/details/77833591

  • DOM

    获取DOM元素

    根据CSS选择器来获取DOM元素 (重点)

    注意：括号内必须是字符串

    1.选择匹配的第一个元素

    语法：

    document.querySelector('css选择器')

    参数：

    包含一个或多个有效的CSS选择器 字符串

    返回值:

    CSS选择器匹配的第一个元素,一个 HTMLElement对象。 如果没有匹配到，则返回null。

    2.选择匹配的多个元素

    语法：

    document.querySelectorAll('css选择器')

    参数：

    包含一个或多个有效的CSS选择器 字符串

    返回值:

    CSS选择器匹配的NodeList 对象集合

    得到的是一个伪数组:

    • 有长度有索引号的数组
    • 但是没有 pop() push() 等数组方法

    想要得到里面的每一个对象，则需要遍历(for)的方式获得。

    注意：

    哪怕只有一个元素，通过querySelectAll() 获取过来的也是一个伪数组，里面只有一个元素而已

    其他获取DOM元素方法(了解)

    //根据id获取一个元素
document.getElementById('nav')
//根据标签获取一类元素 获取页面的所有div
document.getElementsByTagName('div')
//根据 类名获取元素 获取页面所有类名为pic的
document.getElementsByClassName('pic')

    标签选择body， 因为body是唯一的标签，可以直接写 document.body.style

    设置 / 修改DOM元素内容

    1.document.write()

    • 只能将文本内容追加到前面的位置
    • 文本中包含的标签会被解析

    2. 元素.innerText属性

    • 将文本内容添加/更新到任意标签位置
    • 文本中包含的标签不会被解析

    3.元素.innerHTML属性

    • 将文本内容添加/更新到任意标签位置
    • 文本中包含的标签会被解析

    设置 / 修改DOM元素属性

    设置 / 修改元素常用属性

    例如：元素.src = 元素.title =

    let pic = document.querySelector("img")
pic.src = "./images/01.jpg"
pic.title = "123"

    设置 / 修改元素样式属性

    1.通过 style 属性操作CSS

    语法：

    对象.style.样式属性 = 值

    注意:

    1. 修改样式通过style属性引出
    2. 如果属性有-连接符，需要转换为小驼峰命名法
    3. 赋值的时候，需要的时候不要忘记加css单位
    box.style.backgroundColor = '#fff'
box.style.color = 'blue'
box.style.marginBottom = '10px'

    2.操作类名(className) 操作CSS

    语法：

    元素.className = 'box'

    注意:

    1. 由于class是关键字, 所以使用className去代替
    2. className是使用新值换旧值, 如果需要添加一个类,需要保留之前的类名

    3.通过 classList 操作类控制CSS

    classList.add( newClassName );
//添加新的类名，如已经存在，取消添加

classList.contains( oldClassName );
//确定元素中是否包含指定的类名，返回值为true 、false;

classList.remove( oldClassName );
//移除已经存在的类名;

classList.toggle( className );
//如果classList中存在给定的值，删除它，否则，添加它；

classList.replace( oldClassName, newClassName );
//类名替换

    https://blog.csdn.net/qq_43495629/article/details/87867005

    设置/修改 表单元素 属性

    • 获取: DOM对象.属性名
    • 设置: DOM对象.属性名 = 新值表单.value = '用户名' 表单.type = 'password' 表单属性中添加就有效果,移除就没有效果,一律使用布尔值表示 如果为true代表添加了该属性 如果是false代表移除了该属性比如: disabled、checked、selected
    // 1. 获取元素
let input = document.querySelector('input')
// 2. 取值或者设置值  得到input里面的值可以用 value
input.value = '手机'
input.type = 'password'
// 2. 启用按钮
let btn = document.querySelector('button')
// disabled 不可用   =  false  这样可以让按钮启用
btn.disabled = false
// 3. 勾选复选框
let checkbox = document.querySelector('.agree')
checkbox.checked = false

  • 循环

    循环需要具备三要素

    1. 变量起始值
    2. 终止条件（没有终止条件，循环会一直执行，造成死循环）
    3. 变量变化量（用自增或自减）

    while循环

    while(循环条件){

  要重复执行的代码(循环体)

}

    continue

     // 我们要打印吃包子
 let i = 1
 while (i <= 6) {
   if (i === 3) {
     i++
     // continue 结束本次循环 继续下一次循环
     // continue
     // 退出循环
     break
   }
   document.write(`我要吃第${i}个包子 <br>`)
   i++
 }

  • 数组

    增加

    数组.push(元素1,…,元素n)

    数组.push(元素1,...,元素n)    //将元素添加在数组的末尾 返回该数组的新长度！！！！！！

let arr = [1,2,3]
console.log(arr.length)   // 结果为3
console.log(arr.push(4,5,6))   // 结果为6
console.log(arr)    // 结果为 [1,2,3,4,5,6]

    数组.unshift(元素1,…,元素n)

    数组.unshift(元素1,...,元素n)    //将元素添加在数组的开头返回该数组的新长度！！！！！！

let arr = [1,2,3]
console.log(arr.length)            // 结果为3
console.log(arr.unshift(4,5,6))   // 结果为6
console.log(arr)                 // 结果为 [4,5,6,1,2,3]

    删除

    • 删除第一个arr.shift() //并返回该元素的值
    • 删除最后一个arr.pop() //并返回该元素的值
    • 从某一位置开始删除arr.splice ( 索引号 , 删几个 ) // 如果不写删几个 则从起始位置删到最后
    // let arr = ['red', 'green', 'blue']
// 删除最后一个元素
// arr.pop()

//删除第一个元素
// console.log(arr.shift())
// shift是删除     unshift比shift 加了一个 un 表示加

// 重点删除
//arr.splice(从哪里开始删 ， 删几个)
let arr = ['red', 'green', 'blue']
// 我就想把green 删掉
// 第一个1 是从索引号是1的位置开始删
// 第二1 是删除几个
// arr.splice(1, 1)
// arr.splice(1)

  • 事件

    事件监听(注册事件)

    语法：

    元素.addEventListener('事件',要执行的函数)

//例如
let btn = document.querySelector("button")
btn.addEventListener("clilk", function(){
        alert('点击事件')
})

    注意:

    1. 事件类型要加引号
    2. 函数是点击之后再去执行，每次点击都会执行一次

    事件监听三要素:

    谁被触发 / 用什么方式 / 要做什么

    • 事件源：哪个dom元素被事件触发了，要获取dom元素
    • 事件（字符串）：用什么方式触发，比如鼠标单击click、鼠标经过mouseover等
    • 事件调用的函数：要做什么事

    事件监听版本

    DOM L0 事件源.on事件 = function() { }

    DOM L2 事件源.addEventListener(事件， 事件处理函数)

    发展史:
    • DOM L0:是 DOM 的发展的第一个版本; L:level
    • DOM L1:DOM级别1 于1998年10月1日成为W3C推荐标准
    • DOM L2:使用addEventListener注册事件
    • DOM L3:DOM3级事件模块在DOM2级事件的基础上重新定义了这些事件，也添加了一些新事件类型

    事件类型

    鼠标事件 焦点事件 键盘事件 文本事件
    鼠标触发 表单获得光标 键盘触发 表单输入触发
    click 鼠标点击 focus 获得焦点 Keydown键盘按下触发 input用户输入事件
    focus 获得焦点 blur 失去焦点 Keyup键盘抬起触发
    mouseenter 鼠标经过

  • 函数

    使用

    function 函数名(){
		函数体
}

    命名规范

    • 和变量命名基本一致
    • 尽量小驼峰式命名法
    • 前缀应该为动词
    • 命名建议:常用动词约定 can has is get set load

    调用

    函数名()

    注意:声明(定义)的函数必须调用才会真正被执行，使用 () 调用函数

    传参

    • 调用函数时，需要传入几个数据就写几个，用逗号隔开
    • 开发中尽量保持形参和实参个数一致
    function 函数名(形参1,形参2,....){
  	函数体
}
函数名(实参1,实参2,....)

    形参如果不被赋值，就是undefined

    小技巧

    1.利用逻辑中断：

    function getSum(x,y){
  x = x || 0
  y = y || 0
  console.log(x + y)
}
getSum(1,2)  // 3
getSum()     // 0

    2.直接赋值

    //没有参数x = 0 , y = 0  如果有参数传来，则用实参赋值
function getSum(x = 0,y = 0){ 
  x = x || 0
  y = y || 0
  console.log(x + y)
}
getSum(1,2)  // 3
getSum()     // 0
    实参少于/多于形参
    function fn(x, y) {
    console.log(x + y)
}

// 1. 实参个数少于形参   返回的结果 NaN
fn(1)   // x = 1 y = underfined

// 2. 实参个数大于形参 非诚勿扰
fn(1, 2, 3)   // x = 1 , y = 2  3没人接
    小知识（了解）

    函数内部可以使用arguments得到一个伪数组

      // arguments 函数内有效 表现形式：伪数组
  // 伪数组 比真数组 少了一些 pop()  push()  等方法
function fn() {
  console.log(arguments) //  [1,2,3]
  let sum = 0
  for (let i = 0; i < arguments.length; i++) {
    sum += arguments[i]
  }
  console.log(sum)
}

fn(1, 2, 3)

    返回值

    语法：return 数据

    • return后面的代码均不会被执行！
    • return会立即结束当前函数
    • 函数可以没有 return，这种情况函数默认返回值为 undefined

    作用域

    1. 全局作用域（全局有效）

    作用于所有代码执行的 环境(整个script标签内部)或者一个独立的js文件

    1. 局部作用域（局部有效）

    作用于函数内的代码环境，就是局部作用域

    因为跟函数有关系，所以也称为函数作用域

    1. 块级作用域（{} 内有效）

    块作用域由{ }包括，if语句和for语句里面的{ }等

    变量的作用域

        <script>
//————————————————————————————————————
      let a = 0         //全局作用域 
//————————————————————————————————————
      function fn() {
        let b = 0       //局部作用域
      }
      fn()
//————————————————————————————————————
      if (true) {
        let c = 0      //块级作用域
      }
//————————————————————————————————————
    </script>
    变量类型
    全局变量（函数外部let 的变量） 全局变量在任何区域都可以访问和修改
    局部变量（函数内部let的变量） 局部变量只能在当前函数内部访问和修改
    块级变量（{} 内部的let变量） let定义的变量,只能在块作用域里访问,不能跨块访问,也不能跨函数访问

    特殊情况:

    • 如果函数内部或者块级作用域内部（if、for···），变量没有声明，直接赋值，也当全局变量看（强烈不推荐）
    • 函数内部的形参可以看做是局部变量

    作用域链

    采取就近原则的方式来查找变量最终的值

    <script>
  function f1() {
    let num = 123
    function f2() {  
      let num = 0
      console.log(num)
    }
    f2()
  }
  let num = 456
  f1()
</script>

    匿名函数

    //——————具名函数——————

声明 function 函数名(){}
调用 函数名()

//——————匿名函数——————

声明 let 变量名 = function(){}
调用 变量名()
传参 变量名(参数)

//———————————————————

//例1
let btn = document.querySelector('button')
btn.onclick = function(){
  alert('123')
}

//例2
let btn = document.querySelector('button')
btn.addEventListener('click',function(){
    alert('123')
})

    立即执行函数

    防止变量污染

    场景:避免全局变量之间的污染

    立即执行无需调用

    //写法1
(  function(){}  )()

//写法2
(  function(){} () )

    注意:多个立即执行函数要用 ; 隔开，要不然会报错

  • 定时器-间歇函数

    开启定时器

    作用:

    • 每隔一段时间调用这个函数
    • 间隔时间单位是毫秒
    setInterval(函数名,间隔时间)
// 注意:
1. 函数名字不需要加括号
2. 定时器返回的是一个id数字

    关闭定时器

    let 变量名 = setInterval(函数名，间隔时间)
clearInterval(变量名)
// 注意:
1. 函数名字不需要加括号
2. 定时器返回的是一个id数字

    window.setInterval – Web API 接口参考 | MDN

  • 多分支-判断

    if语句

    if(条件1){             //先判断条件1，若满足条件1则执行语句1，其他都不执行
	语句1
} else if(条件2){		  //条件1不满足则向下判断，若满足条件2则执行语句2，其他都不执行
	语句2
} else if(条件3){			//依此类推
	语句3
} else {						 //若以上条件都不满足，则执行else中的语句n
	语句n
}										 //可以写N个条件

    三元运算符（三元表达式）

    //条件 ?  满足条件执行的代码 : 不满足条件执行的代码
条件 ? 1 : 2
//结果为真返回1 为假返回2

    switch语句

    1. 一般用于等值判断，不适合区间判断（如a>80,则…）
    2. 需要配合break使用，没有break会造成case穿透（不管之后的case值是否全等，都一直向下执行）
    switch (1) {               //找到和小括号里!!全等!!的case值,并执行代码
  case 1:
    alert(1)               
    break
  case 2:
    alert(2)
    break
  case 3:
    alert(3)
    break
  default:                 //若没找到，则执行default里的代码
    alert("没有数据")
}

  • js基础概念

    数据类型

    基本数据类型

    • number 数字型
    • string 字符串型
    • boolean 布尔型
    • undefined 未定义型
    • null 空类型

    null 和 undefined 区别:

    1. undefined 表示没有赋值
    2. null 表示赋值了，但是内容为空

    null 开发中的使用场景:

    官方解释:把 null 作为尚未创建的对象

    大白话: 将来有个变量里面存放的是一个对象，但是对象还没创建好，可以先给个null

    引用数据类型

    • object 对象
    • function 函数
    • array 数组

    类型转换

    检测变量类型

    //查看数据类型
typeof 值
//typeof运算符的返回类型为字符串，值包括如下几种：
1. 'undefined' --未定义的变量或值
2. 'boolean'   --布尔类型的变量或值
3. 'string'    --字符串类型的变量或值
4. 'number'    --数字类型的变量或值
5. 'object'    --对象类型的变量或值，或者null(这个是js历史遗留问题，将null作为object类型处理)
6. 'function'  --函数类型的变量或值

    隐式转换

    • +号两边只要有一个是字符串，都会把另外一个转成字符串
    • 除了+以外的算术运算符 比如 - * / 等都会把数据转成数字类型
    • +号作为正号解析可以转换成Number

    显式转换

    转换为字符串型

    let a = 124144

String(a)

a.toString(进制)    //括号内填写进制数

    转换为数字型

    Number('21')

parseInt('10.12234') //10 转换为数字型 只保留整数部分

parseFloat('10.3')//10.3 转换为数字型 保留小数部分

Number('10px') //得到的值为NaN Number里面只能加数字
parseFloat('10px')//10 保留数字部分 过滤其他（开头必须是数字）

NaN  //not A number

    NaN也是number类型的数据，代表非数字

    前置自增/后置自增

    隐式转换

    前置自增：++i  // 自己先计算 后进行运算

//例如
let i = 1
计算：++i + 3
// 2 + 3 = 5

    后置自增：i++ // 先进行运算 后自己计算

//例如
let i = 1
计算：i++ + 3
// 1 + 3 = 4

    let i = 1
计算：i++ + ++i +i
//1 + 2 + 3
1.i++ 此时i = 1
2.i++ + ++i  此时i = 2
3.i++ + ++i + i 此时i = 3

    比较运算符

    返回值 boolean 类型

    比较运算符有隐式转换

    最终把数据隐式转换转成number类型再比较

     console.log(3 > 5) // false
 console.log(5 >= 5) //  true

 // console.log(5 = 5)
 console.log(5 == 5)

 // == 只要值一样就是true  不管数据类型
 console.log(5 == '5')
 console.log(5 == 'pink')

 // === 以后判断要用三等  ===  开发常用   要求值和数据类型都一样
 console.log(5 === 5)
 console.log(5 === '5')

 // 特殊情况
 console.log('pink' > 'red')   //false 比较对应ASCII码 
 console.log('pink' > 'pin')  // true  从左往右一位一位开始比较 得出结果停止

 console.log(1 === NaN)      //NaN不等于任何值 包括它本身
 console.log(NaN === NaN)

																	//尽量不要比较小数
 console.log(0.1 + 0.2 === 0.3)  // 0.1 + 0.2 = 0.3000···004 小数精度问题
 console.log(0.1 + 0.2)

 console.log(3 > '2')

    逻辑运算符

    短路:只存在于 && 和 || 中，当满足一定条件会让右边代码不执行

    符号短路条件
    &&左边为false就短路
    ||左边为true就短路

    原因：通过左边能得到整个式子的结果，因此没必要再判断右边

    运算结果：无论 && 还是 || ，运算结果都是最后被执行的表达式值，一般用在变量赋值

    有5个值是当 false 来看 其余是真的

    false   数字0   ''  undefined   null