jQuery-3~4章

A．查找元素节点

B． 查找属性节点

var s1 = $("ul li:eq(1)");

var li_txt = s1.txt();

alert(li_txt);

var $para = $("p");

var p_txt = $para.attr("title");

alert(p_txt);

创建元素节点

创建文本节点

var s1 =
$("<li></li>"); // 创建第一个li元素

var s2 =
$("<li></li>"); // 创建第二个li元素

remove()方法

detach()

empty()方法

从DOM节点中删除所有匹配的元素，传入的参数作用于根据jQuery表达式来筛选元素。

$('div').remove(); //直接删除 div 元素
注意：.remove()不带参数时，删除前面对象选择器指定的元素。而.remove()本事也可以
带选择符参数的，比如：$('div').remove('#box');只删除 id=box 的 div。

和remove()方法一样是从DOM中去掉所有匹配的元素。这个方法不会吧匹配的元素从jQuery对象中删除，因而可以在将在再使用这些匹配的元素。所有绑定的事件，附加的数据等都会保留下来。

清空节点而不是删除节点。

replaceWith()

replaceAll()

将所有匹配的元素都替换成HTML或者DOM元素

颠倒了replaceWith()操作，其作用和功能和replaceWith()是一样的。

用attr()方法来获取和设置元素属性

用removeAttr()来删除元素属性

如果要获取<p>元素的属性title，只需给attr()方法传递一个参数—属性名称

如下代码

$("p").removeAttr("title");
//删除<p>元素的属性title

var p_class =
$("p").attr("class");

html()方法

text()方法

val()方法

该方法类似于JS中的innerHTML属性

该方法类似于JS中的innerText属性，可以用来读取或者设置某个元素中的文本内容

该方法类似于JS中的value属性，可以用来设置和获取元素的值

children()

用于取得匹配元素的子元素集合

next()

用于取得匹配元素后面邻近的同辈元素

prev()

取得匹配元素前面紧邻的同辈元素

sibling()

取得匹配元素前后所有的同辈元素

closest()

取得最近的匹配元素

parent()
,parents() , closest()三个方法的区别

offset()

获取元素在当前视窗的相对便宜。返回对象包含两个属性：top和left。只对当前元素有效

position()

获取元素相对于最近一个position样式属性设置为realitive或者absolute的祖父节点的相对便宜，和offset()一样，返回对象包含两个属性top和left

scrollTop()

获取元素滚动条距离顶端的距离

scrollLeft()

获取元素滚动条距离左侧的距离

一般写法

简单写法

bind( type [,
data ] , fn );

事件类型：如：blur , focus , load , resize , scroll ,
unload , click , dbclick , mousedown , mouseup , mousemove , mouseover ,
mouseenter , mouseleave , change , select , submit , keydown , keypress ,
keyup , error等

可选参数，作为event.data属性值传递给事件对象的额外数据对象

用来绑定的处理函数

hover()

toggle()

用于模拟光标悬停事件，光标悬停在特定元素上时，触发事件

语法结构：toggle(fn1 , fn2 , fn3 , ……fnN);

该方法用于模拟鼠标连续单击事件，第一次单击元素触发指定的第一个函数，以此类推。

event.type

event.preventDefault()方法

event.stopProgation()方法

event.target

获取到事件类型

阻止默认的事件行为

阻止事件的冒泡

获取到触发事件的元素

event.relatedTarget

event.pageX和event.pageY方法

event.which

event.metaKey

用来访问mouseover和mouseout的相关元素

获取光标对于页面的x坐标和y坐标（如果页面中有滚动条，要加上滚动条的宽度和高度）

获取到鼠标单击事件中获取到鼠标的左中右事件，在键盘事件中的键盘按键

为键盘事件中获取<ctrl>键

没有参数：移除所有事件

有参数：移除该类型事件

把绑定时传递的处理函数作为第2个参数，则这个特定参数被删除

$(‘#btn’).trigger(“click”);      模拟点击事件

$(‘#btn’).
click();  简写

$('#btn').bind("myClick"
, function(){

$('#test').qppend("<p>
myClick <p>");

});

$(‘#btn’).trigger(“myClick”)

$(“input”).triggerHandler(“focus”);

1、绑定多个事件类型 （可以一次性绑定多个事件类型）

$(function(){

$("div").bind("mouseover
mouseout", function(){

$(this).toggleClass("over");

});

});

当光标移动到div时，该元素的class切换为over

2、添加事件命名空间，便于管理（为元素绑定的多个事件类型用命名空间规范起来）

$(function(){

$("div").bind("click.plugin",
function(){

$("body").append("<p>
click 事件 <p>");

});

$("div").bind("mouseover.plugin",
function(){

$("body").append("<p>
mouseover 事件 <p>");

});

$("div").bind("dbclick ",
function(){

$("body").append("<p>
dbclick 事件 <p>");

});

$("button")click(function(){

$("div")unbind(".plugin");

});

});

3、相同事件名称，不同命名空间执行方法

$(function(){

$("div").bind("click",
function(){

$("body").append("<p>
click 事件 <p>");

});

$("div").bind("click.plugin",
function(){

$("body").append("<p>
click. plugin 事件 <p>");

});

$("button").click(function(){

$("div")trigger("click!");

});

});

注意最后一个click后面的感叹号！。它的作用是：匹配所有不包含在命名空间中的click方法。

show() 和hide() 方法

相当于css的display：none或者inner、block、innerblock

让show() 和hide() 方法动起来

修改元素的属性：高度宽度和不透明度

可以为他们 一个速度参数：slow

$("element").show("slow");

关键字还有normal 和 fast（事件长度分别为：600毫秒、400毫秒、200毫秒）。可以直接填写时间数据，单位为毫秒：

$("element").show(1000);

这两个方法值改变元素的不透明度，淡入，淡出

只改变元素的高度

语法结构为: animate(params, speed, callback);

参数说明如下:

1、params:一个包含样式属性及值的映射

2、speed 速度参数，可选

3、callback 在动画完成时执行的函数，可选

$(this).animate({left:"+=100px"},
100)  //在当前位置累加100px

$(this).animate({left:"+=100px"},
100)

.animate({height:"+=200px"},
100);

$(function(){

$("#panel").css("opacity","0.5");

$("#panel").click(function(){

$(this).animate({left:"+=100px",
height:"+=200px", opacity:"1"}, 3000)

.animate({top:"+=200px",
width:"+=100px"}, 3000)

.fadeOut(5000)

.fadeIn(5000)

});

});

$(function(){

$("#panel").css("opacity","0.5");

$("#panel").click(function(){

$(this).animate({left:"+=100px",
height:"+=200px", opacity:"1"}, 3000)

.animate({top:"+=200px",
width:"+=100px"}, 3000, function(){

$(this).css("border",
"5px solid blue");

})

});

});

clearQueue

表示是否要清空未完成的队列

$("#panel").hover(function(){

$(this).stop()

.animate({height:
"150", width:"300"}, 2000);

},function(){

$(this).stop()

.animate({height:"22",
width:"60"},3000);

});

gotoEnd

表示是否当即停止动画

if(!$(element).is(“:animated”)){

//如果当前没有动画则添加新动画。

}

使用delay()方法

toggle(speed,
[callback])

切换元素的可见状态，如果是可见的切换为隐藏的，如果是隐藏的切换成可见的。

slideToogle(speed,
[easing], [callback])

通过高度变化来切换陪陪元素的可见性，通过高度变化来改变。（只调整元素的高度）

fadeTo(speed,
opacity, [callback])

把元素的不透明度以渐进方式调整大指定的值。（只调整元素的不透明度）

$(this).fadeTo(6000,0.2);  //参数：事件，透明度

fadeToggle(speed,[easing],
[callback])

通过不透明度变化来切换匹配元素的可见性（只调整元素的不透明度）

方法名

说明

hide()  show()

同时修改多个样式属性：高度、宽度、不透明度

fadeIn()  fadeOut()

只改变不透明度

sildeUp()  slideDown()

只改变高度

fadeTo()

只改变不透明度

toggle()

用来代替hide()和show()方法，会同时修改多个属性

slideToggle()

用来代替sildeUp() 和
slideDown() 方法，所以只改变高度

fadeToggle()

用来代替fadeIn()和fadeOut()方法，所以只改变宽度

animate()

自定义动画方法（可以用来代替所有其他动画方法方法）