jQuery杂记

1.不下载jQuery,可以使用这个来代替

src=“http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js”
放在script标签里

2.jQuery语法

jQuery对象其实是个伪数组,是dom对象的包装体
$ (selector).action()
例如: $ (this).hide() 隐藏当前元素
$(“p”).show() 显示
其中这两个方法可以调节速度,单位为毫秒

3.类似于js的window.onload

jQuery有
$(document).ready(function(){});

4.选择器

• $(“p”) 选取所有p元素
• $(“p#id”) 选取所有id=“id” 的p元素
• $(“p.class”) 选取所有 class=“class” 的 p 元素
• $("[href]") 选取所有带有 href 属性的元素
• $("[href=’#’]") 选取所有带有 href 值等于 “#” 的元素
• $("[href $=’.jpg’]") 选取所有 href 值以 “.jpg” 结尾的元素

类似于css,jQuery也有并集选择器
$(“p,div,img”)

和子代选择器
$(“ul>li”) 子代选择器

$(“ul li”) 后代选择器

还有过滤选择器
$(“div:eq(1)”) 获取div中索引为1的元素

$(“div:odd”) 获取div中为奇数的元素

$(“div:even”) 获取div中为偶数的元素

筛选选择器(方法)

children()方法	相当于子代选择器,$(“div”).children(“li”);
find()方法	相当于后代选择器,用法与children()一样
sibling()方法	查找不包括自身的兄弟元素,用法与children()一样
next()方法	$(“div”).next();查找下一个兄弟
prev()方法	查找上一个兄弟
parent()方法	查找父亲元素

5.方法

jQuery 方法链接:有一种名为链接（chaining）的技术，允许我们在相同的元素上运行多条 jQuery 命令，一条接着另一条
$("#p1").css(“color”,“red”).slideUp(2000).slideDown(2000);

小记一个bind方法,与js类似
$ (“button”).bind(“dbclick”,function(){}) 绑定一个函数

获取焦点时的方法 $(selector).focus()
失去焦点时的方法 $(selector).blur()

jQuery不是onclick是click
类似的还有keydown() keyup() keypress()
mousedown() mouseup() mousemove()
与js不同的是有两个新的mouseenter() 与mouseleave()

不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件
只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件

不论鼠标指针离开被选元素还是任何子元素，都会触发 mouseout 事件
只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件

delegate() 为指定的元素的子元素添加一个或多个事件处理程序
$(“父元素”).delegate(“子元素”,“发生的事件(方法)”,function(){})

$(selector).live(event,data,function)	live() 为被选元素附加一个或多个事件处理程序，并规定当这些事件发生时运行的函数
$(selector).die(event,function)	die() 移除live() 的效果
$(selector).error()	发生错误时的事件
$(selector).one()	每个元素只能运行一次事件处理器函数
$(selector).resize(function)	当调整浏览器窗口的大小时，发生 resize 事件
$(selector).scroll()	当用户滚动指定的元素时，会发生 scroll 事件
$(selector).select()	当 textarea 或文本类型的 input 元素中的文本被选择时，会发生 select 事件
$(selector).toggle(function1(),function2(),functionN())	当指定元素被点击时，在两个或多个函数之间轮流切换

6.属性

event.which 指示按了哪个键或按钮 相当于keycode

7.淡入,淡出

$(selector).fadeIn(speed)	淡入
$(selector).fadeOut(speed)	淡出
$(selector).fadeToggle(speed)	如果元素已淡出，则 fadeToggle() 会向元素添加淡入效果如果元素,已淡入，则 fadeToggle() 会向元素添加淡出效果
$(selector).fadeTo(speed,opacity)	允许渐变为给定的不透明度

8.使元素向下滑或者向上滑

$(selector).slideDown(speed);
$(selector).slideUp(speed);
使用slidedown之前要display=none;

9.动画

$(selector).animate({params},speed,匀速或者缓动,执行完毕后的回调函数)
一共四个参数,其中{params}是必要的
例如: $(“div”).animate({left:‘1000px’,opacity:‘0.5’},5000,‘swing’);
匀速:‘linear’
缓动:‘swing’
让动画来回移动一次,可以利用回调函数来实现

$("div").animate({left:'1000px',opacity:'0.5'},5000,'swing',function(){
    	$("div").animate({left:'0',opacity:'1'},5000)
    });

stop()方法
可以暂停动画,其中有两个参数,均为布尔值
(1)是否清楚动画队列
(2)是否直接到达最终效果

10.

text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容（包括 HTML 标记）
val() - 设置或返回表单字段的值

修改属性attr()
$(selector).attr(“属性”,“要设置或者修改的值”);

11.添加元素

append()	与appendchild类似,可以在()添加HTML标签
prepend()	被选元素的开头插入内容
after()	被选元素之后插入内容
before()	被选元素之前插入内容

12.删除元素

remove() 删除当前元素 empty() 删除当前元素的子元素
remove() 方法也可接受一个参数，允许您对被删元素进行过滤

13.jQuery操作css

$(“可选择多个选择器”).addclass(“一个属性 另一个属性”)
例如 $(“h1,h2,p”).addClass(“blue yellow”)

移除removeclass() 用法相似

toggleclass() 切换类

css()方法
即可以用驼峰命名法也可以用原来的
css(“propertyname”,“value”)
例如 $(“p”).css(“background-color”,“yellow”)
中间可以用 , 隔开

14.dom对象与jQuery对象的转换

js获取的dom对象不能使用jQuery方法
jQuery选择器获取的对象可以用
即var $div=$("#id");
jQuery对象也不能调用dom方法

dom对象转jQuery对象
var div=document.getelementbyid("#id");
var $div=$(div);
jQuery对象转dom对象
(1)通过下标获取
var $div=$("#id");
var div1=$div[0];
(2)通过jquery的get()方法
var $div=$("#id");
var div1=$div.get(1);

15.html()方法与$()创建的区别

html()方法
$("div").html('<p>hhhhhh</p>');
$()创建
var $a=$('<p>hhhhhhhh</p>');

$()能创建元素,但只存在与内存中,必须用其他方法让他显示出来

$('div').append($a);

16.on方法与off方法

addEventListener(‘事件的名称’,回调函数);

另外有on()方法也可以执行,on(‘事件的名称’,回调函数);

移除事件 -off()方法
不传参,移除所有事件,一个参数,则移除对应事件

17.clone(是否深复制(true/false)方法

原生js的cloneNode()不能复制事件