JQUERY_学习路径

官方API：http://api.jquery.com/

 

from ＩＭＯＯＣ：

 Web前端工程师 http://www.imooc.com/course/programdetail/pid/32

jQuery基础(二)—DOM篇 http://www.imooc.com/learn/530

jQuery基础(三)—事件篇 http://www.imooc.com/learn/429

jQuery基础(四)—动画篇 http://www.imooc.com/learn/430

jQuery插件——Validation Plugin http://www.imooc.com/learn/385

Ajax全接触 http://www.imooc.com/learn/250

======================================================

jQuery基础(二)—DOM篇 http://www.imooc.com/learn/530

detach 美 [dɪˈtætʃ]vt.    派遣;分离，拆开;分派;使超然

empty()清空节点

remove()删除节点本身

DOM节点删除之保留数据的删除操作detach()

------------------------------------------------

e是event（事件）的意思，e.target就是事件的对象

    $('p').click(function(e) {
        alert(e.target.innerHTML)
    })

 ---5-1 DOM拷贝clone()---

HTML部分
<div></div>

JavaScript部分
$("div").on('click', function() {//执行操作})

//clone处理一
$("div").clone()   //只克隆了结构，事件丢失

//clone处理二
$("div").clone(true) //结构、事件与数据都克隆

$(this)是触发执行当前函数块（事件处理函数）最内层（距离最近的）的jQuery对象，在你的代码中就是触发了mouseover事件的对象。

 ---5-2 DOM替换replaceWith()和replaceAll()---

.replaceWith( newContent )：用提供的内容替换集合中所有匹配的元素并且返回被删除元素的集合

.replaceAll( target ) ：用集合的匹配元素替换每个目标元素

 ---5-3 DOM包裹wrap()方法------

1 $('p').wrap('<div></div>')

2 $('p').wrap(function() {
    return '<div></div>';   //与第一种类似，只是写法不一样
})

 

$(this).text() 内容为中文时无效。http://api.jquery.com/wrap/

    $(".aaron2").on('click', function() {
        $('a').wrap(function() {
            return '<div class=" + $(this).text() + " />';
        })
    })

6-X ＪＱＥＲＹ遍历

１　children()

2.find()想快速查找DOM树中的这些元素的后代元素，此时可以用find()方法，这也是开发使用频率很高的方法。这里要注意 　　children与find方法的区别，children是父子关系查找，find是后代关系（包含父子关系）

3.parent()

4.parents()

5.closest()最近的元素

jQuery提供了closest()方法，这个方法类似parents但是又有一些细微的区别，属于使用频率很高的方法

6.next()

7.prev()前一个兄弟元素

8.siblings()所有兄弟元素

---6-9 add()方法--------------------------------------------

hDate对象： http://www.w3school.com.cn/jsref/jsref_obj_date.asp

行一系列的操作。$()之后就意味着这个合集对象已经是确定的，如果后期需要再往这个合集中添加一新的元素要如何处理？jQuery为此提供add方法，用来创建一个新的jQuery对象 ，元素添加到匹配的元素集合中

.add()的参数可以几乎接受任何的$()，包括一个jQuery选择器表达式，DOM元素，或HTML片段引用。

简单的看一个案例：操作：选择所有的li元素，之后把p元素也加入到li的合集中

<ul>
    <li>list item 1</li>
    <li>list item 3</li>
</ul>
<p>新的p元素</p>

处理一：传递选择器

$('li').add('p')

处理二：传递dom元素

$('li').add(document.getElementsByTagName('p')[0])

还有一种方式，就是动态创建P标签加入到合集，然后插入到指定的位置，但是这样就改变元素的本身的排列了

 $('li').add('<p>新的p元素</p>').appendTo(目标位置)

    <div class="left first-div">
        <div class="div">
            <ul>
                <li>list item 1</li>
                <li>list item 2</li>
                <li>list item 3</li>
            </ul>
            <p id='old'>新的p元素</p>
        </div>
    </div>
    <div class="right"></div>
    <br/>
    <button>点击：add传递元素标签</button>
    <button>点击：add传递html结构</button>
    <script type="text/javascript">
    $("button:first").click(function() {
         //把p元素添加到li的合集中
         $('li').add('p').css('background', 'red')
    })
    </script>
    <script type="text/javascript">
    $("button:last").click(function() {
         //把html结构'<p>新的p元素</p>'
         //加入到li的合集中，为了能够在页面上显示
         //需要再重新appendTo到指定的节点处
         //值得注意：整个结构位置都改变了
         var date=new Date();
         alert($('li').size());
         $('li').add('<p class = '+date.toTimeString()+'>新的p元素</p>').appendTo($('.right'));
    })
    </script>

$('li').add('<p class = '+date.toTimeString()+'>新的p元素</p>').appendTo($('.right')); })

第一次点击的时候取出.div里的三个li并加上新的p添加到div.right里，此时.right里有三个li一个p

第二次点的时候你把三个li取出，此时.right里只剩一个p（暂且取名‘次新p’），你再用三个li加一个新p添加到.right中时是添加到次新p的下面，就造成了你所看到的现像，

其实最下面的p和三个li才是新添加的，上面的是以前的。

 

 

 

------------------------------------------------------

jQuery基础(三)—事件篇 http://www.imooc.com/learn/429

2 jQuery鼠标事件

方法一：$ele.mouseevent() 绑定$ele元素，不带任何参数一般是用来指定触发一个事件，用的比较少

方法二：$ele.mouseevent( handler(eventObject) ) 绑定$ele元素，每次$ele元素触发点击操作会执行回调 handler函数，这样可以针对事件的反馈做很多操作了，方法中的this是指向了绑定事件的元素

方法三：$ele.mouseevent( [eventData ], handler(eventObject) )使用与方法二一致，不过可以接受一个数据参数，这样的处理是为了解决不同作用域下数据传递的问题

2-1 click与dbclick事件

　　方法三：$ele.click( [eventData ], handler(eventObject) )使用与方法二一致，不过可以接受一个数据参数，这样的处理是为了解决不同作用域下数据传递的问题<div id="test">点击触发<div> $("#test").click(11111,function(e) { //this指向 div元素 //e.data => 11111 传递数据 });

-------------------------------------------------------

2-2 mousedown与mouseup

2-3 mousemove

2-4 mouseover与mouseout

2-5  mouseenter与mouseleave

　　mouseenter事件和mouseover的区别,关键点就是：冒泡的方式处理问题 (event bubbling)

　　<div class="aaron2"> <p>鼠标离开此区域触发mouseleave事件</p> </div>

    如果在p元素与div元素都绑定mouseover事件，鼠标在离开p元素，但是没有离开div元素的时候，触发的结果:

　　1.p元素响应事件

　　2.div元素响应事件

　　这里的问题是div为什么会被触发？ 原因就是事件冒泡的问题，p元素触发了mouseover，他会一直往上找父元素上的mouseover事件，如果父元素有mouseover事件就会被触发所以在这种情况下面，

　　jQuery推荐我们使用 mouseenter事件

mouseenter事件只会在绑定它的元素上被调用，而不会在后代节点上被触发

2-7 hover hover()方法是同时绑定 mouseenter和 mouseleave事件。

　　$(selector).hover(handlerIn, handlerOut)

  • handlerIn(eventObject)：当鼠标指针进入元素时触发执行的事件函数
  • handlerOut(eventObject)：当鼠标指针离开元素时触发执行的事件函数

2-8 focusin 当一个元素，或者其内部任何一个元素获得焦点的时

2-9 focusout 当一个元素，或者其内部任何一个元素失去焦点

=---3 表单时间----------------------------------------

3-1 blur,focus（区别：focusin,focusou支持t冒泡）

3-2 change(input,select,textarea)：<input>元素，<textarea>和<select>元素的值都是可以发生改变的，开发者可以通过change事件去监听这些改变的动作

3-3 select(内容被选中)

3-4 submit

select,submit支持下列三种方法

方法一：$ele.event() 绑定$ele元素，不带任何参数一般是用来指定触发一个事件，用的比较少

方法二：$ele.event( handler(eventObject) ) 绑定$ele元素，每次$ele元素触发点击操作会执行回调 handler函数，这样可以针对事件的反馈做很多操作了，方法中的this是指向了绑定事件的元素

方法三：$ele.event( [eventData ], handler(eventObject) )使用与方法二一致，不过可以接受一个数据参数，这样的处理是为了解决不同作用域下数据传递的问题

 

=---------------------------------------------

---6 时间对象的使用event.target ------------------------------------------------------------

6-1 jQuery事件对象的作用

　　jQuery根据 W3C 标准规范了事件对象，所以在jQuery事件回调方法中获取到的事件对象是经过兼容后处理过的一个标准的跨浏览器对象

　　<ul>
    　　<li class="even1">1</li>
   　　 <li class="even2">2</li>
  　　  <li class="even2">3</li>
    .........
　　</ul>

        $("ul").on('click',function(e){
           alert('触发的元素是内容是: ' + e.target.textContent)
        })

https://api.jquery.com/event.target/

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>event.target demo</title>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<ul>
  <li>item 1
    <ul>
      <li>sub item 1-a</li>
      <li>sub item 1-b</li>
    </ul>
  </li>
  <li>item 2
    <ul>
      <li>sub item 2-a</li>
      <li>sub item 2-b</li>
    </ul>
  </li>
</ul>
 
<script>
function handler( event ) {
  var target = $( event.target );
  if ( target.is( "li" ) ) {
    target.children().toggle();
  }
}
$( "ul" ).click( handler ).find( "ul" ).hide();
</script>
 
</body>
</html>

$( "ul" ).click( handler ).find( "ul" ).hide();

与下面两行等价

$( "ul" ).click( handler );绑定handler
$( "ul" ).find( "ul" ).hide();隐藏ul的子元素ul

---4 键盘事件--------------

4-1.keydown(),keyup()

4-2.keypress()

---5 时间绑定和解绑------------------

5-1 on()

5-2 on() advanced

5-3 off()

---------------------

6-2 jQuery事件对象的属性和方法

常用：

事件对象的属于与方法有很多，但是我们经常用的只有那么几个，这里我主要说下作用与区别

event.type：获取事件的类型

触发元素的事件类型

$("a").click(function(event) {
  alert(event.type); // "click"事件
});

event.pageX 和 event.pageY：获取鼠标当前相对于页面的坐标

通过这2个属性，可以确定元素在当前页面的坐标值，鼠标相对于文档的左边缘的位置（左边）与 （顶边）的距离，简单来说是从页面左上角开始,即是以页面为参考点,不随滑动条移动而变化

event.preventDefault() 方法：阻止默认行为

这个用的特别多，在执行这个方法后，如果点击一个链接（a标签），浏览器不会跳转到新的 URL 去了。我们可以用 event.isDefaultPrevented() 来确定这个方法是否(在那个事件对象上)被调用过了

event.stopPropagation() 方法：阻止事件冒泡

事件是可以冒泡的，为防止事件冒泡到DOM树上，也就是不触发的任何前辈元素上的事件处理函数

event.which：获取在鼠标单击时，单击的是鼠标的哪个键

event.which 将 event.keyCode 和 event.charCode 标准化了。event.which也将正常化的按钮按下(mousedown 和 mouseupevents)，左键报告1，中间键报告2，右键报告3

event.currentTarget : 在事件冒泡过程中的当前DOM元素

冒泡前的当前触发事件的DOM对象, 等同于this.

this和event.target的区别：

js中事件是会冒泡的，所以this是可以变化的，但event.target不会变化，它永远是直接接受事件的目标DOM元素；

.this和event.target都是dom对象

如果要使用jquey中的方法可以将他们转换为jquery对象。比如this和$(this)的使用、event.target和$(event.target)的使用；

---7 自定义时间--------------------

7-1 trigger

jQuery自定义事件之trigger事件

众所周知类似于mousedown、click、keydown等等这类型的事件都是浏览器提供的，通俗叫原生事件，这类型的事件是需要有交互行为才能被触发。

在jQuery通过on方法绑定一个原生事件

$('#elem').on('click', function() {
    alert("触发系统事件")
 });

alert需要执行的条件：必须有用户点击才可以。如果不同用户交互是否能在某一时刻自动触发该事件呢？ 正常来说是不可以的，但是jQuery解决了这个问题，提供了一个trigger方法来触发浏览器事件

所以我们可以这样：

$('#elem').trigger('click');

在绑定on的事件元素上，通过trigger方法就可以调用到alert了，挺简单！

再来看看.trigger是什么？

简单来讲就是：根据绑定到匹配元素的给定的事件类型执行所有的处理程序和行为

trigger除了能够触发浏览器事件，同时还支持自定义事件，并且自定义时间还支持传递参数

$('#elem').on('Aaron', function(event,arg1,arg2) {
    alert("自触自定义时间")
 });
$('#elem').trigger('Aaron',['参数1','参数2'])

trigger触发浏览器事件与自定义事件区别？

  • 自定义事件对象，是jQuery模拟原生实现的
  • 自定义事件可以传递参数

7-2 jQuery自定义事件之triggerHandler事件

trigger事件还有一个特性：会在DOM树上冒泡，所以如果要阻止冒泡就需要在事件处理程序中返回false或调用事件对象中的.stopPropagation() 方法可以使事件停止冒泡

trigger事件是具有触发原生与自定义能力的，但是存在一个不可避免的问题： 事件对象event无法完美的实现，毕竟一个是浏览器给的，一个是自己模拟的。尽管 .trigger() 模拟事件对象，但是它并没有完美的复制自然发生的事件，若要触发通过 jQuery 绑定的事件处理函数，而不触发原生的事件，使用.triggerHandler() 来代替

triggerHandler与trigger的用法是一样的，重点看不同之处：

  • triggerHandler不会触发浏览器的默认行为，.triggerHandler( "submit" )将不会调用表单上的.submit()
  • .trigger() 会影响所有与 jQuery 对象相匹配的元素，而 .triggerHandler() 仅影响第一个匹配到的元素
  • 使用 .triggerHandler() 触发的事件，并不会在 DOM 树中向上冒泡。 如果它们不是由目标元素直接触发的，那么它就不会进行任何处理
  • 与普通的方法返回 jQuery 对象(这样就能够使用链式用法)相反，.triggerHandler() 返回最后一个处理的事件的返回值。如果没有触发任何事件，会返回 undefined

================================================

jQuery基础(四)—动画篇 http://www.imooc.com/learn/430

1 hide(),show(),toggle

2 slideDown(),slideUp(),slideToggle();.slideToggle( [duration ] ,[ complete ] )

3 fadeOut(),fadeIn,fadeToggle()

　　fadeTo()

　　

jQuery中淡入效果fadeTo

淡入淡出fadeIn与fadeOut都是修改元素样式的opacity属性，但是他们都有个共同的特点，变化的区间要么是0，要么是1

fadeIn：淡入效果，内容显示，opacity是0到1
fadeOut：淡出效果，内容隐藏，opacity是1到0

如果要让元素保持动画效果，执行opacity = 0.5的效果时，要如何处理？

如果不考虑CSS3，我们用JS实现的话，基本就是通过定时器，在设定的时间内一点点的修改opacity的值，最终为0.5，原理虽说简单，但是总不如一键设置这么舒服，jQuery提供了fadeTo方法，可以让改变透明度一步到位

语法

.fadeTo( duration, opacity ,callback)

必需的 duration参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。fadeTo() 方法中必需的 opacity 参数将淡入淡出效果设置为给定的不透明度（值介于 0 与 1 之间）。可选的 callback 参数是该函数完成后所执行的函数名称。

 

4.jQuery中toggle与slideToggle以及fadeToggle的比较

操作元素的显示和隐藏可以有几种方法。
例如：

  • 改变样式display为none
  • 设置位置高度为0
  • 设置透明度为0

都能达到这个目的，并且针对这样的处理jQuery都提供了各自的方法。show/hide、sildeDown/sildeUp、fadeIn/fadeOut。除此之外，还引入了toggle、sildeToggle以及fadeToggle切换方法

toggle、sildeToggle以及fadeToggle的区别：
  • toggle：切换显示与隐藏效果
  • sildeToggle：切换上下拉卷滚效果
  • fadeToggle：切换淡入淡出效果
当然细节上还是有更多的不同点:

toggle与slideToggle细节区别：
  • toggle：动态效果为从右至左。横向动作，toggle通过display来判断切换所有匹配元素的可见性
  • slideToggle：动态效果从下至上。竖向动作，slideToggle 通过高度变化来切换所有匹配元素的可见性

fadeToggle方法

  • fadeToggle() 方法在 fadeIn() 和 fadeOut() 方法之间切换。

  • 元素是淡出显示的，fadeToggle() 会使用淡入效果显示它们。

  • 元素是淡入显示的，fadeToggle() 会使用淡出效果显示它们。

  • 注释：隐藏的元素不会被完全显示（不再影响页面的布局）

 

5 -1jQuery中动画animate(上)

有些复杂的动画通过之前学到的几个动画函数是不能够实现，这时候就需要强大的animate方法了

操作一个元素执行3秒的淡入动画，对比一下2组动画设置的区别

$(elem).fadeOut(3000)  
$(elem).animate({   
    opacity:0
},3000)

显而易见，animate方法更加灵活了，可以精确的控制样式属性从而执行动画

语法：

.animate( properties ,[ duration ], [ easing ], [ complete ] )
.animate( properties, options )

.animate()方法允许我们在任意的数值的CSS属性上创建动画。2种语法使用，几乎差不多了，唯一必要的属性就是一组CSS属性键值对。这组属性和用于设置.css()方法的属性键值对类似，除了属性范围做了更多限制。第二个参数开始可以单独传递多个实参也可以合并成一个对象传递了

参数分解：

properties：一个或多个css属性的键值对所构成的Object对象。要特别注意所有用于动画的属性必须是数字的，除非另有说明；这些属性如果不是数字的将不能使用基本的jQuery功能。比如常见的，border、margin、padding、width、height、font、left、top、right、bottom、wordSpacing等等这些都是能产生动画效果的。background-color很明显不可以，因为参数是red或者GBG这样的值，非常用插件，否则正常情况下是不能只用动画效果的。注意，CSS 样式使用 DOM 名称（比如 "fontSize"）来设置，而非 CSS 名称（比如 "font-size"）。

特别注意单位，属性值的单位像素（px）,除非另有说明。单位em 和 %需要指定使用

.animate({
    left: 50, 
    width: '50px'   
    opacity: 'show',  
    fontSize: "10em",
}, 500);

除了定义数值，每个属性能使用'show', 'hide', 和 'toggle'。这些快捷方式允许定制隐藏和显示动画用来控制元素的显示或隐藏

.animate({
    width: "toggle"
});

如果提供一个以+= 或 -=开始的值，那么目标值就是以这个属性的当前值加上或者减去给定的数字来计算的

.animate({ 
    left: '+=50px'
}, "slow");

duration时间

动画执行的时间，持续时间是以毫秒为单位的；值越大表示动画执行的越慢，不是越快。还可以提供'fast' 和 'slow'字符串，分别表示持续时间为200 和 600毫秒。

easing动画运动的算法

jQuery库中默认调用 swing。如果需要其他的动画算法，请查找相关的插件

complete回调

动画完成时执行的函数，这个可以保证当前动画确定完成后发会触发

5-2 jQuery中动画animate(下)

animate在执行动画中，如果需要观察动画的一些执行情况，或者在动画进行中的某一时刻进行一些其他处理，我们可以通过animate提供的第二种设置语法，传递一个对象参数，可以拿到动画执行状态一些通知

.animate( properties, options )

options参数

  • duration - 设置动画执行的时间
  • easing - 规定要使用的 easing 函数，过渡使用哪种缓动函数
  • step：规定每个动画的每一步完成之后要执行的函数
  • progress：每一次动画调用的时候会执行这个回调，就是一个进度的概念
  • complete：动画完成回调

其中最关键的一点就是：

如果多个元素执行动画，回调将在每个匹配的元素上执行一次，不是作为整个动画执行一次

列出常用的方式：

$('#elem').animate({
    width: 'toggle',  
    height: 'toggle'
  }, {
    duration: 5000,
    specialEasing: {
      width: 'linear',
      height: 'easeOutBounce'
    },
    complete: function() {
      $(this).after('<div>Animation complete.</div>');
    }
  });

5-3 jQuery中停止动画stop

动画在执行过程中是允许被暂停的，当一个元素调用.stop()方法，当前正在运行的动画（如果有的话）立即停止

语法：

.stop( [clearQueue ], [ jumpToEnd ] )
.stop( [queue ], [ clearQueue ] ,[ jumpToEnd ] )

stop还有几个可选的参数，简单来说可以这3种情况

  • .stop(); 停止当前动画，点击在暂停处继续开始
  • .stop(true); 如果同一元素调用多个动画方法，尚未被执行的动画被放置在元素的效果队列中。这些动画不会开始，直到第一个完成。当调用.stop()的时候，队列中的下一个动画立即开始。如果clearQueue参数提供true值,那么在队列中的动画其余被删除并永远不会运行
  • .stop(true,true); 当前动画将停止，但该元素上的 CSS 属性会被立刻修改成动画的目标值

简单的说：参考下面代码、

$("#aaron").animate({
    height: 300
}, 5000)
$("#aaron").animate({
    width: 300
}, 5000)
$("#aaron").animate({
    opacity: 0.6
}, 2000)
  1. stop()：只会停止第一个动画，第二个第三个继续
  2. stop(true)：停止第一个、第二个和第三个动画
  3. stop(true ture)：停止动画，直接跳到第一个动画的最终状态 

 

 

6-1 jQuery中each方法的应用

jQuery中有个很重要的核心方法each，大部分jQuery方法在内部都会调用each，其主要的原因的就是jQuery的实例是一个元素合集

如下：找到所有的div，并且都设置样式，css只是一个方法，所以内部会调用each处理这个div的合集，给每个div都设置style属性

$('div').css(...)

jQuery的大部分方法都是针元素合集的操作，所以jQuery会提供$(selector).each()来遍历jQuery对象

.each只是处理jQuery对象的方法，jQuery还提供了一个通用的jQuery.each方法，用来处理对象和数组的遍历

语法

jQuery.each(array, callback )
jQuery.each( object, callback )

第一个参数传递的就是一个对象或者数组，第二个是回调函数

$.each(["Aaron", "慕课网"], function(index, value) {
   //index是索引,也就是数组的索引
   //value就是数组中的值了
});

each就是for循环方法的一个包装，内部就是通过for遍历数组与对象，通过回调函数返回内部迭代的一些参数，第一个参数是当前迭代成员在对象或数组中的索引值(从0开始计数)，第二个参数是当前迭代成员(与this的引用相同

jQuery.each()函数还会根据每次调用函数callback的返回值来决定后续动作。如果返回值为false，则停止循环(相当于普通循环中的break)；如果返回其他任何值，均表示继续执行下一个循环。

$.each(["Aaron", "慕课网"], function(index, value) {
    return false; //停止迭代
});

 

jQuery方法可以很方便的遍历一个数据，不需要考虑这个数据是对象还是数组

6-2 jQuery中查找数组中的索引inArray

在PHP有in_array()判断某个元素是否存在数组中，JavaScript却没有，但是jQuery封装了inArray()函数判断元素是否存在数组中。注意了：在ECMAScript5已经有数据的indexOf方法支持了，但是jQuery保持了版本向下兼容，所以封装了一个inArray方法

jQuery.inArray()函数用于在数组中搜索指定的值，并返回其索引值。如果数组中不存在该值，则返回 -1。

语法：

jQuery.inArray( value, array ,[ fromIndex ] )

用法非常简单，传递一个检测的目标值，然后传递原始的数组，可以通过fromIndex规定查找的起始值，默认数组是0开始

例如：在数组中查找值是5的索引

$.inArray(5,[1,2,3,4,5,6,7]) //返回对应的索引：4

注意：

如果要判断数组中是否存在指定值，你需要通过该函数的返回值不等于(或大于)-1来进行判断

6-3 jQuery中去空格神器trim方法

页面中，通过input可以获取用户的输入值，例如常见的登录信息的提交处理。用户的输入不一定是标准的，输入一段密码：'  1123456  "，注意了： 密码的前后会留空，这可能是用户的无心的行为，但是密码确实又没错，针对这样的行为，开发者应该要判断输入值的前后是否有空白符、换行符、制表符这样明显的无意义的输入值。

jQuery.trim()函数用于去除字符串两端的空白字符

这个函数很简单，没有多余的参数用法

需要注意：

  • 移除字符串开始和结尾处的所有换行符，空格(包括连续的空格)和制表符（tab）
  • 如果这些空白字符在字符串中间时，它们将被保留，不会被移除

通过右边的代码可以明显看到trim使用后的效果

6-4jQuery中DOM元素的获取get方法

jQuery是一个合集对象，如果需要单独操作合集中的的某一个元素，可以通过.get()方法获取到

以下有3个a元素结构：

<a>1</a>
<a>2</a>
<a>3</a>

通过jQuery获取所有的a元素合集$("a")，如果想进一步在合集中找到第二2个dom元素单独处理，可以通过get方法

语法  .get( [index ] )

注意2点

  1. get方法是获取的dom对象，也就是通过document.getElementById获取的对象
  2. get方法是从0开始索引

所以第二个a元素的查找： $(a).get(1)

负索引值参数

get方法还可以从后往前索引，传递一个负索引值，注意的负值的索引起始值是-1

同样是找到第二元素，可以传递 $(a).get(-2)

6-5 jQuery中DOM元素的获取index方法

get方法是通过已知的索引在合集中找到对应的元素。如果反过来，已知元素如何在合集中找到对应的索引呢？

.index()方法，从匹配的元素中搜索给定元素的索引值，从0开始计数。

语法：参数接受一个jQuery或者dom对象作为查找的条件

.index()
.index( selector )
.index( element )
  • 如果不传递任何参数给 .index() 方法，则返回值就是jQuery对象中第一个元素相对于它同辈元素的位置
  • 如果在一组元素上调用 .index() ，并且参数是一个DOM元素或jQuery对象， .index() 返回值就是传入的元素相对于原先集合的位置
  • 如果参数是一个选择器， .index() 返回值就是原先元素相对于选择器匹配元素的位置。如果找不到匹配的元素，则 .index() 返回 -1

简单来说：

<ul>
    <a></a>
    <li id="test1">1</li>
    <li id="test2">2</li>
    <li id="test3">3</li>
</ul>

$("li").index() 没有传递参数，反正的结果是1，它的意思是返回同辈的排列循序，第一个li之前有a元素,同辈元素是a开始为0，所以li的开始索引是1

如果要快速找到第二个li在列表中的索引,可以通过如下2种方式处理

$("li").index(document.getElementById("test2")) //结果：1
$("li").index($("#test2"))  //结果:1

jQuery插件——Validation Plugin http://www.imooc.com/learn/385

Ajax全接触 http://www.imooc.com/learn/250

posted @ 2017-04-21 10:07  charles999  阅读(249)  评论(0)  编辑  收藏  举报