jQuery | 七种常用的核心方法

最新推荐文章于 2023-04-05 21:18:11 发布

Bravo！！！

最新推荐文章于 2023-04-05 21:18:11 发布

阅读量125

点赞数

分类专栏： jQuery 文章标签： jquery

本文链接：https://blog.csdn.net/weixin_47982238/article/details/108000445

版权

jQuery 专栏收录该内容

15 篇文章 1 订阅

订阅专栏

1.each()

<body>
    <h1>aaaaaaaaaaaaaaaaaaaaaaa</h1>
    <h1>aaaaaaaaaaaaaaaaaaaaaaa</h1>
    <h1>aaaaaaaaaaaaaaaaaaaaaaa</h1>
    <h1>aaaaaaaaaaaaaaaaaaaaaaa</h1>
    <h1>aaaaaaaaaaaaaaaaaaaaaaa</h1>
</body>
<script>
$('h1').each(function(i) {//each()起遍历对象的作用
    $('h1').get()[i].setAttribute('num',i+1);
});//在h1内部加上num属性，num即为行号
$('h1').click(function(){
    this.innerHTML=this.getAttribute('num');
})//实现点击每行内容后显示每行行号
</script>

2.size()

3.length

<body>
    <h1>aaaaaaaaaaaaaaaaaaaaaaa</h1>
    <h1>bbbbbbbbbbbbbbbbbbbbbbb</h1>
</body>
<script>
alert($('h1').size());//2
alert($('h1').length);//2
//获取jQuery对象中DOM对象的个数
</script>

4.get()

5.get(index)

<body>
    <h1>aaaaaaaaaaaaaaaaaaaaaaa</h1>
    <h1>bbbbbbbbbbbbbbbbbbbbbbb</h1>
</body>
<script>
arr=$('h1').get();//把jQuery对象转成JS对象数组
alert(arr[0].outerHTML);//<h1>aaaaaaaaaaaaaaaaaaaaaaa</h1>
alert(arr[1].outerHTML);//<h1>bbbbbbbbbbbbbbbbbbbbbbb</h1>
</script>

6.index()

实例—>实现网页的标签页效果

7.data()

点击显示行号↓，不用往h1标签对象上加属性

<body>
    <h1>aaaaaaaaaaaaaaaaaaaaaaa</h1>
    <h1>aaaaaaaaaaaaaaaaaaaaaaa</h1>
    <h1>aaaaaaaaaaaaaaaaaaaaaaa</h1>
    <h1>aaaaaaaaaaaaaaaaaaaaaaa</h1>
    <h1>aaaaaaaaaaaaaaaaaaaaaaa</h1>
</body>
<script>
$('h1').each(function(i) {
    $(this).data({'num':i+1});
});//data()的作用：往jQuery对象身上赋值
$('h1').click(function(){
    $(this).html($(this).data('num'));
})
</script>