jquery学习 --Day2 (jquery的基本使用)

meowrain

发布于 2021-04-22 15:19:45

1.3K0

文章被收录于专栏：MeowRain的博客MeowRain的博客

jquery学习 --Day2 (jquery的基本使用)

区分DOM对象和jquery对象

DOM对象：用原生JS获取过来的对象是DOM对象
Jquery对象：用jquery的方式获取过来的对象是jquery对象，实质：通过$把DOM元素进行了包装(伪数组形式存储)

DOM对象

    <div>
fdsahfsjdiofdsfkas
    </div>
    <script>
var div = document.querySelector('div');
console.dir(div);
    </script>

Jquery对象

$('div');
console.dir($('div'))

DOM对象与jQuery对象进行相互转换

DOM对象转换为jQuery对象

<video src="new.mp4"></video>
    <script>
var myVideo = document.querySelector('video');

$(myVideo);//将DOM对象转换为jQuery 对象
    </script>

jQuery对象转换为DOM对象

//1.
$('div')[0];  //0为索引号 标准格式：$('div')[idnex];
//2.
$('div').get(0); //0为索引号 标准格式 $('div').get(idnex);

小总结：

<video src="new.mp4" muted></video>
    <script>
var myVideo = document.querySelector('video');

$(myVideo);//将DOM对象转换为jQuery 对象

myVideo.play();//DOM对象获取到video元素自动播放
$('video')[0].play(); //获取到的视频自动播放 --> jquery转DOM对象
    </script>