location:位置
location.href 获取和修改浏览器的请求地址
location.reload() 页面刷新
history:历史 ,指浏览器当前窗口历史
history.length 获取历史页面数量
history.back() 返回上一页面
history.forward() 前往下一页面
screen:屏幕
screen.width 屏幕宽分辨率
screen.height 屏幕高分辨率
navigator:导航/帮助
navigator.userAgent 获取浏览器的版本信息
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{width: 200px;height: 200px;background-color: red}
</style>
</head>
<body>
<div onmouseover="overfn()" onmouseout="outfn()"
onmousedown="downfn()" onmouseup="upfn()"
onmousemove="movefn()"></div>
<script>
function downfn() {
console.log("鼠标按下")
}
function upfn() {
console.log("鼠标抬起")
}
function movefn() {
console.log("鼠标移动")
}
function overfn() {
console.log("鼠标移入");
}
function outfn() {
console.log("鼠标移出");
}
</script>
</body>
</html>
什么是事件?
事件就是系统提供的一些特定时间点, 包括鼠标事件/键盘事件和状态改变事件
鼠标事件:
onclick:鼠标点击事件
onmouseover: 鼠标移入事件
onmouseout:鼠标移出事件
onmousedown: 鼠标按下事件
onmouseup: 鼠标抬起事件
onmousemove:鼠标移动事件
键盘事件:
onkeydown:键盘按下
onkeyup: 键盘抬起
状态改变事件:
onload: 页面加载完成事件
onchange:值改变事件
onblur: 失去焦点事件
事件传递
事件传递顺序:从最底层往上层传递,类似气泡从下往上所有又称为事件冒泡
事件绑定: 给元素添加事件的方式
事件属性绑定:通过标签的事件属性绑定
<input type="button" value="事件属性绑定" onclick="alert('事件属性')">
动态绑定: 通过JavaScript代码给元素添加事件
/*动态绑定*/
btn.onclick = function () {
alert("动态绑定");
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="text" onkeydown="downfn()" onkeyup="upfn()">
<script>
function downfn() {
console.log("键盘按下 按键编码="+event.keyCode);
}
function upfn() {
console.log("键盘抬起 按键编码转字符:"+String.fromCharCode(event.keyCode));
}
</script>
</body>
</html>
里面包含和页面相关的所有内容
通过id查找页面元素 document.getElementById("id");
innerHTML
innerText
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
//页面加载完成事件
onload = function () {
d1.innerText="测试";
}
</script>
</head>
<body>
<div id="d1"></div>
<!--onchange值改变事件-->
<select id="s1" onchange="changefn()">
<option value="bj">北京</option>
<option value="sh">上海</option>
<option value="gz">广州</option>
</select><br>
<!--onblur 失去焦点事件 -->
<input type="text" placeholder="请输入用户名" onblur="blurfn()"><br>
<input type="text" placeholder="请输入密码">
<script>
function blurfn() {
console.log("编辑完成!");
}
function changefn() {
alert(s1.value);
}
</script>
</body>
</html>
此框架主要就是对原生JavaScript中DOM部分内容进行了封装,可以让程序员更高效的开发页面的动态效果.
如何使用jQuery框架?
jQuery框架就是一个普通的js文件, 在html页面中 引入即可.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{border: 1px solid red;}
</style>
</head>
<body>
<!--事件传递顺序:从最底层往上层传递,类似气泡从下往上所有又称为事件冒泡-->
<div onclick="alert('div')">
<p onclick="alert('P')">
<input type="button" value="按钮" onclick="alert('按钮')">
</p>
</div>
<input type="button" value="事件属性绑定" onclick="alert('事件属性')">
<input type="button" value="动态绑定" id="btn">
<script>
/*动态绑定*/
btn.onclick = function () {
alert("动态绑定");
}
</script>
</body>
</html>
基础选择器
标签名 $("div")
id选择器 $("#id")
class选择器 $(".class")
分组选择器 $("div,#id,.class")
任意元素选择器 $("*")
层级选择器
$("#abc").next("span") 匹配id为abc元素的弟弟元素
$("#abc").nextAll() 匹配id为abc元素的弟弟们元素
$("#abc").prev()匹配id为abc元素的哥哥元素
$("#abc").prevAll()匹配id为abc元素的哥哥们元素
$("#abc").siblings()匹配id为abc元素的所有兄弟元素
$("#abc").parent() 匹配id为abc元素的父元素
$("#abc").children() 匹配id为abc元素的子元素们
$("div span") 子孙后代选择器
$("div>span") 子元素选择器
层级相关方法:
过滤选择器
$("div:first") 匹配第一个div
$("div:last") 匹配最后一个div
$("div:eq(n)") 匹配下标为n的div n从0开始
$("div:lt(n)") 匹配下标小于n的div
$("div:gt(n)") 匹配下标大于ndiv
$("div:not(.abc)") 匹配class值不是abc的div
$("div:even") 匹配下标为偶数的div
$("div:odd") 匹配下标为奇数的div
内容选择器
$("div:has(p)") 匹配包含p子元素的div
$("div:empty") 匹配空的div
$("div:parent") 匹配非空的div
$("div:contains('xxx')") 匹配包含xxx文本的div
可见选择器
$("#abc").show() 让id为abc的元素显示
$("#abc").hide() 让id为abc的元素隐藏
$("#abc").toggle() 让id为abc的元素显示隐藏状态切换
$("div:visible") 匹配所有显示的div
$("div:hidden") 匹配所有隐藏的div
显示和隐藏相关的方法
属性选择器
$("div[属性名]") 匹配包含xxx属性的div
$("div[属性名='值']") 匹配某个属性等于某个值的div
$("div[属性名!='值']") 匹配某个属性不等于等于某个值的div
子元素选择器
$("div:first-child") 匹配是div并且是子元素并且是第一个子元素
$("div:last-child")匹配是div并且是子元素并且是最后一个子元素
$("div:nth-child(n)") 匹配div并且是子元素并且是第n个子元素 n从1开始
表单选择器
$(":input") 匹配所有控件
$(":password") 匹配所有密码框
$(":radio") 匹配所有单选
$(":checkbox") 匹配所有多选
$(":checked") 匹配所有选中的单选/多选和下拉选
$("input:checked") 匹配所有选中的单选和多选
$(":selected") 匹配所有选中的下拉选
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="text" id="i1">
<input type="button" value="按钮" id="b1">
<div id="d1"></div>
<!--引入jQuery框架文件-->
<script src="../js/jquery-1.4.2.js"></script>
<script>
//jq中动态绑定点击事件
$("#b1").click(function () {
$("#d1").text($("#i1").val());
//上面代码等效下面
// let d1 = document.getElementById("d1");
// let i1 = document.getElementById(("i1"));
// d1.innerText = i1.value;
});
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="text" id="i1">
<input type="button" value="js转jq" id="b1">
<input type="button" value="jq转js" id="b2">
<script src="../js/jquery-1.4.2.js"></script>
<script>
$("#b1").click(function () {
//得到js对象
let js = document.getElementById("i1");
//把js对象转成jq对象
let jq = $(js);
//调用jq对象独有的获取值的方法
alert(jq.val());
})
$("#b2").click(function () {
//得到jq对象
let jq = $("#i1");
//把jq对象转成js对象 jq对象实际上就是一个数组 数组里面装的就是js对象
let js = jq[0];
alert(js.value);
})
</script>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<title>基本过滤选择器</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
div,span {
width: 140px;
height: 140px;
margin: 20px;
background: #9999CC;
border: #000 1px solid;
float: left;
font-size: 17px;
font-family: Roman;
}
div.mini {
font-size: 14px;
height: 53px;
width: 47px;
background: #CC66FF;
border: #000 1px solid;
font-family: Roman;
}
input{ margin: 5px 5px; }
</style>
<!--引入jquery的js库-->
<script src="../js/jquery-1.4.2.js"></script>
<script type="text/javascript">
$(function() {
/* ---------属性选择器练习--------- */
//改变包含id属性的 div 元素的背景色为 #FF6347" id="b1"
$("#b1").click(function () {
$("div[id]").css("background-color","#ff6347");
})
//改变包含属性title='aa' 的div 元素的背景色为 #9ACD32" id="b2"
$("#b2").click(function () {
$("div[title='aa']").css("background-color","#9ACD32");
})
//改变type属性不等于button的input 元素的背景色为 #FF0033" id="b3"
$("#b3").click(function () {
$("input[type!='button']").css("background-color","#FF0033");
})
//=================================================
/* ---------子元素选择器练习--------- */
//改变div 第二个子元素的背景色为 #006400" id="b4"
$("#b4").click(function () {
$("div:nth-child(2)").css("background-color","#006400");
})
//改变div 第一个子元素的背景色为 #FF69B4" id="b5"
$("#b5").click(function () {
$("div:first-child").css("background-color","#FF69B4");
})
})
</script>
</head>
<body>
<input type="button" value=" 改变包含id属性的 div 元素的背景色为 #FF6347" id="b1" />
<input type="button" value=" 改变包含属性title='aa' 的div 元素的背景色为 #9ACD32" id="b2" />
<input type="button" value=" 改变type属性不等于button的input 元素的背景色为 #FF0033" id="b3" />
<hr/>
<hr/>
<input type="button" value=" 改变div 第二个子元素的背景色为 #006400" id="b4" />
<input type="button" value=" 改变div 第一个子元素的背景色为 #FF69B4" id="b5" />
<h1>天气冷了</h1>
<div id="one">id为one</div>
<div id="two">
id为two
<div class="mini"> class是 mini</div>
</div>
<div class="one" title="aa">
class是 one title为aa
<div class="mini"> class是 mini</div>
<div class="mini"> class是 mini</div>
</div>
<div class="one" title="bb">
class是 one title为bb
<div class="mini01"> class是 mini01</div>
<div class="mini"> class是 mini</div>
</div>
<br>
<div id="mover">id为mover 动画</div>
<br>
<input type="submit"/>
</body>
</html>
联系客服