目录

  • 1 JavaScript快速入门
    • 1.1 如何插入javascrip代码
    • 1.2 引用javascritp外部文件
    • 1.3 JavaScript在页面中位置
    • 1.4 JavaScript语句和符号
    • 1.5 JavaScript注释
    • 1.6 案例1-1 script标签在html中书写位置
    • 1.7 案例1-2  JavaScript引入方式
    • 1.8 JavaScript变量
    • 1.9 JavaScript判断语句
    • 1.10 JavaScript函数
    • 1.11 案例1-4 比较两个数大小
    • 1.12 案例1-8 改变网页皮肤颜色
    • 1.13 案例1-9 验证用户名和密码
  • 2 基本语法
    • 2.1 变量
      • 2.1.1 标识符
      • 2.1.2 保留关键字
      • 2.1.3 变量的使用
      • 2.1.4 变量的赋值
    • 2.2 变量的数据类型
      • 2.2.1 数据类型分类
      • 2.2.2 基本数据类型
      • 2.2.3 数据类型检测
      • 2.2.4 数据类型检测总结
      • 2.2.5 数据类型转换
      • 2.2.6 数据类型转换(程序1)
      • 2.2.7 数据类型转换(程序2)
      • 2.2.8 数据类型转换(程序3)
      • 2.2.9 数据类型转换(程序4)
      • 2.2.10 数据类型转换(程序5)
      • 2.2.11 数据类型转换(程序6)
    • 2.3 表达式
    • 2.4 运算符
      • 2.4.1 算数运算符
      • 2.4.2 字符串运算符
      • 2.4.3 赋值运算符
      • 2.4.4 比较运算符
      • 2.4.5 逻辑运算符
      • 2.4.6 三元运算符
      • 2.4.7 位运算符
      • 2.4.8 运算符优先级
    • 2.5 流程控制
      • 2.5.1 选择结构
      • 2.5.2 if单分支语句
      • 2.5.3 if...else双分支语句
      • 2.5.4 if...else双分支举例
      • 2.5.5 if...else多路分支语句
      • 2.5.6 if...else多路分支举例
      • 2.5.7 switch...case多路分支
      • 2.5.8 while循环语句
      • 2.5.9 do...while语句
      • 2.5.10 for语句
      • 2.5.11 九九乘法表
      • 2.5.12 判断素数
      • 2.5.13 判断红白黑球个数
  • 3 数组
    • 3.1 初始数组
    • 3.2 创建数组
    • 3.3 数组的基本操作
    • 3.4 常见二维数组操作
    • 3.5 数组排序
      • 3.5.1 冒泡排序
      • 3.5.2 选择排序
      • 3.5.3 插入排序
    • 3.6 常见数组方法
    • 3.7 案例 猴子选大王
    • 3.8 案例 省份城市的三级联动
  • 4 函数
    • 4.1 函数的定义与调用
    • 4.2 变量的作用域
    • 4.3 匿名函数
    • 4.4 嵌套与递归
    • 4.5 闭包函数
  • 5 对象
    • 5.1 面向对象概述
    • 5.2 自定义对象
    • 5.3 构造函数
    • 5.4 内置对象
      • 5.4.1 String对象
      • 5.4.2 Number对象
      • 5.4.3 Math对象
      • 5.4.4 Date对象
  • 6 BOM
    • 6.1 什么是BOM
    • 6.2 window对象
      • 6.2.1 弹出窗口
      • 6.2.2 窗口打开关闭
      • 6.2.3 定时器
      • 6.2.4 限时秒杀
    • 6.3 location对象
    • 6.4 history对象
    • 6.5 navigator对象
    • 6.6 screen对象
    • 6.7 动手实践
      • 6.7.1 限时秒杀
      • 6.7.2 定时跳转
      • 6.7.3 红绿灯倒计时
      • 6.7.4 显示时间与日期
  • 7 DOM
    • 7.1 DOM对象简介
    • 7.2 HTML元素操作
    • 7.3 DOM节点操作
    • 7.4 轮播特效
    • 7.5 购物车实现方法1
      • 7.5.1 购物车结构
      • 7.5.2 购物车样式
      • 7.5.3 购物车业务逻辑
    • 7.6 购物车实现方法2
      • 7.6.1 结构页面
      • 7.6.2 样式
      • 7.6.3 页面逻辑
    • 7.7 京东
  • 8 事件
    • 8.1 事件处理
      • 8.1.1 代码
      • 8.1.2 举例
    • 8.2 事件对象
      • 8.2.1 冒泡处理
      • 8.2.2 target与currentTarget
      • 8.2.3 禁止粘贴、右键、复制、剪切
    • 8.3 事件操作
      • 8.3.1 页面事件
      • 8.3.2 鼠标事件
      • 8.3.3 键盘事件
      • 8.3.4 表单事件
    • 8.4 图片无缝滚动
    • 8.5 看了又看
    • 8.6 放大镜
    • 8.7 商品详情页放大镜效果
      • 8.7.1 页面结构
      • 8.7.2 页面样式
      • 8.7.3 页面逻辑
    • 8.8 飘动的广告
    • 8.9 猜拳游戏
    • 8.10 瀑布流
    • 8.11 手风琴效果
  • 9 正则表达式
    • 9.1 认识正则表达式
    • 9.2 字符类别与集合
    • 9.3 字符限定与分组
    • 9.4 与正则相关的方法
    • 9.5 页面注册
      • 9.5.1 注册页面结构
      • 9.5.2 注册页面样式
      • 9.5.3 注册页面逻辑
    • 9.6 身份证验证
    • 9.7 成员注册
  • 10 初识jQuery
    • 10.1 jQuery课程简介
    • 10.2 jQuery的引入.html
    • 10.3 jQuery实现第一页面
    • 10.4 jQuery对象与DOM对象
    • 10.5 jQuery对象转化成DOM对象
    • 10.6 DOM对象转化成jQuery对象
  • 11 jQuery选择器
    • 11.1 jQuery选择器之ID选择器
    • 11.2 jQuery选择器之类选择器
    • 11.3 jQuery选择器之标签选择器
    • 11.4 jQuery选择器之全局选择器
    • 11.5 jQuery选择器之层级选择器
    • 11.6 jQuery选择器之组合选择器
    • 11.7 jQuery选择器之基本过滤选择器
    • 11.8 jQuery选择器之内容过滤选择器
    • 11.9 jQuery选择器之属性过滤选择器
    • 11.10 ​jQury选择器之可见选择器
    • 11.11 jQuery选择器之表单元素选择器
    • 11.12 jQuery选择器之表单对象属性选择器
    • 11.13 jQuery选择器之子元素过滤选择器
    • 11.14 jQuery子元素过滤选择器补充
    • 11.15 jQuery选择器之特殊选择器$(this)
    • 11.16 视频
  • 12 jQuery属性与样式
    • 12.1 jQuery属性与样式之.arrt()与removeAttr()
    • 12.2 jQuery属性与样式之.html()与.text()
    • 12.3 jQuery属性与样式之.val()
    • 12.4 jQuery属性与样式之样式的操作
    • 12.5 jQuery属性与样式之.css()
    • 12.6 jQuery尺寸方法
    • 12.7 jQuery的offset()方法
    • 12.8 jQuery之checkbox各种选中操作
  • 13 jQueryDOM操作
    • 13.1 jQueryDOM的创建
    • 13.2 jQuery元素内插入节点的方法
    • 13.3 jQuery元素外插入节点的方法
    • 13.4 jQuery节点的删除方法
    • 13.5 jQuery节点的复制方法
    • 13.6 jQuery节点的替换方法
    • 13.7 jQuery节点的包裹方法6
    • 13.8 修改文档结构视频
  • 14 jQuery遍历
    • 14.1 jQuery遍历祖先节点的方法
    • 14.2 jQuery遍历后代节点的方法
    • 14.3 jQuery遍历同胞节点的方法
    • 14.4 jQuery遍历之基本过滤方法
    • 14.5 jQuery遍历之高级过滤方法
    • 14.6 jQuery实现新闻滚动
    • 14.7 jQuery实现选项卡
  • 15 jQuery效果
    • 15.1 jQuery效果-隐藏与显示
    • 15.2 jQuery效果-逐个显示与隐藏
    • 15.3 jQuery效果-淡入淡出
    • 15.4 jQuery效果-滑动
    • 15.5 jQuery效果-动画
    • 15.6 jQuery效果-手动轮播
    • 15.7 jQuery效果-自动轮播
    • 15.8 动画效果视频
  • 16 jQuery事件
    • 16.1 jQuery鼠标事件之click与dblclick事件
    • 16.2 jQuery鼠标事件之mousedown与mouseup事件
    • 16.3 jQuery鼠标事件之mouseenter与mouseleave事件
    • 16.4 jQuery鼠标事件之mouseover与mouseout事件
    • 16.5 jQuery鼠标事件之hover
    • 16.6 jQuery鼠标事件之mousemove事件
    • 16.7 jQuery鼠标事件之focusin与focuout事件
    • 16.8 jQuery表单事件之focus与blur事件
    • 16.9 jQuery表单事件之select事件
    • 16.10 jQuery表单事件之submit事件
    • 16.11 jQuery表单事件之change事件
    • 16.12 jQuery事件举例-轮播
    • 16.13 jQuery事件的绑定
    • 16.14 jQuery事件委托
    • 16.15 jQuery事件冒泡的处理
    • 16.16 jQuery键盘事件之keyup、keydown、keypress事件
    • 16.17 通过键盘事件控制元素移动
    • 16.18 通过jQuery键盘事件进行表单元素验证
    • 16.19 事件处理视频
  • 17 jQuery案例
    • 17.1 jQuery案例一无缝滚动
    • 17.2 jQuery案例二放大镜
    • 17.3 jQuery案例三瀑布流
    • 17.4 jQuery案例四简单的树形菜单
    • 17.5 jQuery案例五居中放大
    • 17.6 jQuery案例六右侧在线客服
    • 17.7 jQuery案例七五星评分
    • 17.8 jQuery案例八抽奖
    • 17.9 jQuery案例九购物车
    • 17.10 jQuery案例十手风琴
    • 17.11 jQuery案例十一轮播
    • 17.12 jQuery案例十二进度条
    • 17.13 jQuery案例十三普通图表
    • 17.14 jQuery案例十三数组图表
    • 17.15 jQuery案例十三多数组图表
    • 17.16 jQuery案例十四轮播与手风琴结合
    • 17.17 jQuery案例十五滚动楼层效果
    • 17.18 jQuery案例十六右侧悬浮楼层滚动
    • 17.19 jQuery仿天猫页面楼层跳转
  • 18 jQueryMoblie基础
    • 18.1 jqueryMoblie HelloWorld
    • 18.2 jQueryMoblie按钮
    • 18.3 jQueryMoblie列表
  • 19 jQuerymobile案例
    • 19.1 作品展示
    • 19.2 可折叠列表
    • 19.3 可折叠集合
    • 19.4 多级折叠
    • 19.5 搜索过滤
  • 20 实训
    • 20.1 JavaScript程序设计实训内容及要求
    • 20.2 实训报告
常见数组方法


<script>

//一、栈和队列方法

//1.push(value):将一个元素添加到数组末尾,并返回数组长度

var arr = new Array("tom","javk","jury","adis");

console.log(arr);

console.log(arr.length);

var element1 = "lhl"

var len = arr.push(element1);

console.log(arr);

console.log(len);

//2.unshift(value):将一个元素添加到数组头部,并返回数组长度

var numArr = [12,6,5,0,23,98,45,78];

console.log(numArr);

console.log(numArr.length);

var len1 = numArr.unshift(100);

console.log(numArr);

console.log(len1);

//3.pop():从数组末尾移出并返回一个元素,若数组为空,则返回undefined

var last = numArr.pop();

console.log(last);

console.log(numArr);

var empty = [];

console.log(empty.pop());

//4.shift():从数组开头移出并返回一个元素,如果数组为空,则返回undefined

var first = numArr.shift();

console.log(first);

console.log(numArr);

console.log(empty.shift());

//二、检索方法

//1.includes(value,index):用于判定数组中是否含义某个元素,含义则返回true,否则返回false

//value:待查元素,index:用于指定在数组中查找元素起始下标的位置,

//index如果值大于等于数组长度,则不会被检索,直接返回false

//如果index是负数,则从数组长度-1的位置检索,如果值为负数,则检索整个数组

console.log("检索");

numArr = [100,99,23,24,25];

console.log(numArr);

console.log(numArr.includes(23));

console.log(numArr.includes(23,2));

console.log(numArr.includes(23,3));

console.log(numArr.includes(23,6));

console.log(numArr.includes(23,-4));

console.log(numArr.includes(23,-9));

console.log(numArr.includes(23,-2));

//2.indexOf(value,index):返回数组中可以找到指定值得第一个索引,如果不存在则返回-1

//value:检索的数据,index:检索起始下标的位置

//index当值大于等于数组长度时候,程序不会在数组中查找,直接返回-1,

//当值为负数时候,查找下标位置等于数组长度加上这个负数,如果结果是个小于0的数,则检索整个数组

var arr = [9,8,7,8,6,10,8];

var search = 8;

console.log(arr.indexOf(search));//1

console.log(arr.indexOf(search,2));//3

console.log(arr.indexOf(search,4));//6

//3.lastindexOf(valeu,index):用于在数组中从指定下标位置检索到最后一个给定的值得下标,lastindexOf()是逆向检索到指定下标

console.log("逆向检索");

console.log(arr.lastIndexOf(8));//6

console.log(arr.lastIndexOf(8,3));//3

console.log(arr.lastIndexOf(8,2));//1

//4.Array.isArray():用于确定传递的值是否是一个Array,是返回true,否则返回false

console.log(Array.isArray(arr));//true

//三、数组转字符串

//1.join():将数组中元素连接到一个字符串

var stu1 = ["AAA","男","20","商贸系","吉林长春"];

console.log(stu1.join());//默认是逗号

console.log(stu1.join('-'));

console.log(stu1.join('\t'));

console.log(stu1.join('\n'));

var score = [100,99,87,69];

//2.toString():返回一个字符串,表示指定数组及元素

console.log(score.toString());

console.log([[1,2],['A','B']].toString());


</script>

<script>

/*四、其他方法


1.sort()

说明    

如果调用该方法时没有使用参数,将按字母顺序对数组中的元素进行排序,说得更精确点,是按照字符编码的顺序进行排序。要实现这一点,首先应把数组的元素都转换成字符串(如有必要),以便进行比较。

如果想按照其他标准进行排序,就需要提供比较函数,该函数要比较两个值,然后返回一个用于说明这两个值的相对顺序的数字。比较函数应该具有两个参数 a 和 b,其返回值如下:

若 a 小于 b,在排序后的数组中 a 应该出现在 b 之前,则返回一个小于 0 的值。

若 a 等于 b,则返回 0。

若 a 大于 b,则返回一个大于 0 的值

*/

//我们将创建一个数组,并按字母顺序进行排序

var arr = [11,6,7,9,8,10,0];

console.log(arr.sort());

var arr1 = ['bill','able','nich','tom','jurry'];

console.log(arr1.sort());

function sortNum(a,b){ return a-b;}

console.log(arr.sort(sortNum));

var arr2 = [true,false];

/*

2.concat() 方法用于连接两个或多个数组。

该方法不会改变现有的数组,而仅仅会返回被连接数组的一个副本。

*/

console.log(arr.concat(arr1));

console.log(arr.concat(arr2));

console.log(arr.concat(arr2,arr1));

console.log(arr.concat(100,101,false,'lhl'));

var arr3 = arr.concat(100,101,false,'lhl');

console.log(arr);

//3.reverse()方法用于颠倒数组中元素的

//顺序。注释:该方法会改变原来的数组,而不会创建新的数组。

console.log(arr);

console.log(arr.reverse());

//4.slice(start,end) 方法可从已有的数组中返回选定范围的元素。[start,end-1]

//语法:arrayObject.slice(start,end)

/*

start必需。规定从何处开始选取。如果是负数,那么它规定从数组尾部开始算起的位置。

也就是说,-1 指最后一个元素,-2 指倒数第二个元素,以此类推。

end 可选。规定从何处结束选取。该参数是数组片断结束处的数组下标。如果没有指定该参数,那么切分的数组包含从 start 到数组结束的所有元素。如果这个参数是负数,那么它规定的是从数组尾部开始算起的元素。

返回值

返回一个新的数组,包含从 start 到 end (不包括该元素)的 arrayObject 中的元素。

说明

请注意,该方法并不会修改数组,而是返回一个子数组。如果想删除数组中的一段元素,应该使用方法 Array.splice()

。*/

var num = [0,1,2,3,4,5,6,7,8,9];

console.log(num);

console.log(num.slice(1));//1,2,3,4,5,6,7,8,9

console.log(num.slice(2,4));//2,3

console.log(num.slice(2,10));//2,3,4,5,6,7,8,9

console.log(num.slice(2,11));//2,3,4,5,6,7,8,9

console.log(num.slice(-1));//9

console.log(num.slice(-2));//8,9

console.log(num.slice(-10));//0, 1, 2, 3, 4, 5, 6, 7, 8, 9

console.log(num.slice(-11));//0, 1, 2, 3, 4, 5, 6, 7, 8, 9

console.log(num.slice(-9));//1, 2, 3, 4, 5, 6, 7, 8, 9

console.log(num.slice(-9,3));//1, 2

//5.splice(index,howmany,item1,.....,itemX) 

//从数组中删除/添加项目,然后返回被删除的项目。

/*

index 必需。整数,规定添加/删除项目的位置,使用负数可从数组结尾处规定位置。

howmany 必需。要删除的项目数量。如果设置为 0,则不会删除项目。

item1, ..., itemX 可选。向数组添加的新项目。

*/

console.log("从数组中删除/添加项目");

console.log(num.splice(10,0,10,11));

console.log(num);

//6.fill()

//fill() 方法用于将一个固定值替换数组的元素。

//array.fill(value, start, end)

//value:固定值,start:替换起始位置,end-1替换结束为止

var fruits = ["Banana", "Orange", "Apple", "Mango"];

console.log(fruits);

fruits.fill("Runoob");

console.log(fruits);

var fruits1 = ["Banana", "Orange", "Apple", "Mango"];

console.log(fruits1);

fruits1.fill("Runoob", 2, 3);//star是闭区间,end是开区间

console.log(fruits1);

var num2= ['a','b','c','d','e','f','g'];

//7.valueOf() 方法返回 Array 对象的原始值

console.log(num2.valueOf());

</script>