浅谈jQuery中的工具方法

2024年4月17日 224次阅读 来源: 庄国琳
  • length:获取元素的个数
<div id='d1'>Hello</div>
<div>Hi</div>
<div>MyName</div>
<div>What</div>
<div>where</div>

<script>
    console.log($('div').length);//5
</script>
  • get(index):index表示传入的索引值，根据传入指定的索引值在一个集合中找元素
<div>hello</div>
<div class='c1'>hi</div>
<div>good</div>

<script>
    console.log($('div').get(1));//找到的是class为c1的元素
</script>
  • $().index(element):该方法只能jQuery对象调用，括号接收的参数也只能是jQuery对象，找到返回该元素所在的索引值位置，找不到返回-1
<div id='d1'></div>
<div></div>
<div></div>

<script>
   console.log($('div').index($('#d1')));//找到的是索引值为0
</script>
  • $.inArray(value,array,fromIndex)方法：主要获取传入的元素在一个集合中的位置，找到返回该位置对应的索引值，找不到返回-1；value传入的必须不能是jQuery对象；array传入的可以为jQuery对象也可以是DOM对象，还能传入数组
<div>Hello</div>
<div class='c1'>Hi</div>
<div>Good</div>

<script>
    console.log($.inArray(document.getElementsByClassName('c1')[0],$('div')));//找到的是索引值为1
</script>
  • $().toArray()方法：只能传入一个jQuery对象，把一个jQuery对象转换成数组形式
<div class='c1'>Hello</div>
<div>good</div>
<div>ok</div>

<script>
    console.log($('div').toArray());//输出结果:[div.c1, div, div,]
</script>
  • $.makeArray(obj)方法：传入的是一个对象，可以是jQuery对象，也可以是DOM对象，然后会返回一个数组形式的集合
<div>Hello</div>
<div class='c1'>Hi</div>
<div>Good</div>

<script>
    console.log($.makeArray($('div')));//输出结果：[div, div.c1, div]
</script>
  • $():工厂函数的调用，返回jQuery对象；$.inArray():也是一个对象，jQuery的全局对象
  • each(function(index,domElement){}):可以用它来遍历一个jQuery对象的集合，遍历完成之后，返回的是DOM对象，index返回的是索引值，domElement返回的是索引值对应的元素
<div>html</div>
<div>css</div>
<div>javascript</div>

<script>
    var $divs=$('div');
    $divs.each(function(index,domElement){
        console.log(index,domElement);
    /*输出结果：0   <div>html</div>
               1   <div>css</div>
               2   <div>javascript</div>*/    
    });
</script>
  • $.each(obj,function(index,domElement){})：可以用来遍历一个类数组对象的集合，obj传入的可以是jQuery对象，也可以是dom对象，index可以获取对应的索引值，domElement获取的是索引值对应的元素,返回的是DOM对象
<div>Hello</div>
<div>Hi</div>
<div>good</div>

<script>
    $.each($('div'),function(index,domElement){
        console.log(index,domElement);
        /*
        输出结果：  0  <div>Hello</div>
                   1  <div>Hi</div>
                   2  <div>good</div> 
        */
    })
</script>
  • $.trim:去掉字符串中开始和结束的空格
var str='  good   morning   you   ';
console.log($.trim(str));//输出结果：good   morning   you
    原文作者：庄国琳
    原文地址: https://segmentfault.com/a/1190000016359001
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞