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的更多相关文章
随机推荐
- mybaites 入门到精通
这个mybatis教程也不错:http://limingnihao.iteye.com/blog/781671 MyBatis 目录(?)[-] mybatis实战教程mybatis in actio ...
- zencart网站上线前，邮件模板默认网址修改
涉及到的文件 includes\languages\语言包\模板\email_extras.php 后台\includes\languages\语言包\email_extras.php 后台\incl ...
- java多线程的四种实现方式
主要有四种:继承Thread类.实现Runnable接口.实现Callable接口通过FutureTask包装器来创建Thread线程.使用ExecutorService.Callable.Futur ...
- eclipse error pages 打红X的解决方法
建一个Maven项目转为web项目的时候,这里总有这么多文件,而且还会有一个Error Pages的错红的红叉,看着很不爽. 虽然项目中没有出现过错误,感觉是个错误,解决方法如下.原来这是eclips ...
- qt5--QPainter绘图
需要 #include <QPainter> #include "win.h" #include "ui_win.h" #include <Q ...
- Coding 账户与 本地 Git 客户端的配置
1.先创建cooding账户 ,注册地址:https://coding.net/ 2.创建好账户后登陆,在个人设置中 验证邮箱 和 验证手机 (邮箱很重要配置需要用到) 3.安装git 客户端 (在 ...
- Redis常用数据类型底层数据结构分析
Redis是一种键值(key-Value)数据库,相对于关系型数据库,它也被叫作非关系型数据库 Redis中,键的数据类型是字符串,但是为了非富数据存储方式,方便开发者使用,值的数据类型有很多 字符串 ...
- Linux 开启相关端口及查看已开启端口
防火墙层面: /sbin/iptables -I INPUT -p tcp --dport 8011 -j ACCEPT #开启8011端口 /etc/rc.d/init.d/iptables ...
- 关于session、cookie、sessionStorage、localStorage的简要理解
一.cookie和session 首先session和cookie用于浏览器客户端与服务端进行数据交互,通过会话的方式跟踪浏览器用户身份 (1) cookie 1.1) 一般由服务器生成,可以设置失效 ...
- 如何在IntelliJ Idea中同时启动不同端口
配置多实例: 选择Idea右上角启动按钮边上的Edit Configurations,在打开的对话框中,去掉Single Instance Only的选项,VM Options中增加-Dserver. ...