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

前端之家收集整理的这篇文章主要介绍了jquery常用方法及使用示例汇总前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

mouSEOver()/mouserout()

当鼠标进入/离开某个元素或它的后代元素时触发mouSEOver/mouSEOut事件。 mouSEOver事件大多数时候会与 mouSEOut 事件一起使用。

mouSEOver/mouserout事件由于冒泡机制,经常在不需要的时候不小心触发,从而导致一些脚本问题。

mouseenter()/mouseleave()

mouseenter/mouseleave当且仅当鼠标进入被选元素时才触发,当鼠标穿过任何子元素时不会触发。它不关心目标元素是否有子元素。

focusin()和focusout()

.focusin():一个元素或它的子元素得到焦点时触发此事件 .focusout():一个元素或它的子元素失去焦点时触发此事件

与 focus() 方法不同的是,focusin() 方法在任意子元素获得焦点时也会触发。

代码如下:

focusin fire

focusin fire

eq()和get()

.get(): 通过jQuery对象获取一个对应的DOM元素。 .eq():从集合的一个元素中构造新的jQuery对象

eq返回的是一个jQuery对象,get返回的是一个DOM对象。举个例子:

$( "li" ).get( 0 ).css("color","red"); //错误 $( "li" ).eq( 0 ).css("color","red"); //正确 那么,什么是DOM对象,什么又是jQuery对象呢?

DOM对象就是用js获得的对象,而juqery对象是用jQuery类库的选择器获得的对象。

如:var $obj = $("div");//jQuery对象

get方法本质上是把jQuery对象转换成DOM对象,但是css属于jQuery构造器的,DOM是不存在这个方法的,如果需要用jQuery的方法,我们必须这样写:

代码如下:

filter()

filter()方法:筛选出与指定表达式匹配的元素集合。 这个方法用于缩小匹配的范围。用逗号分隔多个表达式。

filter(expression):(字符串|函数)如果参数是字符串,则制定jQuery选择器,用于从包装集里删除所有与选择器不匹配的元素,最后留下与选择器匹配的元素;如果参数是函数,则用于确定筛选条件。为包装集里的每一个元素各调用一次该函数函数调用返回值为false的任何元素都会从包装集里删除

以下代码意为:保留第一个以及带有select类的元素

HTML 代码:

代码如下:
Hello

Hello Again

jQuery 代码:

代码如下:

结果:

代码如下:
Hello

,

再看一个function的例子,一个函数用来作为测试元素的集合。它接受一个参数index,这是元素在jQuery集合的索引。在函数, this指的是当前的DOM元素。

HTML 代码:

代码如下:
  1. Hello

How are you?

jQuery 代码:

代码如下:

结果:

代码如下:
How are you?

.bind()、.live()和.delegate()方法

.bind():绑定事件处理函数的最基本方式是使用.bind()方法。它和live()方法一样,接受两个参数:

.bind(event type,event handler) 两种绑定事件处理函数方法

代码如下:

function test(){ alert("Hello World!"); } });

事件处理函数也可以使用匿名函数,如下所示:

代码如下:

.live():live方法和bind方法的唯一区别在于.live()不仅作用于DOM中当前存在的元素,还作用于将来可能存在(动态生成)的元素

代码如下:
Box').live('click',function(){ $(this).clone().appendTo('.container'); }); });

Box">

使用live方法绑定事件的缺点在于它无法使用链式调用,那有没有既可以像live方法那样绑定事件,又可以支持链式调用方法呢?答案就是下面的delegate方法

delegate()方法:为指定的元素(属于被选元素的子元素)添加一个或多个事件处理程序, 并规定当这些事件发生时运行的函数。从jQuery 1.7开始,.delegate()已经被.on()方法取代。 语法:

$(selector).delegate(childSelector,event type,function) 参数说明:

childSelector 必需。规定要附加事件处理程序的一个或多个子元素。

event 必需。规定附加到元素的一个或多个事件。由空格分隔多个事件值。必须是有效的事件。

function 必需。规定当事件发生时运行的函数

代码如下:
Box','click',function(){ $(this).clone().appendTo('.container'); }); });

delegate()会在以下两个情况下使用到:

1、如果你有一个父元素,需要给其下的子元素添加事件,这时你可以使用delegate()了,代码如下:

代码如下:

$(this).hide();

});

2、当元素在当前页面中不可用时,可以使用delegate()

end()方法

end()方法:在jquery命令链内调用,以便退回到前一个包装集。 每次过滤方法都会被压入栈中。当我们需要返回到前一个状态时,我们可以使用end() 进行出栈操作,来返回栈中的前一个状态。

end() 方法结束当前链条中的最近的筛选操作,并将匹配元素集还原为之前的状态。

代码如下:

在上面的代码例子中,我们只会看到item 1的字体颜色改变了,而背景颜色没有改变。这是因为 第二个find()方法之前的状态返回的是红色字体的class值为two的对象,因此,第二次find()只会查找

    方法修改该链式操作的代码如下:

    代码如下:

    end()方法在这里是 返回调用 find() 之前的状态,也就是$('ul.one')

    toggleClass()

    `toggleClass()方法:`如果在元素中指定类名称不存在,则添加指定类名称;如果元素已经拥有指定 类名称,则从元素中删除指定类名称。 css(name,value)方法:设定指定的值到每个已匹配元素的指定的css样式属性

    wrap()和wrapInner()

    `wrap()和wrapInner():`前者把所有匹配的元素用其他元素的结构化标记包裹起来; 后者将每一个匹配的元素的子内容(包括文本节点)用一个HTML结构包裹起来。 看下面一个wrap()的例子: 用原先div的内容作为新div的class,并将每一个元素包裹起来

    HTML 代码:

    代码如下:

    jQuery 代码:

    代码如下:
    '; });

    结果:

    代码如下:

接着再看下面一个wrapInner()的例子:

用原先div的内容作为新div的class,并将每一个元素包裹起来

HTML 代码:

代码如下:

jQuery 代码:

代码如下:
'; });

结果:

代码如下:

detach、empty和remove方法

.detach( [selector ] ):从DOM中去掉所有匹配的元素。当需要移走一个元素,不久又将该元素插入DOM时,就需要用到detach方法

.empty():这个方法不仅移除子元素(和其他后代元素),同样移除元素里的文本。因为,根据说明,元素里任何文本字符串都被看做是该元素的子节点。

.remove( [selector ] ):将元素从DOM中移除,同时移除元素上的事件及 jQuery 数据

empty()的例子:

代码如下:
  • item 2
  • .attr()和.prop()

    .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)。

    .after()和.insertAfter()

    1.after()

    描述: 在所有段落中后插入一个jQuery对象(类似于一个DOM元素数组)。

    HTML 代码:

    代码如下:
    Hello

    I would like to say:

    jQuery 代码:

    代码如下:

    结果:

    代码如下:
    I would like to say:

    Hello

    2.insertAfter()

    描述: 把所有段落插入到一个元素之后。与 $("#foo").after("p")相同

    HTML 代码:

    代码如下:
    I would like to say:

    jQuery 代码:

    代码如下:

    结果:

    代码如下:

    I would like to say:

    .before()和.insertBefore()

    3.before()

    描述: 在所有段落中前插入一个jQuery对象(类似于一个DOM元素数组)。

    HTML 代码:

    代码如下:
    I would like to say:

    Hello

    jQuery 代码:

    代码如下:

    结果:

    Hello

    I would like to say:

    .append()和.appendTo()

    4.append()

    描述:向所有段落中追加一些HTML标记

    HTML 代码:

    代码如下:
    I would like to say:

    jQuery 代码:

    代码如下:
    Hello");

    结果:

    I would like to say: Hello

    5.appendTo()

    描述:新建段落追加div中并加上一个class

    HTML 代码:

    代码如下:

    jQuery 代码:

    代码如下:
    ") .appendTo("div") .addClass("test") .end() .addClass("test2");

    结果:

    .prepend()和.prependTo()

    6.prepend()

    描述:向所有段落中前置一个jQuery对象(类似于一个DOM元素数组)。

    HTML 代码:

    I would like to say:

    Hello

    jQuery 代码:

    $("p").prepend( $("b") ); 结果:

    HelloI would like to say:

    7.prependTo()

    描述:把所有段落追加到ID值为foo的元素中。

    HTML 代码:

    代码如下:
    I would like to say:

    jQuery 代码:

    代码如下:

    结果:

    I would like to say:

    总结

    1. .insertAfter()和.after():在现存元素的外部,从后面插入元素 2. .insertBefore()和.before():在现存元素的外部,从前面插入元素 3. .appendTo()和.append():在现存元素的内部,从后面插入元素 4. .prependTo()和.prepend() :在现存元素的内部,从前面插入元素

    原文链接:https://www.f2er.com/jquery/57360.html

    猜你在找的jQuery相关文章