jQuery

基础核心 1.代码风格 1.1 $(function(){}); 匿名函数的执行1.2 $("#div1") 选取元素1.3 $("#div1").css('color','red') 添加内联样式$==jquery js封装好的一个对象2.加载模式 window.onload 全部资源加载完毕只能执行一次，会覆盖前边的不能简写$(document).ready(function(){}); DOM结构加载完毕可多次执行可简写$(function(){});3.对象互换 这个互换多指jQuery对象与DOM对象互换选择器 最核心 选择器引擎 继承了css的语法，可以对DOM元素的标签名、属性名、状态等进行快速准确的选择使用 id #div1标签名 divclass .div1后代选择器 header div$("header div")等价于$("header").find("div")子代选择器 header>div IE6不支持$("header>div")等价于$("header").children('p')第一个 :first最后一个 :last所有偶数 :even所有奇数 :odd根据下标进行选择 :eq(n)根据属性进行选择 [title]拓展：容错功能 很多情况下动态DOM生成会有问题拓展：选择器复杂度 选择器越复杂，字符串解析越慢属性 attr('title') 获取属性值attr('title','hahaha') 设置属性值attr({title:'enenen',style:'background-color:red;'}) 同时设置多个属性值removeAttr('title') 移除属性值addClass('page') 添加class值removeClass('page') 移除class值toggleClass('hah') 添加或者移除class值css css('color') 获取样式值css('color','red') 设置样式值css({'color':'red','font-size':'30px'}) 设置样式值offset() 相对于窗口获取top和left值position() 相对于父级获取top和left值scrollTop() 获取滚动的值scrollTop(300) 设置滚动的值scrollLeft() 获取滚动的值scrollLeft(200) 设置滚动的值height() 获取高度width() 获取宽度innerHeight() 获取高度+padding上下innerWidth() 获取宽度+padding左右outerHeight() 获取高度+padding上下+border上下outerWidth() 获取宽度+padding左右+border左右筛选 first() 第一个last() 最后一个find() 寻找子级类似于后代选择器eq(n) 第n个not(x) 没有x描述的filter() 过滤slice() 剪裁has() 过滤检索的时集合中的DOM的后代children() 子级（不包括子级的后代）parent() 直接父级parents() 所有父级parentUntil(x) 直到找到x描述的父级停止offsetParent() 第一个定位的父级next() 下一个nextAll() 后边所有nextUntil() 下一个到x描述前prev() 上一个prevAll() 前边所有prevUntil(x) 上一个到x描述silblings() 匹配元素的所有兄弟元素addBack() 当前的再添加上一个end() 返回上一个jq对象DOM div.html() 获取div的html内容div.text() 获取div的文本内容inp.val() 获取inp的value值$("

") 创建元素div.append(p) 拼接元素：p放到div中p.appendTo(div) 同上a.prepend(b) 插入到最前面a是父级，b是子级a.prependTo(b) 插入到最前面a是子级，b是父级a.after(b) 把b插入到a后面a.before(b) 把b插入到a前面a.insertAfter(b) 把a插入到b后面a.insertBefore(b) 把a插入到b前面a.replaceWith(b) 用b替换aa.replaceAll(b) 用a替换ba.remove() 删除a元素a.empty() 清空a的子元素事件 $('#div1').click(function(){}); 绑定单击事件$('#div1').mousemove(function(){}); 绑定鼠标移动事件$('#div1').on('click',function(){}); 绑定事件可同时添加多个事件 $('#div1').on({a:fun1,b:fun2})$('#div1').off(); 删除事件全部删除如果删除某一个事件括号传入指定值以下重点强调下 1.mouseover mouseout 与 mouseenter mouseleave over与out会造成多次无效的触发建议使用enter与leave2.复合方法 readyhover(fn1,fn2)3.事件对象 默认传参的e(这是个变量名，啥都可以，见名知意)pageX === clientXpageY === clientYtarget 点击元素currentTarget 绑定元素timeStamp 获取时间戳type 类型JQ不支持滚轮事件，所以我么还是用JS来默默写吧冒泡 e.stopPropagation()默认 e.preventDefault()return false 既阻止冒泡，也阻止默认动画 简单动画 show() 显示hide() 隐藏toggle() 显示或隐藏slideDown() 向下展开slideUp() 向上收起slideToggle() 展开或收起fadeIn() 淡入fadeOut() 淡出fadeTo() 渐变到一定程度fadeToggle() 淡入或淡出以上小括号可以传递两个参数 1.时间 2.回调参数 时间 毫秒有默认的三个值 slow 600normal 400fast 200任意动画 d.animate({left:'50px',top:'50px'},2000) 原生jq动画，不支持颜色具有累加累减的功能 left:"+=100px"同步动画 同时改变的列队动画 回调 d.animate({},fn(){})连缀 d.animate().animate().animate()动画控制 stop() 暂停delay() 延迟finish() 结束jQuery动画拓展库 jQuery.easing