1.JavaScript的组成
CMAScript (核心)：规定了JS的语法和基本对象
DOM 文档对象模型：处理网页内容的方法和接口
BOM 浏览器对象模型：与浏览器交互的方法和接口
2.JavaScript变量
变量：标示内存中的一块空间，用于存储数据，且数据是可变的。使用var接收
变量的声明：var 变量名; //变量赋予默认值，默认值为undefined（未定义的）
变量的声明和赋值：var 变量名=值; //变量赋予对应的值
在声明JavaScript变量时，需要遵循以下命名规范：
必须以字母或下划线开头，中间可以是数字、字符或下划线
变量名不能包含空格等符号
不能使用JavaScript关键字作为变量名，如：function、this、class
JavaScript严格区分大小写。
3.JavaScript数据类型
3.1基本数据类型
string 字符串类型。””和’’都是字符串，没有任何区别。 JavaScript中没有单个字符
boolean 布尔类型。 固定值为true和false
number 数字类型。 任意数字
null 空，一个占位符。
undefined 未定义类型，该类型只有一个固定值，即undefined，表示变量声明却未定义具体的值。
注：因为undefined是从null中派生出来的，所以undefined==null
3.2引用数据类型
引用类型通常叫做类（class），但在JavaScript中，因为不存在编译过程，所以没有类的概念，所处理的引用数据类型都是对象。
标准创建方式：
var str = new String();//和java相同
var str = new String; //js独有的方式
4.运算符
== 逻辑等。仅仅对比值
===全等。 对比值并且对比类型。如果值和类型都相同，则为true；值和类型有一个不同，则为false。除了===比较的是内容和类型外，其他比较运算符都比较的是内容。
JavaScript逻辑运算符没有 & |
5.正则对象
5.1 RegExp对象的创建方式
var reg = new RegExp("表达式"); （开发中基本不用）
var reg = /^表达式$/; 直接量（开发中常用）
直接量中存在边界，即^代表开始，$代表结束，直接量方式的正则是对象，不是字符串，别用引号。
5.2test方法
正则对象.test(string); 用来校验字符串是否匹配正则。全部字符匹配返回true；有字符不匹配返回false。
//练习：验证手机号 var regex=/^1[3,5,7,8][0-9]{9}$/; var phone="15623637872"; alert(regex.test(phone));
6.JS数组对象
6.1JS数组的特性
JS数组可以看做 Java中的ArrayList 集合。数组中的每一个成员没有类型限制，及可以存放任意类型，数组的长度可以自动修改 。
6.2JS数组的四种创建方式
var arr = [1,2,3,”a”,true]; //常用的JS数组。 长度5
var arr = new Array();创建一个数组对象，数组长度默认为0
var arr = new Array(4);数组长度是4，相当于开辟了长度为4的空间，每个元素是undefined。（仅在显示数组时进行处理，undefined为了方便显示变成了空字符串形式，其值本质仍然是undefined）
var arr = new Array(“a”,”b”,true); //创建了一个数组，长度3, 数组元素是”a”,”b”,true
7.全局函数（global）
执行：
编码：
解码：
字符串转整数：
字符串转浮点数：
如果字符串的某个字符从字面值上无法转为数字，那么从该字符开始停止转换，仅返回前面正确的转换值。（例如：11.5a55，parseInt结果11，parseFloat结果11.5）
如果字符串的第一个字符就无法从字面值上转为数字，那么停止转换，返回NaN。NaN（Not A Number，一个数字类型的标识，表示不是一个正确的数字）
8.自定义函数/自定义方法
1）JavaScript函数定义必须用小写的function；
2）JavaScript函数无需定义返回值类型，直接在function后面书写 方法名；
3）参数的定义无需使用var关键字，否则报错；
4）JavaScript函数体中，return可以不写，也可以return 具体值，或者仅仅写return；
JavaScript函数调用执行完毕一定有返回值，值及类型根据return决定，如果未return具体值，返回值为undefined；
JavaScript函数若同名，则不存在方法重载，只有方法相互覆盖，最后定义的函数覆盖之前的定义；
因为JavaScript不存在函数重载，所以JavaScript仅根据方法名来调用函数，即使实参与函数的形参不匹配，也不会影响正常调用；如果形参未赋值，就使用默认值undefined
对象直接量：var 对象名 = {属性名1:”属性值1”, 属性名2:”属性值2”, 属性名3:”属性值3”……};。
9.BOM对象
BOM（Browser Object Model）浏览器对象模型
9.1消息框
1）alert()：警告框，用来弹出警告消息。示例：alert("弹出吧");
2)confirm()：确认框，用于告知用户信息并收集用户的选择。
示例1：confirm("确认或取消")。该方法有返回值，用户通过选择“确定”或者“取消”，方法结束会返回boolean类型的值。“确定”返回ture；“取消”返回false。
3）控制台console：在浏览器的控制台打印。console.log(“内容”);
9.2定时器
1）循环定时器：调用一次就会创建并循环执行这个定时器，直到关闭它为止。
启动循环定时器：setInterval("要调用的方法",毫秒数)
关闭循环定时器：clearInterval(定时器id)
示例：设置一个定时器，倒计时10秒，当时间为0时关闭定时器
<body> 倒计时<span>10</span>秒 <script language="javascript"> var t=10; function change(){ t--; $("span").text(t) if(t<=0){ clearInterval(id) } } var id=setInterval('change()',1000); </script> </body>
2）一次性定时器
一次性定时器，调用一次就会创建并执行一个定时器一次。
启动一次性定时器：setTimeout(“调用方法” , 毫秒值);
关闭一次性定时器：clearTimeout(定时器id)
9.3location对象
location 对象包含浏览器地址栏的信息，常用的属性是href。
示例：设置倒计时10秒后自动跳转到百度首页
<script language="javascript"> var t=10; function change(){ t--; $("span").text(t) if(t<=0){ clearInterval(id) window.location.href="http://www.baidu.com" } } var id=setInterval('change()',1000); </script>
10.DOM对象
DOM（Document Object Model） 文档对象模型，将标记型文档中所有内容（标签、文本、属性）都封装成对象。
10.1获取元素对象的四种方式
1）document.getElementById(‘id’); 通过元素ID获取对应元素对象，如果找不到，返回null。
2）document.getElementsByName(); 通过元素的name属性获取符合要求的所有元素。
3）document.getElementsByTagName(); 通过元素的元素名（标签名）属性获取符合要求的所有元素，返回一个数组
4）document.getElementsByClassName(); 通过元素的class属性获取符合要求的所有元素，可以获取到元素节点对象数组；如果找不到，返回 空数组。
10.2元素对象常见属性
1）value
获取元素对象的value属性值：元素对象.value
设置元素对象的value属性值：元素对象.value=属性值
2）className
获取元素对象的class属性值：元素对象.className
设置元素对象的class属性值：元素对象. className =属性值
3）checked
获取元素对象的checked属性值：元素对象.checked
设置元素对象的checked属性值：元素对象.checked =属性值
4）innerHTML
获取元素对象的内容体（所有内容）：元素对象.innerHTML
设置元素对象的内容体：元素对象.innerHTML=值
5）innerText
获取元素对象的文本内容：元素对象.inneText
设置元素对象的文本内容：元素对象.innerText=值
示例：模拟炸弹爆炸情景
<body>
<!--模拟炸弹爆炸的情景-->
<div id="div">炸弹还有<font id="font" color="red">10</font>秒爆炸！</div>
<img id="img" width="400px" height="500px" src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=4279991917,2910577700&fm=26&gp=0.jpg">
<script>
var count=10;
function changeText(){
var font=document.getElementById("font");
font.innerText=--count;//改变文本的秒数
if(count==0){
var div=document.getElementById("div");
div.innerHTML="炸弹爆炸啦！";//改变内容
var image=document.getElementById("img");
image.src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3056604070,2381022538&fm=26&gp=0.jpg";//改变图片
clearInterval(id);//清除定时器
}
}
var id=setInterval("changeText()",1000);//开启定时器
</script>
</body>
11.JS事件
通常鼠标或热键的动作我们称之为事件(Event)
11.1常见的js事件
1）点击事件（onclick）
<body>
<input type="button" value="点我出发点击事件" onclick="run()">
<script>
function run(){
alert("事件触发")
}
</script>
2）获取焦点事件（onfocus）
<body>
<input type="text" onfocus="run()">
<script>
//当鼠标焦点进入输入框时触发
function run(){
alert("事件触发");
}
</script>
</body>
3）失去焦点事件（onblur）
<body>
<input type="text" onblur="run()">
<script>
//当输入焦点离开输入框时触发
function run(){
alert("事件触发")
}
</script>
</body>
4）域内容改变事件（onchange）
<body>
<input type="text" onchange="run()">
<script>
//当输入框内容发送改变时触发
function run(){
alert("事件触发")
}
</script>
</body>
5）加载完毕事件（onload）
加载完毕事件：页面元素组件加载完毕时触发。
<body onload="run()">
<script>
function run(){
alert("事件触发")
}
</script>
</body>
6）表单提交事件（onsubmit）
表单提交事件：表单的提交按钮被点击时触发，该事件需要返回boolean类型的值来执行提交或阻止表单数据的操作。
事件得到true，提交表单数据；事件得到false，阻止表单数据提交。
<body >
<form onsubmit="return run()">
<input type="text" onchange="run()" name="name">
<input type="submit" value="提交">
</form>
<script>
function run(){
alert("事件触发");
return true;
}
</script>
</body>
7）键位事件
onkeyup:键位弹起
onkeydown:键位按下
onkeypress:键位按住
键位弹起事件：在组件中输入某些内容时，键盘键位弹起时触发该事件
8）鼠标移入事件（onmouseover）
鼠标移入事件：鼠标移入某个元素组件时触发
<body >
<input type="text" onmouseover="run()" name="name">
<script>
function run(){
alert("事件触发");
}
</script>
</body>
9）鼠标移出事件（onmouseout）
<body >
<input type="text" onmouseout="run()" name="name">
<script>
function run(){
alert("事件触发");
}
</script>
</body>
11.2JS事件的两种绑定方式
1)为事件绑定一个无参函数
<input type="text" onclick="run()">
2)为事件绑定一个有参函数
一个参数，非this
<input type="text" onclick="run(1)">
一个参数，是this。这个this指的是当前input对象。
<input type="text" onclick="run(this)">
多个函数
<input type="text" onclick="run(this),run2(),run3()">
3)通过DOM绑定
不能传递参数，一个事件只能绑定一个函数。
<body >
<input type="text" id="name1">
<script>
function run(){
alert("事件触发")
}
window.onload=function(){
document.getElementById("name1").onclick=run;
}
</script>
</body>
12.JS练习题
12.1点击改变灯泡的颜色
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>灯光控制</title>
</head>
<body>
<img id="image" src="on.gif" onclick="opened()">
<script>
var count=0;
function opened(){
count++;
if(count%2==1){
document.getElementById("image").src="off.gif";
}else{
document.getElementById("image").src="on.gif";
}
}
</script>
</body>
</html>
12.2轮播图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>轮播图</title>
<script>
var i = 0;
var id;
var index = 0;
var img=["banner_1.jpg","banner_2.jpg","banner_3.jpg"];
function opened(){//打开定时器
id=setInterval("changeImg()", 3000);
}
function closed(){//关闭定时器
clearInterval(id);
}
function changeImg(){
index++;
document.getElementById("banner").src = "img/"+img[index%3];
}
</script>
</head>
<!--轮播图，定时切换图片，当鼠标进入图片时暂停，移出时播放-->
<body onload="opened()">
<img id="banner" src="img/banner_1.jpg" width="100%" onmouseover="closed()" onmouseout="opened()">
</body>
</html>
12.3页面自动跳转
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>页面自动跳转</title>
</head>
<body>
<div id="div" align="center">页面 <font id="font" color="deeppink">5</font> 秒后跳转到百度首页</div>
<script>
var second=5;
function jump(){
document.getElementById("font").innerText=--second;
if(second<=0){
window.location.href="http://www.baidu.com";
clearInterval(id);
}
}
var id=setInterval("jump()",1000);
</script>
</body>
</html>
12.4表单验证的js代码
<script>
window.onload = function(){
document.getElementById("form").onsubmit = function(){
//验证用户名
//验证密码
//...
//都成功则返回true
//
return checkUsername() && checkPassword();
}
document.getElementById("username").onblur = checkUsername;
document.getElementById("password").onblur = checkPassword;
}
function checkUsername(){
var username = document.getElementById("username").value;
var reg_username = /^\w{6,12}$/;
var flag = reg_username.test(username);
var s_username = document.getElementById("s_username");
if(flag){
s_username.innerHTML = "<img height='25' width='35' src='img/gou.png'>"
}else{
s_username.innerHTML = "用户名格式有误";
}
return flag;
}
function checkPassword(){
var password = document.getElementById("password").value;
var reg_password = /^\w{6,12}$/;
var flag = reg_password.test(password);
var s_password = document.getElementById("s_password");
if(flag){
s_password.innerHTML = "<img height='25' width='35' src='img/gou.png'>"
}else{
s_password.innerHTML = "密码格式有误";
}
return flag;
}
</script>
13.jQuery
就是一个封装了很多方法的javascript库
13.1jQuery入口函数
入口函数也叫页面加载完毕函数，在页面加载完成时自动执行，有两种方式，推荐使用第二种方式。一般在入口函数中写页面加载完成后要执行的jQuery代码。
第一种：
$(document).ready(function(){ console.log(123); });
第二种：
$(function(){ console.log(111); });
13.2$函数
$其实就是jQuery，当出现$ is not defined的错误时说明没有引入jQuery文件。
jQuery是一个自执行函数，执行jQuery文件也就是给window对象添加一个jQuery属性和$属性。
$参数介绍
参数传递不同，效果也不一样
1）如果参数是一个匿名函数，那么它就是一入口函数
如：$(function(){ });
2）如果参数是一个字符串，那么它是选择器或者创建标签
如：$(“input”)，这是一个选择器
如：$(“<div>哈哈哈</div>”)，这是在创建一个标签
3）如果参数是一个dom对象，那么就是将dom对象转换为jQuery对象
如：$(dom对象)
13.3jQuery对象和Dom对象
Dom对象：只能调用dom方法和属性，不能调用jQuery的属性和方法
jQuery对象：只能调用jQuery方法和属性，不能调用dom的属性和方法
dom转jQuery：直接在dom对象的前面加一个$,然后把dom对象用括号括起来即可。如$(dom对象)
jQuery转dom：
a. 使用下标取出来
var divs=$("div");//获取所有的div标签，结果集是一个数组
var div1=divs[0];//通过下标取数组中的元素,里面的每一个元素就是dom对象
b. 使用jQuery中的get(index)方法
var divs=$("div");//获取所有的div标签
var div1=divs.get(0);//通过get方法指定要获取的索引，实际上也是利用了数组的特性
开关灯案例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../js/jquery-1.11.0.min.js" ></script>
<script type="text/javascript">
$(function(){
var buttons=document.getElementsByTagName("button");
//点击开灯按钮，背景变白。dom对象和jQuery对象交叉使用
$(buttons[0]).click(function(){//点击事件使用jQuery
//改变颜色使用原生js
$("body")[0].style.backgroundColor="white";
});
//点击关灯按钮，背景变黑
buttons[1].onclick=function(){//点击实际使用原生js
//改变颜色使用jQuery
$("body").css("background-color","black");
}
});
</script>
</head>
<body>
<!--开关灯案例-->
<!--点击开灯按钮，背景变白；点击关灯按钮，背景变黑-->
<button>开灯</button>
<button>关灯</button>
<img src="../html02/banner_3.jpg" />
</body>
</html>
14.jquery选择器
1）id选择器：$(“#id”)，找到对应id的对象
2）类名选择器：$(“.className”)，找到类名为className的对象
3）标签选择器：$(“标签名”)，找到所有一样的标签
4）兄弟选择器：$(“div,a”)，不仅可以找到div标签，还可以找到a标签
5）层级选择器
后代选择器：$(“parent child”)，先找到parent标签，再找parent里面的child标签，然后再去找child里面的child标签。（找完所有）
子代选择器：$(“parent>child”),先找到parent标签，再找parent里面的child标签,到这里就不找了。（到此停止）
6）过滤选择器
这类选择器前面都带有冒号：
1）:even获取索引为偶数的元素 2）:odd获取索引为奇数的元素 3）:eq(index) 获取指定索引的元素 4）:checked匹配所有选中的被选中元素(复选框、单选框等，不包括select中的option) 5）:selected匹配所有选中的option元素 6）:enabled匹配所有可用元素 7）:disabled匹配所有不可用元素
7）筛选选择器
parent() 查找父亲 next()查找下一个兄弟 prev()查找上一个兄弟 children()获取儿子元素 siblings()找到每个div的所有同辈元素
隔行换色案例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
</style>
<script src="../js/jquery-1.11.0.min.js"></script>
</head>
<body>
<table>
<tr>
<td>1111</td>
<td>1111</td>
<td>1111</td>
<td>1111</td>
</tr>
<tr>
<td>333</td>
<td>113311</td>
<td>11311</td>
<td>13111</td>
</tr>
<tr>
<td>333</td>
<td>113311</td>
<td>11311</td>
<td>13111</td>
</tr>
<tr>
<td>333</td>
<td>113311</td>
<td>11311</td>
<td>13111</td>
</tr>
<tr>
<td>333</td>
<td>113311</td>
<td>11311</td>
<td>13111</td>
</tr>
</table>
<script>
//各行换色
$("tr:even").css("background-color","red");
$("tr:odd").css("background-color","blue");
</script>
</body>
</html>
15.jQuery属性
1）获取和设置文本 text()
获取文本：text()不给参数即可,格式：$(“选择器”).text()。获取所有的文本，包括后代的文本。
设置文本：text()给参数即可,格式：$(“选择器”).text(“设置的文本”)。会覆盖原有内容
设置和获取文本案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../js/jquery-1.11.0.min.js" ></script>
<script type="text/javascript">
$(function(){
$("#get").click(function(){
//获取内容
console.log($("div").text());
});
$("#set").click(function(){
//设置内容
$("div").text("我是新设置的文本，我会覆盖此范围原有的所有内容");
});
});
</script>
</head>
<body>
<button id="get">获取文本</button>
<button id="set">设置文本</button>
<div>
我是一个div
<font>我是font标签</font>
</div>
</body>
</html>
2）获取和设置样式 css()
获取样式：$("xxx").css(“样式名”)，根据样式名来获取对应的样式内容
设置样式：
设置单个样式：$("xxx").css(“样式名” , ”样式”)
同时设置多个样式：$("xxx").css( { “样式名1” : ”样式1” ,“样式名2” : ”样式2” } )
获取设置样式案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../js/jquery-1.11.0.min.js" ></script>
<script type="text/javascript">
$(function(){
$("#get").click(function(){
//获取样式
console.log($("#one").css("border"));
});
$("#set").click(function(){
//设置单个样式
$("#two").css("background-color","greenyellow");
});
$("#set2").click(function(){
//设置多个样式
$("#three").css({"color":"white","background-color":"black","font-size":"30px"});
});
});
</script>
<style>
#one{
background: aquamarine;
border: 1px solid red;
}
</style>
</head>
<body>
<button id="get">获取div1样式</button>
<button id="set">设置单个样式</button>
<button id="set2">设置多个样式</button>
<div id="one">我是div1</div>
<div id="two">我是div2</div>
<div id="three">我是div3</div>
</body>
</html>
3）获取和设置表单中的值 val()
获取表单中的值：val()不给参数即可,格式：$(“选择器”).val()
设置表单中的值：val()给参数即可,格式：$(“选择器”).val(“设置的值”)。
获取和设置表单中的值的案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../js/jquery-1.11.0.min.js" ></script>
<script type="text/javascript">
$(function(){
$("#get").click(function(){
console.log($("input").val());
})
$("#set").click(function(){
$("input").val("我是设置的文本内容鸭");
});
});
</script>
</head>
<body>
<button id="get">获取表单内容</button>
<button id="set">设置表单内容</button>
<input type="text" value="我是一个文本框，嘻嘻"/>
</body>
</body>
</html>
4)html()获取和设置容器中的html代码
获取html代码：html()不给参数即可,格式：$(“选择器”).html()。获取所有的html代码和文本
设置html代码：html()给参数即可,格式：$(“选择器”).html(“设置的html代码”)。会覆盖原有内容
获取和设置容器中的html代码的案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../js/jquery-1.11.0.min.js" ></script>
<script type="text/javascript">
$(function(){
$("#get").click(function(){
console.log($("div").html());
})
$("#set").click(function(){
$("div").html("<b>我是设置的内容，我已经覆盖了原有内容哈</b>");
});
});
</script>
</head>
<body>
<button id="get">获取html内容</button>
<button id="set">设置html内容</button>
<div>
哈哈哈哈哈
<p>我是一个段落</p>
<p><a>我是一个链接</a></p>
</div>
</body>
</body>
</html>
5）attr()获取和设置以及removeAttr()删除容器的属性
获取容器的属性：attr(“属性名”)给出属性名即可,格式：$(“选择器”).attr()。如果没有这个属性，那么获取的属性是undefined。
设置容器的属性：attr()给属性名和属性值即可,格式：$(“选择器”).attr(“属性名 ” , “设置的属性值”)或$(“选择器”).attr({“属性名 ” :“设置的属性值” , “属性名 ” :“设置的属性值”})。如果存在这个属性名，就修改这个属性值；如果不存在这个属性名，就添加这个属性。
移除属性：
removeAttr(“属性名”) 移除单个属性
removeAttr(“属性名1 属性名2”)移除多个属性，属性之间用空格分隔
如果移除的属性不存在也不会报错。
获取和设置以及删除容器的属性的案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../js/jquery-1.11.0.min.js" ></script>
<script type="text/javascript">
$(function(){
$("#get").click(function(){
console.log($("input").attr("name"));
})
$("#set").click(function(){
$("input").attr("test","测试属性");
});
$("#set2").click(function(){
$("input").attr({"test":"测试属性","test2":"设定多个属性"});
});
$("#remove").click(function(){
$("input").removeAttr("test");
});
$("#remove2").click(function(){
$("input").removeAttr("test test2 attr");
});
});
</script>
</head>
<body>
<button id="get">获取属性</button>
<button id="set">设置单个属性</button>
<button id="set2">设置多个属性</button>
<button id="remove">删除单个属性</button>
<button id="remove2">删除多个属性</button><br>
<input type="text" value="我是一个文本框，嘻嘻" attr="" name="hhh" id="mytext"/>
</body>
</body>
</html>
6）prop()操作布尔类型的属性
在jQuery1.6之后,对于checked,selected,disabled这类布尔类型的属性来说，不能使用attr方法，要使用prop方法。使用如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../js/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$(function(){
$("button").click(function (){
alert($("input").prop("checked"));
});
});
</script>
</head>
<body>
<button>查看多选框是否选中</button>
<input type="checkbox"/>
</body>
</html>
全选/全不选案例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../js/jquery-1.11.0.min.js" ></script>
<script type="text/javascript">
$(function(){
$("#check").click(function(){//满足需求1
//全选与全不选只要保证这个按钮状态与其他按钮状态一致即可
var checkStauts=$("#check").prop("checked");
$("#tb input").prop("checked",checkStauts);
//通过全选按钮的选中与为选中来设置其他按钮的状态
// if($("#check").prop("checked")){
// $("input").prop("checked",true);
// }else{
// $("input").prop("checked",false);
// }
});
$("#tb input").click(function(){//满足需求2
//获取下面所有多选框的个数
var numbers=$("#tb input").length;
//获取下面被选中的多选框的个数
var numberSelected=$("#tb input:checked").length;
//判断两个个数是否相等，相等就改变上面的那个多选框状态
// if(numbers==numberSelected){
// $("#check").prop("checked",true);
// }else{
// $("#check").prop("checked",false);
// }
//代码优化
$("#check").prop("checked",numbers==numberSelected);
});
});
</script>
</head>
<body>
<!--全选/全不选-->
<!--需求1：如果上面的多选框选择了，那么下面的所有多选框都选择，否则都不选。
需求2：另外，如果下面的多选择都选择了，就让上面的多选框选中，否则不选。-->
<table align="center" cellpadding="0" cellspacing="0" border="1px">
<tr>
<th><input type="checkbox" id="check"></th>
<th>分类ID</th>
<th>分类名称</th>
<th>分类描述</th>
<th>操作</th>
</tr>
<tbody id="tb">
<tr>
<td><input type="checkbox"></td>
<td>0</td>
<td>手机数码</td>
<td>手机数码类商品</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>1</td>
<td>电脑办公</td>
<td>电脑办公类商品</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>2</td>
<td>鞋靴箱包</td>
<td>鞋靴箱包类商品</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>3</td>
<td>家居饰品</td>
<td>家居饰品类商品</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
</tbody>
</table>
</body>
</html>
数组遍历和this案例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../js/jquery-1.11.0.min.js" ></script>
</head>
<body>
<input onblur="hhh(this)"/>
<input onblur="hhh(this)"/>
<script>
//jQuery中this用法
//this是js对象，使用时需要转成jQuery对象，谁使用就指向谁
$(function(){
$("input").blur(function(){
console.log($(this).val());
});
});
//js中this用法
//需要给一个参数，谁使用就指向谁
function hhh(input){
console.log(input.value);
};
var arr=[1,2,3,4];
//js中数组的遍历
arr.forEach(function(obj){
console.log(obj);
});
//jQuery中数组的遍历
$(arr).each(function(i,obj){
console.log(obj);
});
</script>
</body>
</html>
7）jQuery尺寸和位置操作
height()和width()方法获取和设置高度宽度，不包括内边距边框和外边距 innerWdith()和innerHeight()返回元素的宽度和高度，包括内边距 outerHeight()和返回值:IntegerouterWidt()返回元素外部宽度，包括内边距和边框 outerHeight(true)和返回值:IntegerouterWidt(true)返回元素外部宽度，包括内、外边距和边框 offset()获取匹配元素在当前视口的相对偏移。返回的对象包含两个整型属性：top 和 left，以像素计。此方法只对可见元素有效 position()获取匹配元素相对父元素的偏移。返回的对象包含两个整型属性：top 和 left scrollTop() 获取匹配元素相对滚动条顶部的偏移（元素内容被卷曲出去的高度）。此方法对可见和隐藏元素均有效 scrollLeft() 获取匹配元素相对滚动条左侧的偏移（元素内容被卷曲出去的宽度）。此方法对可见和隐藏元素均有效
16.jQuery事件监听
页面加载完成事件：$(function (){});
单击事件：click(function(){})
双击事件：dblclick(function(){})
鼠标移入事件：mouseover(function(){}) 、mouseenter(function(){})
鼠标移出事件：mouseout(function(){})、mouseleave(function(){})
获得焦点事件：focus(function(){})
失去焦点事件：blur(function(){})
触发事件：trigger(“事件类型”)，当某一事件发生时触发。如$(“xxx”).trigger(“click”)当条件满足时触发单击事件。
注册任意监听：on(“监听类型”,function(){ })，包括简单注册和委托注册，简单注册不能动态注册，而委托注册可以动态注册。
off()解绑注册事件。不给参数就解绑所有的注册事件，给参数就解绑指定的注册事件。
一次性监听：one(“监听类型”,function(){ })
mouseover/mouseout在鼠标移动或离开到选取的元素或者子元素上时触发
mouseenter/mouseleave只在鼠标移动或离开到选取的元素上时触发
下拉菜单案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../js/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$(function(){
//设置li横向显示
$("#one>li").css("float","left");
//鼠标点击一次显示，再点击一次不显示
var i=0;
$("#one>li").click(function(){
i++;
if(i%2==1){
$(this).children("ul").show();
}else{
$(this).children("ul").hide();
}
});
//获取鼠标移入事件
$("#one>li>ul>li").mouseover(function(){
$(this).children().css("background","red");
});
//获取鼠标移出事件
$("#one>li>ul>li").mouseout(function(){
$(this).children().css("background","white");
});
});
</script>
<style>
*{
padding:0;
margin:0;
}
div{
margin-left: 200px;
margin-top: 100px;
}
ul{
list-style:none;
}
#one li{
background:white;
}
a{
text-decoration: none;
background: aquamarine;
margin: 10px;
}
#one li ul{
display: none;
}
#one li ul li a{
background:white;
}
/*#one li ul li{
background:bisque;
}*/
</style>
</head>
<body>
<!--下拉菜单案例-->
<!--当鼠标点击一级菜单时显示二级菜单，鼠标再次点击时隐藏二级菜单。鼠标移动到二级菜单时改变鼠标位置的颜色-->
<div>
<ul id="one">
<li>
<a href="#">常用链接</a>
<ul>
<li><a href="http://www.baidu.com" target="_blank">百度</a></li>
<li><a href="#">二级菜单2</a></li>
<li><a href="#">二级菜单3</a></li>
<li><a href="#">二级菜单4</a></li>
</ul>
</li>
<li>
<a href="#">一级菜单2</a>
<ul>
<li><a href="#">二级菜单5</a></li>
<li><a href="#">二级菜单6</a></li>
<li><a href="#">二级菜单7</a></li>
<li><a href="#">二级菜单8</a></li>
</ul>
</li>
<li>
<a href="#">一级菜单3</a>
<ul>
<li><a href="#">二级菜单9</a></li>
<li><a href="#">二级菜单10</a></li>
<li><a href="#">二级菜单11</a></li>
<li><a href="#">二级菜单12</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
图片突出显示案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../js/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$(function(){
$("img").mouseenter(function(){
$(this).css("opacity","1").siblings("img").css("opacity","0.4");
});
$("div").mouseleave(function(){
$("img").css("opacity","1");
})
$("div").mouseenter(function(){
$("img").css("opacity","0.4");
})
});
</script>
<style>
body{
background: blue;
}
div{
610px;
margin-top:100px;
margin-left: 300px;
background: white;
}
img{
200px;
height: 200px;
opacity: 0.4;
}
</style>
</head>
<body>
<!--图片突出显示案例-->
<!--当鼠标移入到某一图片时，透明度为1，其他图片的透明度为0.4-->
<!--当鼠标离开大盒子时，所有图片透明度为1-->
<div>
<img src="../img/1.jpg" >
<img src="../img/2.jpg" >
<img src="../img/3.jpg" >
<img src="../img/4.jpg" >
<img src="../img/5.jpg" >
<img src="../img/6.jpg" >
</div>
</body>
</html>
QQ好友列表案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../js/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$(function(){
$("span").click(function(){
$(this).siblings().show().parent().siblings('li').children('div').hide();
//this代表的是span,通过siblings可以知道他的兄弟div,然后让其显示
//parent是找到span的父亲li,siblings('li')是找到li的其他兄弟节点
//children('div')可以找到其他li的兄弟节点的孩子，然后让其隐藏
});
});
</script>
<style>
ul{
list-style: none;
}
li{
border: 1px solid darkgrey;
260px;
background-color: royalblue;
}
div{
height: 200px;
}
li div{
display: none;
background-color: white;
}
</style>
</head>
<body>
<!--QQ好友列表案例-->
<!--当鼠标某一个分组时，显示这个分组的好友列表，其他的分组好友列表-->
<div>
<ul>
<li>
<span>分组一</span>
<div>我是分组一的好友列表</div>
</li>
<li>
<span>分组二</span>
<div>我是分组二的好友列表</div>
</li>
<li>
<span>分组三</span>
<div>我是分组三的好友列表</div>
</li>
<li>
<span>分组四</span>
<div>我是分组四的好友列表</div>
</li>
</ul>
</div>
</body>
</html>
事件对象
注册一个事件，系统会生成一个对象记录这个事件触发时的一些信息，用事件参数e来获取。
按键改变颜色案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../js/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$(function(){
var id=$("#change");
var span=$("#keyCode");
$(document).on("keydown",function(e){
switch(e.keyCode){
case 82:id.css("background","red");span.text(82);break;
case 71:id.css("background","green");span.text(71);break;
case 66:id.css("background","blue");span.text(66);break;
case 80:id.css("background","purple");span.text(80);break;
case 89:id.css("background","yellow");span.text(89);break;
default:id.css("background","pink");span.text("查无此键");break;
}
});
});
</script>
<style>
#div{
margin-top: 100px;
text-align: center;
}
#change{
background: burlywood;
300px;
height: 200px;
margin-left: 518px;
font-size: 26px;
}
</style>
</head>
<body>
<div id="div">
<h2>按钮改变颜色</h2>
<div id="change"><br><br>
keyCode是：<span id="keyCode"></span>
</div>
</div>
</body>
</html>
17. jQuery内容操作
append(“内容”)：朝容器最后面添加内容
appendTo(“要添加到的容器”): 谁添加到哪去
after(“内容”)：添加内容到兄弟节点的后面
before(“内容”)：添加内容到兄弟节点的前面
remove()：删除自己
empty()：清空子节点 自己还在
parent ():获取父元素
clone()：后代节点的克隆，只存在于内存中，要使用就要追加。里面的参数为true会克隆事件，false则不克隆事件，如果不写参数默认是false.
数据增删案例1（onclick）：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../js/jquery-1.11.0.min.js" ></script>
<script>
var td="<td><a href='#' onclick='del(this)'>删除</a>";
$(function(){
$("#button").click(function(){
var id=document.getElementById("id").value;
var name=document.getElementById("name").value;
var score=document.getElementById("score").value;
$("table").append("<tr><td>"+id+"</td><td>"+name+"</td><td>"+score+
"</td>"+td);
});
});
function del(d){
$(d).parent().parent().remove();
}
</script>
<style>
body{
text-align: center;
}
table{
text-align: center;
}
th{
150px;
}
</style>
</head>
<body><br>
<form >
输入学生信息：
<input type="text" name="id" id="id" placeholder="编号">
<input type="text" name="name" id="name" placeholder="姓名">
<input type="text" name="score" id="score" placeholder="分数">
<input type="button" value="添加" id="button">
</form><br><hr>
<h3>学生信息</h3>
<table align="center" cellpadding="0" cellspacing="0" border="1px solid #EAEAEA">
<tr>
<th>编号</th>
<th>姓名</th>
<th>分数</th>
<th>操作</th>
</tr>
</table>
</body>
</html>
数据增删案例2（on的委托方式注册）：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery增删小案例修改版</title>
<script type="text/javascript" src="../js/jquery-1.11.0.min.js" ></script>
<script>
var td="<td><a href='#' class='del'>删除</a>";
$(function(){
$("#button").click(function(){
var id=document.getElementById("id").value;
var name=document.getElementById("name").value;
var score=document.getElementById("score").value;
$("#tb").append("<tr><td>"+id+"</td><td>"+name+"</td><td>"+score+
"</td>"+td);
$(".input").val("");//清空输入框
});
//使用on委托注册删除
$("tbody").on("click",'.del',function(){
$(this).parent().parent().remove();
})
});
</script>
<style>
body{
text-align: center;
}
table{
text-align: center;
}
th{
150px;
}
</style>
</head>
<body><br>
<form >
输入学生信息：
<input type="text" name="id" id="id" class="input" placeholder="编号">
<input type="text" name="name" id="name" class="input" placeholder="姓名">
<input type="text" name="score" id="score" class="input" placeholder="分数">
<input type="button" value="添加" id="button">
</form><br><hr>
<h3>学生信息</h3>
<table align="center" cellpadding="0" cellspacing="0" border="1px solid #EAEAEA">
<tr>
<th>编号</th>
<th>姓名</th>
<th>分数</th>
<th>操作</th>
</tr>
<tbody id="tb"></tbody>
</table>
</body>
</html>
18. jQuery动画
显示和隐藏、上拉隐藏和下拉显示、淡入和淡出案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<script type="text/javascript" src="../js/jquery-1.11.0.min.js"></script>
<script>
var i = 0;
$(function() {
$("button").click(function() {
i++;
if(i % 2 == 1) {
$("img").hide();//隐藏
$("img").slideUp();//上拉隐藏
$("img").fadeOut(); //淡出
} else {
$("img").show();//显示
$("img").slideDown();//下拉显示
$("img").fadeIn(); //淡入
//slideToggle()//切换：如果是隐藏状态那么会划入，如果是显示状态那么会划出
}
});
//自定义动画
$("button").click(function() {
$("img").animate({top:"100px",left:"200px","1000px"})
});
});
</script>
<style>
img{
position: absolute;
}
</style>
<body>
<!--动画-->
<button>按钮</button>
<img src="../html02/banner_3.jpg" width="300px"/>
</body>
</html>
动画队列的停止与开始案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<script type="text/javascript" src="../js/jquery-1.11.0.min.js"></script>
<script>
var i = 0;
$(function() {
$("#start").click(function() {
$("img").slideDown(2000).slideUp(2000);
});
$("#stop").click(function() {
//stop(a,b)中两个参数的含义
//a：是否清除队列
//b:是否跳转到最终效果
$("img").stop(true,false);//点击停止就会停留在当前动画状态
//如果stop()不写参数，默认参数都是false
});
});
</script>
<style>
img{
position: absolute;
display: none;
}
</style>
<body>
<!--动画队列的停止与开始案例-->
<button id="start">开始动画</button>
<button id="stop">停止动画</button><br>
<img src="../html02/banner_3.jpg" width="1000px"/>
</body>
</html>
19.JQuery练习
全选与全不选
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../js/jquery-1.11.0.min.js" ></script>
<script type="text/javascript">
$(function(){
$("#check").click(function(){//满足需求1
//全选与全不选只要保证这个按钮状态与其他按钮状态一致即可
var checkStauts=$("#check").prop("checked");
$("#tb input").prop("checked",checkStauts);
//通过全选按钮的选中与为选中来设置其他按钮的状态
// if($("#check").prop("checked")){
// $("input").prop("checked",true);
// }else{
// $("input").prop("checked",false);
// }
});
$("#tb input").click(function(){//满足需求2
//获取下面所有多选框的个数
var numbers=$("#tb input:checkbox").length;
//获取下面被选中的多选框的个数
var numberSelected=$("#tb input:checked").length;
//判断两个个数是否相等，相等就改变上面的那个多选框状态
// if(numbers==numberSelected){
// $("#check").prop("checked",true);
// }else{
// $("#check").prop("checked",false);
// }
//代码优化
$("#check").prop("checked",numbers==numberSelected);
});
});
</script>
</head>
<body>
<!--全选/全不选-->
<!--需求1：如果上面的多选框选择了，那么下面的所有多选框都选择，否则都不选。
需求2：另外，如果下面的多选择都选择了，就让上面的多选框选中，否则不选。-->
<table align="center" cellpadding="0" cellspacing="0" border="1px">
<tr>
<th><input type="checkbox" id="check"></th>
<th>分类ID</th>
<th>分类名称</th>
<th>分类描述</th>
<th>操作</th>
</tr>
<tbody id="tb">
<tr>
<td><input type="checkbox"></td>
<td>0</td>
<td>手机数码</td>
<td>手机数码类商品</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>1</td>
<td>电脑办公</td>
<td>电脑办公类商品</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>2</td>
<td>鞋靴箱包</td>
<td>鞋靴箱包类商品</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>3</td>
<td>家居饰品</td>
<td>家居饰品类商品</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
</tbody>
</table>
</body>
</html>
添加表情包
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../js/jquery-1.11.0.min.js" ></script>
<script>
$(function(){
$("img").click(function(){
//clone()克隆，原因是添加表情时原数据会减少
$("#font").append($(this).clone());
console.log($(this).attr("src"));
});
});
</script>
<style>
div{
margin-left: 50px;
}
#image{
margin-top: 50px;
margin-bottom: 30px;
}
</style>
</head>
<body>
<div id="image">
<img src="01.gif">
<img src="02.gif">
<img src="03.gif">
<img src="04.gif">
<img src="05.gif">
<img src="06.gif">
<img src="07.gif">
<img src="08.gif">
<img src="09.gif">
<img src="10.gif">
<img src="11.gif">
<img src="12.gif">
</div>
<div id="font">
<font>请选择表情包：</font>
</div>
</body>
</html>
左移右移
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../js/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$(function() {
//多选移动
$("#rightBtu").click(function() {
$("#right").append($("#left>option:selected"))
});
$("#leftBtu").click(function() {
$("#left").append($("#right>option:selected"))
});
//双击移动
$("option").dblclick(function() {
if($(this).parent().attr("id") == "left") {
$("#right").append($(this))
}else{
$("#left").append($(this))
}
});
});
</script>
<style>
body {
text-align: center;
margin-top: 100px;
margin-left: 100px;
}
select {
150px;
height: 300px;
}
div {
200px;
height: 500px;
float: left;
}
button{
margin-top: 100px;
}
</style>
</head>
<body>
<div>
<!--展开下拉列表-->
<select multiple="multiple" id="left">
<option>钟玉石</option>
<option>方启豪</option>
<option>汤鹏程</option>
</select>
</div>
<div id="button">
<button id="rightBtu">--></button><br>
<button id="leftBtu"><--</button>
</div>
<div>
<select multiple="multiple" id="right">
<option>张林</option>
<option>冷宗阳</option>
<option>哈哈哈</option>
</select>
</div>
</body>
</html>
省市联动
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../js/jquery-1.11.0.min.js" ></script>
<script>
var cities = [
["长春市","吉林市","延边市","白山市","松原市"],
["济南市","青岛市","临沂市","烟台市"],
["石家庄","唐山","保定","承德","秦皇岛"],
["南京","苏州","扬州","无锡"],
["十堰","襄阳","武汉","随州"]
];
var province = ["请选择省","吉林","山东","河北","浙江","湖北"];
$(function(){
//添加省份
$(province).each(function(i,val){
$("#one").append("<option>"+val+"</option>")
});
//当省份改变时添加城市
$("#one").change(function(){
//清空城市的元素
$("#two").html("<option>请选择市</option>");
//selectedIndex获取选中的option的索引
var index=this.selectedIndex;
if(index>0){//去除省份中索引为0的选择
cities[index-1].forEach(function(city){
$("#two").append("<option>"+city+"</option>")
});
}
});
});
</script>
</head>
<body>
<select id="one"></select>
<select id="two">
<option>请选择市</option>
</select>
</body>
</html>
多选框删除
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>点击多选框删除</title>
<script type="text/javascript" src="../js/jquery-1.11.0.min.js" ></script>
<script type="text/javascript">
$(function(){
$("#check").click(function(){//满足需求1
//全选与全不选只要保证这个按钮状态与其他按钮状态一致即可
var checkStauts=$("#check").prop("checked");
$("#tb input").prop("checked",checkStauts);
});
$("#tb input").click(function(){//满足需求2
//获取下面所有多选框的个数
var numbers=$("#tb input:checkbox").length;
//获取下面被选中的多选框的个数
var numberSelected=$("#tb input:checked").length;
$("#check").prop("checked",numbers==numberSelected);
});
$(".del").click(function(){
$(this).parent().parent().remove();
});
$("button").click(function(){
//多选删除
$("#tb input:checked").parent().parent().remove();
});
});
</script>
</head>
<body>
<!--点击多选框删除-->
<!--需求1：如果上面的多选框选择了，那么下面的所有多选框都选择，否则都不选。
需求2：另外，如果下面的多选择都选择了，就让上面的多选框选中，否则不选。
需求3：只有选择了多选框，点击多选删除才能删除；直接点击删除可以删除对应的单个信息-->
<table align="center" cellpadding="0" cellspacing="0" border="1px">
<tr>
<th><input type="checkbox" id="check"></th>
<th>分类ID</th>
<th>分类名称</th>
<th>分类描述</th>
<th>操作</th>
</tr>
<tbody id="tb">
<tr>
<td><input type="checkbox"></td>
<td>0</td>
<td>手机数码</td>
<td>手机数码类商品</td>
<td><a href="#">修改</a>|<a href="#" class="del">删除</a></td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>1</td>
<td>电脑办公</td>
<td>电脑办公类商品</td>
<td><a href="#">修改</a>|<a href="#" class="del">删除</a></td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>2</td>
<td>鞋靴箱包</td>
<td>鞋靴箱包类商品</td>
<td><a href="#">修改</a>|<a href="#" class="del">删除</a></td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>3</td>
<td>家居饰品</td>
<td>家居饰品类商品</td>
<td><a href="#">修改</a>|<a href="#" class="del">删除</a></td>
</tr>
<tr><td colspan="6"><button>多选删除</button></td></tr>
</tbody>
</table>
</body>
</html>