数据交互-笔记

=================
2017-3-22
=================
循环/遍历
$(obj).each(function (index,element){
index 下标
element 值
this -> 当前对象
});
$.each($(obj),fn);


jq转原生
obj[0]
obj.get(0);


原生转jq
$(obj);


创建一个div标签,内容是abc
$('<div>abc</div>');
插入
内部后面
$('<div>abc</div>').appendTo('父级');
内部前面
$('<div>abc</div>').prependTo('body');
外部后面
$('<span>span</span>').insertAfter('div');
外部前面
$('<span>span</span>').insertBefore('div');
删除
$(obj).remove();


事件委托
$(父级).on(事件,元素,fn);


事件绑定
在jquery里面所有事件默认都是绑定的
on
off 解除事件绑定


事件冒泡
return false;


获取元素信息
$(obj).width()/Height(); 纯宽高
$(obj).innerWidth()/Height(); 宽高+padding
$(obj).outerWidth()/Height(); 盒子模型大小
$(obj).outerWidth()/Height(true); 盒子模型+margin
$(obj).offset().left/top; 绝对距离
$(obj).offsetParent() 定位父级


链式

遍历元素
siblings()


插件/封装
用插件 简单 ￥  
写插件 大牛 $ 提高技术


$.fn.xxx=fn;


$.fn.extend({
xxx:fn,
xxx:fn
});


插件里面的this是原生的


DOMContentLoaded 加载快
先加载 html css js
ready
$(document).ready(function (){
...
});


结构子级
$(obj).find('tagName')


--------------------------------------
效果 苦逼 页面+效果 6-8+
数据交互 爽 数据交互 8-10+


数据交互
不难  DOM操作难


必须在服务器下运行
集成环境
WAMP window apache MySql PHP
MAMP MAC apache MySql PHP
XAMPP window/MAC apache MySql PHP