(1)jQuery使用:*$(document).ready* 的作用是等页面的文档(document)中的节点都加载完毕后,再执行后续的代码,因为我们在执行代码的时候,可能会依赖页面的某一个元素,我们要确保这个元素真正的的被加载完毕后才能正确的使用。
<body>
<div></div>
</body>
<!--引入jquery-->
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("div").html("学习jQuery第一天")
});
</script>
(二)jquery对象和DOM对象:通过jquery包装后的对象,是一个类数组对象,它与DOM对象完全不同,而DOM对象只是单独的一个DOM元素,唯一相似的是都能操作DOM。以下代码比较可以看出jquery简约很多。
<body>
<p id="ccg1"></p>
<p id="ccg2"></p>
</body>
<!-- 使用JS原生语法 -->
<script type="text/javascript">
window.onload = function() {
var p = document.getElementById("ccg1");
p.innerHTML = 'P1: dom对象';
p.style.color = 'red';
}
</script>
<!-- 使用jQuery语法 -->
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
/**
* 通过jQuery语法获取id为imooc2的元素获得一个jQuery对象
* 调用该对象的html()方法进行更改内容
* 调用该对象的css()方法进行更改颜色样式
*/
var $p = $('#ccg2');
$p.html('P2:jqeury对象').css('color','blue')
});
</script>
运行结果如下:
(三)jQuery对象转化成DOM对象:因为jquery对象是一个类数组对象,所有可以通过下标索引查找。jquery对象自身提供get()方法直接访问jQuery对象中相关的DOM节点,get方法中提供一个元素的索引
<body>
<div>元素一</div>
<div>元素二</div>
<div>元素三</div>
<script type="text/javascript">
var $div = $('div'); //jQuery对象
// var div = $div[0]; //方法一
var div = $div.get(0); //方法二
div.style.color = 'red'; //操作dom对象的属性
</script>
</body>
运行效果:
(四)DOM对象转化成jQuery对象:如果传递给$(DOM)函数的参数是一个DOM对象,jQuery方法会把这个DOM对象给包装成一个新的jQuery对象
<body>
<div>元素一</div>
<div>元素二</div>
<div>元素三</div>
<script type="text/javascript">
var div = document.getElementsByTagName('div'); //dom对象
//将dom节点div转化为$div的jquery对象
$div = $(div)
var $first = $div.first(); //找到第一个div元素
$first.css('color', 'red'); //给第一个元素设置颜色
</script>
</body>
补充:first() 将匹配元素集合缩减为集合中的第一个元素。如果给定一个表示 DOM 元素集合的 jQuery 对象,.first() 方法会用第一个匹配元素构造一个新的 jQuery 对象。