JS 语言介绍
js -- javascript
ECMAscript5 es5
ECMAscript6 -- vue.js react .. es6
由三个部分组成
1 ECMAscript5的核心 js语言
2 BOM 浏览器对象模型 js操作浏览器,做出对应的一些效果
3 DOM 文档对象模型 -- HTML文件js代码引入方式
三种方式
1 head标签的script标签里面(alert('xx'), confirm('xx'))
2 body标签后者body标签下面html标签上面的script标签里面
3 外部文件引入的方式来使用
a 创建一个.js结尾的文件,写上咱们的js代码
比如:alert('are you ok?');
b 在想使用这个js代码的html文件中,head标签或者body标签下面或者上面写下面的内容
<script src="01test.js"></script>
<script src="js文件路径"></script>
<script></script> 标签推荐写在body下面和html标签之间JS语言基础
变量
var a = 10; 变量定义 var 变量名;
var b; 只声明，没有赋值的情况下，b的值为undefined数据类型
number类型(整数,浮点数)
var n = 11;
var n2 = 11.11;
js代码注释 // js代码
查看数据类型 typeof 变量名;
typeof n; -- number类型
变量声明,但没有赋值的时候,变量的值为undefinedstring类型(字符串)
示例:
var a = 'alexsb';
var a = new String('ss'); typeof a; -- "object"
字符串的操作方式
var s = '诱色可餐徐茂洁';
索引取值: s[1] -- '色'
移除两端空格: s.trim();
移除左端空格s.trimLeft();
移除右端空格s.trimRight();
var value = name.charAt(index) // 根据索引获取字符
示例: var s = 'hello'; -- s.charAt(4); -- 'o'
var value = name.substring(start,end) // 根据索引获取子序列,切片
示例: s.substring(1,3); -- "el" 左包右不包
字符串拼接： +
s1
"hello world"
s2
" hello "
s1 + s2
"hello world hello "布尔类型(boolean类型)
var a = true;
var b = false;
typeof a; -- "boolean"undefined和null类型
undefined 变量声明了,但是没有赋值,此时这个变量是undefined类型
null : 变量不用了,就可以给变量赋值为null, --- object类型 -- 和python的None一样数组(array)
var name = [11,22,33]; typeof name; -- "object"
name.length -- 得到数组长度
数组常用方法:
names[0] // 索引,索引也是从0开始的
names.push(ele) // 尾部追加元素
示例:a.push('xx'); -- [11, 22, 33, "xx"]
var ele = names.obj.pop() // 尾部移除一个元素
示例:a.pop(); -- [11, 22, 33]
names.unshift(ele) // 头部插入元素
示例:a.unshift('ssss'); -- ["ssss", 11, 22, 33]
var ele = obj.shift() // 头部移除一个元素
示例:a.shift(); -- [11, 22, 33]
names.splice(index,0,ele) // 在指定索引位置插入元素
names.splice(从哪删(索引),删几个(个数),删除位置替换的新元素(可不写,可写多个))
names.splice(index,1,ele) // 指定索引位置替换元素
names.splice(index,1) // 指定位置删除元素
示例: a.splice(1,2) -- [11, 22, 33]
a.splice(1,1,'xx','oo','asdf'); -- [11, "xx", "oo", "asdf", 33]
names.slice(start,end) // 切片
示例:a.slice(1,3);-- [22, 33]
names.reverse() // 原数组反转
示例:a.reverse(); -- [44, 33, 22, 11]
names.join(sep) // 将数组元素连接起来以构建一个字符串
示例: var a = ['ni','hao','ma',18]
a.join('+'); -- "ni+hao+ma+18"
names.concat(val,..) // 连接数组
示例: var a = [11,22]; var b = ['aa','bb']
var c = a.concat(b); c -- [11, 22, "aa", "bb"]
names.sort() // 对原数组进行排序
很尬!
需要自己定义规则:
var l4 = [11.11,2,4.5,33];
function compare(a,b){
return a - b; 当大于0时,两个数据换位置
};
使用: l4.sort(compare); 升序排列自定义对象(dict)
// 声明
info = {
name:'武沛齐',
"age":18
}
var a = {username:'xx',password:'123'}; //可以不加引号
typeof info;
"object"
// 常用方法
var val = info['name'] // 获取,通过键取值必须加引号,
info.name 也是可以的
info['age'] = 20 // 修改
info['gender'] = 'male' // 新增
delete info['age'] // 删除流程控制
if判断
if (a == 1){ //判断条件写在小括号里面,大括号里面写条件判断成功后的代码内容
console.log('1111');
}
else{
console.log('222');
}多条件判断
var a = 0;
if(a > 1){
// console.log('1111');
// var hhhh = document.getElementById('d1');
// hhhh.innerText = '彭于晏';
}else if(a<1){
console.log('2222');
}else {
console.log('3333');
}运算符
> < == != >= <= === !==
var a = 2;
var b = '2';
a == b; true 弱等于
a === b; false 强等于
a != b; false
a !== b; true算术运算
+ - * / % ++ --
++ 自增 1
-- 自减 1
var a = 2;
a++ 先执行逻辑 在+1
++a 先+1 在执行逻辑
简单示例:
if (++a === 4){
console.log('xxx');
}
else{
console.log('ooo');
};switch判断
var num = 200;
switch(num++){ 参数必须是数字或者得到数字的算式
case 10:
console.log('未成年');
break;
case 18:
console.log('成年');
break;
case 35:
console.log('油腻老男人');
break;
case 100:
console.log('....');
break;
#上面的case条件都不成立就执行default
default:
console.log('太大了');
};异常捕获
try{
console.log(xx);
}catch(e){
console.log(e);
}
// 不管有没有异常都会执行finally
finally{
console.log('sssss');
}循环
for循环
for (var i=0;i<100;++i){
console.log(i);
};
循环数组
var d = [11,22,33];
for (var i in d){
if (d[i] === 22){
continue; //跳出本次循环
// break; // 结束循环
}
console.log(i,d[i]);
}
for (var i=0;i<d.length;i++){
console.log(i,d[i]);
};
循环自定义对象--python字典
for (var i in d){
console.log(i,d[i]); #不要用d.i来取值
}while
var a = 0;
while(a<5){
a++;
if (a===2){
continue;
}
console.log(a);
}js的基础数据类型都有布尔值属性, []--false 0,{},'',undefined,null,NaN
字符串转数字:
var a = '11';
parseInt(a);
var a = '23abc';
parseInt(a); 23
var a = '11.11';
parseFloat(a) -- 转换为浮点型
var a = 'asdfabc';
parseInt(a); -- NaN -- not a number
typeof NaN; -- "number"
NaN === NaN; -- false
NaN == NaN; -- false
数字转字符串
var b = 20;
String(b);函数
普通函数
function f1(a,b){
return a+b;
}
执行: f1(1,2) -- 3
function f1(a,b){
return a,b;
};
f1(1,2);
不能返回多个值: 2匿名函数
var a = function (a,b){
console.log('xxx');
}
var d = {'xx':'oo','f':function (a,b){
console.log('xxx');
}};
执行:d.f(1,2);自执行函数
(function () {
alert('自执行函数!')
})()序列化
var d = {'a':'aa','b':18};
序列化:
var d_json = JSON.stringify(d); //python json.dumps(d);
反序列化:
d_json = "{"a":"aa","b":18}"
var reverse_json = JSON.parse(d_json);BOM对象 浏览器对象模型
弹框
alert('xx');
confirm('are you sure?')location对象
location.href; 获取当前页面的地址
location.href = 'http://www.baidu.com'; 跳转到这个网址上
location.reload(); 刷新当前页面计时器
第一种:一段时间之后执行某个任务
设置:var t = setTimeout(function(){confirm('你满18岁了吗?')},5000);
var t = setTimeout("console.log('xxx')",1000);
t就是浏览器用来记录你的计时器的标识数字
清除:clearTimeout(t)
第二种:每隔一段时间执行某个任务
设置:var t = setInterval(function(){confirm('弹个框!!')},3000);
清除:clearInterval(7);DOM对象
HTML文档(.html文件)
直接查找选择器
html代码:
<div class="c1" id="d1"></div>
<div class="c1 c2" id="d2"></div>
css代码:
.c1{
background-color: green;
height: 100px;
width: 100px;
}
.c2{
background-color: red;
/*height: 100px;*/
/*width: 100px;*/
color:red;
}
按标签名查找: var divEle = document.getElementsByTagName('div');
按id值查找: var d1 = document.getElementById('d1');
示例: d1.style.height = '600px';
按类值查找:var a = document.getElementsByClassName('c1');间接查找选择器
var div1 = document.getElementsByClassName('c1')[0];
div1.nextElementSibling.style.color = 'red'; 找下一个兄弟标签,并改了色
div1.previousElementSibling; 找上一个兄弟
div1.firstElementChild; 找第一个儿子
div1.lastElementChild; 找最后一个儿子
div1.children; 找所有儿子,是一个数组
div1.parentElement; 找到自己的父级标签文本操作
innerText
获取文本:
var a = document.getElementById('jd')
a.innerText; 只获取文本内容
设置文本:
a.innerText = '<a href="">校花</a>';不能识别标签,单纯的文本内容显示
innerHTML
获取文本
var d = document.getElementsByClassName('c1')[0];
d.innerHTML; 获取的内容包含标签
设置文本:
d2.innerHTML = '<a href="">校花</a>'; 能够识别标签,生成标签效果value值操作
input标签
html:
<input type="text" name="username" id="username" >
示例:
var inp = document.getElementById('username'); 找到标签
inp.value; 获取值
inp.value = '200块!'; 修改值class类值操作
var div1 = document.getElementById('d1');
div1.classList; // 获取标签类值
div1.classList.add('c2'); // 添加类值
div1.classList.remove('c3'); // 删除类值
div1.classList.toggle('c3'); // 有就删除,没有就添加
var t = setInterval("div1.classList.toggle('c3')",1000); //定时器添加style样式操作
var div1 = document.getElementById('d1');
div1.style.color = 'green';HTML的label标签补充
<label >用户名:
<input type="text" name="username" id="username">
</label>
<label for="password">密码: </label>
<input type="password" name="password" id="password">button补充
普通按钮,没有提交效果
<input type="button">
<button type="button">注册</button>
下面两个能够提交form表单数据
<input type="submit" value='登录'>
<button type="submit">注册</button>事件
DOM中可以为标签设置事件，给指定标签绑定事件之后，只要对应事件被处罚，就会执行对应代码。
常见事件
- onclick，单击时触发事件
- ondblclick，双击触发事件
- onchange，内容修改时触发事件
- onfocus，获取焦点时触发事件
- onblur，失去焦点触发事件
绑定事件的两种方式
方式1
<div class="favor" onclick="doFavor(this);">赞</div>
function doFavor(self) {
...
}
方式2
<div class="favor">赞</div>
var dEle = document.getElementsByClassName('.favor')
dEle.onclick = function(){
...
}修改下拉框触发change事件
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'/>
<title>DOM学习</title>
</head>
<body>
<select id="city" onchange="changeEvent(this);">
<option value="10">普通青年</option>
<option value="20">文艺青年</option>
<option value="30">二逼青年</option>
</select>
<script type="text/javascript">
function changeEvent(self) {
console.log(self.value);
}
</script>
</body>
</html>左侧菜单点击切换案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS学习</title>
<style>
body {
margin: 0;
}
.header {
height: 48px;
background-color: #499ef3;
}
.body .menu {
position: fixed;
top: 48px;
left: 0;
bottom: 0;
width: 220px;
border-right: 1px solid #dddddd;
overflow: scroll;
}
.body .content {
position: fixed;
top: 48px;
right: 0;
bottom: 0;
left: 225px;
/* 超出范围的话，出现滚轮 */
overflow: scroll;
}
.body .menu .title {
padding: 8px;
border-bottom: 1px solid #dddddd;
background-color: #5f4687;
color: white;
}
.body .menu .child {
border-bottom: 1px solid #dddddd;
}
.body .menu .child a {
display: block;
padding: 5px 10px;
color: black;
text-decoration: none;
}
.body .menu .child a:hover {
background-color: #dddddd;
}
.hide {
display: none;
}
</style>
</head>
<body>
<div class="header"></div>
<div class="body">
<div class="menu">
<div class="item">
<div class="title" onclick="showMenu(this);">国产</div>
<div class="child">
<a href="#">少年的你</a>
<a href="#">我不是药神</a>
<a href="#">我和我的祖国</a>
</div>
</div>
<div class="item">
<div class="title" onclick="showMenu(this);">欧美</div>
<div class="child hide ">
<a href="#">战争之王</a>
<a href="#">华尔街之狼</a>
<a href="#">聚焦</a>
</div>
</div>
<div class="item">
<div class="title" onclick="showMenu(this);">韩国</div>
<div class="child hide">
<a href="#">坏家伙们</a>
<a href="#">寄生虫</a>
<a href="#">燃烧</a>
</div>
</div>
</div>
<div class="content"></div>
</div>
<script type="text/javascript">
function showMenu(self) {
var childList = document.getElementsByClassName('child');
for (var i = 0; i < childList.length; i++) {
childList[i].classList.add('hide');
}
self.nextElementSibling.classList.remove('hide');
}
</script>
</body>
</html>Django基础和项目的学习
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
