前端-----js
一 补充css的层叠性
权重:
行内样式(1000)>内接样式(如link等...)
id(100)>class(010)>标签(001)
如果同是继承来的,距目标越近的优先级越高
继承来的(权重为0)的和直接选中(就是直接精确到某个标签)的优先级没法比.
权重一样大的,以后设的为优先级最高
同样是继承来的且描述也一样近,在数权重
如果选中了标签了,数权重(数选择器的数量)权重越大,优先级越高.
!importa :可以设置选中标签优先级无限大.
二 js(javascript) 初始
JavaScript是由公司开发而成的，问题是不便于其他的公司拓展和使用。所以欧洲的这个ECMA的组织，牵头制定JavaScript的标准，取名为ECMAScript。
1.ECMAScript基础语法:
- js引入方式
行内js
内接js
外接js
- 声明变量
var 就这一个,JavaScript不用关心其他的一些事情（比如内存的释放、指针等），更关心自己的业务
- 测试语句
console.log(变量)
alert(变量) 这个全写为window.alert(window是全局对象,此处可以省略不写)
confirm()
- 数据类型(5个)
基本数据类型: Number,String,boolean, undefined 未定义 , null.
引用数据类型:Array,aoject,function,date
typeof:查看数据类型
- 运算符
需要注意是++,出现在变量前先自加1 在赋值
出现在变量后 先赋值,在加1
== : 比较的是数值
===:比较的是数之和数据类型
所有的数据都能转成false:
几种可以转为false的类型:null,undefined,0,NaN
数据类型转换:
数字转字符串:(三种)
隐式转换(空字符串加数字),强制类型转换(强制类型转String(),变量点toString()),特殊的(两个字符串数字是可以相减的,并且减完是数字类型)
字符串转数字:(三种)
强转(Number(变量)),parseInt(可以将字符串转为数字,但是只能转字符串开头的数字类型,如果前面没有,也就是说这个字符串没有含数字,则返回NAN,nan也是数字类型;并且它支取整数,不会四舍五入如果是parseIn(1.8+2.2)那么会先计算再取值,如果是parseIn(1.8)+parseIn(1.2)那他会先取值在计算),parseFloat(stringNum);
- 流程控制
if
var ji=;
if(ji>=){
console.log('好')
}
if else
var ji = ;
if(ji>=){
console.log('恭喜你，吃鸡成功，大吉大利')
}else{
console.log('很遗憾 下次继续努力') }
if else if else
var age = ;
if (age > ) {
console.log('来了老弟！！');
} else if (age < && age > ) {
console.log('来了小老弟！！');
}else{ console.log('来了');}
switch
var gameScore = 'better';
switch(gameScore){
//case表示一个条件 满足这个条件就会走进来 遇到break跳出。break终止循环。如果某个条件中不写 break，
那么直到该程序遇到下一个break停止
// 一对一只能匹配完全一样的(===)
case 'good':
console.log('玩的很好');
//break表示退出
break;
case 'better':
console.log('玩的老牛逼了');
break;
case 'best':
console.log('恭喜你 吃鸡成功');
break;
default:
console.log('很遗憾');}
while
1.初始化循环变量
2.判断循环条件
3.更新循环变量
var a=;
while (a<=){
console.log(a);
a+=;
}
do while
//不管有没有满足while中的条件do里面的代码都会走一次,如果满足了就会遵循while循环走
var i = ;//初始化循环变量
do{ console.log(i)
i++;//更新循环条件 }while (i<) //判断循环 //
for 循环
var a=;
for (var i=;i<=;i+=){
a+=i; }
console.log(a);
- 内置对象
例子 隐藏块:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--<link rel="stylesheet" href="">--> <link rel="stylesheet" href="授课/csss.css">
</head>
<body>
<button id="btn" onclick="show()">隐藏</button>
<div id="box" style=""></div>
</body>
<script type="text/javascript" src="授课/jss.js" ></script>
</html>
#box{
width: 200px;
height: 200px;
background-color: red;
}
var b=true;
var a=document.getElementById('box');
var c=document.getElementById('btn');
function show() {
if (b) {
a.style.display = 'none';
console.log(a.id);
b=false;
c.innerText='显示';
}
else{
a.style.display='block';
console.log(a.id);
b=true;
c.innerText='隐藏';
}
}
前端-----js的更多相关文章
- 前端Js框架汇总
概述: 有些日子没有正襟危坐写博客了,互联网飞速发展的时代,技术更新迭代的速度也在加快.看着Java.Js.Swift在各领域心花路放,也是煞是羡慕.寻了寻.net的消息,也是振奋人心,.net co ...
- 闲聊——浅谈前端js模块化演变
function时代 前端这几年发展太快了,我学习的速度都跟不上演变的速度了(门派太多了,后台都是大牛公司支撑类似于facebook的react.google的angular,angular的1.0还 ...
- json处理总结(前端js和后端java)
前端(js): json是以文本,即字符串的形式传递的,而JS操作的是JSON对象,所以,JSON对象和JSON字符串之间的相互转换是关键,下面将介绍两者之间的相互转换. json字符串:var st ...
- 前端js文件合并三种方式
最近在思考前端js文件该如何合并,当然不包括不能合并文件,而是我们能合并的文件,想了想应该也只有三种方式. 三个方式如下: 1. 一个大文件,所有js合并成一个大文件,所有页面都引用它. 2. 各个页 ...
- 2015 前端[JS]工程师必知必会
2015 前端[JS]工程师必知必会 本文摘自:http://zhuanlan.zhihu.com/FrontendMagazine/20002850 ,因为好东东西暂时没看懂,所以暂时保留下来,供以 ...
- RSA加密前端JS加密，后端asp.net解密，报异常
RSA加密前端JS加密,后端asp.net解密,报异常 参考引用:http://www.ohdave.com/rsa/的JS加密库 前端JS加密代码: function GetChangeStr() ...
- 前端js的书写规范和高效维护的方案_自我总结使用的方案
作为程序员,人生最值得幸福的事有几件: 解决困扰了很长时间的问题 升职加薪 找个漂亮又靠谱的对象 深得领导的喜欢 带领团队冲锋陷阵 ... 哈哈,这些都是梦想,暂时想想就好了.这肯定和我说的东西不符合 ...
- 前端js,css文件合并三种方式,bat命令
前端js,css文件合并三种方式,bat命令 前端js文件该如何合并三个方式如下:1. 一个大文件,所有js合并成一个大文件,所有页面都引用它.2. 各个页面大文件,各自页面合并生成自己所需js的大文 ...
- 前端js上传文件 到后端接收文件
下面是前端js代码: <html> <head> <meta http-equiv="Content-Type" content="text ...
- Gridview 行变色和行按钮调用前端js
1.鼠标移动某一行 ,变色 protected void GridView_RowDataBound(object sender, GridViewRowEventArgs e) { if (e.Ro ...
随机推荐
- [BZOJ1596]电话网络
Problem 给你一棵树,可以在每个点上选择造塔或不造,每座塔可以覆盖这个节点和相邻节点,问覆盖整棵树的最小塔数. Solution 看到这道题的第一眼,我就觉得是一题贪心题,但看见出题的时候分类在 ...
- thinkphp5和thinkphp3.2.3中URL重写出现No input file specified
查询后解决办法是打开public目录下的.htaccess文件,把:RewriteRule ^(.*)$ index.php/$1 [QSA,PT,L] 改为:RewriteRule ^(.*)$ i ...
- CodeForces - 1101B
题目: B. Accordion time limit per test 3 seconds memory limit per test 256 megabytes input standard in ...
- servlet的url-pattern的缺省匹配【<url-pattern>/<url-pattern>】
最近在学习配置springmvc的框架,对配置springMVC时的url用“/”很是疑惑,经查阅前辈文章,学习了servlet的url-pattern匹配规则 <servlet-mapping ...
- vue-cli项目多页面配置
参考 : https://www.jianshu.com/p/0a30aca71b16
- 显式拥塞通告（ECN）及其在Linux上的实现
1 ECN简介 首先看看ECN握手报文的特点,根据RFC3168,ECN握手报文IP头部不能够设置ECT和CE位的 SYN报文TCP标志字段的CWR和ECE位被置1 SYN-ACK报文的CWR位被置0 ...
- error #10234-D: unresolved symbols remain error #10010: errors encountered during linking;
error #10234-D: unresolved symbols remain error #10010: errors encountered during linking;: include ...
- 解决tomcat内存溢出，java.lang.OutOfMemoryError: PermGen space
一.通过eclipse启动tomcat. 1.选择window>>preferences 2.搜索tomcat,找到自己安装的tomcat版本对应的JDK,在Optional Java V ...
- ionic2APP 如何处理返回键问题
1.APP中难免会有自定义各种modal.alert,modal或alert处于激活状态时android用户按物理返回键,页面被返回,而这些弹窗切没有被返回,一种解决办法是可以在每个组件内用生命周期钩 ...
- 使用Babel将单独的js文件 中的 ES6转码为ES5
如果你并没有接触过ES6,当你看到下面的代码时,肯定是有点懵逼的(这是什么鬼?心中一万头神兽奔腾而过),但是你没看错,这就是ES6.不管你看不看它,它都在这里. 1 2 3 4 5 6 7 8 9 ...