冯娜_20210119冯娜
知识点总结
一、JavaScript的事件
1、事件：是可以被JavaScript侦听到的行为（类似监听器）
2、事件通常要与函数配合使用，当事件发生函数才会执行
3、事件的注册方式：
（1）使用命名函数：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<input type="button" name="" id="btn" value="点击" onclick="output()" />
<script type="text/javascript">
function output(){
alert("点击按钮")
}
</script>
</body>
</html>
（2）使用匿名函数：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<input type="button" name="" id="btn" value="点击" onclick="output()" />
<script type="text/javascript">
function output(){
alert("点击按钮")
}
</script>
<input type="button" name="" id="btn2" value="再点我" />
<script type="text/javascript">
document.getElementById("btn2").onclick=function(){
alert("我是按钮2，被点击了")
}
</script>
</body>
</html>
4、常见的事件
onblur;//元素失去焦点
onfocus;//元素获得焦点
onchange;//用户改变域的内容
onclick;//鼠标点击某个对象
ondblclick;//鼠标双击某个对象
onkeydown;//某个键盘的键被按下
onkeyup;//某个键盘的键被松开
onload;//某个页面或图像被完成加载
onmousedown;//某个鼠标按键被按下
ommouseover;//鼠标被移到某元素之上
onmouseout;//鼠标从某元素移开
onmouseup;//某个鼠标按键被松开
onsubmit;//提交按钮被点击
二、JavaScript的内置对象
1、数组对象
（1）new Array() 无参的构造方法，创建一个长度为0的数组
（2）new Array(2) 有参的构造方法，指定数组的长度
（3）new Array(2,4,10) 有参的构造方法，指定数组中的每个元素
（4）[4,3,10,1] 使用【】的方式创建数组
2、日期对象（Date对象）
（1）日期对象的方法
getFullYear();//从 Date 对象以四位数字返回年份
getMonth();//从 Date 对象返回月份 (0 ~ 11)
getDate();//从 Date 对象返回一个月中的某一天 (1 ~ 31)
getDay();//从 Date 对象返回一周中的某一天 (0 ~ 6)。其中：0表示周日，1~6周一到周六
getHours();//返回 Date 对象的小时 (0 ~ 23)
getMinutes();//返回 Date 对象的分钟 (0 ~ 59)
getSeconds();//返回 Date 对象的秒数 (0 ~ 59)
getMilliseconds();//返回 Date 对象的毫秒(0 ~ 999)
getTime();//返回 1970 年 1 月 1 日至今的毫秒数。类似于Java中System.currentTimeMillis()
toLocaleString();//根据本地时间格式，把 Date 对象转换为字符串
3、全局对象
(1)字符串转换成数字类型
parseInt();//将一个字符串转成整数，如果一个字符串包含非数字字符，那么parseInt函数会从首字母开始取数字字符，一旦发现非数字字符，马上停止获取内容
parseFloat();//将一个字符串转成小数
isNaN();//转换前判断被转换的字符串是否是一个数字，非数字返回true
三、jQuery
1、什么是jQuery：是一个JavaScript的轻量级框架，提供了HTML文档操作、事件处理、动画设计和Ajax交互操作
2、目的：简化js开发
3、下载，可以在官网下载，官网下载地址：http://jquery.com；还可以在菜鸟教程中引用在线jq
4、jQuery与JavaScript的区别
（1）jq对象和js对象相互转换
（2）页面加载事件
//js
window.onload=function(){};
//jq
$(function(){})
$(document).ready(function(){})
区别：js：只能定义一次，若定义多次，后加载的会覆盖先加载的
jq：可以定义多次
（3）事件绑定
//js
js对象.onclick=function(){};
//jq
jq对象.click(function(){})回调函数
jq对象.on(事件,function(){})
（4）css样式设置：通过对象直接修改
//js
js对象.style.样式名=样式值
//jq
jq对象.css('样式名'，'样式值')
jq对象.addClass()
样式名：驼峰式，css横杆 都支持
5、jQuery选择器
（1）基本选择器
//1、标签（元素）选择器
$("html标签名") 获得所有匹配标签名称的元素
//2、id选择器
$("#id的属性值") 获得与指定id属性值匹配的元素
//3、class选择器
$(".class的属性值") 获得与指定的class属性值匹配的元素
//4、并集选择器
$("选择器1,选择器2....") 获取多个选择器选中的所有元素
//5、匹配所有选择器
$("*") 获取所有元素
（2）层级选择器
//1、 后代选择器
$("A B") 选择A元素内部的所有B元素
//2、子选择器
$("A > B") 选择A元素内部的所有B子元素
//3、兄弟下一个
$("A + B") 选择所有紧接在A元素后的B元素
//4、兄弟后面所有
$("A ~ B") 选择A元素之后的所有B元素
//5、兄弟所有
$("A").siblings() 选择A元素所有兄弟元素
（3）属性选择器
//1、属性名选择器
$("A[属性名]") 包含指定属性的选择器
//2、属性选择器
$("A[属性名='值']") 包含指定属性等于指定值的选择器
//3、复合属性选择器
$("A[属性名='值'][]...") 包含多个属性条件的选择器
（4）基本过滤选择器
//1、首元素选择器
:first 获得选择的元素中的第一个元素
//2、尾元素选择器
:last 获得选择的元素中的最后一个元素
//3、非元素选择器
:not(selector) 不包括指定内容的元素
//4、偶数选择器
:even 偶数，从 0 开始计数
//5、奇数选择器
:odd 奇数，从 0 开始计数
//6、等于索引选择器
:eq(index) 指定索引元素
//7、大于索引选择器
:gt(index) 大于指定索引元素
//8、小于索引选择器
:lt(index) 小于指定索引元素
//9、标题选择器
:header 获得标题（h1~h6）元素
//10、动画选择器
:animated 获得正在执行的动画
（5）表单过滤选择器
//1、可用元素选择器
:enabled 获得可用元素
//2、不可用元素选择器
:disabled 获得不可用元素
//3、选中选择器
:checked 获得单选/复选框选中的元素
//4、选中选择器
:selected 获得下拉框选中的元素
6、jq的DOM操作
（1）内容操作
//1、 html(): 获取/设置元素的标签体超文本内容 相当于：js中innerHTML
//2、text(): 获取/设置元素的标签体纯文本内容 相当于：js中innerText
//3、val()： 获取/设置元素的value属性值 相当于：js中value
（2）属性操作
a、attr(): 获取/设置元素的属性
b、removeAttr():删除属性
c、prop():获取/设置元素的属性
d、removeProp():删除属性
（3）css样式操作
a、addClass():添加class属性值
b、removeClass():删除class属性值
c、toggleClass():切换class属性
（4）文档CRUD操作
1、$("") //创建a元素对象
2、append()//父元素将子元素追加到末尾
3、prepend()//父元素将子元素追加到开头
4、before()//添加元素到元素前边
5、after()//添加元素到元素后边
6、remove()//移除元素
7、empty()//清空元素的所有后代元素
案例：
1、隔行换色
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>隔行换色</title>
</head>
<body>
<table border="1" width="650px" cellspacing="0">
<tr>
<th>编号</th>
<th>姓名</th>
<th>性别</th>
</tr>
<tr>
<th>1</th>
<th>张三</th>
<th>男</th>
</tr>
<tr>
<th>2</th>
<th>李四</th>
<th>男</th>
</tr>
<tr>
<th>3</th>
<th>王五</th>
<th>男</th>
</tr>
<tr>
<th>4</th>
<th>马六</th>
<th>男</th>
</tr>
</table>
<script src="https://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script>
<script type="text/javascript">
$(function (){
//奇数行
$('tr:gt(0):even').css('background-color','lightyellow');
//偶数行
$('tr:gt(0):odd').css('background-color','lightgreen');
});
</script>
</body>
</html>
2、复选框全选与全不选
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>复选框的全选与不选</title>
</head>
<body>
<input type="checkbox" name="checkItem" />JAVA
<input type="checkbox" name="checkItem" />C++
<input type="checkbox" name="checkItem" />Python
<input type="checkbox" name="checkItem" />PHP
<hr />
<input type="checkbox" id="checkAll" />全选/全不选
<script src="https://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script>
<script type="text/javascript">
$(function (){
// 给头部复选框绑定点击事件
$('#checkAll').click(function () {
// 获取当前选中状态
// var flag = this.checked;
var flag = $(this).prop('checked');
// 获取一组商品复选框同步
$('input[name="checkItem"]').prop('checked',$(this).prop('checked'));
})
})
</script>
</body>
</html>
3、qq表情
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>qq表情</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
list-style: none;
}
.emoji{
margin: 50px;
}
ul{
overflow: hidden;
}
li{
float: left;
width: 48px;
height: 48px;
}
</style>
</head>
<body>
<div class="emoji">
<ul>
<li><img src="img/01.gif" alt="" height="22" width="22"></li>
<li><img src="img/02.gif" alt="" height="22" width="22"></li>
<li><img src="img/03.gif" alt="" height="22" width="22"></li>
<li><img src="img/04.gif" alt="" height="22" width="22"></li>
<li><img src="img/05.gif" alt="" height="22" width="22"></li>
<li><img src="img/06.gif" alt=""height="22" width="22"></li>
<li><img src="img/07.gif" alt=""height="22" width="22"></li>
<li><img src="img/08.gif" alt=""height="22" width="22"></li>
<li><img src="img/09.gif" alt=""height="22" width="22"></li>
<li><img src="img/10.gif" alt=""height="22" width="22"></li>
<li><img src="img/11.gif" alt=""height="22" width="22"></li>
<li><img src="img/12.gif" alt=""height="22" width="22"></li>
</ul>
</div>
<p class="word">
<strong>请发言:</strong>
<img src="img/12.gif" height="22" width="22">
</p>
<script src="https://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script>
<script type="text/javascript">
$(function () {
// 给所有表情绑定点击事件
$('ul > li > img').click(function () {
// 将当前表情追加到 请发言末尾
console.log(this);
$('.word').append($(this).clone());
})
})
</script>
</body>
</html>
四、修改网页名字
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>你来啦</title>
</head>
<body>
<script type="text/javascript">
var titlec =document.title;
document.addEventListener("visibilitychange",function(){
if(document.visibilityState=='hidden'){
titlec=document.title;
document.title ="记得回来哦";
}else{
document.title =titlec;
}
})
</script>
</body>
</html>
五、修改复制粘贴结果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>复制粘贴</title>
</head>
<body oncontextmenu="return false">
<input type="text" name="" id="" value="" oncontextmenu="return false"/>
djsakdkjsadsakj
<script type="text/javascript">
//添加copy事件
document.oncopy =myCopy;
function myCopy(){
//获取选中内容
var select=document.getSelection().toString();
//修改选中内容
var content =select+"欢迎来到我的博客";
//创建一个元素
var div =document.createElement("div");
div.style.position="absolute";
div.style.left="-99999999px";
//设置元素的内容
div.innerHTML =content;
//添加到网页中
document.body.appendChild(div)
//添加到选中内容中
document.getSelection().selectAllChildren(div);
//删除div
setTimeout(function(){
document.body.removeChild(div);
},100);
}
</script>
</body>
</html>
心得体会
今天学习了js的事件和内置对象，jq的基础，还有修改网页名字和修改复制粘贴的结果。修改网页名字和修改复制粘贴的结果是平时经常可以看见的操作，之前会想这是怎么做的，今天就学到了，甚是解惑。
近期评论