上一篇呐就是纯粹为了跟js见个面 不知道上手是不是搞得有点上头 这篇来讲JS基础语法,小白(不会闭包的)可以认真看一下 这篇介绍了JS语法、打印99乘法表、数组去重、数组排序****js知识点罗列
学完了上面的, 中间有疑问可以去百度,或者找一套课看一看, 想要这部分课程资源的话可以留言, 现在我们需要进行练习!
打印99乘法表双层for循环,这是必须掌握的 外面从1数到9,外面数每个数的时候,里面都从一数到九 字符串拼接自己试试就知道了
然后我们来看数组去重~ 一个数组 var a = [1,3,1,3,34,46,23]; 它里面有重复的数字,我们不要多余的家伙,给它干掉! 先遍历它(遍历就是挨个瞅瞅里面的每一位), 然后发现重复的就干掉!
然后再提供一种一行就能解决问题的方法!
var arr = [1,2,3,3,4,4,4444]; console.log([...new Set(arr)]);运行结果如下: 这是es6的语法,会用就行,推荐阮一峰的博客: es6阮一峰
排序算法 冒泡排序: var arr = [12, 24, 12, 24, 35, 57, 797, 23, 1]; function aaa(array) { for (var i = 0; i < array.length-1; i++) { var temp; for (var j = 0; j < array.length - 1 - i; j++) { if (array[j] > array[j + 1]) { temp = array[j]; array[j] = array[j + 1]; array[j + 1] = temp; } } } return array; } var arr2 = aaa(arr); console.log(arr2);分析一下,这段代码,声明数组和最后调用函数打印结果,只是为了演示 声明这个函数,两行,返回值一行,这都跟这个算法无关 这个算法也就是9行代码, 4行是用来双重for循环了, 2行是一个if判断, 3行是交换两个变量的值, 记住432就记住这个算法了… 里面三行代码是交换两个变量的值 这个if语句是判断当前这个数,跟下一个数谁大,如果前面大,执行上面代码, 也就是说这两个数中大的数在后面, 里面的循环是多次执行这个if语句, 也就是说里面这一层的作用是把最大的数放到最后一位, 外层循环是为了多次执行里面循环 也就是说多次把最大的数放到后面去 写一遍,你就会了,4,2,3,遍历,判断,交换
// 选择排序 function ko(arr) { // 多次执行内层函数,找到多个最小值 var i, j, length = arr.length; for (i = 0; i < length - 1; i++) { // 以当前项,为最小值 var min = arr[i]; var minIndex = i; // 遍历数组,找到剩下的,最小的 for (j = i + 1; j < length; j++) { // 如果当前项比min小 if (arr[j] < min) { // 则更新min min = arr[j]; minIndex = j; } } // 交换位置 arr[minIndex] = arr[i]; arr[i] = min; } return arr; } var att = [12, 23, 35, 23, 12, 1]; var attt = ko(att); console.log(attt); js基础语法 数据类型8种:Number、string、boolean、null、undefined、object、symbol、bigInt 其实我们就用前6种,其中object包括function,Array,Data Number里面有个NaN非数字的意思 typeof Null输出object,这是个js的bug 判断数据类型的方法有很多: 1.typeof 操作符 这个有缺点,分不出来数组和函数,都输出object 2.instanceof 操作符 eg: let arr=[12,34,46,34]; console.log(arr instanceof Array); //true 判断arr属不属于数组3.Object.prototype.toString.call(new Date) // [object Date] 这个方法背过就行,能用上,它可以准确判断数据类型
undefined与null的区别,前者是声明未赋值,系统给填了一个叫做undefined的值,后面是空值,狗屁没有。一般是手动赋值为null才会出现null,原型链的顶端是null。
==与===的区别 后者在其他不一定有,==表示数据值相同,===表示数据类型和值相同 比如说判断1=='1'时,系统会把'1'变成1然后给个true,而1===‘1’的结果是falsedelete也是个关键字…delete object1.name;把这个叫做object1对象的name属性删除 也可以写成delete onject[‘name’];
in关键字 1.for in循环啊,for(let key in obj){}遍历一个对象 2.判断有没有 key in object 判断object有没有key属性
创建对象new做的4件事,在堆里开辟空间,然后把this指向开辟的空间,然后执行构造函数,然后返回新建的对象的地址。
js的对象比较赖,可以动态添加属性,var obj={} obj.name=3;console.log(obj.name);
true||false //true false|| true/false返回true/false 一真则真,前面真后面不运行
如果前后是两个别的值,那么其结果…是其中第一个不为false的值 ‘’||true 这样结果是true “你好”||7687 这样结果是"你好"
true&&false //false true&&true //true 一假则假,遇到假,返回这个值,全真则返回最后一个 var a = “你好” && “你不好”; console.log(a); //输出的是 “你不好”
parseInt()、parseFloat()、Number() 这三个是变数字: 第一个是可以…parseInt(“1332.13affwv”)变成1332 遇到任何非数字就结束 第二个是可以…parseFloat(“1332.13affwv”)变成1332.13 允许吃一个点 第三个是可以…Number()是数字对象的构造器 这个里面写非数字 就是变成NaN
isNaN()判断是否是非数字 true就是非数字 false就是数字
confirm() 询问弹出框 确认代表执行 取消代表不执行 close() 关闭当前浏览器窗口 unload关闭事件,关闭资源 即将关闭事件,挽留客户 window.οnbefοreunlοad=function(e){ var e = window.event||e; e.returnValue=(“确定离开当前页面吗?”); } open() 打开一个新的浏览器窗口
history.back()返回上一个页面 history.forward() 前进到下一个页面 history.go(-1)=history.back() history.go(1)=history.forward()
getElementById() 查找对应的id标签 仅仅只返回一个对象 getElementsByName() 返回一个根据name属性的标签数组 getElementsByTagName() 返回一个根据标签名称得到的数组
setTimeout(“方法名”,1000)延时调用 仅仅调用一次 setInterval(“方法名”,1000) 延时循环调用 调用多次 想要结束clearInterval
jq常用方法:addClass()添加样式 removeClass()删除样式 css()设置样式 show()显示 hide()隐藏 next()下一个元素 prev()上一个元素 siblings()兄弟节点 text()操作文本 html()操作元素或者节点 val()获取表单标签的值 hasClass()判断是否包含该样式 append()将一个节点追加至该节点末尾 prepend()将一个节点插入至该节点头部 remove()移除节点 empty()清空内容 attr()用来设置或者获取元素的属性 parent()获取父节点 parents()获取所有父节点 $(".class").each()循环被选中的节点 height()设置或获取高度 width()设置或获取宽度 find()查找节点 eq()查找节点 first()第一个节点 last()最后一个节点
选择器分类: 1:基本选择器 标签选择器:("tr")类选择器:
(“tr”)类选择器:(".class") id选择器:KaTeX parse error: Expected ‘EOF’, got ‘#’ at position 3: ("#̲id") 并集选择器:("#id,.class,tr") 全局选择器:$("*")
2:层次选择器 后代选择器:("trtd")子选择器:
(“trtd”)子选择器:(“tr>td”) 相邻元素选择器:KaTeX parse error: Expected ‘EOF’, got ‘#’ at position 3: ("#̲id+.class") 同辈…(“h2~di”)
3:属性选择器 $("[name=‘dawson’]") $("[name^=‘da’]") ("[name
("[name=‘on’]") $("[name*=‘o’]")
4:过滤选择器
4.1基本过滤选择器 $(“li:eq(0)”) 获取li第一个元素 $(“li:gt(0)”) 获取li下标大于0的元素 $(“li:lt(1)”) 获取li下标小于1的元素
4.2可见性过滤选择器(不常用) $(":visible") 获取所有可见的元素 $(":hidden") 获取所有隐藏的元素 5:表单选择器 $("#m :input")获取表单下所有input元素 $("#m :text") $("#m :password") $("#m :radio") $("#m :checkbox") $("#m :submit") jquery事件: 基础事件 鼠标事件:click() mouseover() mouseout() 键盘事件:keypress() keyup() keydown() jquery动画效果(事件) 控制元素显示与隐藏 show()显示 hide()隐藏 fadein()淡入 fadeout()淡出 slideUp()向上收缩 slidedown()向下延伸 animate()自定义动画 表单事件: onblur()失去焦点 onfocus()获取焦点 ^:正则表达式开头 $:正则表达式结尾 \d:表示[0-9]的数字 \D:表示非数字[^0-9] \w:表示数字或字母等价于[A-Za-z0-9] *:匹配0次或多次 也就是说任意次数 +:至少一次 ?:0次或1次
**看不懂这些知识点没关系,都会了也没什么用 js更多的是实践,下面来用案例来讲解, 更多更炫酷的js代码,学过3天js的都能看懂**