jQuery基础_3

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(){})