前言：
眼前我们对“js和jquery实用代码”大体比较关切，大家都需要知道一些“js和jquery实用代码”的相关文章。那么小编在网络上收集了一些关于“js和jquery实用代码””的相关文章，希望兄弟们能喜欢，小伙伴们一起来了解一下吧！如何引用jQuery
引用jQuery只需牢记以下3步:
1)搜索下载jQuery文件(也可以是自身的例如自己或者本公司自己开发的)
2)将jQuery文件复制粘贴到项目的文件夹中
3)将jQuery文件引入当前页面中
引入jquery文件
注意:不要在引入文件的标签内书写脚本代码,一定要另起一行重新书写一个javascript标签,在此标签内书写脚本,如上图所示从第8行开始
入口函数
"人无头不走 ,鸟无头不飞":.意思就是缺少重要的东西就不能成事,比喻众人没有首领,就不能有所动作,做不成事情;动物尚且如此更别说没有思维的机械代码了
入口函数即整个程序开始的地方
1) C#是从main方法开始的,javascript是从onload函数开始
// C#入口函数 class Program //Program类 { static void Main(string[] args) //Main方法 { Console.WriteLine("C#入口函数"); //方法内编写具体代码,C#程序从此开始执行 } } // javascript的入口函数 <script type="text/javascript"> window.onload = function () { //该方法在网页内容加载完毕立即执行 //打开网页窗口立即弹出对话框 alert('javascript的入口函数'); } </script>2) jQuery的入口函数却有4种书写方式,以后使用推荐方式,其它的了解即可
// JQ入口函数的四种方式 // 推荐,推荐,推荐,重要事情的事说三遍!!! $(function(){ alert('入口函数方式1') }) //=========以下暂时了解即可=============== jQuery(function(){ alert('入口函数方式2') }) $(document).ready(function(){ alert('入口函数方式3') }) jQuery(document).ready(function(){ alert('入口函数方式4') })javascript与jQuery入口函数的区别:
相同点:都是对Dom元素的操作,所以都必须在页面的全部元素节点加载完毕后才执行
不同点:
1)执行的先后时机
JavaScript:等到全部Dom元素及其内容如外部图片之类的文件需要加载完后才执行。
jQuery:只需等到全部Dom元素结构加载完毕就会提前执行,无需理会外部资源的加载
<!DOCTYPE html><html xmlns=";><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <script src="jq/jquery-3.5.1.js"></script> <script type="text/javascript"> window.onload = function () { console.log('js 执行'); var img = document.getElementsByTagName('img')[0]; console.log(img.width,img.height); } $(function () { console.log('JQ 执行'); console.log($('img').width(), $('img').height()); }); </script></head><body> <img src=";fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800" /></body></html>js与JQ脚本中有请求外部资源时的先后执行结果
由此看出有加载外部资源的情况下JQ比原生的js脚本执行速度更快
2)执行的结果
JavaScript:只能有一个入口函数(起作用的函数)如果编写多个入口函数,后面的入口函数的执行结果会覆盖掉前面的执行结果,所以只显示最后一个入口函数的执行结果
jQuery:可以有多个入口函数时,不存在执行结果被覆盖掉的情况
<script src="jq/jquery-3.5.1.js"></script> <script type="text/javascript"> window.onload = function () { console.log('js 第一个入口函数'); console.log('================================='); } window.onload = function () { console.log('js 第二个入口函数'); console.log('================================='); } $(function () { console.log('JQ 第一个入口函数'); console.log('================================='); }); $(function () { console.log('JQ 第二个入口函数'); console.log('================================='); }); </script>js与JQ入口函数执行结果(无外部资源加载,img标签已被注释掉)
注意:页面中有无加载外部资源的结果是不同的如下所示
有图片时执行结果
标签： #js和jquery实用代码
