700字范文 > Jquery对象的文档处理 CSS和事件

Jquery对象的文档处理 CSS和事件

时间：2023-09-03 19:57:39

文档处理

append：向每个匹配的元素内部追加内容。这个操作与对指定的元素执行appendchild方法，将它们添加到文档中的情况类似

<p>i would like to say</p>$("p").append("<b>hello</b>");

结果:

[<p>i would liek to say:<b>hello</b></p>]

appendTo：把所有匹配的元素追加到另一个指定的元素集合中。实际上，使用这个方法是颠倒常规的$(A).append(B)的操作，既不是把b追加到a中，而是把a追加到b中

<p>i would like to say:</p><div></div><div></div>$("p").appendTo("div");

结果：

<div><p>i would like to say:</p></div><div><p>i would like to say:</p></div>

prepend;向每个匹配的元素内部前置内容，这是向所有匹配元素内部的开始处插入内容的最佳方式

<p>i would like to say:</p>$("p").prepend("<b>hello</b>");

结果：

[<p><b>hello</b>i would like to say:</p>]

prependTo:把所有匹配的元素前置到另一个、指定的元素元素集合中.实际上，使用这个方法是颠倒了常规的$(A).prepend(B)的操作，即不是把B前置到A中，而是把A前置到B中。

<p>I would like to say: </p><div id="foo"></div>$("p").prependTo("#foo");

结果：

<div id="foo"><p>I would like to say: </p></div>

after:在每个匹配的元素之后插入内容

<p>i would like to say:</p>$("p").after("<b>hello</b>");

结果：

<p>i would like to say:</p><b>hello</b>

before:在每个匹配的元素之前插入内容

<p>I would like to say: </p>$("p").before("<b>Hello</b>");

结果：

<b>Hello</b><p>I would like to say: </p>

insertafter：把所有匹配的元素插入到另一个、指定的元素元素集合的后面。实际上，使用这个方法是颠倒了常规的$(A).after(B)的操作，即不是把B插入到A后面，而是把A插入到B后面。

<p>i would like to say:</p><div id="foo">hello</div>$("p").insertAfter("#foo");

结果:

<div id="foo">Hello</div><p>I would like to say: </p>

insertBefore:把所有匹配的元素插入到另一个，指定的元素集合前面。实际上，使用这个方法是颠倒了常规的$(A).before(B)的操作，即不是把B插入到A前面，而是把A插入到B前面。

<div id="foo">hello</div><p>i would like to say:<p>$("p").insertBefore("#foo");

结果

<p>i would like to say:</p><div id-"foo">hello</div>

replacewidth:将所有匹配的元素替换成指定的HTML或DOM元素

<p>Hello</p><p>cruel</p><p>World</p>$("p").replaceWidth("<b>Paragraph. </b>")

结果:

<b>Paragraph. </b><b>Paragraph. </b><b>Paragraph. </b>

replaceAll:用匹配的元素替换掉所有 selector匹配到的元素。

empty():删除匹配的元素集合中所有的子节点。

<p>Hello, <span>Person</span> <a href="#">and person</a></p> $("p").empty();

结果：

<p></p>

remove([expr]):从DOM中删除所有匹配的元素。这个方法不会把匹配的元素从jQuery对象中删除，因而可以在将来再使用这些匹配的元素。但除了这个元素本身得以保留之外，其他的比如绑定的事件，附加的数据等都会被移除。

<p>Hello</p> how are <p>you?</p>$("p").remove();

结果：

how are

detach([expr])：从DOM中删除所有匹配的元素。这个方法不会把匹配的元素从jQuery对象中删除，因而可以在将来再使用这些匹配的元素。与remove()不同的是，所有绑定的事件、附加的数据等都会保留下来。

<p>Hello</p> how are <p>you?</p> $("p").detach();

结果：

how are

clone([Even[,deepEven]]):克隆匹配的DOM元素并且选中这些克隆的副本。在想把DOM文档中元素的副本添加到其他位置时这个函数非常有用

<b>Hello</b><p>, how are you?</p>$("b").clone().prependTo("p");

结果

<b>Hello</b><p><b>Hello</b>, how are you?</p>

CSS

css：访问匹配元素的样式属性

name-要访问的属性名称，properties-要设置为样式属性的名值对，name/value-属性名，属性值

$("p").css("color");$("p".css({color:"#ff0011",background:"blue"});

offset:获取匹配元素在当前视口的相对偏移。返回的对象包含两个整型属性：top和left。此方法只对可见元素有效

position：获取匹配元素相对父元素的偏移。返回的对象包含两个整型属性：top 和 left。为精确计算结果，请在补白、边框和填充属性上使用像素单位。此方法只对可见元素有效。

scrollTop([val])：获取匹配元素相对滚动条顶部的偏移。此方法对可见和隐藏元素均有效（设定垂直滚动条值）

scrollLeft([val])：获取匹配元素相对滚动条左侧的偏移。 height([val|fn]):取得匹配元素当前计算的高度值（px）。 width([val|fn]):取得匹配元素当前计算的宽度值（px）。

$("p").width(20);

innerHeight(),innerWidth(),outerHeight([options]),outerWidth([options]):前两个是获取匹配元素的内部区域高度和宽度（包括补白，不包括边框），后面两个是获取匹配元素的外部高度和宽度（包括补白和边框），后面两个的默认值是false，设置为true时，计算边距在内

事件

ready（fn）:当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。这是事件模块中最重要的一个函数，因为它可以极大地提高web应用程序的响应速度。简单地说，这个方法纯粹是对向window.load事件注册事件的替代方法。通过使用这个方法，可以在DOM载入就绪能够读取并操纵时立即调用你所绑定的函数，而99.99%的JavaScript函数都需要在那一刻执行。有一个参数－－对jQuery函数的引用－－会传递到这个ready事件处理函数中。可以给这个参数任意起一个名字，并因此可以不再担心命名冲突而放心地使用$别名。请确保在元素的onload事件中没有注册函数，否则不会触发+$(document).ready()事件。可以在同一个页面中无限次地使用$(document).ready()事件。其中注册的函数会按照（代码中的）先后顺序依次执行。

$(document).ready(function(){})$(function(){})

on:在选择元素上绑定一个或多个事件的事件处理函数。on()方法绑定事件处理程序到当前选定的jQuery对象中的元素。

events:一个或多个用空格分隔的事件类型和可选的命名空间，如"click"或"keydown.myPlugin" 。 selector:一个选择器字符串用于过滤器的触发事件的选择器元素的后代。如果选择的< null或省略，当它到达选定的元素，事件总是触发。 data:当一个事件被触发时要传递event.data给事件处理函数。 fn:该事件被触发时执行的函数。 false 值也可以做一个函数的简写，返回false。

$("p").on("click",function(){alert($(this).text())}); function myHanlder(){alert(event.data.foo);}$("p").on("click",{foo:"bar"},myHanlder);

off(events,[selector],[fn]):在选择元素上移除一个或多个事件的事件处理函数.off() 方法移除用.on()绑定的事件处理程序。当有多个过滤参数，所提供的参数都必须匹配的事件处理程序被删除.要删除特定的委派事件处理程序，提供一个selector 的参数。选择器字符串必须是完全匹配递到.on()事件处理程序附加的选择器。要删除非委托元素上的所有事件，使用特殊值 "**" 。和.on()一样，你可以传递一个 events-map>参数明确的指定而不是用events 和 handler作为单独参数。键事件和/或命名空间;值是处理函数或为false的特殊价值。

events:一个或多个空格分隔的事件类型和可选的命名空间，或仅仅是命名空间，比如"click", "keydown.myPlugin", 或者 ".myPlugin". selector:一个最初传递到.on()事件处理程序附加的选择器。 fn:事件处理程序函数以前附加事件上，或特殊值false.

$("p").off();$("p").off("click","**");

bind(type,[data],fn):为每个匹配元素的特定事件绑定事件处理函数。

$("p").bind("click",function(){alert($(this).text())});

同时绑定多个事件类型

$("#foo").bind('mouseenter mouseleave',function(){$(this).toggleClass('entered')});

one(type,[data],fn):为每一个匹配元素的特定事件（像click）绑定一个一次性的事件处理函数。在每个对象上，这个事件处理函数只会被执行一次。其他规则与bind()函数相同。这个事件处理函数会接收到一个事件对象，可以通过它来阻止（浏览器）默认的行为。如果既想取消默认的行为，又想阻止事件起泡，这个事件处理函数必须返回false。 unbind(type,[data|fn]]):bind()的反向操作，从每一个匹配的元素中删除绑定的事件。 live(type, [data], fn):jQuery 给所有匹配的元素附加一个事件处理函数，即使这个元素是以后再添加进来的也有效。这个方法是基本是的 .bind() 方法的一个变体。使用 .bind() 时，选择器匹配的元素会附加一个事件处理函数，而以后再添加的元素则不会有。为此需要再使用一次 .bind() 才行。 die(type, [fn]):从元素中删除先前用.live()绑定的所有事件.(此方法与live正好完全相反。)如果不带参数，则所有绑定的live事件都会被移除。如果提供了type参数，那么会移除对应的live事件。如果也指定了第二个参数function,则只移出指定的事件处理函数。

function aClick(){$("div").show().fadeOut('slow');}$("#unbind").click(function(){$("#theone").die("click",aClick);});

hover([over,]out):一个模仿悬停事件（鼠标移动到一个对象上面及移出这个对象）的方法。这是一个自定义的方法，它为频繁使用的任务提供了一种“保持在其中”的状态。

toggle([speed],[easing],[fn]):用于绑定两个或多个事件处理器函数，以响应被选元素的轮流的 click 事件。如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的。 speed: 隐藏/显示效果的速度。默认是 "0"毫秒。可能的值：slow，normal，fast。" easing:(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear" fn:在动画完成时执行的函数，每个元素执行一次。 blur([[data],fn]):触发每一个匹配元素的blur事件。这个函数会调用执行绑定到blur事件的所有函数，包括浏览器的默认行为。可以通过返回false来防止触发浏览器的默认行为。blur事件会在元素失去焦点的时候触发，既可以是鼠标行为，也可以是按tab键离开的

$("p").blur();

change([[data],fn]):触发每个匹配元素的change事件

click([[data],fn]):触发每一个匹配元素的click事件。这个函数会调用执行绑定到click事件的所有函数。

$("p").click();

focus([[data],fn]),keydown([[data],fn]):分别是触发每一个匹配元素的focus事件。和触发每一个匹配元素的keydown事件 scroll([[data],fn])：在每一个匹配元素的scroll事件中绑定一个处理函数。 select([[data],fn])：触发每一个匹配元素的select事件。这个函数会调用执行绑定到select事件的所有函数，包括浏览器的默认行为。可以通过在某个绑定的函数中返回false来防止触发浏览器的默认行为。 submit([[data],fn])：触发每一个匹配元素的submit事件。这个函数会调用执行绑定到submit事件的所有函数，包括浏览器的默认行为。可以通过在某个绑定的函数中返回false来防止触发浏览器的默认行为。 unload([[data],fn])：在每一个匹配元素的unload事件中绑定一个处理函数。 mousedown（），mouseenter（），mouseleave（），mousemove（），mouseout（），mouseover（）：是一连串的鼠标事件，触发匹配元素的mousedown，mouseenter，mouseleave，mousemove，mouseout，mouseover事件中绑定一个处理函数

$("button").mousedown(function(){$("p").slideToggle();});$("p").mouseenter(function(){$("p").css("background-color","yellow");}) $("p").mouseleave(function(){$("p").css("background","#e9e9e4");})$(document).mousemove(function(){$("span").text(e.pageX+" ,"+e.pageY);});$("p").mouseout(function(){$("p").css("background-color","#e9e9e4");})$("p").mouseover(function(){$("p").css("bakcground-color","yellow"); })$("button").mouseup(function(){$("p").slideToggle();qaz123})

resize([[data],fn]):在每一个匹配元素的resize事件中绑定一个处理函数。