复习

// 语法: ECMAScript 操作: DOM BOM

// 1.类型转化
// 转数字: +"3.14" | parseInt("123abc") | parseFloat("3.14.15") | Number()
// 转字符串: "" + 3.14 | 3.14.toString() | 3..toString() | String()
// 转布尔: Boolean() // 2.运算符
// ++ --: 在前 a = ++num => num先自增1,再赋值给a | 在后 a = num++ => 先将num值赋值给a, 再自增1
// / 结果就是正常运算的数字结果
// * % n 取值范围 [0, n-1]
// == 只做值匹配 === 值与类型都需要匹配
// 三目运算符: var maxNum = a > b ? a : b;
// 逻辑运算符: && || ! // 3.基础语法
// 流程控制: if分支 | for循环 | while循环 | do...while循环 // if (条件1) {代码块1} else if (条件2) {代码块2} ... else if(条件n) {代码n} else {代码块}
// for(var i = 0; i < 10; i++){ 代码块 }
// while(条件判断) { 代码块 }
// do { 代码块 } while(条件判断) // 4.函数
// 定义: function 函数名(形参列表) { 代码块 }
// 调用: var res = 函数名(实参列表);
// 参数: 实参与形参只需要位置匹配,不需要个数匹配, 参数可以拥有默认值
// (形参有2个,实参有1个=>第二个形参没有被传值,值就是undefined)
// (形参有2个,实参有3个=>第三个实参没有对应的形参接收,实参值被丢弃)
// 返回值: 一个函数只能有一个返回值(多个返回值用数组与字典(对象)来处理), 可以空return来结束函数,也可以省略return

循环绑定 => 变量污染

// 页面有一个ul下4个li

// lis.length = 4
for (var i = 0; i < lis.length; i++) {
// 给页面元素对象添加一个任意属性(保留索引的属性index)
lis[i].index = i // 循环绑定时. i分别是0,1,2,3, 也就给每一个li进行了点击事件的绑定
lis[i].onclick = function () {
// 在事件绑定时,没有执行事件内部的逻辑体, 在绑定结束后, 激活事件时, 才会执行
// 循环结束后, i值定格在4, 索引在激活事件执行功能时,拿到的i的值全部是4
// 需求1: 打印li的索引
// console.log(i)
// 解决:每一个li都有index属性,取出自己(this)的索引
console.log(this.index)
// 需求2: 打印自身内容
// console.log(lis[i].innerText)
// 解决: this就能唯一指向当前激活事件的那个li对象
console.log(this.innerText)
}
}

对象(字典)的增删改查

// 作为字典来使用  *****
var dict = {
a: "AAA",
b: "BBB"
}
// 查
console.log(dict.a);
// 改
dict.a = "AAAAA";
console.log(dict);
// 增
dict.c = "CCC";
console.log(dict);
// 删
delete dict.b;
console.log(dict); // 总结: 只要是js对象, 就可以随意添加属性

随机数

// 得到区间[min, max]之间的正整数

function randomNum(min, max) {
return parseInt(Math.random() * (max - min + 1)) + min;
}

字符串操作

// 1.指定索引下的字符
var s = "abcdef123456呵呵哈哈";
console.log(s.charAt(3)); // 2.判断是否存在: 呵呵是否在字符串中
// -1代表不存在, 反正就是存在(的索引)
console.log(s.indexOf("呵")); // 12
console.log(s.lastIndexOf("呵")); // 13 // 3.替换
var newS = s.replace("abc", "ABC");
console.log(s);
console.log(newS);
// 总结: 字符串为不可变类型, 如果某操作要改变字符串, 该操作一定拥有返回值 // 4.裁剪 slice(n, m) 从索引n开始截取到索引m之前
newS = s.slice(0, 3);
console.log(newS); // 5.拆分数组
var ss = "123 456 abc def";
var arr = ss.split(" ");
console.log(arr)

数组操作

var arr = [3, 5, 1, 2, 4];
console.log(arr); // [3, 5, 1, 2, 4] // 1.反转
arr.reverse();
console.log(arr); // [4, 2, 1, 5, 3] // 2.排序
arr.sort();
console.log(arr); // [1, 2, 3, 4, 5]
console.log(arr.reverse()); // [5, 4, 3, 2, 1] // 3.判断元素是否存在 (不等于-1就是存在)
console.log(arr.indexOf(5)); // 4.拼接成字符串
var ss = arr.join("@");
console.log(ss); // 5@4@3@2@1 // 5.过滤器 (保留符合条件的结果)
var newArr = arr.filter(function (ele) { // 回调函数的回调次数有数组的个数决定
// filter回调了三个参数: ele, index, sourcerr // 偶数
if (ele % 2 == 0) {
// 满足过滤条件
return true;
}
// 不满足过滤条件
return false;
});
// 满足过滤条件的就会添加到新数组中保留
console.log(newArr) // [4, 2] /*原理
arr.filter(fn) {
var newArr = [];
for (var i = 0; i < this.length; i++) {
var res = fn(this[i], i, this);
if (res == true) {
newArr.push(res)
}
}
return newArr;
}
*/
``` ```js
// 查
// arr[index] // 改
// arr[index] = newDate; // 增
// 从尾加: push()
// 从头加: unshift() // 删
// pop():从尾删
// shift():从头删 // splice(begin, length, ...eles);
// begin开始的索引
// length操作的长度
// 替换为的新元素们(可以省略) // 增
// 从索引3之前操作0位,替换为10 => 在索引3插入10
a.splice(3, 0, 10); // [4, 3, 5, 10, 1, 2]
console.log(a); // 在索引0之前操作0位,替换为1,2 => 在首位添加1和2
a.splice(0, 0, 1, 2);
console.log(a); // [1, 2, 4, 3, 5, 10, 1, 2] // 改
// 在索引末尾之前操作1位,替换为20 => 在末位修改为20
a.splice(a.length - 1, 1, 20); // [1, 2, 4, 3, 5, 10, 1, 20]
console.log(a); // [1, 2, 4, 3, 5, 10, 1, 20] // 删
a.splice(2, 3);
console.log(a); // [1, 2, 10, 1, 20]

鼠标事件

var box = document.querySelector('.box');

// 悬浮
box.onmouseenter = function () {
box.style.cursor = "pointer";
console.log("鼠标悬浮了")
} // 移动
box.onmousemove = function () {
console.log("鼠标在移动")
} // 按下
box.onmousedown = function () {
console.log("鼠标按下")
} // 抬起
box.onmouseup = function () {
console.log("鼠标抬起")
} // 移开
box.onmouseleave = function () {
console.log("鼠标移开")
} // 右键: 右键按下抬起为一次右键
box.oncontextmenu = function (ev) {
console.log("鼠标右键")
} // 点击点的x坐标: ev.clientX | 点击点的y坐标: ev.clientY

键盘事件

// 具体按下的是那个按键
document.onkeydown = function () {
// console.log("键盘按下了")
} // ev: 系统回调事件函数,传递的事件对象
// 键盘事件中,ev中有keyCode来唯一标识具体的按键
// 通过ctrlKey | shiftKey | altKey 来标签特殊按键是否为按下状态
document.onkeyup = function (ev) {
console.log(ev);
console.log(ev.keyCode, ev.altKey);
console.log("键盘抬起了")
}

定时器

// 一次性定时器:
// 1.r1是定时器返回值, 就是定时器创建先后的数字编号
// 2.只在创建定时器1s后执行1次
var r1 = setTimeout(function () {
console.log("一次性定时器响了!1111");
}, 1000); // 持续性定时器:
// 1.r2是定时器返回值, 就是定时器创建先后的数字编号
// 2.第一次触发在1s后,然后每1s触发一次
var num = 0;
var r2 = setInterval(function () {
console.log("持续性性定时器响了%d次!", ++num);
}, 1000); // 清除一个定时器
// 1.通过定时器数字编号来清除
// 2.清除定时器不分种类可以混用
clearTimeout(r1) == clearInterval(1)
// 清除页面所有定时器
var n = setTimeout(function () {}, 1); // n一定大于之前所有的定时器编号
for (var i = 0; i < n; i++) { // 将1~n之间所有定时器再清一遍
clearTimeout(i)
}

jq导入

// 什么是jQuery
// jQuery是一个简洁高效的且功能丰富的JavaScript工具库,是对原生JavaScript二次封装的工具函数集合 // 优点
// 开源 | 简洁的选择器 | 简化的Ajax操作 | 良好的浏览器兼容 | 强大的链式操作

day53 鼠标事件 键盘事件 及JQuery的更多相关文章

  1. C#/winform 自动触发鼠标、键盘事件

    要在C#程序中触发鼠标.键盘事件必须要调用windows函数. 一.鼠标事件的触发 1.引用windows函数mouse_event /// <summary> /// 鼠标事件 /// ...

  2. Selenium WebDriver 中鼠标和键盘事件分析及扩展(转)

    本文将总结 Selenium WebDriver 中的一些鼠标和键盘事件的使用,以及组合键的使用,并且将介绍 WebDriver 中没有实现的键盘事件(Keys 枚举中没有列举的按键)的扩展.举例说明 ...

  3. java鼠标与键盘事件监听

    package cn.stat.p3.windowdemo; import java.awt.Button; import java.awt.FlowLayout; import java.awt.F ...

  4. HTML5 Canvas鼠标与键盘事件

    演示HTML5 Canvas鼠标事件,获取Canvas对象上的鼠标坐标,演示键盘事件 通过键盘控制Canvas上对象移动. Canvas对象支持所有的JavaScript的鼠标事件,包括鼠标点击(Mo ...

  5. lufylegend库 鼠标事件 循环事件 键盘事件

    lufylegend库 鼠标事件 循环事件 键盘事件 <!DOCTYPE html> <html lang="en"> <head> <m ...

  6. OSX 鼠标和键盘事件

    本文转自:http://www.macdev.io/ebook/event.html 事件分发过程 OSX 与用户交互的主要外设是鼠标,键盘.鼠标键盘的活动会产生底层系统事件.这个事件首先传递到IOK ...

  7. tkinter中鼠标与键盘事件(十五)

    鼠标与键盘事件 import tkinter wuya = tkinter.Tk() wuya.title("wuya") wuya.geometry("300x200+ ...

  8. 50-用Python监听鼠标和键盘事件

    转自:https://www.cnblogs.com/qiernonstop/p/3654021.html 用Python监听鼠标和键盘事件 PyHook是一个基于Python的“钩子”库,主要用于监 ...

  9. JavaScript事件基础-10-2.HTML事件; DOM0级事件; 掌握常用的鼠标与键盘事件 ; 掌握this的指向;

    JavaScript事件基础 学习目标 1.掌握什么是事件 2.掌握HTML事件 3.掌握DOM0级事件 4.掌握常用的鼠标与键盘事件 5.掌握this的指向 什么是事件 事件就是文档或浏览器窗口中发 ...

  10. C# 自动触发鼠标、键盘事件

    要在C#程序中触发鼠标.键盘事件必须要调用windows函数. 一.鼠标事件的触发 1.引用windows函数mouse_event /// <summary> /// 鼠标事件 /// ...

随机推荐

  1. Python【每日一问】13

    问:请简述一下python的GIL 答:GIL 锁,全局解释器锁,仅在CPython解释器中,作用就是,限制多线程同时执行,保证同一时间内只有一个线程在执行.

  2. 排错技能:任务管理器中追踪某w3wp.exe是哪个IIS站点的application pool

    如果Windows的任务管理器中发现某个w3wp.exe占用了100%CPU,那我们就要揪出这是那个网站的application pool在作怪, 首先,每个站点一定要单独使用各自的applicati ...

  3. day44前端开发2之css基础

    web前端开发1一.前端三剑客之css 1.选择器:由标签/类/id单独或组合出现 2.作用域:{}内部区域 3.样式块:满足css链接语法的各种样式 eg:引入的基本样式 <head>  ...

  4. Mac 启用NTFS

    How to Enable NTFS Write Support in Mac OS X http://osxdaily.com/2013/10/02/enable-ntfs-write-suppor ...

  5. OSS RFC

    This is a very late reply, but just want to share the process of setting up all associated RFCs with ...

  6. !!!常用bootstrap代码

    http://v3.bootcss.com/components/  组件 http://v3.bootcss.com/customize/  bootstrap定制 http://v3.bootcs ...

  7. LeetCode 92. Reverse Linked List II倒置链表2 C++

    Reverse a linked list from position m to n. Do it in one-pass. Note: 1 ≤ m ≤ n ≤ length of list. Exa ...

  8. sql中的常见报错;

    1.对于某些写的sql懒得判断的: SELECT * FROM sys_part WHERE part_no =(SELECT part_no FROM dbo.sys_part)  --字查询的结果 ...

  9. dataTable转换成Json格式

    #region dataTable转换成Json格式 /// <summary> /// /// </summary> /// <param name="dt& ...

  10. activiti官网实例项目activiti-explorer之扩展流程节点属性

    节点中添加“关联表单”属性 1,stencilset.json中加入如下代码 , {    "name" : "approveTypepackage",    ...