一、属性过滤选择器:
$(“div[id]”) 选取有id属性的<div>
$(“div[title=test]”) 选取title属性为”test”的<div>,jQuery中没有对getElementByName进行封装,用$(“input[name=abc]”)
$(“div[title != test]”) 选取title属性不为”test”的<div>
$(“div[id *= div]”) 选取给定的属性包含某些值的元素。还可以选择开头、结束、包含等,条件还可以复合。
二、表单对象选择器(过滤器)
$(“#form1:enabled”) 选取id为form1的表单内所有启用的元素
$(“form1:disabled”) 选取id为form1的表单内所有禁用的元素
$(“input:checked”) 选取所有选中的元素(Radio、CheckBox)
$(“select option:selected”) 选取所有选中的选项元素(下拉列表)
案例:歌曲选择,实现全选、反选
//获取选中的checkbox的值
$(“input[value=checked1]”).click(function(){
$(“input[type=checkbox]:checked”).each(function(){
//this是包装集中的每一项,是Dom对象
alert($(this).val());
})
})
三、表单选择器:
$(“:input”)选取所有<input>、<textarea>、<select>、<button>元素。和$(“input”)不一样,$(“input”)只获取<input>,.
$(“:text”)选取所有单行文本框,等价于$(“input[type=text]”)
$(“:password”)选取所有的密码框。同理还有:radio、:checkbox、:submit、:image、:reset、:button、:file、:hidden
四、动态创建Dom节点
//添加link标签到:
//div的结束标签之前
$(“#d1”).prepend($link);
//div的开始标签之后
$(“#d1”).prepend($link);
//div的开始标签之前
$(“#d1”).before($link);
//div的结束标签之后
$(“#d1”).after($link);
append与appendto方向相反
remove与empty:
remove 删除节点;empty清空节点内容但不删除节点
五、事件
Jquery中的事件绑定:$(“#btn”).bind(“click”,function(){}),每次都这么调用太麻烦,所以jQuery可以用$(“#btn”).click(function(){})来简化。解除绑定:unbind
一次性事件:如果绑定的事件只想执行一次随后立即unbind可以使用one()方法进行事件绑定。
合成事件hover,hover(enterfn,leavefn),当鼠标放在元素上时调用enterfn方法,当鼠标离开元素时调用leavefn方法。 toggle()
mouseover和mouseenter的区别:mouseover会有事件冒泡。
如果想获得事件相关的信息,只要给相应的匿名函数增加一个参数:e,e就是事件对象。调用事件对象的stopPropagation()方法终止冒泡。e.stopPropagation();例:
$(“tr”).click(function(e){alert(“tr被点击”);e.stopPropagation();});
事件冒泡中this和e.target不同,this是监听事件的对象,e.target是触发事件的对象。
阻止默认行为:有的元素有默认行为,比如超链接点击后会转向新链接、提交按钮默认会提交表单,如果想阻止默认行为只要调用事件对象的preventDefault()方法和Dom中的window.event.returnValue=false效果一样。例:
$(“a”).click(function(e){alert(“所有超链接暂时全部禁止点击”);e.preventDefault();});
六、动画
show()、hide()方法会显示、隐藏元素。用toggle()方法在显示、隐藏之间切换。例:
$(“:button[value=show]”).click(function(){$(“div”).show();});
$(“:button[value=hide]”).click(function(){$(“div”).hide();});
如果show、hide方法不带参数则是立即显示、立即隐藏,如果指定速度参数则会用指定时间进行动态显示、隐藏,单位为毫秒,也可以使用三个内置的速度:fast(200毫秒)、normal(400毫秒)、slow(600毫秒),jQuery动画函数中需要速度的地方一般也可以使用这三个值,如toggle、slideDown、slideUp、fadeOut、fadeIn
注意:
1、 addClass(“black”); 不是addClass(“.black”);
2、 attr(“calss”,”black”)和addClass()的区别:attr重置样式,addClass附加样式
3、 remove()会移除对象的事件,不会移除样式;append()把对象移动过去。
例:$(this).remove().appendTo($(“#cn”));