锋利的jquery学习笔记

1.$("#tt")获取的永远都是一个jquery对象，所以要判断页面上是否存在某个对象不能像js中

if（$("#tt")）{

}

而是通过：

if($("#tt").length > ){
}

ps:当页面中不存在id为tt的元素时，jQuery不会报错，而js中会报错

2. jQuery层选择器$("ancestor descendant")和$("parent>child")

<div>This is <strong>very</strong> important.</div>
<div>This is <em>really <strong>very</strong></em> important.</div>

好比一家人三代同堂，爷爷，父亲和你，这样话爷爷的子元素就是你父亲，同时你父亲也是爷爷的后代元素，而你只是爷爷的后代元素。

总结：后代元素包括子元素，子元素是指父亲的第一代。

3. jQuery选择器的种类

　　3.1 基本选择器

　　3.2 层次选择器

　　3.3 过滤选择器

　　　　3.3.1 基本过滤选择器

　　　　　　　 $("div:first") 选择第一个div;$("div:last")选择最后一个div;$("input:not(.myclass)")选择类不是myclass的input;$("input:even")选择索引为偶数的

input ;$("input:odd")选择索引为奇数的input;$("input:eq(1)")选择索引等于1的input元素;$("input:gt(1)")选择索引大于1input;$("input:lt(1)"

选择索引小于1的input;$(":header")选择头部如：h1……;$("div:animated")选择正在执行动画的div

　　　　3.3.2 内容过滤器

　　　　　　   :contains(text)选择包含text的元素;:empty选择没有任何内容的元素包括文本;:parent选择有内容的元素包括文本;:has(selector)如:$("div:has('p')")

选择包含有p元素的div

　　　　3.3.3 可见性过滤器

　　　　　　   :hidden 包括<input type="hidden"/>、<div style="display:none"/>和<div style="visibility:hidden"/>;:visible 如：$("div:visible")

　　　　3.3.4 属性过滤器

　　　　3.3.5 子元素过滤器

　　　　3.3.6 表单对象属性过滤器　　

　　3.4 表单选择器

　　3.5 选择器注意事项

　　　　3.5.1 选择器中含有特殊字符 ".","#","(","]"如：<div id="id#b"/> 则选择的时候要用\\转义 $("#id\\#b")

　　　　3.5.2 @符号 之前<div title="你好"/> $(" div[@title='']") 现在$("div[title='']")

　　　　3.5.3 选择器里带空格

　　　　　　　$('.test:hidden')和$('.test :hidden')选取到的结果是不一样的一个是选取隐藏的类为test的元素，后者则是选取类为test的元素里面隐藏的元素　　　

4. dom操作

　　4.1 元素添加

　　　　4.1.1 添加到元素里面 append、preappend

　　　　4.1.2 添加到元素外after、before

　　4.2 移除节点

　　　　4.2.1 彻底删除节点 remove

　　　　4.2.2 清空节点 empty

　　4.3 复制节点

　　　　4.3.1 复制节点内容不复制节点行为 clone().append()

　　　　4.3.2 复制节点内容并且复制节点行为 clone(true).append()   ps：都是先复制然后添加到其他节点

　　4.4 替换节点

　　4.5 属性操作

　　4.6 包裹节点

　　4.7 样式操作

　　4.8 遍历节点

　　　　4.8.1 children()只考虑子元素不考虑任何后代元素

　　　　4.8.2 next() 匹配元素后面紧邻的同辈元素

　　　　4.8.3 prev() 匹配元素前面紧邻的同辈元素

　　　　4.8.4 siblings()获取当前元素前后所有的同辈元素

　　　　4.8.5 closest()获取离元素最近的元素 如：$("p").closest("li").removeclass("a")

　　4.9 css操作

　　　　4.9.1 CSS()操作style的属性时记得将属性用引号包含如：$("p").css({"font-size":30px,"background-color":red})否要用驼峰式写法如：fontSize：30px

　　　　4.9.2 获取元素高度 两种方法一是$("p").css("height")以及$("p").height() 区别是一个是获得属性可能是auto一个是具体的元素高度

　　　　4.9.3 获取设置元素宽度 width()

　 4.10 位置

　　　　4.10.1 offset() 相对于视窗的偏移注意两点：1.只针对可见元素 2.获取到两个属性一个top一个left

　　　　4.10.2 position 获取相对偏移

　　　　4.10.3 scrollTop()和scrollLeft()获取元素的滚动条距左边和顶部的距离

5.事件和动画

　　5.1 Windows.onload()和$(document).ready()的区别

　　　　执行时机：windows.onload()是在所有元素加载完成包括关联文件加载完成后才执行；而$(document).ready()是在dom元素准备就绪后执行

ps：windows.onload()相当于jQuery中的$(window).load()

　　　  多次使用：如页面加载完成后想通过windows.onload = one 和windows.onload = two 分别调用one和two但是结果只会调用two，因为onload只会绑定一个函数，后

面的会自动把前面的覆盖掉;而$(document).ready()可以追加事件如：$(document).ready(function(){one()}) 然后追加一个事件

$(document).ready(function(){tewo()})

　　　　简写方式：$(document).ready()可以简写成$(function（）{}) 或者$().ready(function(){})

　　5.2 事件绑定

　　　　5.2.1  基本效果 $("p").bind("click",function(){执行代码})

　　　　5.2.2 加强效果（显示则隐藏否则显示）$("p").bind("click",function(){if($(this).is(":visible")){$(this).hide();}else{$(this).show();} })

　　　　5.2.3  改变绑定事件类型

　　　　5.2.4 简写绑定事件 实际上就是将之前的bind（“mouseout”，function（）{}）换成了.mouseout(function(){})

　　　　5.2.5 合成事件 hover(enter,leave)当光标悬停的时候就会触发第一个事件，当光标离开的时候就会触发第二个函数;toggle(fn1,fn2,fn3)会依次交替执行里面的函数

　　5.3 事件冒泡

　　　　5.3.1 什么是事件冒泡

　　　　5.3.2 怎么阻止事件冒泡 event.stopPropagation()

　　　　5.3.3 阻止默认行为 如a标签超链接跳转、表单验证当验证不成功时就要阻止默认的行为  event.preventDefault()

　　　　5.3.4 同时阻止冒泡事件和默认行为   则可以写成 return false

　　5.4 事件对象的属性

　　　　5.4.1 event.type() 返回事件类型

　　　　5.4.2 event.preventDefault() 阻止默认事件

　　　　5.4.3 event.stopPropagation() 阻止冒泡事件

　　　　5.4.4 event.target 获取触发事件的元素

　　　　5.4.5 event.pageX和event.pageY获取鼠标相对于屏幕的坐标

　　　　5.4.5 event.which在鼠标的点击事件中获取鼠标的左(1)、中(2)、右(3)

　　　　5.4.6 event.metaKey  返回的是一个布尔值如 if(event.metaKey == 1)用来判断ctrl键是否按下

　　　　5.4.7 event.originalEvent 指向原始的事件对象

　　5.5 移除事件

　　　　5.5.1 unbind() 移除绑定的事件给参数就是移除具体的事件如：$("p").unbind("click")不给参数就能移除所有的事件如：$("p").unbind()

　　　　　　语法结构如：unbind(type,function) Ps：type是事件类型，function是某个函数如：unbind("click",function1)

　　　　5.5.2 one() 也可以绑定事件，但是的事件只执行一次

　　5.6 模拟操作

　　　　$("p").trigger("click")简写：$("p").click()

　　5.7 绑定事件的其他用法

　　　　5.7.1 一次对多个事件进行绑定 如：$("p").bind("mouseover mouseout",function(){})

　　　　5.7.2 给元素绑定的多个事件用命名空间规范起来 如：$("p").bind("click .aaa",function(){}) $("p").bind("mouseover .aaa",function(){}) 删除绑定事件则

$("p").unbind(“.aaa”)

　　　　5.7.3 相同事件不同的命名空间执行$("p").trigger("click!")

　　5.8 jquery中的动画

　　　　5.8.1 show()和hide()  这个相当于.css("display","block或者inline")和.css("display","none")

　　　　5.8.2 show()和hide() 让元素动起来slow:600ms;normal:400ms;fast:200ms 如:show(slow)也可传一个数字如:show(1000)将在一秒内慢慢出现

　　　　5.8.3 fadeIn()和fadeOut() 只是改变元素的不透明度

　　　　5.8.4  slideUp()和slideDown() 通过改变元素的高度来讲元素隐藏 ps：让元素隐藏的方式有很多种，有通过改变高度的有通过改变透明度的，改变高度的,都可改变的。

　　　　　　　 jQuery中任何动画都可以传递两种参数一种是“slow”、"normal","fast"还有一种就是数字了代表具体的时间

　　　　5.8.5 animate({left:"50px"},speed,callback) 第一个参数就是包含样式属性跟值的映射，第二个是参数，第三个是回调函数

　　　　5.8.6 累加累减动画 animate({left:"+=50px",speed,callback})

　　　　5.8.7 多重动画

　　　　　　5.8.7.1 同时执行 animate({left:50px,height:"100px"},speed,callback)

　　　　　　5.8.7.2 顺序执行 animate({left:"50px"},speed,callback);animate({height:500px},speed,callback)