源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

jquery常用方法及使用示例汇总

  • 时间:2020-07-04 22:28 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:jquery常用方法及使用示例汇总
[b]mouseover()/mouserout()[/b] 当鼠标进入/离开某个元素或它的后代元素时触发mouseover/mouseout事件。 mouseover事件大多数时候会与 mouseout 事件一起使用。 mouseover/mouserout事件由于冒泡机制,经常在不需要的时候不小心触发,从而导致一些脚本问题。 [b]mouseenter()/mouseleave()[/b] mouseenter/mouseleave当且仅当鼠标进入被选元素时才触发,当鼠标穿过任何子元素时不会触发。它不关心目标元素是否有子元素。 [b]focusin()和focusout()[/b] .focusin():一个元素或它的子元素得到焦点时触发此事件 .focusout():一个元素或它的子元素失去焦点时触发此事件 与 focus() 方法不同的是,focusin() 方法在任意子元素获得焦点时也会触发。
[url=http://libs.baidu.com/jquery/1.9.0/jquery.js"></script]http://libs.baidu.com/jquery/1.9.0/jquery.js"></script[/url]> </head> <body>     <ul class="one">     <li class="two">item 1</li>     <li>item 2</li>     <li class="three">item 3</li> </ul> <script type="text/javascript">     $('ul.one').find(".two").css("color","red").find('.three').css("background","blue"); </script>
在上面的代码例子中,我们只会看到item 1的字体颜色改变了,而背景颜色没有改变。这是因为 第二个find()方法之前的状态返回的是红色字体的class值为two的对象,因此,第二次find()只会查找<ul class="one"> 中的.two,使用end()方法修改该链式操作的代码如下:
[u]复制代码[/u] 代码如下:
<script type="text/javascript">     $('ul.one').find(".two").css("color","red").end().find('.three').css("background","blue"); </script>
end()方法在这里是 返回调用 find() 之前的状态,也就是$('ul.one') toggleClass()     `toggleClass()方法:`如果在元素中指定类名称不存在,则添加指定类名称;如果元素已经拥有指定 类名称,则从元素中删除指定类名称。   css(name,value)方法:设定指定的值到每个已匹配元素的指定的css样式属性 [b]wrap()和wrapInner()[/b]     `wrap()和wrapInner():`前者把所有匹配的元素用其他元素的结构化标记包裹起来; 后者将每一个匹配的元素的子内容(包括文本节点)用一个HTML结构包裹起来。 看下面一个wrap()的例子: 用原先div的内容作为新div的class,并将每一个元素包裹起来 HTML 代码:
[u]复制代码[/u] 代码如下:
<div class="container">   <div class="inner">Hello</div>   <div class="inner">Goodbye</div> </div>
jQuery 代码:
[u]复制代码[/u] 代码如下:
$('.inner').wrap(function() {   return '<div class="' + $(this).text() + '" />'; });
结果:
[u]复制代码[/u] 代码如下:
<div class="container">   <div class="Hello">     <div class="inner">Hello</div>   </div>   <div class="Goodbye">     <div class="inner">Goodbye</div>   </div> </div>
接着再看下面一个wrapInner()的例子: 用原先div的内容作为新div的class,并将每一个元素包裹起来 HTML 代码:
[u]复制代码[/u] 代码如下:
<div class="container">   <div class="inner">Hello</div>   <div class="inner">Goodbye</div> </div>
jQuery 代码:
[u]复制代码[/u] 代码如下:
$('.inner').wrapInner(function() {   return '<div class="' + $(this).text() + '" />'; });
结果:
[u]复制代码[/u] 代码如下:
<div class="container">   <div class="inner">     <div class="Hello">Hello</div>   </div>   <div class="inner">     <div class="Goodbye">Goodbye</div>   </div> </div>
[b]detach、empty和remove方法[/b] .detach( [selector ] ):从DOM中去掉所有匹配的元素。当需要移走一个元素,不久又将该元素插入DOM时,就需要用到detach方法。 .empty():这个方法不仅移除子元素(和其他后代元素),同样移除元素里的文本。因为,根据说明,元素里任何文本字符串都被看做是该元素的子节点。 .remove( [selector ] ):将元素从DOM中移除,同时移除元素上的事件及 jQuery 数据 empty()的例子:
[u]复制代码[/u] 代码如下:
 <ul class="one">     <li class="two">item 1</li>     <li>item 2</li>     <li class="three">item 3</li> </ul> <script type="text/javascript">     $(".two").empty();//item 1 文本节点被移除,li的小圆点还在,证明li没有被移除 </script>
看下面一个remove()例子: 描述:从DOM中把所有段落删除 HTML 代码:
[u]复制代码[/u] 代码如下:
<p>Hello</p> how are <p>you?</p>
jQuery 代码:
[u]复制代码[/u] 代码如下:
$("p").remove();
结果: how are val()方法 val():获得匹配元素的当前值。 描述:获取文本框中的值 jQuery 代码:
[u]复制代码[/u] 代码如下:
$("input").val();
jQuery 代码:
[u]复制代码[/u] 代码如下:
$("input").val("hello world!");
[b]each()和map()[/b] each()和map()方法:each返回的是原来的数组,并不会新创建一个数组。而map方法会返回一个 新的数组。如果在没有必要的情况下使用map,则有可能造成内存浪费。 each方法: 定义一个空数组,通过each方法,往数组添加ID值;最后将数组转换成字符串后,alert这个值;
[u]复制代码[/u] 代码如下:
$(function(){     var arr = [];     $(":checkbox").each(function(index){         arr.push(this.id);     });     var str = arr.join(",");     alert(str); })
[b]map方法:[/b] 将每个:checkbox执行return this.id;并将这些返回值,自动的保存为jQuery对象,然后用get方法将其转换成原生Javascript数组,再使用join方法转换成字符串,最后alert这个值;
[u]复制代码[/u] 代码如下:
$(function(){     var str = $(":checkbox").map(function() {         return this.id;     }).get().join();        alert(str); })
当有需一个数组的值的时候,用map方法,很方便。 更加详细的讨论,请点击我的另一篇文章:详解jQuery内置函数map()和each()的使用 $.each() jQuery的$(selector).each()函数可以遍历循环选中的子元素,而jQuery的$.each()函数则可以遍历任何集合,包括对象和数组,它接收要遍历的集合以及一个回调函数,回调函数每次传递一个数组的下标和这个下标所对应的数组的值。 $.each(array,callback); $.each(object,callback); 数组实例
[u]复制代码[/u] 代码如下:
$.each( [ "one", "two", "three" ], function( i, l ){ alert( "index #" + i + ": " + l ); });
callback(索引,索引值) DEMO: index 0: one index 1: two; index 2: three 对象实例 $.each({ name: "John", lang: "JS" }, function( k, v ) { alert( "Key: " + k + ", Value: " + v ); }); callback(键,值) Demo:  Key: name, Value: trigkit4  Key: ages, Value: 21 .trigger() 描述: 根据绑定到匹配元素的给定的事件类型执行所有的处理程序和行为。 当相应的事件发生时,任何通过.on()或一个快捷方法绑定的事件处理程序将被触发。但是,它们可以用.trigger()方法手动触发
[u]复制代码[/u] 代码如下:
<script type="text/javascript">     $(document).ready(function(){         $("input").select(function(){             $("input").after("文本被选中!");         })         $("button").click(function(){             $("input").trigger("select");         })     }) </script>
[b].attr()和.prop()[/b] .attr():获取匹配的元素集合中的第一个元素的属性的值 或 设置每一个匹配元素的一个或多个属性。 .prop():同上 jQuery 1.6之前 ,.attr()方法在取某些 attribute 的值时,会返回 property 的值,这就导致了结果的不一致。从 jQuery 1.6 开始, .prop()方法 方法返回 property 的值,而 .attr() 方法返回 attributes 的值。 例如, selectedIndex, tagName, nodeName, nodeType, ownerDocument, defaultChecked, 和 defaultSelected 应使用.prop()方法进行取值或赋值。 他们没有相应的属性(attributes),只有特性(property)。 [b].after()和.insertAfter()[/b] [b]1.after()[/b] 描述: 在所有段落中后插入一个jQuery对象(类似于一个DOM元素数组)。 HTML 代码:
[u]复制代码[/u] 代码如下:
<b>Hello</b><p>I would like to say: </p>
jQuery 代码:
[u]复制代码[/u] 代码如下:
$("p").after( $("b") );
结果:
[u]复制代码[/u] 代码如下:
<p>I would like to say: </p><b>Hello</b>
[b]2.insertAfter()[/b] 描述: 把所有段落插入到一个元素之后。与 $("#foo").after("p")相同 HTML 代码:
[u]复制代码[/u] 代码如下:
<p>I would like to say: </p><div id="foo">Hello</div>
jQuery 代码:
[u]复制代码[/u] 代码如下:
$("p").insertAfter("#foo");
结果:
[u]复制代码[/u] 代码如下:
<div id="foo">Hello</div><p>I would like to say: </p>
.before()和.insertBefore() [b]3.before()[/b] 描述: 在所有段落中前插入一个jQuery对象(类似于一个DOM元素数组)。 HTML 代码:
[u]复制代码[/u] 代码如下:
<p>I would like to say: </p><b>Hello</b>
jQuery 代码:
[u]复制代码[/u] 代码如下:
$("p").before( $("b") );
结果: <b>Hello</b><p>I would like to say: </p> .append()和.appendTo() [b]4.append()[/b] 描述:向所有段落中追加一些HTML标记。 HTML 代码:
[u]复制代码[/u] 代码如下:
<p>I would like to say: </p>
jQuery 代码:
[u]复制代码[/u] 代码如下:
$("p").append("<b>Hello</b>");
结果:  <p>I would like to say: <b>Hello</b></p> [b]5.appendTo()[/b] 描述:新建段落追加div中并加上一个class HTML 代码:
[u]复制代码[/u] 代码如下:
<div></div><div></div>
jQuery 代码:
[u]复制代码[/u] 代码如下:
 $("<p/>")    .appendTo("div")    .addClass("test")    .end()    .addClass("test2");
结果: <div><p class="test test2"></p></div> <div><p class="test"></p></div> .prepend()和.prependTo() [b]6.prepend()[/b] 描述:向所有段落中前置一个jQuery对象(类似于一个DOM元素数组)。 HTML 代码: <p>I would like to say: </p><b>Hello</b> jQuery 代码: $("p").prepend( $("b") ); 结果: <p><b>Hello</b>I would like to say: </p> [b]7.prependTo()[/b] 描述:把所有段落追加到ID值为foo的元素中。 HTML 代码:
[u]复制代码[/u] 代码如下:
<p>I would like to say: </p><div id="foo"></div>
jQuery 代码:
[u]复制代码[/u] 代码如下:
$("p").prependTo("#foo");
结果: <div id="foo"><p>I would like to say: </p></div> [b]总结[/b] 1. .insertAfter()和.after():在现存元素的外部,从后面插入元素  2. .insertBefore()和.before():在现存元素的外部,从前面插入元素  3. .appendTo()和.append():在现存元素的内部,从后面插入元素  4. .prependTo()和.prepend()  :在现存元素的内部,从前面插入元素
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部