前端知识小结
时间:2022-04-22
本文章向大家介绍前端知识小结,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
1.
var a=null==undefined?1:"abc";
var b=typeof(a);
var c=typeof(b);
var d=typeof(null);
console.log(a);
console.log(b);
console.log(c);
console.log(d);
写出a,b,c,d结果值
var a=null==undefined?1:"abc";//1
var b=typeof(a);//number
var c=typeof(b);//string
var d=typeof(null);//object
2.
<script type="text/javascript">
var s="aBaCaD";
var r1=s.relace("a","#");
var r2=s.replace(/a/,"#");
var r1=s.replace(/a/g,"#");
console.log(s);
console.log(r1);
</script>
写出s和r1,r2,r3的值
var r1=s.relace("a","#");//只替换第一个a,结果是:#BaCaD
var r2=s.replace(/a/,"#");//正则表达式,但也只是替换第一个a,结果:#BaCaD
var r1=s.replace(/a/g,"#");//正则表达式,全局替换。#B#C#D
3.
有字符串“15,30-40;50”,写JavaScript代码获得数值15,30,40,50.
<script type="text/javascript">
var myStr="15,30-40;50";
var pattern=/[0-9]{2}/g;//gloabl
var result=myStr.match(pattern);
for(var i=0;i<result.length;i++){
console.log(result[i]);
}
</script>
4.
<html>
<head>Test Question</head>
<style type="text/css">
.aBox{
width:100px;
height:100px;
background:#ffcc00;
}
</style>
<body>
<div>
<div class="aBox">
<div id="abc">This is a test content!</div>
</div>
</div>
</body>
</html>
通过方法取得class="aBox"的div的宽度和高度,并且设置其背景色为红色。
思路:1.使用JavaScript取得页面嵌入样式,动态改变元素的嵌入样式。
<!DOCTYPE>
<html>
<head>
<title>Test Question</title>
</head>
<style type="text/css">
.aBox{
width:100px;
height:100px;
background:#ffcc00;
}
</style>
<body>
<div>
<div class="aBox">
<div id="abc">This is a test content!</div>
</div>
</div>
<script>
window.onload=function(){
var abcDiv=document.getElementById("abc");
var aBoxDiv=abcDiv.parentNode;
var divWidth=0;
var divHeight=0;
if(aBoxDiv.currentStyle){
divWidth=aBoxDiv.currentStyle["width"];
divHeight=aBoxDiv.currentStyle["height"];
}else{
var styleArray=aBoxDiv.ownerDocument.defaultView.getComputedStyle(aBoxDiv,null);
divWidth=styleArray["width"];
divHeight=styleArray["height"];
}
console.log(divWidth);
console.log(divHeight);
//JavaScript动态修改"嵌入样式"
var oStyleSheet=document.styleSheets[0];
var oRule=oStyleSheet.cssRules[0];
oRule.style.backgroundColor="red";
}
</script>
</body>
</html>
参考网址:
http://www.jb51.net/article/19577.htm
http://hi.baidu.com/qqljsevpepbhilq/item/827857272410ae9db6326353
http://www.w3cschool.cn/dom_cssstylesheet.html
5.谈谈你对Javascript代码的使用,优化方法。
常见的优化方法
1.将不是页面一加载就用到的JS放在body闭合之前。
2.合并多个JS文件
3.压缩文件 使用工具:http://javascriptcompressor.com/
- [WCF权限控制]基于Windows用户组的授权方式[上篇]
- EnterLib PIAB又一个BUG?
- 关于WCF的一个非常“无语”的BUG!
- 谈谈分布式事务之一:SOA需要怎样的事务控制方式
- [WCF权限控制]WCF的三种授权模式
- [WCF安全系列]消息的保护等级[下篇]
- [WCF安全系列]通过绑定元素看各种绑定对消息保护的实现
- 通过添加HTTP Header实现上下文数据在WCF的自动传递
- 模拟在WCF中的应用
- [WCF权限控制]通过扩展自行实现服务授权[提供源码下载]
- [WCF权限控制]WCF自定义授权体系详解[原理篇]
- [WCF权限控制]WCF自定义授权体系详解[原理篇]
- [WCF权限控制]WCF自定义授权体系详解[实例篇]
- [ASP.NET MVC]通过对HtmlHelper扩展简化“列表控件”的绑定
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- JNI函数加载
- CSS中的传统布局、多列布局、弹性伸缩布局及Emmet工具
- 数据分析可视化(四)|Pyecharts制作地图的几种方法评析
- tensorflow运行提示未编译使用SSE4.1,SSE4.2等问题的解决方法
- [手把手系列之二]实现多层神经网络
- 使用SystemVerilog简化FPGA中的接口
- 想用深度学习谱写自己的音乐吗?这篇指南来帮你!(附代码)
- 你不是说你会aop吗?
- 开源:推荐一个不错的离线IP地址定位库
- 武磊告别西甲!Python带你解读「全村的希望」武磊职业数据
- 谁在崛起,谁在没落?新一线城市竞争力盘点,用Python绘制动态图带你看懂!
- 两数相加
- 这样设置 IDEA,让你爽到飞起!
- Tensorflow基础入门十大操作总结
- Spring Boot 2.x基础教程:使用EhCache缓存集群