大家好:
以下是我对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创建完成就可以运行,不必等到将元素中外部图片、视频等全部加载完成