DOM:文档处理
内部插入:父子级关系
$("a").append($("b"))把b插入到a中【a里面的后面】
$("b").appendTo($("a"))把b插入到a中【a里面的后面】
$("a").prepend($("b"))把b插入到a中【a里面的前面】
$("b").prependTo($("a"))把b插入到a中【a里面的前面】
这种方式插入之后一定是父子级关系
外部插入:兄弟级关系
$("a").after($("b"))把b插入到a的后面
$("b").insertAfter($("a"))把b插入到a的后面
$("a").before($("b"))把b插入到a的前面
$("b").insertBefore($("a"))把b插入到a的后面
这钟方式插入之后一定是兄弟级关系
包裹
wrap:包裹$("a").wrap($("b")) 把a用b包裹起来【每个元素都会被包裹】
unwrap:取消包裹
wrapAll:把所有的都包裹起来【所有元素都会被一个包裹】
wrapInner:内部包裹
替换
$("a").replaceWith($("b")) 把a用b替换
$("b").replaceAll($("a")) 用b替换a
删除
empty():删除内容
remove():删除整个标签
复制
clone():复制出一个一模一样的元素
$("a").clone();
事件:
$(document),$(body)
加载事件:
$(document).ready(fn)
简写:$(function(){});
在工作中用的简写的方式比较多
注意:
js:window.onload = fn
jq:$(document).ready(fn)
js:把页面上的DOM和资源加载完成之后执行
jq:把页面上的DOM加载之后执行
jq来源js，但是超越js
事件切换
hover(over,out)
$("div").hover(function(){鼠标悬浮上去},fu4nction(){鼠标离开});
事件:
$(selector).click(fn);selector的点击事件，会触发fn
$(selector).dbclick(fn);双击事件
$(selector).focus();获得焦点触发的事件
$(selector).blur;失去焦点触发的事件
$(selector).change();发生改变
$(selector).mouseover();鼠标放上
$(selector).mouseout();鼠标离开
$(selector).mousedown();鼠标按下
$(selector).mouseup();鼠标抬起
$(selector).mousemove();鼠标移动
js的事件都带有on,而jq事件都没有on
事件处理:
bind绑定【重点】
bind("action",fn)【所有版本都支持】
如果多个事件;
bind({"mouseover":fn1,"mouseout":fn2});
unbind("action")解除绑定,如果没有参数意味着全部解除绑定
on,off【重点】
$(select).on("click",function(){});绑定事件
$(select).off()解除绑定
one:绑定事件，只会执行一次
查找
$(selector).parent(); 查找父元素
$(selector).find(a);在selector中找a元素
动画
基本:
show(时间,fn(){}) 显示【在效果完成之后会执行fn】
hide(时间,fn(){}) 隐藏【在效果完成之后会执行fn】
toggle(时间,fn(){}) 切换【show和hide之间】
滑动:
slideDown(时间,fn(){}) 下滑显示
slideUp(时间,fn(){}) 收起隐藏
slideToggle(时间,fn(){}) 切换效果【在slideDown和slideUp之间】
淡入淡出:
fadeIn(时间,fn(){}) 淡入
fadeOut(时间,fn(){}) 淡出
fadeToggle(时间,fn(){}) 切换效果【在fadeIn和fadeOut之间】
fadeTo(时间,(0-1),fn(){})