jquery笔记

1、DOM对象转jQuery对象
普通的Dom对象一般可以通过$()转换成jQuery对象。
如：$(document.getElementById("msg"))
返回的就是jQuery对象，可以使用jQuery的方法。

2、jQuery对象转DOM对象
由于jQuery对象本身是一个集合。所以如果jQuery对象要转换为Dom对象则必须取出其中的某一项，一般可通过索引取出。
如： $("#msg")[0]，$("div").eq(1)[0]，$("div").get()[1]，$("td")[5]


基本：根据ID匹配元素 #
根据给定的类名匹配元素 .
根据给定的元素名匹配元素
*匹配所有的元素
集合元素，将每个选择器匹配到的元素合并后一起返回

层次：后代选择器 （ul li）空格
子元素选择器 （只包括子元素）>
相邻元素选择器 (紧接在前一个元素之后的选择器) +
兄弟元素选择器 （一级别中的）~

过滤 ：内容过滤选择器 (选取含有文本内容为标签的元素):
可见性过滤选择器 (选取所有可见的元素):
属性过滤选择器 (选取拥有此属性的元素)[]

追加节点：

(1)append() 向匹配的元素内部追加内容 父元素追加xxx为子元素
(2)appendTo() 将匹配的元素追加到指定的元素中 将匹配的元素追加到某个元

删除节点：
(1)根据参数删除指定的元素 remove()
(2)清空节点 empty()

1,clone() 复制节点
2, 替换节点 replaceWith() 使用with后面的标签替换匹配的元素

replaceAll()使用某个元素替换所有的其他的元素

2,将某个节点，用其他标记包裹起来 wrap() 将所有的元素单独包裹 wrapAll() 将所有匹配的用一个元素来包裹

属性的操作

1,attr() 获取和设置属性
2,removeAttr() 删除属性

样式操作：

1,attr() 获取样式和设置样式
2,addClass() 追加样式
3,removeClass() 移除样式
4,toggle() 切换样式

设置和获取html,文本和值

1,html() 读取某个元素中html内容
2,text() 某元素中的文本内容
3,val() 获取某元素的值

遍历节点

1,children() 取得匹配元素的子元素的集合
2,next() 取得匹配元素后面紧邻的同辈元素
3,prev() 取得匹配元素前面紧邻的同辈元素
4,siblings() 取得匹配元素前后所有的同辈元素

bind() 绑定事件： 参数1，绑定的时间类型；参数2，触发该事件后执行的函数。

事件触发器

Trigger（“参数一” “参数二”）触发器，不仅可以触发浏览器有的事件名称，还可以触发自定义的事件，就相当于调用参数1绑定的事件，参数二可以将需要的参数返回到执行的函数中

例如：

$（“h5.head”）.bind

("myClick",function(event,mes1,mes2,mes3)

{alert(mes1+mes2+mes3);

$("div.content").hide(5000);});

$("h5.head").trigger("myClick",['name','age','gender']);

这里会输出：nameagegender就是trigger传过去的三个参数

jQuery有两个合成事件：hover（）和toggle()方法hover(enter,leave)方法 语法结构：当光标移动到元素上时，会触发第一个函数；光标移出时出发第二个函数，就相当于

$("#id").mouseover(function(){}).mouseout(function(){})

例如 $("h5.head").hover(function(){
$("div.content").hide();
},function(){
$("div.content").show();
});

Toggle()方法用于模拟鼠标连续单击事件，第1次单击元素，触发第一个函数，再次单击同一个元素，触发第二个函数，如果有更多函数，依次触发.

例如 $("h5.head").toggle(function(){
$("div.content").hide();
},function(){
$("div.content").show();
});

事件对象的属性
Event.type
event.pageX 光标相对于页面的X坐标和Y坐标
event.pageY
Event.which
在鼠标单击事件中获得鼠标的左中右键
在键盘事件中获得键盘的按键
这个有点麻烦，先看例子：$("h5.head").click(function(e){
$("#xy").html("X:"+e.pageX+".....Y:"+e.pageY);
})
});这个实现点击的时候将鼠标坐标输入$("xy")中
这个函数的参数是个对象，在你触发事件的时候就传过来了。至于你在函数小括号里写的那个只是起个名字。其他的type()pageX()pageY()which()这些都穿过来参数的属性。对象.属性调用就好了
注意。这里的属性没有小括号。

jQuery中的动画

1.show() 和 hide()方法

用jQuery做动画要求在标准模式下，否则可能引起动画抖动，标准模式就是在文档的头部有DTD定义部分

Show（）参数：

速度参数slow（600毫秒内显示出来）

normal（400毫秒内显示）

fast（200毫秒）

2.fadeIn()和fadeOut()方法

只改变元素的不透明度

fadeIn()淡入 慢慢显示出来

fadeOut（）淡出 慢慢消失

3.slideUp() 方法和slideDown（）方法和slideToggle()方法

只会改变元素的高度：

假如display:none slideUp()自下往上缩短隐藏 slideDown()自上往下延伸显示，前两个都是单向的，就是上去就不下来了。第三个slideToggle()是第一次点击自上往下延伸显示，第二次点击缩短隐藏

用法都一样选中元素+.+放法名 三个函数的参数都是速度和回调函数

4，自定义动画：animate
如果上面3种仍无法满足我们的需要，就需要自定义动画
语法结构：
Animate(params,speed,callback)
动画需要position：relative
例子： $(function(){
$("div.content")
.animate({width:500,left:"+=100px",opacity:0.3},3000,function(){
$(this).toggle();
})
.css("background","red")
.click(function(){
$(this).fadeOut();
});
})

animate函数的三个参数分别是CSS样式，时间，回调函数。这个函数说白就是在某个时间完成一种效果。这效果是在参数1中写的。，这些执行完了要是还有事要做就写在回调函数里，回调函数在执行完之后自动运行

Stop（）有两个参数，1，true表示把当前元素尚未执行完的动画对列清空

2，让正在执行动画到达结束时的状态，例如隐藏动画，三秒时间内如果触发了显示事件，就会把隐藏做完才会显示，这时候加stop()就好了