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片段

使用 NodeJS 和 JSDOM/jQuery 从代码片段构建 PHP 页面

很实用的JQuery代码片段(转)

几个有用的JavaScript/jQuery代码片段(转)

几个非常实用的JQuery代码片段