jQuery中的事件
基础事件
鼠标事件:
click( ):单击鼠标时
mouseover( ):鼠标指针移过时
mouseout( ):鼠标指针移出时
mouseenter( ):鼠标指针进入时
mouseleave( ):鼠标指针离开时
键盘事件:
keydown( ):按下键盘时
keyup( ):释放按键时
keypress( ):产生可打印的字符时
window事件
表单事件
浏览器事件:
$(selector).resize( ):调整窗口大小时,完成页面特效
绑定事件与移除事件:
unbind([type],[fn])
复合事件
鼠标光标悬停
hover(enter,leave):
hover()方法相当于mouseover与mouseout事件的组合
鼠标连续点击
toggle(fn1,fn2,…,fnN)
toggleClass(className)
toggle( )和toggleClass( )总结
toggle( fn1,fn2…)实现单击事件的切换,无须额外绑定click事件
toggle( )实现事件触发对象在显示和隐藏状态之间切换
toggleClass( )实现事件触发对象在加载某个样式和移除某个
样式之间切换
jQuery中的DOM操作
样式操作
追加样式:$(selector).addClass(class);
或 $(selector).addClass(class1 class2 … classN);
移除样式:$(selector).removeClass("class") ;
或 $(selector).removeClass("class1 class2 … classN ") ;
设置样式:css(name,value) ;
或 css({name:value, name:value,name:value…}) ;
获取样式:css(name)
切换样式:$(selector).toggleClass(class) ;
判断样式:$(selector). hasClass(class);
内容及Value值操作
HTML代码操作
$("div.left").html():元素中的html代码
$("div.left").html("<div class='content'>…</div>"):设置
标签内容操作
$("div.left").text():获取元素中的文本内容
$("div.left").text("<div class='content'>…</div>"):设置
属性值操作
$(this).val():获取元素的value属性值
$(this).val(value):设置
节点操作
查找节点
创建节点: var $newNode2=$("<li title='last'>北京申办冬奥</li>");
插入节点
元素内部插入子节点
$(A).append(B)表示将B追加到A中
$(A).appendTo(B)表示把A追加到B中
$(A). prepend (B)表示将B前置插入到A中
$(A). prependTo (B)表示将A前置插入到B
元素外部插入同辈节点
$(A).after (B)表示将B插入到A之后
$(A).after (B)表示将B插入到A之后
$(A). before (B)表示将B插入至A之前
$(A). insertBefore (B)表示将A插入到B之前
删除节点
remove():删除整个节点
empty():清空节点内容
detach():删除整个节点,保留元素的绑定事件、附加
替换节点
$(".gameList li:eq(2)").replaceWith($newNode1);
$($newNode1).replaceAll(".gameList li:eq(2)");
两者的关系类似于append()和appendTo()
复制节点
$(selector).clone([includeEvents]) ;
参数ture或flase, true复制事件处理,flase时反之
节点属性操作
获取元素属性:$(selector).attr([name]) ;
设置元素属性:
$(selector).attr({[name1:value1]…[nameN:valueN]}) ;
删除元素属性
$(selector).removeAttr(name) ;
节点遍历
遍历子元素
$(selector).children([expr])
var $section =$("section").children();
获取<section>的子元素,但不包含子元素的子元素
遍历同辈元素
用于获取紧邻匹配元素之后的元素
$("li:eq(1)").next().addClass("orange");
用于获取紧邻匹配元素之前的元素
$("li:eq(1)").prev().addClass("orange");
用于获取位于匹配元素前面和后面的所有同辈元素
$("li:eq(1)").siblings().addClass("orange");
遍历前辈元素
parent():获取元素的父级元素
parents():元素元素的祖先元素
$("li:eq(1)").parent().addClass("orange");
$("li:eq(1)").parents().addClass("orange");
其他遍历方法
each( ) :规定为每个匹配元素规定运行的函数
$(selector).each(function(index,element)) ;
$("img").click(function(){
$("li").each(function(){
var str=$(this).text()+"<br>";
$("section").append(str);
})
});
end( ):结束当前链条中的最近的筛选操作,
并将匹配元素集还原为之前的状态