关于
龙仕云
(更多...)
关于我
书法绘画
我读的书
读书笔记
我的足迹
健身故事
==PPT==
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} ] ``` 接下来我们将页面将这个数据显示到前端。
←返回文章