- js 中的第二种提交方式: submit()方法
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form id = "tv_form" action="../01定时器.html" method="get">
<input type ="text" />
<p><input type ="button" value="提交" onclick="showInfo()"/></p>
</form>
<script>
function showInfo(){
var tv_form = document.getElementById("tv_form");
tv_form.submit();
}
</script>
</body>
</html>
- BOM 模型
BOM(Browser Object Model) 是指浏览器对象模型，是用于描述这种对象与对象之间层次关系的模型，浏览器对象模型提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。BOM由多个对象组成，其中代表浏览器窗口的Window对象是BOM的顶层对象，其他对象都是该对象的子对象。
- BOM 是浏览器对象模型
- Window对象是BOM的顶层对象 也是最重要的一个对象
- BOM 包含DOM对象
- Window 核心的6个对象
- frames ==> html页面的框架 了解(基本上不用了）
- history ==>表示 页面的历史记录
- location ==>表示当前界面的地址
- navigator ==> 表示浏览器相关的信息
- screen ==>表示屏幕的宽高…
- dom ==>用于操作节点
注意所有的全局的属性与方法 都可以使用 window来进行调用 一般不写 window
- 定时函数
- 间隔的定时函数—>每个多少秒时间来执行某个操作
var textTime = window.setInterval(“表示要执行方法”,“间隔的事件（以毫秒为单位)”)
clearInterval (textTime ); 清除定时器
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="button" value="提交" onclick="shwoInfo()"/>
<input type="button" value=" 清除" onclick="clearInfo()"/>
<script>
var setTime;
function shwoInfo(){
setTime = setInterval("alert('你好')",5000)
}
function clearInfo(){
clearInterval(setTime);
}
</script>
</body>
</html>
- 超时函数—>间隔多少秒执行某个操作（只执行一次）
var time1 = setTimeout (“执行的操作”,“时间毫秒为单位”);
clearTimeout(timeId1); 清除超时函数
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="button" value="提交" onclick="shwoInfo()"/>
<input type="button" value=" 清除" onclick="clearInfo()"/>
<script>
var setTime;
function shwoInfo(){
setTime = setTimeout("alert('你好')",5000)
}
function clearInfo(){
clearTimeout(setTime);
}
</script>
</body>
</html>
- 轮播图案例
需求：默认一张图片，间隔一定的时间 （定时函数），切换图片
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
span{
display: inline-block;
width: 20px;
height: 20px;
border: 1px solid gray;
border-radius: 50%;
position: relative;
top: -8px;
right: 250px;
}
</style>
<script type="text/javascript">
var num=0;
window.onload=function(){
setInterval("autoImg()",1000);
}
function autoImg(){
if(num==4){
num=0;
}
var imgs=document.getElementsByTagName("img");
var sps=document.getElementsByTagName("span");
for(var i=0;i<sps.length;i++){
sps[i].style.backgroundColor="";
}
sps[num].style.backgroundColor="red";
imgs[0].src="img/img"+num+".png";
num++
}
</script>
</head>
<body>
<center>
<img src="img/img1.png" width="450px" height="200px"/>
<span></span>
<span></span>
<span></span>
<span></span>
</center>
</body>
</html>
- 图片显示，修改样式
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
img{
display: none;
}
</style>
</head>
<body>
<!--需求：间隔多少秒显示图片
1.获取节点
2.修改图片的样式 display
3.写一个定时函数 setTimeout
-->
<img src="img/duola2的副本.jpg" width="100%" id="img1"/>
<script>
window.onload=setTimeout("showImg()",5000);
function showImg(){
var img1=document.getElementById("img1");
img1.style.display="inline";
}
</script>
</body>
</html>
- 显示当前时间（循环定时器）
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{
width: 350px;
height: 60px;
border: 1px solid black;
color: red;
font-size: 40px;
position: relative;
top: 120px;
right: -310px;
line-height: 60px;
text-align: center;
}
</style>
<script type="text/javascript">
function showtime(){
var date= new Date();
var year=date.getFullYear();
var month= date.getMonth()+1;
var day= date.getDate();
var hours=date.getHours();
var minutes=date.getMinutes();
var seconds=date.getSeconds();
var dd=document.getElementById("dd");
dd.innerHTML=(year+"-"+month+"-"+day+" "+hours+":"+minutes+":"+seconds);
}
var d1;
function runtime(){
d1=setInterval("showtime()",1000);
}
function stoptime(){
clearInterval(d1);
}
</script>
</head>
<body>
<div id="dd"></div>
<center>
<button onclick="showtime()" style="background-color: lightblue;">点击显示当前时间</button>
<button onclick="runtime()"style="background-color: lightcoral;">点击循环时间</button>
<button onclick="stoptime()"style="background-color: lightgreen;">点击停止循环</button>
</center>
</body>
</html>
-js中的三种弹框
- 警告框
alert(“请输入密码”); 参数传递的是提示信息 - 输入框
var flag = prompt(“请输入用户名”,“admin”);
第一个参数 是提示信息
第二个参数是默认值
返回值 表示输入框的值 flag - 确认框
var flag2 = confirm(“是否确定删除”);
参数也是提示信息
返回表示 是否确定 flag2 =true 表示确定 反正 就是取消
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="button" onclick="show1()" value="警告框"/>
<input type="button" onclick="show2()" value="输入"/>
<input type="button" onclick="show3()" value="确认框"/>
</body>
<script>
function show1(){
alert("警告框")
}
function show2(){
var flag= prompt("请输入用户名","admin")
//admin 表示默认值
alert(flag)
}
function show3(){
var flag2= confirm("是否确定删除？")
if(flag2==true){
alert("确定删除")
}else{
alert("取消")
}
}
</script>
</html>
- window.location 对象
-
window.location 这个对象一般在网站里用于 跳转(重定向)页面
-
window.location 常用的属性
window.location.protocol ===> 获取请求页面的协议 http 超文本协议 一次性协议 一次请求 一次相应后连接断开 https = http+ssl证书(对传输数据的加密) socketwindow.location.pathname 即时通讯 qq 微信聊天 常连接协议 window.location.hostname 请求的ip地址 或者说是域名 window.location.port ==>获取到当前端口号 window.location.pathname ==>获取当前的文件以及其路劲 window.location.href ==>获取当前页面的访问路劲 window.location.href="跳转的路劲"; ==>表示 需要跳转的地址
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script>
//window.location.href="06-弹警告框.html"; //表示需要跳转的地址
console.log(window.location.protocol); //返回所使用的web协议 http:
console.log(window.location.hostname); //返回web主机的域名 127.0.01
console.log(window.location.port); //返回web主机的端口
console.log(window.location.pathname); //当前页面的路径
console.log(window.location.href); //获取当前页面访问的路径
</script>
</body>
</html>
- window.history
- window.history ==>表示对网页访问的记录(访问的上一个界面 或者是下一个跳转的界面)
- 常用的方法 :
window.history.back() ==>表示返回
window.history.forward() ==>表示前进
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<a href="03.html">跳转</a>
<input type="button" value="后退" onclick="goback()"/>
<input type="button" value="前进" onclick="goforward()"/>
<script>
function goback(){
window.history.back();
}
function goforward(){
window.history.forward();
}
</script>
</body>
</html>
- window.screen
window.screen ==>主要用于获取窗口的一些信息 比如宽度高度
属性 ：
window.screen.availWidth 获取当前页面可用的宽度
window.screen.availHeight 获取当前页面可用的高度
- window.dom
window.dom(节点 标签).offsetWidth ==>获取当前标签可见的宽度
window.dom.offsetHeight ==>获取当前标签可见的高度
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{
width: 100px;
height: 100px;
border: 5px red solid;
}
</style>
</head>
<body>
<div id="d4"></div>
<script>
//可见的宽度与高度
var d4 = document.getElementById("d4")
console.log(window.d4.offsetHeight); //110 可见的高度
console.log(window.d4.offsetWidth); //110 可见的宽度
</script>
<!--<script>
//获取屏幕可用的高度与宽度
// console.log(window.screen.availHeight);
// console.log(window.screen.availWidth);
</script>-->
</body>
</html>
- jQuery
- 简介
jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是"write Less，Do More"，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互
- 下载
1. 地址：https://jquery.com/
2. 两个版本的区别:
(1) 压缩的版本 默认是对js进行加密 安全性比较高 可以代码
(2) 这个一般用于上线项目 因为 压缩后 体积小 页面加载块 一般调试的时候都使用未压缩的版本，查看源代码比较方便；比较稳定的版本是 1.8.3 到2.0之间
- jQuery的引入
- jquery 的引入 就是外部引入方式
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../js/jquery-3.5.0.min.js" ></script>
</head>
- jQuery 的语法 : 在JQuery 中 JQuery 与$ 等价的
JQuery("#tv_div") == $("#tv_div")---->通常使用这种
JQuery("#tv_div") 大小写都必须一样
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/jquery-3.5.0.min.js" type="text/javascript">
</script>
</head>
<body>
<!--<h1 id="tv_h1">admin</h1>
<input type="button" onclick="showInfo()" value="获取"/>
<script>
function showInfo(){
alert("$('#tv_h1').html()");
alert("jQuery('#tv_h1').html()");
}
</script>-->
<script>
//jQuery 的准备函数
//第一种写法
// jQuery(document).ready(function(){
// alert("sssssss");
// });
//第二种写法 （常用）
// $(document).ready(function(){
// alert("aaaaaaaa");
// })
//第三种写法 （常用）
// $(function(){
// alert("zzzzzzzz");
// })
</script>
<script>
//测试比较js与jquery的加载速度
//js 的加载，js只加载一次，因为没有方法的重载执行的是后面那个的结果
onload=function(){
console.log("111");
}
onload=function(){
console.log("222");
}
//jQuery加载
$(document).ready(function(){
console.log("333");
})
$(function(){
console.log("444");
})
</script>
</body>
</html>
- js准备函数 与JQuery 准备函数的区别
1. js 的准备函数 需要页面中所有的都加载完成(包括图片，视频等) jQuery的准备函数 只需要节点都加载完成之后就触发 ---->jQuery的效率高于js的加载
2. 一个页面有多个准备函数 jQuery的会都加载 js 中只加载一个
3. jQuery 可以简写 js 不能简写
- js对象与JQuery对象之间的相互转换
1. 原因： js与 jquery 不能互相调用其属性与方法 所以需要进行转换
2. js ==>jquery对象 1. jQuery(tv_div1) ----->参数 传递的就是js对象
2. $(tv_div1) ------>jQuery(tv_div1)
<head>
<meta charset="UTF-8">
<title></title>
<!--引入jquery包-->
<script type="text/javascript" src="js/jquery-2.1.0.min.js" ></script>
<script type="text/javascript">//第一种写法
$(function(){
//原生js获取标签元素
var d1=document.getElementById("d1");
// console.log(d1);//js原生对象
console.log(d1.innerHTML);//可以获取到标签元素的内容
var dd2=document.getElementsByClassName("dd1");
//console.log(dd2); //返回js原生对象 HTMLCollection
//jquery获取标签元素
var $dd1=$("#d1");
//console.log($dd1);//jquery对象
console.log($dd1.innerHTML);//获取到的是 undefined
console.log($dd1.html());//可以调用html()函数获取到标签的内容
var $dd3=$(".dd1");
//console.log($dd3); //返回jquery对象
//原生js和jquery对象的相互转换两种方式：
//1.jquery--->js
var js1 = $dd1[0];//如果jquery对象只有一个，索引为0，如果多个的话根据索引即可
console.log(js1.innerHTML);//可以获取到标签元素内容
//2. jquery--?js
var js2 = $dd1.get(0);
console.log(js2.innerHTML);
//3. js-->jquery,将原生的js对象转成jquery对象
var $ddd1 = $(d1);
console.log($ddd1.html());
})
</script>
</head>
<body>
<div id="d1" class="dd1">
div内容
</div>
</body>
-jQuery 中 val() html() text()
- val() ---->用于来获取设置 其input标签的value值 传递参数表示设置
- html() 获取标签中间的内容(包括子标签)
html(“需要设置的值”) 可以识别标签 - text(“需要设置的值”) ==>不能识别标签 只能是纯文本
- text() ==>获取的是纯文本内容
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-2.1.0.min.js" ></script>
</head>
<body>
<div id="d6"><font color="#FF0000">22222</font</div>
<input type="text" id="tv_input" />
<input type="button" onclick="showInfo1()" value="获取"/>
<script>
function showInfo1(){
//alert($("#tv_input").val()); //获取输入框输入的值
//alert($("#tv_input").val("44444444")); //点击获取输入框直接获取来val传进来的值
//alert($("#d6").html()); //显示红色 22222 div的值，可以识别标签属性
//alert($("#d6").html("<font color='red'>22222</font>)")//可以识别标签
alert($("#d6").text()); //显示红色 22222 div的值，获取的是纯文本的内容
}
</script>
</body>
</html>
- jQuery常见的选择器
1. 标签选择器 ----> $("div")
2. id选择器 ---> $("#tv_div") ----> 一定要记住
3. 类选择器 ----> $(".tv_class")
4. 所有选择器----> $("*")
<html>
<head>
<meta charset="UTF-8">
<title>选择器</title>
<script type="text/javascript" src="js/jquery-3.5.0.min.js" ></script>
</head>
<body>
<div id="tv_div">111</div>
<div>22</div>
<div class="tv_class">33</div>
<div>444</div>
<span>444</span>
<input type="button" onclick="showAdd()" value="提交"/>
<script>
//标签选择器
function showAdd(){
//1.标签选择器
//alert($("div").length); //4 div有4个
//2.id选择器
//alert($("#tv_div").length); //1 id选择器有1个
//3.class选择器
//alert($(".tv_class").length); //1 class选择器1个
//4.*获取所有的选择器
alert($("body *").length); //7
}
</script>
</body>
</html>
- 层级选择器
1. $("#tv_main div") ==>获取id选择器下所有的div元素 ==>包含孙子元素
2. $("#tv_main >div") ==> 获取id选择器 下所有的div元素,但是不包含孙子元素
3. $("#tv_main+div") ==>获取是是id选择器 下 第一个兄弟div元素
4. $("#tv_main~div") ==>获取是id选择器所有的兄弟选择
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-2.1.0.min.js"></script>
</head>
<body>
<div id="tv_main">
<div>111</div>
<div>222</div>
<div>333<span></span>444</div>
<span><div>555</div></span>
</div>
<div>666</div>
<div>777</div>
<input type="button" onclick="show1()" value="提交1" />
<input type="button" onclick="show2()" value="提交2" />
<input type="button" onclick="show3()" value="提交3" />
<input type="button" onclick="show4()" value="提交4" />
</body>
<script>
function show1(){
alert($("#tv_main div").length); //4 包含儿子元素和孙子元素
}
function show2(){
alert($("#tv_main > div").length); //3 只拿儿子元素不包含孙子元素
}
function show3(){
alert($("#tv_main + div").length); //1 获取紧挨着的第一个兄弟元素
}
function show4(){
alert($("#tv_main ~ div").length); //0 获取所有的兄弟元素
}
//注意符号英文输入~
</script>
</html>
- 过滤选择器
- even 选择获取节点的时候 索引是从0开始 注意循环的时候 ，拿到具体元素 是js对象
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-2.1.0.min.js" ></script>
</head>
<body>
<ul id="tv_ul">
<li id="tv_ll">11</li>
<li>22</li>
<li>33</li>
<li>44</li>
<li>55</li>
<li>66</li>
</ul>
<input type="button" onclick="showInside()" value="确定"/>
<script>
function showInside(){
//1. 获取第一个元素内容
//alert($("#tv_ul li:first").html())
//2. 获取最后一个元素内容
//alert($("#tv_ul li:last").html())
//3. 获取偶数
// var nums=$("#tv_ul li:even")
// for(var i=0;i<nums.length;i++){
// console.log(nums[i].innerHTML); //11 33 55
// }
//4. 获取列表中角标为2 的元素
//alert($("#tv_ul li:eq(2)").html()); //33
//5. 获取列表中角标值为偶数的元素
// var nums=$("#tv_ul li:even")
// for(var i=0;i<nums.length;i++){
// console.log(nums[i].innerHTML); //11 33 55
// }
//6. 获取列表中角标值为奇数的元素
// var nums=$("#tv_ul li:odd")
// for(var i=0;i<nums.length;i++){
// console.log(nums[i].innerHTML); //22 44 66
// }
//7.获取列表角标值>2的元素
// var nums=$("#tv_ul li:gt(2)")
// for(var i=0;i<nums.length;i++){
// console.log(nums[i].innerHTML); //44 55 66
// }
//8.获取列表角标值<2的元素
// var nums=$("#tv_ul li:lt(2)")
// for(var i=0;i<nums.length;i++){
// console.log(nums[i].innerHTML); //11 22
// }
//9.
var nums=$("#tv_ul li:not('#tv_ll')");
for(var i=0;i<nums.length;i++){
console.log(nums[i].innerHTML); //22 33 44 55 66
}
}
</script>
</body>
</html>
- 属性选择器
1. $("[href^='l']") ==>获取所以的href属性值 以"l" 开头的
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-2.1.0.min.js" ></script>
</head>
<body>
<a href="#"></a>
<a href="01定时器.html"></a>
<a href="02超时函数.html"></a>
<a href="03轮播图.html"></a>
<input type="button" onclick="showHref()" value="获取"/>
<script>
function showHref(){
//alert($("[href]").length); //4
//alert($("[href='#']").length); //1
//alert($("[href!='#']").length); //11
//alert($("[href$ ='html']").length); //3 以html结尾的
alert($("[href^='l']").length); //0 以l开头的
}
</script>
</body>
</html>
112
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
