黑马程序员_学习日记63_710jQuery2（属性选择器、表单选择器、操作Dom节点、事件、动画）

一、属性过滤选择器：

$(“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”));