08css、JS
08.css、JS-2018/07/18
- 1.css的属性
- 文字属性:font-size:大小,font-family字体类型,font-color:颜色
- 文本颜色:color:颜色,test-decoration下划线(属性值:none/underline),text-align对齐方式(左中右)
- 背景属性:
- background-color背景颜色
- background-image背景图片(属性值URL(“图片地址”))
- background-repeat平铺方式
- 属性值:repeat默认横向纵向平铺
- no-repeat不平铺
- repeat-y纵向
- repeat-x横向
- 列表属性:list-style-type列表前的小标志,list-style-image列表前的小图片(属性值url("图片地址"))
- 尺寸属性:width宽度height高度
- 显示属性:
- display属性:
- none隐藏,block块级显示,inline行级显示
- display属性:
- 浮动属性:
- float属性:left,right;clear:清除浮动(属性值:左右、both)
- 缺点:(1)影响相邻的元素不能正常显示(2)影响父元素不能正常显示
- 2.css的盒子模型
- border:
- border-width边框宽度
- border-color边框颜色
- border-style边框线型
- border-top上边框
- border-bottom下边框
- border-left左边框
- border-right右边框
- padding:代表边框内壁与内部元素之间的距离(auto居中)
- 10px代表上下左右间距
- 1px 2px 3px 4px;上右下左
- 1px 2px 上下/左右
- 1px 2px 3px;上/左右/下
- padding-top上边框
- padding-bottom下边框
- padding-left左边框
- padding-right右边框
- margin:代表边框外壁与其他元素之间的距离
- 同padding
- border:
- 3.javascript(js)
- js是可以嵌入到HTML中,是基于对象和事件驱动的脚本语言
- 特点:(1)交互性(2)安全性:不能访问本地磁盘(3)跨平台
- js作用
- 能动态修改(增删)HTML和CSS的代码
- 能动态的校验数据
- 被引入的方式
- 内嵌脚本input type="button" value="button" onclick="alert('xxx')"/
- 内部脚本:藏在head里边的
- script type="text/javascript" //<> alert("xxx"); /script //<>
- 外部脚本 :首先创建一个JS文件,其次在HTML中引入
- script type="text/javascript" src="demo1.js" /script //<>
- js代码放在哪都行,但是在不影响HTML功能的前提下,越晚加载越好。
4.js基本语法
- 变量:
- (1) var x = 5; x='hello'; var y="hello";(''和""相同)
- (2)x=5;
- 原始数据类型(typeof)(1/2/3是伪对象,可以调用方法)
- (1)number数字
- (2)string字符串类型
- (3)boolean布尔类型
- (4)null空类型
- (5)underfined未定义
- 类型转换
- number/boolean转成string,通过toString();
- 数字字符串string转成number,通过parseInt(),parseFloat();“123xxx”-->123
- 强制转换:Boolean()强转成布尔(空字符串为假),Number()强转成数字(布尔的true是1,false是0,只能强转数字字符串)。
- 引用数据类型
- var obj = new Object();
- var num = new Number();
- 运算符
- (1)赋值运算符 var x = 5;
- (2)算数运算符
- - * / % +: 遇到字符串变成连接 -:先把字符串转成数字然后进行运算 *: 先把字符串转成数字然后进行运算 /: 先把字符串转成数字然后进行运算
- (3)逻辑运算符 && ||
- (4)比较运算符 < > >= <= != == ===:全等:类型与值都要相等
- (5)三元运算符 3<2?"大于":"小于"
- (6)void运算符(点击不跳转)
- <a href="javascript:void(0);">xxxxxx</a>
- (7)类型运算符
- typeof:判断数据类型 返回我的数据类型
- instanceof:判断数据类型 是否是某种类型
var obj = new Object();
alert(typeof obj);//object
alert(obj instanceof Object);//true
逻辑语句
- (1)if-else语句
//条件:数字非0 字符串非空就为true
if(9){
alert("true--");
}else{alert("false--");
} (2)switch语句
var x = "java";
switch(x){
case "css": alert("css"); break;
case "js": alert("js"); break;
case "java": alert("java"); break;
default: alert("def");
}(3)for 语句
for(var i = 0;i<5;i++){
alert(i);
}- (4)for迭代
var arr = [1,3,5,7,"js"];
for(index in arr){//index代表角标
//alert(index);
alert(arr[index]);
}
- (1)if-else语句
- 变量:
- 5.js内建对象
- (1)Number
- 创建方式:
- var myNum=new Number(value);
- var myNum=Number(value);(强转)
- 属性和方法:
- toString():转成字符串
- valueOf():返回一个 Number 对象的基本数字值
- 创建方式:
- (2)Boolean
- 创建方式:
- var bool = new Boolean(value);
- var bool = Boolean(value);
- 属性和方法:
- toString():转成字符串
- valueOf():返回一个 Boolean 对象的基本值(boolean)
- 创建方式:
- (3)String
- 创建方式:
- var str = new String(s);
- var str = String(s);
- 属性和方法:
- length:字符串的长度
- charAt(index):根据索引,返回字符
- charCodeAt(index):返回索引字符unicode
- indexOf(‘char’):返回字符的索引
- lastIndexOf(‘char’);逆向返回字符的索引
- split(‘char’);将字符串按照特殊字符切割成数组
- substr(index,num):从起始索引号提取字符串中指定数目的字符
- substring(index1,index2):提取字符串中两个指定的索引号之间的字符,包头不包尾
- toUpperCase();转大写
- 创建方式:
- (4)Array
- 创建方式:
- var arr = new Array();//空数组
- var arr = new Array(size);//创建一个指定长度的数据,超出长度还可以加
- var arr = new Array(element0, element1, ..., elementn);//创建数组直接实例化元素
- var arr = [];//空数组
- var arr = [1,2,5,"java"];//创建数组直接实例化元素
- 属性和方法:
- length:数组长度
- join():把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔一个
- pop():删除并返回最后元素
- push():向数组的末尾添加一个或更多元素,并返回新的长度
- reverse();反转数组
- sort();排序
- 创建方式:
- (5)Date
- 创建方式:
- var myDate = new Date();
- var myDate = new Date(毫秒值);//代表从1970-1-1到现在的一个毫秒值
- 属性和方法
- getFullYear():年
- getMonth():月 0-11
- getDate():日 1-31
- getDay():星期 0-6
- getTime():返回1970年1月1日午夜到指定日期(字符串)的毫秒数
- toLocaleString();获得本地时间格式的字符串
- 创建方式:
- (6)Math
- 创建方式:
- Math 对象并不像 Date 和 String 那样是对象的类,因此没有构造函数 Math(),像 Math.sin() 这样的函数只是函数,
- 不是某个对象的方法。您无需创建它,通过把 Math 作为对象使用就可以调用其所有属性和方法。
- 属性和方法
- PI:圆周率
- abs():绝对值
- ceil():对数进行上舍入
- floor():对数进行下舍入
- pow(x,y):返回 x 的 y 次幂
- random():0-1之间的随机数
- round():四舍五入
- 创建方式:
- (7)RegExp
- 创建方式:
- var reg = new RegExp(pattern);
- var reg = /^正则规则$/;
- 规则的写法:
- [0-9]
- [A-Z]
- [a-z]
- [A-z]
- \d 代表数字
- \D 非数字
- \w 查找单词字符
- \W 查找非单词字符
- \s 查找空白字符
- \S 查找非空白字符
- n+ 出现至少一次
- n* 出现0次或多次
- n? 出现0次或1次
- {5} 出现5
- {2,8} 2到8次,包头包尾
- 方法: test(str):检索字符串中指定的值。返回 true 或 false
- 需求:
- 校验邮箱:
var email = "haohao_827@163.com";
var reg = /^[A-z]+[A-z0-9_-]*\@[A-z0-9]+\.[A-z]+$/;
reg.test(email);
- 校验邮箱:
- 创建方式:
- (1)Number
6.js的函数
- js函数定义的方式
- (1)普通方式
- 语法:function 函数名(参数列表){函数体}
- 示例: function method(){ alert("xxx"); } method();
- (2)匿名函数
- 语法:function(参数列表){函数体}
- 示例: var method = function(){ alert("yyy"); }; method();
- (3)对象函数
- 语法:new Function(参数1,参数2,...,函数体);
- 注意:参数名称必须使用字符串形式、最后一个默认是函数体且函数体需要字符串形式
- 示例:
var fn = new Function("a","b","alert(a+b)");
fn(2,5);
- (1)普通方式
函数的参数
- (1)形参没有var去修饰
- (2)形参和实参个数不一定相等(可以多不能少,少的形参为undefined)
(3)arguments对象,是个数组,会将传递的实参进行封装
function fn(a,b,c){
//var sum = a+b+c;
//alert(sum);
//arguments是个数组 会将传递的实参进行封装
for(var i=0;i<arguments.length;i++){
alert(arguments[i]);
}
}
fn(1,2,4,8);
返回值
- (1)在定义函数的时候不必表明是否具有返回值
- (2)返回值仅仅通过return关键字就可以了,return后的代码不执行 function fn(a,b){ return a+b; //alert("xxxx"); } alert(fn(2,3));
js的全局函数
- (1)编码和解码
- encodeURI() decodeURI() encodeURIComponet() decodeURIComponent() escape() unescape()
- 三者区别: 进行编码的符号范围不同,实际开发中常使用第一种
- (2)强制转换
- Number()
- String()
- Boolean()
- (3)转成数字
- parseInt()
- parseFloat()
- (4)eval()方法
- 将字符串当作脚本进行解析运行
//var str = "var a=2;var b=3;alert(a+b)";
//eval(str);
function print(str){
eval(str);
}
print("自定义逻辑");
- 将字符串当作脚本进行解析运行
- (1)编码和解码
- js函数定义的方式
7.js的事件(事件、事件源、响应行为)
- js的常用事件
- onclick:点击事件
- onchange:域内容被改变的事件
- onfocus:获得焦点的事件
- onblur:失去焦点的事件
- onmouseover:鼠标悬浮的事件
- onmouseout:鼠标离开的事件
- onload:加载完毕的事件 等到页面加载完毕在执行onload事件所指向的函数
事件的绑定方式
- (1)将事件和响应行为都内嵌到html标签中<input type="button" value="button" onclick="alert('xxx')"/>
- (2)将事件内嵌到html中而响应行为用函数进行封装 <input type="button" value="button" onclick="fn()"/>
(3)将事件和响应行为 与html标签完全分离 <input id="btn" type="button" value="button"/>
var btn = document.getElementById("btn");
btn.onclick = function(){ alert("zzz"); };
- this关键字
- this经过事件的函数进行传递的是html标签对象
- 阻止事件的默认行为
- IE:window.event.returnValue = false;
- W3c: 传递过来的事件对象.preventDefault();
- 通过事件返回false也可以阻止事件的默认行为
- 阻止事件的传播
- IE:window.event.cancelBubble = true;
- W3c: 传递过来的事件对象.stopPropagation();
- js的常用事件
8.js的bom
(1)window对象
- 弹框的方法:
- 提示框:alert("提示信息");
- 确认框:confirm("确认信息"); 有返回值:如果点击确认返回true;如果点击取消 返回false
- 输入框:prompt("提示信息"); 有返回值:如果点击确认返回输入框的文本;点击取消返回null
open方法: window.open("url地址");
定时器:
- setTimeout(函数,毫秒值); setTimeout( function(){ alert("xx"); },3000 );
- clearTimeout(定时器的名称);
- setInterval(函数,毫秒值);
- clearInterval(定时器的名称)
- 弹框的方法:
(2)location:location.href="url地址";
- (3)history:back();forward();go();
08css、JS的更多相关文章
- JQuery 加载 CSS、JS 文件
JS 方式加载 CSS.JS 文件: //加载 css 文件 function includeCss(filename) { var head = document.getElementsByTagN ...
- Asp.net 后台添加CSS、JS、Meta标签
Asp.net 后台添加CSS.JS.Meta标签的写法,我这里写成函数方便以后使用.如果函数放在页面类中, Page参数也可以不要. 首先导入命名空间 using System.Web.UI.Htm ...
- django 关于html、css、js 目录位置
项目目录: project/ ---------------init.py ---------------views.py ---------------settings.py ----------- ...
- JavaScript知识 一、JS的数据类型
一.JS的数据类型 1.基本类型 JS共有5大基本类型,分别是: 1)Undefined.他只有一个值:undefined.如果一个变量被定义但是没有给他赋值,那么这个时候系统会默认给这个变量赋值为u ...
- nodejs处理图片、CSS、JS链接
接触Nodejs不深,看到页面上每一个链接都要写一个handler,像在页面显示图片,或者调用外部CSS.JS文件,每个链接都要写一个handler,觉得太麻烦,是否可以写个程序出来,能够自动识别图片 ...
- HTML、CSS、JS在前端开发中都扮演怎样的角色
前端开发,需要经常接触 HTML.DOM.CSS.JS等,那么HTML.CSS.JS在前端开发中究竟扮演怎样的角色呢?以下是个人的一些观点... HTML:超文本标记语言 (Hyper Text Ma ...
- C#、js、json Datetime格式总结
在工作过程中遇到时间格式的数据在C#.js 和 json保存的不同结果,现在总结一下 JavaScript Parser: 1.数字型时间转字符串时间 如var data = "/Date( ...
- 处理ios webview 更新缓存本地css、js后webview缓存无法更新的问题
项目中需要使用app本地css.js,并且可以根据服务下发自动更新本地css.js.测试发现只要更新后的css或者js和更新前路径一致,webview加载的还是更新前的css.js.怀疑是webvie ...
- Eclipse中jsp、js文件编辑时,卡死现象解决汇总
使用Eclipse编辑jsp.js文件时,经常出现卡死现象,在网上百度了N次,经过N次优化调整后,卡死现象逐步好转,具体那个方法起到作用,不太好讲.将所有用过的方法罗列如下: 1.取消验证 windo ...
随机推荐
- HTML <iframe> 标签的 src 属性
HTML <iframe> 标签的 src 属性 <iframe src="/index.html"> <p>Your browser does ...
- Spring 之AOP 面向切面编程
AOP相关术语: Joinpoint (连接点):所谓连接点是指那些被拦截到的点,在spring中,这些点指的是方法,因为spring 只支持方法类型的连接点. Pointcut(切入点):所谓切入点 ...
- POJ 3650:The Seven Percent Solution
The Seven Percent Solution Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 7684 Accep ...
- android判断正在使用的网络类型 0.不知道网络类型;1、2G;2、3G;3、4g;4、wifi
判断正在使用的网络类型 0.不知道网络类型:1.2G:2.3G:3.4g:4.wifi /** Unknown network class. {@hide} */ public static fina ...
- G. 铁路修复计划 最小生成树
G. 铁路修复计划 二分答案,改变边的权值,找最小生成树即可. 类似的思想还可以用在单度限制最小生成树和最优比例生成树上. #include<iostream> #include<c ...
- POJ2503 Babelfish map或者hash_map
POJ2503 这是一道水题,用Map轻松AC. 不过,可以拿来测一下字符串散列, 毕竟,很多情况下map无法解决的映射问题需要用到字符串散列. 自己生成一个质数, 随便搞一下. #include&l ...
- bzoj4869
http://www.lydsy.com/JudgeOnline/problem.php?id=4869 终于A了...参考了下dalao的代码... 拓展欧几里得定理,改了几次就不变了,但是用的时候 ...
- 如何精通javascript
http://stackoverflow.com/questions/2628672/what-should-every-javascript-programmer-know Not jQuery. ...
- openssh常用命令记录
command description date ssh [user@]hostname[:port] 登录远程机器 2017-03-21 scp <local_file> <use ...
- MySQL 目录结构信息
bin 目录,存储可执行文件. data 目录,存储数据文件. docs 目录,文档. include 目录,存储包含的头文件. lib 目录,存储库文件. share 目录,错误信息和字符集文件.