前端之JavaScript--基础
JavaScript
独立的语言，浏览器具有js解释器
一. JavaScript代码存在形式：
- Head中
<script>
//javascript代码
alert(123);
</script>
<script type="text/javascript">
//javascript代码
alert(123);
</script>
- 文件
<script src='js文件路径'> </script>
PS: JS代码需要放置在 <body>标签内部的最下方
二. 注释
当行注释 //
多行注释 /* */
三. 变量：
python：
name = 'alex'
JavaScript:
name = 'alex' # 全局变量
var name = 'eric' # 局部变量
四. 写Js代码：
- html文件中编写
- 临时，浏览器的终端 console
五. 基本数据类型
数字
a = 18;
字符串
a = "alex"
a.chartAt(索引位置)
a.substring(起始位置，结束位置)
a.lenght 获取当前字符串长度
...
列表(数组)
a = [11,22,33]
字典
a = {'k1':'v1','k2':'v2'}
布尔类型
小写
六. for循环
1. 循环时，循环的元素是索引
a = [11,22,33,44]
for(var item in a){
console.log(item);
}
a = {'k1':'v1','k2':'v2'}
for(var item in a){
console.log(item);
}
2.
for(var i=0;i<10;i=i+1){
}
a = [11,22,33,44]
for(var i=0;i<a.length;i=i+1){
}
不支持字典的循环
七. 条件语句
if(条件){
}else if(条件){
}else if(条件){
}else{
}
== 值相等
=== 值和类型都相等
&& and
|| or
八. 函数：
function 函数名(a,b,c){
}; a,b,c属于形参
不加分号也可以运行,但是为了程序员的荣耀和尊严,加上吧🙃
函数名(1,2,3)
九. Dom : 文件对象类型(Document Object Model，DOM)
是一种用于HTML和XML文档的编程接口.它给文档提供了一种结构化的表示方法,可以改变文档的内容和呈现方式.
DOM把网页和脚本以及其他的编程语言联系了起来.
DOM属于浏览器,而不是JavaScript语言规范里的规定的核心内容
DOM权当是把整个HTML文件，给你转化成一个对象。
html ： 裸体的人
css ： 穿上衣服
js ： 动起来
想让谁动起来，就要先找到它。
修改它的内容包括（删除，改变内部内容，修改属性例如id = 'i1' ,name = 'ff' 都叫属性。
1、找到标签
获取单个元素 document.getElementById('i1')
获取多个元素（列表）document.getElementsByTagName('div')
获取多个元素（列表）document.getElementsByClassName('c1')
a. 直接找
document.getElementById 根据ID获取一个标签
document.getElementsByName 根据name属性获取标签集合
document.getElementsByClassName 根据class属性获取标签集合
document.getElementsByTagName 根据标签名获取标签集合
b. 间接
tag = document.getElementById('i1')
parentElement // 父节点标签元素
children // 所有子标签
firstElementChild // 第一个子标签元素
lastElementChild // 最后一个子标签元素
nextElementtSibling // 下一个兄弟标签元素
previousElementSibling // 上一个兄弟标签元素
parentNode // 父节点
childNodes // 所有子节点
firstChild // 第一个子节点
lastChild // 最后一个子节点
nextSibling // 下一个兄弟节点
previousSibling // 上一个兄弟节点
2、操作标签
a. innerText
获取标签中的文本内容
标签.innerText
对标签内部文本进行重新复制
标签.innerText = ""
outertext
innertext HTML内容
value 值
属性 :
attributes // 获取所有标签属性
setAttribute(key,value) // 设置标签属性
getAttribute(key) // 获取指定标签属性
/*
var atr = document.createAttribute("class");
atr.nodeValue="democlass";
document.getElementById('n1').setAttributeNode(atr);
*/
b. className
tag.className =》 直接整体做操作 //获取所有类名
tag.classList.add('样式名') 添加指定样式 //添加类
tag.classList.remove('样式名') 删除指定样式 //删除指定类
PS：
<div onclick='func();'>点我</div>
<script>
function func(){
}
</script>
c. 标签操作
创建标签 :
//方法一:
var tag = document.createElement('a')
tag.innerText = "ff"
tag.className = "c1"
tag.href = "http://www.cnblogs.com/ugfly/"
// 方式二
var tag = "<a class='c1' href='http://www.cnblogs.com/ugfly//wupeiqi'>ff</a>"
操作标签 :
/ 方式一
var obj = "<input type='text' />";
xxx.insertAdjacentHTML("beforeEnd",obj);
xxx.insertAdjacentElement('afterBegin',document.createElement('p'))
//注意：第一个参数只能是'beforeBegin'、 'afterBegin'、 'beforeEnd'、 'afterEnd'
// 方式二
var tag = document.createElement('a')
xxx.appendChild(tag)
xxx.insertBefore(tag,xxx[1])
e. checkbox
获取值
checkbox对象.checked
设置值
checkbox对象.checked = true
补充 :
console.log 输出框
alert 弹出框
confirm 确认框
// URL和刷新
location.href 获取URL
location.href = "url" 重定向
location.reload() 重新加载
// 定时器
setInterval 多次定时器
clearInterval 清除多次定时器
setTimeout 单次定时器
clearTimeout 清除单次定时器
十. 对象
> 创建方式
>
> var s = "str"
var s = new String("str")
属性和方法 :
var s = "hello"
console.log(s.length)
console.log(s.toUpperCase)
console.log(s.charAt(1)) :通过索引找字符
console.log(s.indexOf("l")) : 通过字符找索引
***
字符串处理方法 :
常用的有 :
字符串截断 :
substr(1,3) : 从1开始截三个 (截断起始位置,截断长度)
substring(1,3) : 从1开始数,只取第三个 (截断起始位置,拿到的数的位置)
这俩和切片一样,拿前不拿后.
切片 :
slice(1,3) : 拿前不拿后
和substr没区别
字符串切割 :
split() :
***
如何创建数组?
方式1 : var arr=[11,2,33];
方式2 : var arr2=new Array(1,2,3)
方式3 : var arrname = new Array(长度) 定长
方式1和方式2不同点在于 :1 返回的类型是object,2 返回的类型是
数组方法 :
var arr=[11,22,33,4,'hello',true];
console.log(arr[4])
join方法 :
在JS里面,join方式映射到数组.
py里面使用join方法,没有数字概念
reverse 反转 sort 根据ASCii 码排:
var s =[1,2,3,4,5,111]
console.log(s.reverse())反转
console.log(s.sort()) 黑红梅方式的比较
push pop :都是在最后位置进行操作
这俩都是进行的一个栈操作.
先进后出.
十一. 三元运算符 :
console.log(2>1?2:1)
十二. Math对象 (类似于py里的sub函数) : Math是对象,可以直接调用
console.log(Math.max(1,2,3));
console.log(Math.min(1,2,3));
floor : 向下取整
console.log(Math.floor(1,23)); : 1
console.log(Math.floor(1.67)); : 1
ceil : 向上取整
console.log(Math.ceil(1.00)); :1
console.log(Math.ceil(1.01)); :2
十三. function 函数
arguments : 相当于py中的 *args
匿名函数 : 使用完会立即回收
PY中 : lambda x,y :x+y
JS : 也叫自执行函数
(function foo(i){
alert('en')
})(i)
### 注意 : js的函数加载执行和Python不同,它是整体加载完才会执行,所以执行函数放在函数声明上面或者下面都可以.
***
🌈
