收藏
批改状态：未批改
老师批语：
大家好：
以下是我对jQuery的引入方法和$(document).ready(function (){})的使用方法的总结
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- 用$(document).ready(function (){})时的加载顺序：
DOM创建完成就可以运行,不必等到将元素中的图片、视频等全部加载完成
简写：$(function(){})
$(document).ready(function (){}) = $(function(){}) -->
<script type="text/javascript" src="jquery/jquery-3.3.1.js"></script>
<script type="text/javascript">
$(document).ready(function (){
$('h2').css('color','red')
})
// 简写
$(function() {
$('h2').css('color','green')
})
</script>
</head>
<body>
<h2>php中文网</h2>
</body>
<!-- jquery的两种引入方式：
1.本地引入：直接找到文件后利用'src'来进行引入 -->
<script type="text/javascript" src="jquery/jquery-3.3.1.js"></script>
<!-- 2.线上引用：找到jquery的地址进行引入 -->
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
$('h2').click(function(){
alert('www.php.cn')
})
</script>
</html>点击 "运行实例" 按钮查看在线实例
课程总结
通过对这节jquery的初学使我了解到了以下知识点：
1.jQuery是一个js函数库，以及它的引用方法（下载后进行本地引入和直接线上引入）
2.工厂函数$()的两个用法（寻找元素和创建元素）
（1）$('h2 span').css(‘’)—寻找元素
（2）$('<img src=" " width=" ">').insertAfter('h2').css(' ')—直接在h2标签后面创建一个元素
3.DOM对象和jquery对象的转换
（1）DOM对象转jquery对象: $()
（2）jquery对象转DOM对象: get()或[]
例如：$('li')[0].style.backgroundColor = ''
$('li').get(0).style.backgroundColor = ''
4.注意jquery代码的位置，如果放在DOM结构下面是没有问题，如果放在DOM结构上面时是无法获取元素的（因为 执行jquery代码时body中的页面还没有渲染，根本无法获取到元素）
解决方法：（1）利用window.onload — window.onload=function（）{ }
（2）利用$(document).ready(function ( ) { } ) 简写 $(function ( ) { } )
推荐使用：$(function ( ) { } ) 因为DOM创建完成就可以运行,不必等到将元素中外部图片、视频等全部加载完成
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
