龙仕云小记

web转型之实战-前端页面

日期:2016-02-29 01:17:34 标签:技术

#html
1、**html结构** 
```html
<!doctype html>
<html>
	<head>
	
	</head>
	<style>
	
	</style>
	<body>
	
	</body>
	<script>
	
	</script>
</html>

```
2、**要动态的页面，所以引入js。 html就是一个静态的页面，类似以delphi form内容、pas文件就是js。**
```html
<html>
	<head>
		<script src='../../xxx.js'></script>
	</head>
</html>
```
关于js路径的调试，如要web路径在浏览器能访问就行。

3、**谈js 不能不说jquery ,jquery 基本已js等价了。**
js是怎么写的(没有用jquery的情况下)：
```js
<script>
	document.getElementById('myid').innerHTML = '龙仕云';
    document.getElementById("mybtn").onclick = function(){
      document.getElementById('myid').innerHTML = "http://www.mrlong.cn" ;
    };
</script>
```
现在jquery怎么写：
```js
#引用包
<script src="//cdn.bootcss.com/jquery/1.12.1/jquery.js"></script>
<script>
	$(document).ready(function(){
      $('#myid').text('龙仕云');
      $('#mybtn').on('click',function(){
        $('#myid').text('http://www.mrlong.cn');
      });
    });
</script>
```
不能不说的class 与 id 区别。

js常用的事件：
```js
$(document).ready(functino(){
  $(".xxx").on('click',function(){});
  $(".xxx").hover(function(){},function(){});
});
```
js常用选择器，意思是怎么要选中html内的元素，给予赋事件动作。
记住这个选择器与css 一样。
\#id \.class  指定哪个范围 #xxxxx .xxxx 之类的。 
内容选择器 a.class[title='xx']
排位选择器 ul.xxx li:first-child

3 **css样式使用**
css 就是给html 页面好看点。增加html标签组件属性设置，如button 等。。
选择器与js类似：
```css
span[userid] a[href*='members']{color:#86aebe;} /*人员姓名的样式*/
```
4 **ajax**
加载数据之用。说到js 不能不说json。 json类似xml 比xml 轻量占空间少。
```js
[
{name:"张三",sex:1,age:20},
{name:'老五',sex:1,age:30}
]
```
接下来我们将页面将这个数据显示到前端。