Web05_jQuery
在官方网站下载包，下载不带有min的包
http://jquery.com/download/
案例一：使用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>
Web05_jQuery的更多相关文章
随机推荐
- glViewport函数用法
一. 其函数原型为glViewport(GLint x,GLint y,GLsizei width,GLsizei height) x,y 以像素为单位,指定了窗口的左下角位置. width,heig ...
- 有关List、Set、Map的基础了解
刚申请了一个博客,怀着一颗激动的心情我竟不知道写点啥,嗯~来点基础的吧!面试的时候一直被问到的集合框架. 集合,也称为容器,可以将一系列元素组合成一个单元,用于存储.提取. ...
- Gym - 102040B Counting Inversion (数位dp)
题意:求[a,b]区间内的数字中正序对的个数. 具体思路参考: https://blog.csdn.net/weixin_43135318/article/details/88061396 https ...
- 红帽Linux故障定位技术详解与实例(2)
红帽Linux故障定位技术详解与实例(2) 2011-09-28 14:26 圈儿 BEAREYES.COM 我要评论(0) 字号:T | T 在线故障定位就是在故障发生时, 故障所处的操作系统环境仍 ...
- MAC使用终端DISKUTIL命令给U盘分区(解决window优盘只有200M)
1.先使用diskutil list命令查看U盘代号 2.然后用下面的命令把它格式化: sudo diskutil eraseDisk FAT32 USB_NAME MBRFormat /dev/di ...
- Java内存区域与Java内存模型
Java内存区域 Java虚拟机在运行程序时会把其自动管理的内存划分为以上几个区域,每个区域都有其用途以及创建销毁的时机,其中蓝色部分代表的是所有线程共享的数据区域,而绿色部分代表的是每个线程的私有 ...
- Eclipse中导入两个相同的工程
问题描述:同时在Eclipse中导入两个相同的工程,会有 Some projects cannot be imported because they already exist in the work ...
- hdu 1051 wooden sticks (贪心+巧妙转化）
#include <iostream>#include<stdio.h>#include<cmath>#include<algorithm>using ...
- poj 3625 （最小生成树算法）
Building Roads Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 12203 Accepted: 3448 D ...
- APIView源码与Request源码分析
一.APIView源码分析 1.安装djangorestframework 2.使用 drf是基于cbv view的封装,所以必须写cbv ①第一步:写视图,必须写cbv 路由配置: from res ...