前端入门学习笔记.md · 秋意中等我/Front-end speed entry demo

学习记录

参考www.w3school.com

* #### 照片布局及样式

标签 div

Html块 	定义文档中的分区或节（division/section）。
	
	HTML <div> 元素
	HTML <div> 元素是块级元素，它是可用于组合其他 HTML 元素的容器。
	<div> 元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。
	如果与 CSS 一同使用，<div> 元素可用于对大的内容块设置样式属性。
	<div> 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用 	<table> 元素进行文档布局不是表格的正确用法。<table> 元素的作用是显示表格化的数据。
	
技巧

-- 自动补全功能

打出div字符串，按Tab键回车，自动补全对称尖括号
	
	<div>

</div>

-- 行复制

Command/Ctrl+D

无序列表 ul

无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。
	无序列表始于 <ul> 标签。每个列表项始于 <li>。
	<ul>
		<li>Coffee</li>
		<li>Milk</li>
	</ul>
		
		
* #### 艺术倾斜及动画效果实现

第一张图片 沿X轴顺时针旋转30度

nth-child() 选择器

定义和用法
	:nth-child(n) 选择器匹配属于其父元素的第 N 个子元素，不论元素的类型。
	n 可以是数字、关键词或公式。

p:nth-child(2)
	{
	background:#ff0000;
	}

2D效果 transform

rotate()：元素顺时针旋转给定的角度，负值表示逆时针旋转,rotate(0deg)代表恢复原位
 
 scale()：元素的尺寸会增加或减少，根据给定的宽度和高度,scale(1.1)数字代表缩放比例，当-2的时候为翻转动作

.container li:nth-child(6){

transform: rotate(-5deg);
	  }

各个属性浏览器兼容查询工具

http://caniuse.com/
	需要查询添加兼容性前缀标示

鼠标移上去,照片恢复原位,缩放效果

CSS:hover 选择器
	
选择鼠标指针浮动在其上的元素，并设置其样式：
a:hover

:hover 选择器用于选择鼠标指针浮动在上面的元素。

提示：:hover 选择器可用于所有元素，不只是链接。
提示：:link 选择器设置指向未被访问页面的链接的样式，
:visited 选择器用于设置指向已被访问的页面的链接，
:active 选择器用于活动链接。

注释：在 CSS 定义中，:hover 必须位于 :link 和 :visited 之后（如果存在的话），这样样式才能生效。
		
		
	.container li:hover {

transform:rotate(0deg) scale(1.1);
	}
	
	
	a:link    {color:blue;}
	a:visited {color:blue;}
	a:hover   {color:red;}
	a:active  {color:yellow;}
	
	
	a.ex1:hover,a.ex1:active {color:red;}
	a.ex2:hover,a.ex2:active {font-size:150%;}

* ####跳跃的课工厂

案例展示--（html5+CSS3）
	
	````
	炫酷网站制作
	
	游戏开发
	
	移动开发
	
	应用开发
	
	
	````
	
Div设置

*{
            margin: 0;
            padding:0;
        }//* 所有的html元素，都把它默认的边界，填充，清0
        
		border: 1px gray solid;//一像素，灰色，实线
		margin  50px  auto;//边界 距离上下50像素，左右自适应
		
		transform-style: preserve-3d;

图片显示参数设置

<div class="container"><a class="ke" href=""></a>//a 超链接标签 ke
		
		
		.ke {
		
			display: block;//呈现方式：块
			background: url(img/ke.jpg) 0px 0px /300px 437px no-repeat;//背景图：图路径，设置背景图位置偏移量，/背景图的宽和高，不重复（填不满情况不重复平铺）
		}

阴影及转换设置

box-shadow: -7px 10px 10px #333;//设置阴影：X轴方向负7像素，Y轴方向正10像素，10像素模糊距离（x轴负7,y轴正10，10像素模糊距离）

transform:rotateX(60deg)  rotateY(3deg)  rotateZ(-25deg);//
		围着x轴转60像素（顺时针）围着Y轴转3像素  围着Z轴转25像素

w3school  transform3d

transform-style: preserve-3d;//变形风格,子元素将保留其 3D 位置。
        perspective: 1200px;//景深，perspective 属性定义 3D 元素距视图的距离，以像素计。该属性允许您改变 3D 元素查看 3D 元素的视图。距离视图的

动画效果实现

添加事件
	
	   CSS :hover 选择器 选择鼠标指针浮动在其上的元素，并设置其样式：

.ke:hover{

/* 在x,y,z方向上旋转为0度*/
            transform: rotate3D(0,0,0,0deg);

box-shadow: -100px 100px 10px #fff;/*阴影*/
        }

过渡
            
         transition用于设置过渡属性：默认值all 0 ease 0
         
            
         transition: all 1s ease-out;/*所有的元素过渡,花费1s,慢速结束*/

示例
		把鼠标指针放到 div 元素上，其宽度会从 100px 逐渐变为 300px：
		div
		{
		width:100px;
		transition: width 2s;
		-moz-transition: width 2s; /* Firefox 4 */
		-webkit-transition: width 2s; /* Safari 和 Chrome */
		-o-transition: width 2s; /* Opera */
		}

* ####如何批量修改多个标记的样式

margin 属性
margin 简写属性在一个声明中设置所有外边距属性。该属性可以有 1 到 4 个值。

margin:10px 5px 15px 20px;
		上外边距是 10px
		右外边距是 5px
		下外边距是 15px
		左外边距是 20px

margin:10px 5px 15px;
		上外边距是 10px
		右外边距和左外边距是 5px
		下外边距是 15px
		
		margin:10px 5px;
		上外边距和下外边距是 10px
		右外边距和左外边距是 5px
		
		margin:10px;
		所有 4 个外边距都是 10px

padding 属性
padding 简写属性在一个声明中设置所有内边距属性。

padding:10px 5px 15px 20px;
			
		上内边距是 10px
		右内边距是 5px
		下内边距是 15px
		左内边距是 20px
		
		padding:10px 5px 15px;
		上内边距是 10px
		右内边距和左内边距是 5px
		下内边距是 15px
			
		padding:10px 5px;
		上内边距和下内边距是 10px
		右内边距和左内边距是 5px
			
		padding:10px;
		所有 4 个内边距都是 10px

CSS选择器如何批量修改多个标记的样式

选择器就是把符合某个规则的元素（标记对）都选出来
	这些规则可以是：
	都是同类型的标记，比如都是div
	都具有某个相同的属性名，或者属性值也相同的标记
	
	css选择器可以写在<style></style>标记中
	<style>
	选择器{
		样式1：样式值;
		样式2：样式值;
	}
	</style>

常见的四种选择器

标记名直接写，点class,#ID,属性要加方括号

1. 标记选择器
		可用修改所有相同标记名元素的样式
		li{

color: red;
    	}
		<li class="biankuang">列表项</li>
		
	2. .class选择器
		选择并设置 class="intro" 的元素的样式：
		选择器选取带有指定类 (class) 的元素。
    	.biankuang{

border: 1px solid #000;
    	}
		<li class="biankuang">列表项</li>
		
	3. 	#id 选择器
		选择 id="firstname" 的所有元素。
		可用修改具有指定id属性值的元素的样式
		#为带有指定 id 的元素设置样式。
		#beijing{

background: orange;
    	}
		<li id="beijing">列表项</li>
	4. [attribute] 选择器 【属性】选择器
		可用修改具有任意指定属性的元素的样式
		选择带有 target 属性所有元素。
		[dazi]{

font-size:24px;
    	}
		<li dazi="24">列表项</li>

示例任务：
	1. 使用元素(标记)选择器改变多个li的颜色；
	2. 使用.class(类)选择器为多个li添加边框
	3. 使用#id选择器改变一个li的背景图颜色；
	4. 使用[属性]选择器改变多个li的文字大小；

ol属性 有序列表标记,标签定义有序列表。

solid属性  实心

如何使用组合选择器
	
	空格选后代，尖号选儿子，
	加号选兄弟，冒号选伪类。
	
	1.使用后代选择器组合改变所有li元素的文字颜色；
	2.使用子层选择器组合改变子元素的背景色；
	3.使用兄弟选择器组合改变id为1元素后面li元素文字颜色；
	4.使用伪类选择器组合改变a链接标签的颜色；

1.选择后代元素器

2.选择子层的元素
	
	
	3.选择兄弟元素
	
	4.使用伪类选择器

<style>
	ol li{

color: blue;
    }

ol>li{

background: orange;
    }

[id="1"]+li{

color: green;
    }

.lianjie:hover{

color: red;
    }
    </style>
    
    
	<body>
	<a class="lianjie">这是一个链接</a>
	<li>外部的列表项</li>
	<ol>
    <li>子层的列表项</li>
    <li>子层的列表项</li>
    <ul>
        <li id="1">后代的列表项</li>
        <li>后代的列表项</li>
        <li>后代的列表项</li>
        <li>后代的列表项</li>
    </ul>

</ol>
	</body>

怎么用css作动画效果

1. 定义一个动画 
	@keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果。
	
	@keyframes 动画名{
	
		from{样式名;样式值;}
		to{样式名;样式值;}
	}
	
	
	@keyframes myfirst
	{
		from {background: red;}
		to {background: yellow;}
	}

2. 指定到需要动画的元素
   		animation:动画名 动画时长 重复次数 重复方法
		
	3.演示制作宽度动画
	
		制作一个div,id ="shengsuotiao";
		使用#shensuotiao选择器，指定background;
		用@keyframes myani制作一个宽度从0到200px的动画
		用animation:myani 1s infinite alternate 指定动画 无限循环1秒动画，循环方式反复倒放伸缩

#shensuotiao{

background-color: red;
        	height: 50px;
        	width: 100px;
        	animation:myani 1s infinite normal;
    	}

@keyframes myani {

from{ width: 0}
        	to{
            	width: 100px;
        	}
    	}

怎么加载外部的css文件

1.可以在三个字符编写css样式
		
		(1)html文件的元素的style属性内
		<div style="css样式名：样式值；"></div>
		
		(2)html文件的style标记内
		<style>css选择器{css样式名：样式值}</style>
		
		(3)单独的css文件内
		css选择器{css样式名：样式值；}

html文件内使<link>标记加载
	<link rel="stylesheet" href="css文件地址"/>

* ####快速起步Javascript编程语言-1

什么是JavaScript -- 一种编程语言

HTML,CSS,JS的关系

html定义网页的内容，即网页上有什么
		css定义这些元素的外观，即看上去什么样
		js可以操控一切，创造动态效果，让网页可以相应用户的操作，即决定了网页怎么动，怎么用
		
		
可以在三种地方写JS代码

（1）直接写在标记的事件属性值内，如onclick="Js代码"，onclick=on click 当元素被点击的时候。
		
			<h1 onclick="alert('hi!')">大标题</h1>
		
		
		（2）直接写在html文件内的<script></script>标记内
		
			<script>

alert("hello!")
			</script>
			
		
		（3）写在单独的js文件中，再在html内用<script src="js文件地址">载入
		
			
			<script src="index.js"></script>

变量，数据和对象

数据
		三种基本类型：数字，字符串（文字），数组（集合）
		当用的格式：对象.属性=数据；执行动作（数据）；
		
		
		变量
		新建变量的格式是：
		var 变量名=对象；
		var 变量名=数据；
				
		创建一个学生对象xiaoming,			指定他的姓名和年龄；
		创建一大人对象laowang;指定他的姓名和年龄；
		指定小明的爸爸属性xiaoming.dad=laowang;
		计算小明出生时候爸爸的年龄laowang.age减去xiaoming.age;
		
			
如何用js操作html和css?

1.创建html元素（标记对），document，文档，这里指整个网页
	var dom = document.createElement("标记名");
				
	2.把创建的元素添加到页面上
	document.body.appendChild(dom);
	或者
	另一个页面的元素.appendChild(dom);
	
	3.获取页面上的元素
	document.getElementById("元素的ID值")
	
	4.修改元素的文字
	dom.innerHTML = "字符串文字";
	inner,内部的，这里指标记对中间的内容
	
	5.修改元素的属性
	dom.属性名=属性值；
	
	6.修改元素的css样式
	dom.style.样式名=”样式值"
	style,样式，这里指元素的style属性
	
	7.删除元素
	dom.remove();
	
	
	
如何编写函数并给按钮添加点击

1.	新建函数

var 变量名 = function(参数，参数，...){
	
			执行的命令代码；
			执行的命令代码；
			...
			
			return 数据或对象；
		}
		
		
		function, 函数，功能
		return,返回结果
		
2. 运行函数，与命令一样格式

函数名();
		函数名(参数);
		函数名(参数1，参数2，...);
		
		
3. 把函数指定到元素事件

制作简单加法计算器
	
	
		js文件内编写加法函数var add =function(a,b){...};
		尝试运行这个函数，add（3,2）;
		html文件内添加元素input,span,input,span,span,组成等式
		js文件内我们编写了var qiuhe=function(){....}函数
		html内添加一个按钮，onclick事件属性使用qiuhe函数
		
		var qiuhe = function () {

var shuru1 = document.getElementById("shuru1");
    		var jiashu1 = Number(shuru1.value);

var shuru2 = document.getElementById("shuru2");
    		var jiashu2 = Number(shuru2.value);

var  he =jiashu1+jiashu2;

var dom = document.getElementById("jieguo");
    		dom.innerHTML = he;
		}

var add = function (a,b) {

var c = a+b;
    		return c;
		}

var  res = add(3,2);
		//alert(res);
		
		
		
			
* ####快速起步Javascript编程语言-2
	
	
数字的操作--基本运算
避免数字与字符串混合操作，可以利用Number操作 例如12+Number("34")

![基本运算](/Users/jiang/前端极速入门/Front-end-speed-entry-demo/JS的数字操作/屏幕快照 2016-10-25 下午4.08.18.png)

![快捷指定操作](/Users/jiang/前端极速入门/Front-end-speed-entry-demo/JS的数字操作/屏幕快照 2016-10-25 下午4.08.27.png)

![指定小数位和取整数](/Users/jiang/前端极速入门/Front-end-speed-entry-demo/JS的数字操作/屏幕快照 2016-10-25 下午4.10.44.png)

![随机数](/Users/jiang/前端极速入门/Front-end-speed-entry-demo/JS的数字操作/屏幕快照 2016-10-25 下午4.11.56.png)

#####操作字符串

1.双引号与单引号
	
		字符串既可以用双引号，也可以用单引号，但不能混用
			"hello world!"或'hello world'都正确
		
	    双引号内嵌套的字符串应该用单引号；单引号内嵌用双引号
			<div onclick="alert('hello!')">按钮</div>

2.转移字符
	
		如果要显示带引号的字符串，那么应该使用\"或者\'
			dom.innerHTML ="he said:\"你好！\"";
			
		字符串内的回车换行也需要用斜杠转义
			\n代表新开一行； \r代表结尾回车；
			
		斜杠自身要用自己转义，用双斜杠表示\\
		
	3.字符串可以相加，不能相减
	
		字符串+字符串，结果仍然是字符串
		字符串+数字，或数字+字符串，结果也是字符串
			'00'+23结果是’0023‘而不是23
		
		将非字符串数据或对象转化为字符串格式
			String(任意类型数据)
		
	4.截取字符串中间的一小段
	
		获取单个字符
			字符串[第几个]   从0开始数"hello"[1]是"e"	
	  	获取多个字符串
	  		字符串.substr(第几个字符，截取多少个字符)
	  		"hello".substr(2,2)是"ll"
	  		
	  		substr,substring的缩写，子字符串
	 5.查找字符串
	 
	 	var n = 字符串.indexOf(要查找的子字符串)
	 	
	 		如果找到了，n就是子字符串在字符串中的位置数字
	 		如果没找到，n就是-1
	 		
	 	index,索引		
			
	 6.替换字符串
	 
	 	var str = 字符串.replace(旧字符串，新字符串);
	 	
	 	如果要替换全部，多个替换，使用				
	 	字符串.replace(/旧字符串/g,新字符串)
	 	
	 	
演示字符串的操作

1.处理字符串的特殊字符，转义\"和\n
		2.用字符串.replace将一个或多个\n替换为html的<br>标签实现换行
		3.用字符串[0]获取字符串的第一个字符
		4.用字符串.substr(0,5)获取前5个字符
		
		
		var duanzi = "下课铃响了,老师:\" 最后我还要讲一点......\"\n 小明:\"强扭的瓜不甜。\" \n 老师:\" 小明你留下,其他瓜下课!\" ";

duanzi = duanzi.replace(/\n/g,'<br>');

var dom = document.createElement('p');
		dom.innerHTML = duanzi[0];
		dom.innerHTML = duanzi.substr(0,5);
		dom.innerHTML = duanzi.indexOf('小明');
		document.body.appendChild(dom);	 	
	 	
	 	
	 	
操作数组
		
		1.一组数据或对象的集合	 
			
	 	[数字，字符串，变量，对象，...]
	 	var zeroToFour = [0,1,2,3,4]
	 	var myFriends = ["小明","李雷","韩梅梅"]
	 	var favorites =[{title:"百度",url:"www.baidu.com"},{title:"赌博网"，...},...]
	 	
	 	2. 数组的长度 
	 
	 	数组的长度是指数组一共有多少个成员
	 	arr.length
	 	var zeroToFour = [0,1,2,3,4];//zeroToFour.length就是5
	 	var myFriends = ["小明","李雷","韩梅梅"];//myFriends.length就是3
	 	
	 	
	 	3.获取数组中的成员
	 	
	 	获取单个成员，arr[第几个]
	 	var arr =["小明","小华","李雷","韩梅梅"]
	 	arr[2]//即“李雷”
	 	
	 	获取连续多个成员arr.slice(从第几个开始，第几个之前结束)；slice 切片
	 	arr.slice(1,3);//即["小华","李雷"]
	 	
	 	4.添加单个新成员
	 	
	 	添加单个成员，arr.push(新成员)
		var arr = ["小明"];
		arr.push("小华");	 	
	 	//那么arr变成["小明"，"小华"]
	 	
	 	5.插入或删除多个成员
	 	
	 	arr.splice(从第几个开始，删除几个，新成员，新成员，...);
	 	
	 	splice,拼接，这里既可以插入多个成员，也可以删除多个成员
	 	var arr =["小明","小华","李雷","韩梅梅"]
	 	arr.splice(1,2);//那么arr变为["小明","韩梅梅"]
	 	arr.splice(1,0,"王小猫","李小狗");
	 	//那么arr变为["小明","王小猫","李小狗","韩梅梅"]

6.搜索成员
		
		arr.indexOf(成员);
		var arr =["小明","小华","李雷","韩梅梅"]
		var n = arr.indexOf("李雷");//那么n就是2
		var n = arr.indexOf("王小猫");//那么n就是-1
	
		index,索引，这里指成员在数组中的位置编号
		
		
		7.把字符串变为数组
		
		str.split("分隔符")；
		
		var str = "小明;小华;李雷;韩梅梅";
		var arr = str.split(";");
		//那么arr就是["小明","小华","李雷","韩梅梅"]
		
		split,拆分，这里指把字符串切成多个数组成员
		
		
		基本操作：
		创建数组，并把数组的长度length显示到页面元素dom中
		用数组[2]获取数组的2号成员，显示到页面元素dom2中
		使用slice(1,4)方法截取1号开始至4号之前的成员
		使用splice(2,2)删除2号开始向后2个成员
		使用splice(2,9,2,3)将2和3两个新成员添加到2号成员之后
		indexOf(3)和indexOf(9)进行数组成员搜索，搜不到会得到-1
		用字符串.split(";")方法用分隔符把字符串变为数组
		
		
		
		var arr = [0,1,2,3,4,5];

var dom1 = document.createElement("h1");
		dom1.innerHTML = '数组长度'+arr.length;
		document.body.appendChild(dom1);

var dom2 = document.createElement('h1');
		dom2.innerHTML = '2号元素是'+arr[2];
		document.body.appendChild(dom2);

var dom3 = document.createElement('h1');
		dom3.innerHTML = '截取的是'+arr.slice(1,4);
		document.body.appendChild(dom3);

arr.splice(2,2);
		var dom4 = document.createElement("h1");
		dom4.innerHTML = '删除后'+arr;
		document.body.appendChild(dom4);

arr.splice(2,0,2,3);
		var dom5 = document.createElement("h1");
		dom5.innerHTML = '插入后'+arr;
		document.body.appendChild(dom5);

var n = arr.indexOf(3);
		var m = arr.indexOf(9);
		var dom6 = document.createElement("h1");
		dom6.innerHTML = '搜索结果'+n+'和'+m;
		document.body.appendChild(dom6);

var str = "0;1;2;3;4";
		var arr2 = str.split(';');

var dom7 = document.createElement('h1');
		dom7.innerHTML='字符串数组长度'+arr2.length;
		document.body.appendChild(dom7);
		
		
条件判断if... else

重复循环for

for(var i=0;i<6;i++){
		
			
		}		
		
		为对象的每个属性循环执行
		for(var attr in family){
			var shuxingzhi = family[attr];
			console.log(attr,"是",shuxingzhi)
					
		}

* ####快速起步Javascript编程语言-3

操作日期和时间

1.获取当前日期和时间
		var now = new Date();
		Date 是一个对象
		Date是和Number,String一样的数据格式
		console.log(now);//输出Sun Sep 25 2016 12:26:31 GMT+0800(CST)
		
		2.单独获取各个数值
		var dt = new Date();
		
		![单独获取各个数值](/Users/jiang/前端极速入门/Front-end-speed-entry-demo/JD操作日期和时间/屏幕快照 2016-10-26 下午4.35.58.png)

3.单独修改各个数值
		![单独修改各个数值](/Users/jiang/前端极速入门/Front-end-speed-entry-demo/JD操作日期和时间/屏幕快照 2016-10-26 下午4.35.58.png)

计时器和动画操作

1.每隔一段时间执行一次setInterval		
		
		var n = setInterval(funciton(){
			
			每次执行的代码；
		}，间隔时间毫秒);
		
		setInterval(function(){
		
			console.log(new Date());
		},1000);
		//输出结果
		
		
		2.等待一段时间后执行（不重复）setTimeout
		var m = setTimeout(funciton(){
		
			将要执行的代码；
		},等待时间毫秒);
		
		
		var m = setTimeout(funciton(){
		
			console.log(new Date());
		},2000);
		//两秒后输出结果

3.取消计时器 clearTimeout和clearInterval
			
			clearInterval(n);
			clearTimeout(m);
			n,m是指定的setInterval货setTimeout数量
			如果没有为定时器指定变量，那么就无法中止
			
				
操作颜色数据

1.计算机的每个颜色由红绿蓝
		'rgb(红色值,绿色值,蓝色值)'；
		每个值范围0~255;
		也可以增加不透明度alpha值0~1，用四个值表示
		'rgba(红色值，绿色值，蓝色值，不透明值)'；
		纯红色表示为'rgb(255,0,0)';
		浅灰色是'rgba(0,0,0,0.2)';
			
		2.十六进制表示法0~F
		共有16*16=256个数字
		00~FF正好对应0~255
		3.十六进制表示方法：
		‘#红色绿色蓝色’
		‘FF8700’
		
		4.10进制转16进制
		n.toString(16);
		随机颜色
		var red = Math.floor(Math.random()*256);
		var green = Math.floor(Math.random()*256);
		var blue = Math.floor(Math.random()*256);
		
		var color = '#'+red.toString(16)+green.toString(16)+blue.toString(16)
		
		
		简单操作
		利用for(var i=0;i<50;i++){}循环执行
		利用dom元素，穿件随机0~200的size变量，并制指定到width和height
		设置style.position='absolute'绝对定位，然后设定left和top随机0~100%
		设置style['border-radius']='100px'使dom变为圆形
		随机红绿蓝透明四个值，并拼接成'rgba(255,255,255,0.1)'格式
		把随机颜色指定到background
		把dom添加到document.body;调整alpha随机值和for循环次数达到效果
		
		
		
		for(var i=0;i<50;i++){

var dom = document.createElement('div');
    		var size = Math.floor(Math.random()*200);
    		dom.style.width = size+'px';
    		dom.style.height = size+'px';

dom.style.position ='absolute';
    		dom.style.left=Math.random()*100+'%';
    		dom.style.top=Math.random()*100+'%';
    		dom.style['border-radius']='100px';

var red = Math.floor(Math.random()*256);
    		var green = Math.floor(Math.random()*256);
    		var blue = Math.floor(Math.random()*256);
    		var alpha = Math.random()*0.3;

var clr = 'rgba('+red+','+green+','+blue+','+alpha+')';
    		dom.style.background = clr;
    		document.body.appendChild(dom);
		}

深入理解函数和对象
		
		1.数据，函数和对象三者都可以用变量指代
		var num = 17.618;
		var str = ‘hello world!’;
		var add = function(a,b){
			return a+b
		};
		
		var person = {name:"小明",age:12};
		
		2.函数使用的时候要带小括号，可能里面还有参数；
		
		var pi = 3.1415926;
		
		var qiuhe = function(a,b){return a+b};
		var num = pi +qiuhe(2,3);
		console.log(num);/8.1415926
		
		3.对象的属性可以是数据，也可以函数（方法）
		
		var qiuhe = function(a,b){return a+b};
		var jisuanqi = {
		
				pi:3.1415926,
				add:qiuhe,
		};
		
		var num = jisuanqi.pi+jisuanqi.add(2,3);
		console.log(num);/8.1415926
		
		4.return什么，函数就可以当做什么使用
		
		比如下面案例，返回对象就可以当做对象使用
		var getXiaoming = function(){
		
			var xiaoming = {name:"小明"，age:12};
			
			return xiaoming;
		};
		
		var xmage = getXiaoming().age;
		console.log(xmage);//12
		
		5.对象['属性名']才是无敌的
		可以应对特殊符号属性名
		
		错误写法：
		dom.style.border-radius='4px';
		正确写法：
		dom.style['border-radius']= '4px';
		
		可以批量生成多个属性名
		var arr = ['a','b','c'];
		var obj = {};
		for(var i=0;i<arr.length;i++){
		
			var attr = arr[i];
			obj[attr] = i;
		
		}
		console.log(obj.c);//2
		
		
		
		
		xiaoming.age与xiaoming['age']等价

* #### 快速上手Jquery-1

Jquery操作html元素$ ('html标记对')

1.创建html元素$ ('html标记对')

var jo = $('<div> hello wordld!</div>');
	把html标记对字符串直接放在$括号内
	相当于
	var dom = document.createElement('div');
	dom.innerHTML = 'hello world';

$,dollar,美元符号，jquery最常用的符号，键盘shift+4

2.获取一个元素$('选择器')

$('body');//选取body标记元素
	$('#idName');//选取id等于idname的元素
	$('.className');//选取class包含className的所有元素
	$('[attr=value]');//选取属性attr等于value的元素

3.添加到页面上某个元素内append和prepend

var jo1 = $('<div>hello world!</div>');
	$(body').append(jo1);
	
	var jo2 = $('<div>hello pie!</div>');
	$('body').prepend(jo2)

append,在尾部追加；prepend,在头部插入
		
		
4.获取和修改html文字内容.html()和.val()

var jo1 = $('<div>hello</div>');
	jo1.html(str);
	
	var jo2 = $('<input value="hello"/>');
	jo2.val(v);

使用$('html代码')创建了jo1和jo2两个jquery元素；
	使用$('body')标记元素选择器选到页面的body;
	使用$('body').append(jo1)和.prepend(jo2)在尾部和顶部插入元素；
	使用$('<input value="hello" />')创建input元素jo3,然后添加到body;
	
	var jo1 = $('<h1>hello world!</h1>');
	var jo2 = $('<h1>hello pie!</h1>');

$('body').append(jo1);
	$('body').prepend(jo2);

var jo3 = $('<input value="hello" />');
	$('body').append(jo3);

var str2 = jo2.html()+'!!';
	jo2.html(str2);

var str3 = jo3.val()+' world!';
	jo3.val(str3);

//hello pie!!!  
	//hello world
	//hello world!

Jquery操作css和class

1.获取和设置css样式.css()
	
	var jo = $('<div style ="width:200px">hello world!</div>');
	var str = jo.css('width');//str 等于‘200px’
	jo.css('width','300px');//设置style.width
	jo.css({
	
		'color':#FFF,
		'background':'#F00',
	})

2.获取元素的宽度和高度width()和height()

var jo =$('<div style="width:200px">hello world!</div>');
	var n =jo.width();
	var m =jo.height();
	
	这两个值是自动计算的，不能设置宽高
	
	
	jo.css('width')可以获得css样式的属性值，字符串格式

3.获取和设置元素的属性值.attr()

var jo=$('<div id="hello">你好，派!</div>');
	var str = jo.attr('id');
	jo.attr('id','nihao');
	
	可用jo.attr('style',")来清空元素的样式

4.添加和移除元素的class样式 addClass和removeClass

var jo=$('<div class="redfont bigfont">你好，派!</div>');
	jo.addClass('graybg');
	jo.removeClass('redfont');
	
	可用下面的代码来获取各个class值
	
	var str = jo.attr('class');
	var classed = str.split('');//['bigfont','graybg']

(1)首选在html内创建id为'dom'的div;在css内创建了三个class;
	(2)对比了.attr('style')和.css('border')区别；
	(3)用.css('样式名'，‘样式值’)修改单个样式，用.css({对象})修改多个样式；
	(4)用jo.width()获得实际的高度，jo.css('height',wid+'px')设置高度;
	(5)用jo.addClass('class名')添加了三个class;
	(6)用jo.attr('class')获得字符串，然后用split('')分割成class数组；
	(7)用jo.removeClass('class名'）移除了第二个class;
	
	<div id="dom" style='border: 1px solid #F00'> hello world!</div>
	
	.redfont{

color:#F00;
	}

.bigfont {

font-size: 24px;
	}

.graybg{

background: #DDD;
	}

var jo=$('#dom');

var stylestr = jo.attr('style');

var cssstr = jo.css('border');

djo.html(stylestr+'<br>'+cssstr);

jo.css('border','5px solid #FF0');
	jo.css({
    'width':'200px',
    'border-radius':'15px',
	})

var wid = jo.width();
	jo.css('height',wid+'px');
	jo.addClass('redfont');
	jo.addClass('bigfont');
	jo.addClass('graybg');

var classstr = jo.attr('class');
	var classarr = classstr.split(' ');
	jo.html(classarr[0]);
	jo.removeClass(classarr[1]);

//border: 1px solid #F00
	//1px solid rgb(255, 0, 0

秋意中等我/Front-end speed entry demo

简介

发行版

贡献者

近期动态

秋意中等我/Front-end speed entry demo .gitee-modal { width: 500px !important; }

简介

发行版

贡献者

近期动态

搜索帮助

秋意中等我/Front-end speed entry demo