zoukankan      html  css  js  c++  java
  • Jquery 常用方法及实例(Day_15)

    想要做一件事,永远都不要怕晚。只要你开始做了,就不晚。

    而若是你不开始,仅仅停留在思考、犹豫甚至焦虑的状态,那就永远都是零。

     


    • mouseover() / mouserout()

    当鼠标进入 / 离开某个元素或它的后代元素时触发mouseover / mouseout事件。

    • mouseenter()/mouseleave()

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

    • focusin()和focusout()

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

    • eq()和get()

    .get(): 通过jQuery对象获取一个对应的DOM元素。

    .eq():从集合的一个元素中构造新的jQuery对象

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

    1 $( "li" ).get( 0 ).css("color", "red"); //错误
    2 $( "li" ).eq( 0 ).css("color", "red"); //正确


    那么,什么是DOM对象,什么又是jQuery对象呢?

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

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

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

    1 var li = $("li").get(0);
    2 $(li).css("color","black");//用$包装
    • filter()

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

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

    HTML 代码:

      <p>Hello</p><p>Hello Again</p><p class="selected">And Again</p>

    jQuery 代码:

    $("p").filter(".selected, :first")

    结果:

    <p>Hello</p>, <p class="selected">And Again</p>
    • .bind()、.live()和.delegate()方法
    • .bind():绑定事件处理函数的最基本方式是使用.bind()方法。它和live()方法一样,接受两个参数:
    • .bind(event type, event handler)
    • 两种绑定事件处理函数的方法:
    1 $(document).ready(function(){
    2     $('.mydiv').bind('click',test);
    3     function test(){
    4         alert("Hello World!");
    5     }
    6 });
    • 事件处理函数也可以使用匿名函数,如下所示:
    1 $(document).ready(function(){
    2         $("#mydiv").bind("click",function(){
    3             alert("Hello World!");
    4         })
    5     });
    • detach、empty和remove方法

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

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

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

    • each()和map()

    each()和map()方法:each返回的是原来的数组,并不会新创建一个数组。而map方法会返回一个
    新的数组。如果在没有必要的情况下使用map,则有可能造成内存浪费。
    each方法:

    定义一个空数组,通过each方法,往数组添加ID值;最后将数组转换成字符串后,alert这个值;

    代码如下:

    1 $(function(){
    2     var arr = [];
    3     $(":checkbox").each(function(index){
    4         arr.push(this.id);
    5     });
    6     var str = arr.join(",");
    7     alert(str);
    8 })
    • $.each()

    jQuery的$(selector).each()函数可以遍历循环选中的子元素,而jQuery的$.each()函数则可以遍历任何集合,包括对象和数组,它接收要遍历的集合以及一个回调函数,回调函数每次传递一个数组的下标和这个下标所对应的数组的值。

    $.each(array,callback);

    $.each(object,callback);
    数组实例

    1 $.each( [ "one", "two", "three" ], function( i, l ){
    2 alert( "index #" + i + ": " + l );
    3 });

    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()方法手动触发
     1 <script type="text/javascript">
     2     $(document).ready(function(){
     3         $("input").select(function(){
     4             $("input").after("文本被选中!");
     5         })
     6         $("button").click(function(){
     7             $("input").trigger("select");
     8         })
     9     })
    10 </script>
    • .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()

    • append()

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

    HTML 代码:

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

    jQuery 代码:

    $("p").append("<b>Hello</b>");

    结果:

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

    • appendTo()

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

    • 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>

    • .prependTo()

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

    待更新。。。

     

     

     

     

     

  • 相关阅读:
    飞鸽传书中文源码
    nohup命令参考
    Linux平台编程新手入门 C语言中的移位操作
    小技巧:让linux程序在后台运行
    2440之中断管理
    linux终端中输出彩色字体(C/SHELL)
    C语言标准中的逻辑位移和算术位移
    SQL2005利用ROW_NUMER实现分页的两种常用方式
    不用现有方法,把string转换成int型[C#]
    C# 如何生成一个时间戳
  • 原文地址:https://www.cnblogs.com/papercy/p/13854807.html
Copyright © 2011-2022 走看看