05_jQuery
Posted 邓戈麟
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了05_jQuery相关的知识,希望对你有一定的参考价值。
fadsf
案例一:使用JQ完成首页定时弹出广告图片
01_JQ入门
01_jQuery入门.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jQuery入门</title> <script type="text/javascript" src="../../js/jquery-3.2.1.js"></script> <script> $(function() { alert("hello jquery!"); }); </script> </head> <body> </body> </html>
02_JQ页面加载与JS页面加载区别.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>JQ页面加载与JS页面加载区别</title> <script type="text/javascript" src="../../js/jquery-3.2.1.js"></script> <script> window.onload=function() { alert("张三"); } //传统的方式页面加载会存在覆盖问题,加载比JQ慢(整个页面加载完毕<包括里面的其他内容,比如图片>) window.onload=function() { alert("老王"); } //JQ的加载比JS加载要快!(当整个DOM树结构绘制完毕就会加载) jQuery(document).ready(function() { alert("李四"); }); //JQ不存在覆盖问题,加载的时候是顺序执行 $(document).ready(function() { alert("王五"); }); //简写方式 $(function() { alert("汾九"); }); </script> </head> <body> </body> </html>
03_JQ的获取.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>JQ的获取</title> <script type="text/javascript" src="../../js/jquery-3.2.1.js"></script> <script> $(function() { //1.JS方式获取 document.getElementById("btn").onclick = function() { location.href = "01_jQuery入门.html"; } //2.JQ方式获取 $("#btn").click(function() { location.href = "01_jQuery入门.html"; }); }) </script> </head> <body> <input type "button" value="点我有惊喜" id="btn" /> </body> </html>
02_DOM对象与JQ对象的转换
DOM对象与JQ对象的转换.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>DOM对象与JQ对象的转换</title> <script type="text/javascript" src="../../js/jquery-3.2.1.js"></script> <script> function write1() { //1.JS的DOM操作 document.getElementById("span1").innerHTML = "萌萌哒!"; var spanEle = document.getElementById("span1"); //将DOM对象转换成JQ对象 $(spanEle).html("思密达"); } $(function() { $("#btn").click(function() { $("#span1").html("呵呵"); //JQ对象向DOM对象转换方式一 $("#span1").get(0).innerHTML = "美美哒!"; //JQ对象向DOM对象转换方式二 $("#span1")[0].innerHTML = "美美哒!"; }) }) </script> </head> <body> <input type="button" value="JS写入" onclick="write1()" /> <input type="button" value="JQ写入" /><br /> 班长: <span id="span1">你好呀!</span> </body> </html>
fdasfs
以上是关于05_jQuery的主要内容,如果未能解决你的问题,请参考以下文章
markdown 在WordPress中使用jQuery代码片段
MYBATIS05_ifwherechoosewhentrimsetforEach标签sql片段