Demo1总结

demo进一步优化,这是今天学到的。

一、YP框架
1、YP框架格式

二、书写格式
1、个人签名的标准格式(css和js)

2、命名
CSS:body-bg
JS:下划body_bg

三、弹窗思路
1、三种方法
mousedown()按下鼠标
mousemove()移动鼠标
mouseup()松开鼠标

2、节点应移动的距离 = 节点初始位置 – 鼠标初始位置 + 鼠标移动的位置

四、新的学习
1、JS用单引号
原因:便于引用HTML

2、新接触的快捷键功能
(1)全部缩进只要全选起来,按Tab即可
(2)取消缩进: Shift + Tab
(3)注释: Ctrl + /

3、width()、height()、innerWidth()、innerHeight()、outerWidth()、outerHeight()用法和区别
用content、padding、border、margin来解释
width()、height():content
innerWidth()、innerHeight():content+padding
outerWidth()、outerHeight():content+padding+border

4、pageXpageYoffsetLeftoffsetTop
event.pageX、event.pageY:距离文档边缘鼠标的位置
offsetLeft、offsetTop:相对于父级对象的布局

5、jQuery1.7开始引入全新的事件绑定机制on()、off()
它们替换了bind(), live(), delegate()
多个事件、多个函数

6、命名要更有语义化,特别是做大项目的时候

7、绑定事件的命名空间
mousemove.model
说明:mousemove是事件类型,model是命名空间。
作用:用off()即可解除绑定在model命名空间的事件,不会解除其他命名空间所绑定的相同事件。

8、jquery调用要在bootstrap组件前,

9、将jquery对象先缓存起来,缓存到一个全局变量中。(优化)
举例:

var ui = {};  
ui.$pop_form = $(‘.pop-form’);  
ui.$pop_text = ui.$pop_form.find(‘input’);  
ui.$pop_submit = ui.$pop_form.find(‘button’);

麻凯倩

微信:makaiqian