|
window中常见的属性
location:位置 history:历史 ,指浏览器当前窗口历史 history.length 获取历史页面数量 history.back() 返回上一页面 history.forward() 前往下一页面
screen:屏幕 screen.width 屏幕宽分辨率 screen.height 屏幕高分辨率
navigator:导航/帮助
事件相关什么是事件? 事件就是系统提供的一些特定时间点, 包括鼠标事件/键盘事件和状态改变事件 鼠标事件: 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>
DOM DocumentObjectModel文档对象模型
<!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>
jQuery框架此框架主要就是对原生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>
jQuery选择器基础选择器 层级选择器 $("#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
内容选择器 可见选择器 $("#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>
|
