前端day15 jquery基本使用 jqueryDOM和原生DOM jQuery选择器 jquery-筛选器-过滤 jquery筛选器-查找 jquery-筛选器-查找-串联
1.jquery的介绍
2.jquery的基本使用
2.2文档就绪事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery DOM对象</title>
<style>
#box {
400px;
padding: 20px;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<h1>jQUery 交友</h1>
<hr>
<div ></div>
<ul class="list">
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
</ul>
<script src="../jquery-3.3.1.js"></script>
<script>
$(function(){
//获取元素对象
var $box = $('#box'); //返回的是jquery dom对象 jquery在原生dom的基础上进行了封装
var box = document.querySelector('#box'); //原生的JS dom
console.log($box, box);
$box.css('background-color', 'pink');
//box.css('background-color', 'green'); // function not defined
box.style.backgroundColor = 'red';
//$box.style.height = '300px';
//jquery DOM 和 原生JS DOM 有关系
//原生的DOM 转为 Jquery DOM
$(box).css('height', '200px');
//jquery DOM 对象 转为 原生 DOM 本质上 jquery就是由 原生dom组成的 类数组对象
$box[0].style.backgroundColor = 'green';
});
$(function(){
var lis = $('.list li');
lis.css('border', '1px solid pink');
})
</script>
</body>
</html>
2.3 jquerydom和原生dom