首页 > 代码库 > CSS和Js笔记
CSS和Js笔记
什么是css,为什么使用css。
CSS 是 Cascading Style Sheet 的缩写。译作「层叠样式表单」。
是用于(增强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。
html只能做基本的页面显示，而我们想要让页面美化，必须通过css对页面进行修饰。
示例:在页面上显示一句话.
传智播客.
怎样使用css
1.html与css的结合.
1.所有的html标签都具有一个style属性.这个属性就是用来定义css
<span style="font-size:10cm">传智播客</span>
这种方式只能对某一个标签进行修饰.
2.使用<style>标签来声明我们的css
一般是在header中通过<style>标签来声明.
<style type="text/css">
span,div{
font-size:2cm;
}
</style>
针对于当前页面上的所有元素.
3.可以单独定义一个样式表(就是一个.css文件)
在我们的页面上如果想要使用，可以直接导入这个css文件.
<link href="http://www.mamicode.com/css/3.css" type="text/css" rel="stylesheet">
------------------------------------------------------------------
2.css的选择器.(重点)
用来确定当前的css对哪些标签进行修饰.
最基本的选择器有三种.
1.ID选择器 使用# id值应该唯一.
2.class选择器
3.标签选择器
标签选择器--- 针对于我们的html标签，它可以对相同名称的标签进行统一操作.
id选择器----对标签的id的值匹配的元素进行操作，一般是个性化操作.
class选择器---它是与class属性值匹配。
关于样式表书写.
属性名称:值;
如果属性有多个值，值与值之间使用空格分开.
如果是最后一个值，分号可以省略.
-----------------------------------------------------------
css过滤选择器
关联选择器
具有层级关系的。
E1 E2 代表E1下的所有的E2
子对象选择器
E1 > E2 代表的是E1下的子E2
组合选择器
具有相同属性的标签，可以用，分割开使用。
伪元素选择器
a:link 超链接未点击状态。
a:visited 被访问后的状态。
a:hover 光标移到超链接上的状态（未点击）。
a:active 点击超链接时的状态。
属性选择器:
E[属性名=属性值]
例如：java是一门_____语言.
----------------------------------------------------------------------------
javascript介绍
正式名称叫 ECMASCRIPT.
JavaScript 被设计用来向 HTML 页面添加交互行为
无需编译，可由浏览器直接解释运行-----javascript是一门解释型语言。
JavaScript 是一种弱类型语言
类型不固定，可以任意改变。并且，没有像java中的声明类型的关键字 int String等。
在js中声明类型使用var.
js是一门基于对象的语言。
js的三个组成部分
1.基础------ECMASCRIPT核心
2.BOM browser object model
3.DOM document object model
---------------------------------------------------------------------------
javascript
在html页面中怎样书写js代码.
第一种方式不常用
可以直接在标签上书写我们的js。
<input type="button" onclick="javascript:alert(‘hello‘)">
第二种(在学习中常用)
在页面上通过<script>标签导入
它可以存在于页面上的任意位置
常用的是在<head>标签中声明
<script type="text/javascript"> type属性标识的就是我们的<script>中是javascript语言.
早期有一个属性 language="javascript" 这个现在不使用了.
脚本语言----在html中嵌入的其它的语言。 js
第三种方式（在开发中常用）
导入的方式.
<script type="text/javascript" src="http://www.mamicode.com/1.js"></script>
注意：javascript文件后缀名必须是js
如果采用导入的方式 src=http://www.mamicode.com/“js文件的路径”
那么在<script>标签中不能在写js代码
1.javascript数据类型.
js的数据类型
1.js中的数据类型分为两种
1.原始类型 （基本）
2.引用类型
js中声明一个变量使用var。
关于js中的原始类型.
分为5种 ： number 、string 、boolean 、null、undefined
1.number----数字
2.string ---字符串 使用引号引起 单引号与双引号一样，都代表字符串.
3.boolean---逻辑类型 true false
4.null------代表的是空 一般用于引用类型赋默认值
5.undefined ---未定义 我们在使用变量时，这个变量没有声明就使用了。
2.可以通过typeof查看数据的类型
3.通过instanceof可判断变量的数据类型.
instanceof是用来判断引用类型.
var a=new Number(10);
alert(a instanceof Number); true
而这种方式
var i=10;
alert(i instanceof Number); false
2.关于js中的书写规范
在书写js时，可以不写";",
那么js会以换行做为一个语句的结束。
为了避免一些问题.我们会对每个语句结束加上分号，进行强制语句结束.
3.关于firefox中的debug使用.
firebug它的主要作用有三个
1.对页面上的元素进行调试
2.可以进行抓包操作(后面会使用)
3.可以调试我们js代码
-----------------------------------------------------------------------------------
关于js中的运算符表达式. 流程控制语句.
1.关于运算符.
1.算术运算符
+ - * / % ++ -- 这些操作与java一样.
对于js来说，如果两个字符串做 - 或 * /操作，也会将值做为Number进行操作.
2.比较运算符
> >= < <= == !=
== 只比较值
=== 会比较类型与值.
3.逻辑运算符
&& || !
也存在短路.
4.三元运算符.
true?值1:值2;---->值1
false?值1:值2;---->值2
2.流程控制语句
if if..else if elseif..
while()
for()
关于js中的条件表达式结果问题?
if(true){}
关于if中条件可以写的值总结.
1.true/false
2.0 1 0代表false 1代表的true。
3.关于是否存在 如果存在 返回true ，如果不存在，返回false。
----------------------------------------------------------------------------------
关于js中的对象
1.String对象 代表字符串.
//属性:求字符串长度
//方法:
1.charAt 根据索引得到对应位置上的字符
2.concat 链接字符串，相当于+
3.indexof 得到指定的字符第一次出现的位置
4.match ------
5.replace----
6.seach-------
7.split----分隔字符按照指定的方式分隔为字符串数组
8.substr 从指定位置开始，截取指定的字符个数
9.substring 从指定位置开始，到指定位置结束。不包含结束.
2.Array js中的数组对象.
js中怎样创建数组.
js中的数组它相当于java集合.
js中创建数组的方式.
1.new Array();
2.new Array(10);
3.new Array("abc","def","kkk")
4.[]
关于数组的方法.
reverse 得到一个新的数组，它是原来数组的倒序.
sort 对数组进行排序
join 链接数组中的元素.
concat 合并数组
shift()----pop()
unshift()--push()
3.Math 关于数学运算
1.ceil 得到比这个数大的最小整数
2.floor得到比这个数小的最大整数.
3.random 得到0-1之间的一个随机数 不包1。
3.round 四舍五入
4.pow(m,n) 求m的n次方
5.sqrt(m) m开平方
6.max min
------------------------------------------------------------------
4.Date
js中的时间日期对象.
Date
1.new Date() 获取当前时间
2.getFullYear() 获取年份
3.getMonth() 获取月份 注意 1月份结果为0
4.getHours() 小时
5.getDate() 日期
6.getMinutes() 分钟
7.getSeconds() 获取秒
8.getTime() 获取毫秒值.
9.toLocalString() 获取本地的时间格式字符串.
----------------------------------------------------------------------------
5.正则
RegExp
1.关于在js中的正的写法.
1.new RegExp("正则表达式"); ---这种方式在开发中不常用.
2.直接使用 //将正则表达式进行描述.----在开发中使用比较多
例如: var reg=/\d*/
2.关于正则的应用
1.正则中提供的方法
1.exec(开发中不常使用) 检索字符串中指定的值。返回找到的值，并确定其位置。
返回的是匹配的信息，如果不匹配返回的是null.
2.test(开发使用) 检索字符串中指定的值。返回 true 或 false。
2.在String提供多个方法可以直接使用正则.
1.search 检索与正则表达式相匹配的值。
2.match 找到一个或多个正则表达式的匹配。
这个方法与正则中的exec功能一样.
3.replace 替换与正则表达式匹配的子串。
-----------------------------------------------
在开发中什么时候使用正则:做数据的校验.
-------------------------------------------------------------------------------
javascript中的函数
函数是什么？为什么使用函数?
函数与方法一样，是完成特定功能代码块。
函数可以提高程序的复用性。可能在特定情况下调用函数完成功能，而不是页面加载就执行.
js中定义函数的方式:
1.function 函数名(){}
2.var 函数名=function(){}
3.var 函数名=new Function();
//第一种
function show1(){
alert("show 1");
};
//show1(); //调用函数
//第二种
var show2=function(){
alert("show 2");
};
//show2();
//第三种
var show3=new Function("alert(‘show 3‘)");
show3();
----------------------------------------------------------------
关于js中的函数的返回值与参数问题.
1.参数问题
1.参数定义时，直接写变量，没有类型.
2.参数在传递时可能不匹配个数.
2.关于返回值问题.
在js中如果方法执行后想要有返回值，不需要声明返回类型，直接在函数中return就可以.
------------------------------------------------------------------------------------------------------
js中的全局函数.
1.关于编码函数.
一般在开发中我们经常对url进行编码与解码操作.
http://www.baidu.com?name=张三
url:http://www.baidu.com
参数:?name=张三
encodeURI / decodeURI 编解码URI ---对url进行操作
进行url跳转时可以整体使用encodeURI
encodeURI不编码字符有82个：!，#，$，&，‘，(，)，*，+，,，-，.，/，:，;，=，?，@，_，~，0-9，a-z，A-Z
encodeURIComponent / decodeURIComponent 编解码URI组件 ----对参数进行操作
传递参数时需要使用encodeURIComponent
encodeURIComponent不编码字符有71个：!， ‘，(，)，*，-，.，_，~，0-9，a-z，A-Z
escape / unescape 对字符串进行unicode编码---这个在开发不常用使用.
escape不编码字符有69个：*，+，-，.，/，@，_，0-9，a-z，A-Z
2.关于类型转换函数.
parseInt parseFloat
3.关于判断是否是数字函数.
判断是否是数字 isNaN 如果是数字返回false，不是返回true。
4.eval()函数.
它直接将字符串解析成js代码.
-----------------------
java中的字符串转换码
String s="中国"; //utf-8----编码
byte[] b=s.getBytes("utf-8");
进行传递时，将其以utf-8进行解码.
new String(b,"utf-8");
----------------------------------------------------------------------------------------------------------
CSS和Js笔记