一,html,css
1,cursor属性 有pointer move hlep wait 等
2,background-color background-image
3,float属性用来标签漂移,部署标签
]4,position标签
fixed 固定定位相对于窗口
relative 本身不起作用,一般和absolute结合使用
absolute 绝对定位web page的位置,注意不是窗口。一般和relative使用,在其内部
5,利用position:fixed,可以css层叠样式,z-index属下指定最外层(层级关系)。结合透明对属性opacity可以做模态对话框。
二,js
1,变量声明 全局变量:name=‘123’ 局部变量: var name=‘123’
2,单行注释 // 多行注释 /* */
3,由于代码上线会压缩,每行代码建议加 分号;
4,javascript 面向对象
function Foo(name,age) { this.Name = name; this.Age = age; this.Func = function(arg){ return this.Name+arg; } } var obj = new Foo(‘xiao‘, 18); console.log(obj.Name);
5.dom 文档对象树
document.getElementbyId 找标签
innerText innerHTML 获取值
三.jquery
1,选择器 $(‘#n1‘) id选择器 $(‘.con‘).text(‘hello‘) class 选择器并赋值文本‘hello’ $(‘div .con‘) 找到div标签下的所有class=con的标签
$(‘n1‘).children() 找儿子 $(‘n1).find()找所有的 $(‘n1‘).siblings() 找同级别的兄弟标签
<div onclick=‘func(this);‘></div>
function(ths){$(ths).text} this是一个特殊参数代指当前标签
2. $(‘n1‘).html 获取值 $(‘n1‘).html(‘xiaofeng‘) 设置值
$(‘n1‘).text
3,checkbox反选
View Code
4,返回顶部
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 .go-top{ 8 position: fixed; 9 right:0px; 10 bottom: 0px; 11 } 12 </style> 13 </head> 14 <body> 15 <div style="height:5000px; background-color: #000066 ">ding</div> 16 17 <div class="go-top"> 18 <a onclick="GoTop();">fanhui</a> 19 </div> 20 <script src="jquery-1.12.4.js"></script> 21 <script> 22 function GoTop() { 23 $(window).scrollTop(0); 24 } 25 </script> 26 </body> 27 </html>
5,为所有li标签绑定事件
<div style="height:5000px; background-color:#848484 "> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </div> <script src="jquery-1.12.4.js"></script> <script> $(‘li‘).click(function(){ var temp = $(this).text(); alert(temp); }) </script>
6.当html文档树准备好了就执行script ,需要将上面的代码放在这个大括号里面
$(function){} // 尽量使用这种写法
7. delegate 委托 -----只有点击标签的时候才绑定事件 undelegate 从所有元素删除由 delegate() 方法添加的所有事件处理器:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .go-top{ position: fixed; right:0px; bottom: 0px; } </style> </head> <body> <div style="height:5000px; background-color:#848484 "> <input type="button" value="tianjia" onclick="Add();"/> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </div> <script src="jquery-1.12.4.js"></script> <script> function Add(){ $(‘div‘).append(‘<li>888</li>‘); } $(function(){ $(‘div‘).delegate(‘li‘,‘click‘,function(){ var temp=$(this).text(); alert(temp); }) }) </script> </body> </html>