jQuery1--jQuery对象

jiaody111

于 2019-12-08 11:08:06 发布

阅读量92

点赞数

分类专栏： jQuery

本文链接：https://blog.csdn.net/weixin_42139212/article/details/103442673

版权

jQuery 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

jQuery对象：

jQuery对象是通过jQuery包装DOM对象后产生的对象：
包含所有匹配的任意多个dom元素的伪数组对象

伪数组：

Object对象
length属性
数值下标属性
没有数组特别的方法: forEach(), push(), pop(), splice()

基本行为：

size()/length: 包含的DOM元素个数
[index]/get(index): 得到对应位置的DOM元素
each(): 遍历包含的所有DOM元素
index(): 得到在所在兄弟元素中的下标

jQuery对象和DOM对象的区别和互相转换：

$('#foo').html()  //.html() 是jQuery中的方法
等价于
document.getElementsById('foo').innerHTML //DOM中的方法

jQuery对象不能使用DOM对象的方法
DOM对象也不能使用jQuery对象的方法

jQuery对象和DOM对象的相互转换：

jQuery对象 ==》 DOM对象：
（1）通过[index]的方法：
jQuery对象是一个伪数组，拥有length和下标：
    var $cr = $('#cr'); //jQuery对象
    var cr = $cr[0];    //DOM对象
(2) 通过get(index)的方法：
    var $cr = $('#cr'); //jQuery对象
    var cr = $cr.get(0);    //DOM对象

DOM对象 ===》 jQuery对象：
用 $() 将DOM对象封装，即可将DOM转换为jQuery对象
  var cr = document.getElementById('cr'); //DOM对象
  var $cr = $(cr); //jQuery对象

练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="js/jquery-1.10.1.js"></script>
    <script>
/*
 需求:
 需求1. 统计一共有多少个按钮
 需求2. 取出第2个button的文本
 需求3. 输出所有button标签的文本
 需求4. 输出'测试三'按钮是所有按钮中的第几个
 */
        $(function(){
            var $btns = $('button');
            //需求1. 统计一共有多少个按钮
            /*size()/length: 包含的DOM元素个数*/
            console.log($btns.length+'----'+$btns.size());
            //需求2. 取出第2个button的文本
            /*[index]/get(index): 得到对应位置的DOM元素*/
            console.log($btns[1].innerHTML+'----'+$btns.get(1).innerHTML);
            //需求3. 输出所有button标签的文本
            /*each(): 遍历包含的所有DOM元素*/
            $btns.each(function () {
                console.log(this.innerHTML);
            })
            //需求4. 输出'测试三'按钮是所有按钮中的第几个
            /*index(): 得到在所在兄弟元素中的下标*/
            console.log($('#btn3').index());
        })
    </script>
</head>
<body>
<button>测试一</button>
<button>测试二</button>
<button id="btn3">测试三</button>
<button>测试四</button>
</body>
</html>

在这里插入图片描述

jiaody111

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery1--jQuery对象

jQuery对象：jQuery对象是通过jQuery包装DOM对象后产生的对象：包含所有匹配的任意多个dom元素的伪数组对象伪数组：Object对象length属性数值下标属性没有数组特别的方法: forEach(), push(), pop(), splice()基本行为：size()/length: 包含的DOM元素个数[index]/get(index): 得到对应...
复制链接

扫一扫