mouseover()/mouserout() 当鼠标进入/离开某个元素或它的后代元素时触发mouseover/mouseout事件。 mouseover/mouserout事件由于冒泡机制,经常在不需要的时候不小心触发,从而导致一些脚本问题。 mouseenter()/mouseleave() mouseenter/mouseleave当且仅当鼠标进入被选元素时才触发,当鼠标穿过任何子元素时不会触发。它不关心目标元素是否有子元素。 focusin()和focusout() .focusin():一个元素或它的子元素得到焦点时触发此事件 与 focus() 方法不同的是,focusin() 方法在任意子元素获得焦点时也会触发。 代码如下: eq()和get() .get(): 通过jQuery对象获取一个对应的DOM元素。 eq返回的是一个jQuery对象,get返回的是一个DOM对象。举个例子: $( “li” ).get( 0 ).css(“color”, “red”); //错误 DOM对象就是用js获得的对象,而juqery对象是用jQuery类库的选择器获得的对象。 如:var $obj = $(“div”);//jQuery对象 get方法本质上是把jQuery对象转换成DOM对象,但是css属于jQuery构造器的,DOM是不存在这个方法的,如果需要用jQuery的方法,我们必须这样写: 代码如下: filter() filter()方法:筛选出与指定表达式匹配的元素集合。 filter(expression):(字符串|函数)如果参数是字符串,则制定jQuery选择器,用于从包装集里删除所有与选择器不匹配的元素,最后留下与选择器匹配的元素;如果参数是函数,则用于确定筛选条件。为包装集里的每一个元素各调用一次该函数,函数调用返回值为false的任何元素都会从包装集里删除。 以下代码意为:保留第一个以及带有select类的元素 HTML 代码: 代码如下: jQuery 代码: 代码如下: 结果: 代码如下: 再看一个function的例子,一个函数用来作为测试元素的集合。它接受一个参数index,这是元素在jQuery集合的索引。在函数, this指的是当前的DOM元素。 HTML 代码: 代码如下: jQuery 代码: 代码如下: 结果: 代码如下: .bind()、.live()和.delegate()方法 .bind():绑定事件处理函数的最基本方式是使用.bind()方法。它和live()方法一样,接受两个参数: .bind(event type, event handler) 代码如下: function test(){ 事件处理函数也可以使用匿名函数,如下所示: 代码如下: .live():live方法和bind方法的唯一区别在于.live()不仅作用于DOM中当前存在的元素,还作用于将来可能存在(动态生成)的元素 代码如下: <div class=”container”> 使用live方法绑定事件的缺点在于它无法使用链式调用,那有没有既可以像live方法那样绑定事件,又可以支持链式调用的方法呢?答案就是下面的delegate方法。 delegate()方法:为指定的元素(属于被选元素的子元素)添加一个或多个事件处理程序, $(selector).delegate(childSelector,event type,function) childSelector 必需。规定要附加事件处理程序的一个或多个子元素。 event 必需。规定附加到元素的一个或多个事件。由空格分隔多个事件值。必须是有效的事件。 function 必需。规定当事件发生时运行的函数。 代码如下: delegate()会在以下两个情况下使用到: 1、如果你有一个父元素,需要给其下的子元素添加事件,这时你可以使用delegate()了,代码如下: 代码如下: $(this).hide(); }); 2、当元素在当前页面中不可用时,可以使用delegate() end()方法 end()方法:在jquery命令链内调用,以便退回到前一个包装集。 end() 方法结束当前链条中的最近的筛选操作,并将匹配元素集还原为之前的状态。 代码如下: <script type=”text/javascript”> 在上面的代码例子中,我们只会看到item 1的字体颜色改变了,而背景颜色没有改变。这是因为 代码如下: end()方法在这里是 返回调用 find() 之前的状态,也就是$(‘ul.one’) toggleClass() `toggleClass()方法:`如果在元素中指定类名称不存在,则添加指定类名称;如果元素已经拥有指定 wrap()和wrapInner() `wrap()和wrapInner():`前者把所有匹配的元素用其他元素的结构化标记包裹起来; HTML 代码: 代码如下: jQuery 代码: 代码如下: 结果: 代码如下: 接着再看下面一个wrapInner()的例子: 用原先div的内容作为新div的class,并将每一个元素包裹起来 HTML 代码: 代码如下: jQuery 代码: 代码如下: 结果: 代码如下: detach、empty和remove方法 .detach( [selector ] ):从DOM中去掉所有匹配的元素。当需要移走一个元素,不久又将该元素插入DOM时,就需要用到detach方法。 .empty():这个方法不仅移除子元素(和其他后代元素),同样移除元素里的文本。因为,根据说明,元素里任何文本字符串都被看做是该元素的子节点。 .remove( [selector ] ):将元素从DOM中移除,同时移除元素上的事件及 jQuery 数据 empty()的例子: 代码如下: <script type=”text/javascript”> 看下面一个remove()例子: 描述:从DOM中把所有段落删除 HTML 代码: 代码如下: jQuery 代码: 代码如下: 结果: how are val():获得匹配元素的当前值。 jQuery 代码: 代码如下: jQuery 代码: 代码如下: each()和map() each()和map()方法:each返回的是原来的数组,并不会新创建一个数组。而map方法会返回一个 定义一个空数组,通过each方法,往数组添加ID值;最后将数组转换成字符串后,alert这个值; 代码如下: map方法: 将每个:checkbox执行return this.id;并将这些返回值,自动的保存为jQuery对象,然后用get方法将其转换成原生Javascript数组,再使用join方法转换成字符串,最后alert这个值; 代码如下: 当有需一个数组的值的时候,用map方法,很方便。 更加详细的讨论,请点击我的另一篇文章:详解jQuery内置函数map()和each()的使用 $.each() jQuery的$(selector).each()函数可以遍历循环选中的子元素,而jQuery的$.each()函数则可以遍历任何集合,包括对象和数组,它接收要遍历的集合以及一个回调函数,回调函数每次传递一个数组的下标和这个下标所对应的数组的值。 $.each(array,callback); $.each(object,callback); 代码如下: callback(索引,索引值) index 0: one $.each({ name: “John”, lang: “JS” }, function( k, v ) { Key: name, Value: trigkit4 描述: 根据绑定到匹配元素的给定的事件类型执行所有的处理程序和行为。 当相应的事件发生时,任何通过.on()或一个快捷方法绑定的事件处理程序将被触发。但是,它们可以用.trigger()方法手动触发 代码如下: $(“button”).click(function(){ .attr()和.prop() .attr():获取匹配的元素集合中的第一个元素的属性的值 或 设置每一个匹配元素的一个或多个属性。 .prop():同上 例如, selectedIndex, tagName, nodeName, nodeType, ownerDocument, defaultChecked, 和 defaultSelected 应使用.prop()方法进行取值或赋值。 他们没有相应的属性(attributes),只有特性(property)。 .after()和.insertAfter() 1.after() 描述: HTML 代码: 代码如下: jQuery 代码: 代码如下: 结果: 代码如下: 2.insertAfter() 描述: HTML 代码: 代码如下: jQuery 代码: 代码如下: 结果: 代码如下: .before()和.insertBefore() 3.before() 描述: HTML 代码: 代码如下: jQuery 代码: 代码如下: 结果: <b>Hello</b><p>I would like to say: </p> .append()和.appendTo() 4.append() 描述:向所有段落中追加一些HTML标记。 HTML 代码: 代码如下: jQuery 代码: 代码如下: 结果: <p>I would like to say: <b>Hello</b></p> 5.appendTo() 描述:新建段落追加div中并加上一个class HTML 代码: 代码如下: jQuery 代码: 代码如下: 结果: <div><p class=”test test2″></p></div> .prepend()和.prependTo() 6.prepend() 描述:向所有段落中前置一个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> 7.prependTo() 描述:把所有段落追加到ID值为foo的元素中。 HTML 代码: 代码如下: jQuery 代码: 代码如下: 结果: <div id=”foo”><p>I would like to say: </p></div> 总结 1. .insertAfter()和.after():在现存元素的外部,从后面插入元素 |
-
:
:
本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。
评论前必须登录!
立即登录