目录：
day04-JavaScript概述
day05-DHTML
day06-jQuery
day04-JavaScript概述
1.1?JS概述
1.1.1????什么是JS
专门为网页交互而产生的一门语言
JS是一门基于对象和事件驱动的脚本语言，主要应用在客户端（主要指浏览器）。
（1）基于对象：不是面向对象，JS不具备面向对象语言的特征, JS没有类的概念，也没有编译的过程，是属于边解释边执行。又由于JS中是有对象的，而且还可以利用一些机制来模拟面向对象语言的特征。
（2）事件驱动：JS中的代码执行大部分都是通过事件触发机制来驱动函数执行，从而实现某些功能。
（3）脚本语言：在网络前端开发环境下，嵌入在浏览器中执行的一段小程序。
1.1.2????JS的特点
解释执行，不需要编译（一边解释，一边执行）
基于对象
弱类型
1.1.3????JS优势
交互性
安全性
跨平台性
1.2?在HTML中引入JS
1.2.1????通过script标签引入JS
在head标签内部，可以添加一个script标签，在该标签内部可以书写JS代码。
<head>
<meta charset="utf-8"/>
<!-- 第一种引入方式 -->
<script type="text/javascript">
alert("第一种引入方式引入成功!");
</script>
</head>
提示：script标签中的type属性可以写，也可以省略不写，默认就是JS。
1.2.2????通过script标签引入外部的JS文件
同样的，在head标签内部，可以通过script标签引入外部的JS文件。
在HTML中：
在JS文件中：
2JavaScript语法
2.1?注释
1、?单行注释：
//?注释内容
2、?多行注释：
/*?注释内容?*/
2.2?数据类型
2.2.1????基本数据类型
1
、数值类型（number
）
在JS中，所有的数值在底层都是浮点型。但是在处理或者是显示的时候，会自动的和整型进行转换。
比如：?2.4+3.6?结果是6，不是6.0
常见的常量：
Infinity：正无穷大-Infinity：负无穷大NaN（not a number）：表示非数字。NaN和任何数值都不相等。包括它本身。
2
、字符串类型
在JS中，字符串类型是一个基本数据类型。
在JS中，声明字符串可以使用单引号或双引号引起来。
var str1 = "Hello JS...";
var str1 = 'Hello JS...';3、布尔类型
布尔类型的值有两个，分别为true和false；
4
、undefined
undefined类型的值只有一个，值就是undefined。表示定义了变量但是没有为变量初始化值。
比如：var x; alert(x);?此时弹框中弹出的x的值为undefined。
5
、null
null类型的值也只有一个，值就是null。表示空值。
可以作为函数的返回值，表示函数返回的是一个空的对象。
2.2.2????复杂数据类型
?对象（普通对象、数组、函数）
2.3?变量和运算符
2.3.1????变量
在JS中，是通过var关键字来声明变量。
在JS中，变量是不区分类型的，所有JS的变量可以执行任意的数据类型。比如：
var str = "Hello JS";
str = 100;
str = true;
...2.3.2????运算符
JS中的运算符和Java中的大致相同
算术运算符: +，-，*，/，%，++，--赋值运算符: =，+=，-=，*=，/=，%=比较运算符: ==，!=，===，!==，>，>=，<，<=位运算符: &?，?|逻辑运算符: &&?，||前置逻辑运算符: ! (not)三元运算符: ? :其他运算符:?typeof, delete
1、两个等号（==）和三个（===）等号的区别
/* 两个等号（==）：
在比较时，如果是同一种类型，就直接比较，返回结果
如果不是同一种类型，先转成同一种类型，在进行比较
*/
alert(123 == "123");//true
/* 三个等号（===）：
在比较时，如果是同一种类型，就直接比较，返回结果
如果不是同一种类型，直接返回false。
*/
alert((100+23) === "123");//false
2、typeof:?用来返回变量或表达式的数据类型
var x = 100;
//alert( typeof x );//number
x = "Hello...";
//alert( typeof x );//string
x = true;
//alert( typeof x );//boolean
alert( typeof 123+"abc" );//numberabc
alert( typeof (123+"abc") );//string3、delete :?用来删除数组中的元素或者对象上的属性或方法
var arr = [55, "abc", true, 123];
alert(arr);//55, "abc", true, 123
delete arr[1];
alert(arr);//55, , true, 1232.4?语句
JS中的语句和Java中的也大致相同
?2.4.1??if...else语句
在JS中，if语句中的判断条件可以不是布尔类型（因为在JS中会自动的进行类型的转换）
示例：
var x = 3;
if(x = 4){//0或NaN为false,其他都是true
alert("yes!");
}else{
alert("no!");
}
2.4.2????
switch语句
示例：
var day = 6;
switch(day){
case 1:
alert("今天是星期一!");
break;
case 2:
alert("今天是星期二!");
break;
case 3:
alert("今天是星期三!");
break;
case 4:
alert("今天是星期四!");
break;
case 5:
alert("今天是星期五!");
break;
default:
alert("今天是休息日!");
}
2.4.3????
循环语句
1、while循环
示例：
var i = 0;
while(i < 5){
console.log("Hello JS...."+(i++));
}
2、for循环
示例：
for(var i=0; i<5; i++){
console.log("Hello JS...."+(i+1));
}2.5?数组
2.5.1????通过Array构造函数声明数组
1.声明一个空的数组
var arr1 = new Array();
2.声明一个具有指定长度的数组
var arr2 = new Array(10);
3.声明一个具有指定初始值的数组
var arr3 = new Array("abc", true, 55);2.5.2????通过数组直接量声明数组
1.声明一个空数组
var arr1 = [];
2.声明一个具有指定初始值的数组
var arr2 = ["abc", true, 55];2.5.3????数组常用的属性或方法
1.length属性：?用来返回数组的长度
/* 声明方式一 */
var arr1 = new Array("abc", false, 1712);
/* 声明方式二 */
arr1 = ["刘备", "关羽", "张飞"];
console.log("arr1数组的长度为: "+arr1.length);2.push方法：往数组的最后面追加一个元素
arr1.push("hello");
console.log("push之后的数组为: "+arr1);
3.pop方法:?删除数组中的最后一个元素并返回
arr1.pop();
console.log("pop之后的数组为: "+arr1);
4.unshift方法:?往数组的最前面插入一个元素
arr1.unshift("JavaScript");
console.log("unshift之后的数组为: "+arr1);
5.shift方法:?删除数组中的第一个元素并返回
arr1.shift();
console.log("shift之后的数组为: "+arr1);2.5.4????数组的开发细节
? ? ?1、?
数组中的元素类型可以是任意的
? ?? 2、?
如果访问数组中一个没有元素的位置，该位置处的值为undefined
? ? ?3、?
数组的长度是可以被任意改变
2.6?函数
函数本质上是一个具有功能的代码块，可以反复调用！
2.6.1????通过function关键字声明函数
1、声明格式
function 函数名称(参数1,参数2...){
函数体
...
}
2、调用函数
函数名称(参数1,参数2...);3、示例：
function fn1(name,age){
alert(name+" : "+age);
}
fn1("陈子枢", 18);2.6.2????通过函数直接量声明函数
1、声明格式：
var 函数名称 = function(参数1,参数2,...){
函数体
...
}
2、调用函数
函数名称(参数1,参数2...);3、示例：
var fn2 = function(name,nickname){
alert(name+" : "+nickname);
}
fn2("韩少云", "达内CEO");
注意：JS中的函数在调用时，如果实际传入的参数个数和声明时的参数个数不相等，也可以调用，但是可能会引发一些问题。
2.7?对象
2.7.1????JS内置对象
1
、RegExp
（正则对象）
(1)?正则对象声明方式一：
var str1 = "Hello JavaScript java";
var reg1 = new RegExp("Java", "ig");
// 标识符i: ignoreCase 不区分大小写
// 标识符g: global 全局查找
console.log("reg1在str1中匹配的结果为： "
+ str1.match(reg1));
(2)?正则对象声明方式二：
var reg2 = /Java/ig;
console.log("reg2在str1中匹配的结果为： "
+ str1.match(reg2));
(3)?正则对象的方法
test方法：检测字符串是否符合该正则表达式
/* 邮箱正则表达式 */
var email1 = "abc123@163.com";
var email2 = "abc123@qq.com";
var email3 = "@#$@abc123@qq.com@#$#@";
var email4 = "abc123@sina.com.cn";
var reg3 = /^\w+@\w+(\.\w+)+$/;
console.log("email1是否符合reg3："
+reg3.test( email1 ));
console.log("email2是否符合reg3："
+reg3.test( email2 ));
console.log("email3是否符合reg3："
+reg3.test( email3 ));
console.log("email4是否符合reg3："
+reg3.test( email4 ));
2、String（字符串对象）
var str1 = "Hello JS...";
//str1是基本数据类型(string),但是需要时会自动转成对应的包装对象(String)
console.log(typeof str1);
var str2 = new String("JavaScript");//对象
console.log(typeof str2);
1.length属性?--?返回字符串的长度
2.charAt方法?--?返回字符串中指定索引处的字符
console.log(str1.charAt(4));3.indexOf方法?--?返回字符串中指定子字符串所在的位置
console.log(str1.indexOf("JS"));
4.match方法?--?使用正则表达式对字符串执行查找,将所有匹配的结果作为一个数组返回
5.slice方法?--?对字符串进行截取,从start开始,?到end结束.
str1 = "Hello JS...";
console.log( str1.slice(0,5) );6.substr方法?--?对字符串进行截取，从start开始，截取指定长度的子字符串。
str1 = "Hello JS...";
console.log( str1.substr(6,2) );
3
、Date
（日期对象）
var d1 = new Date();//当前时间
console.log(d1.toLocaleString());
//注意：月份是从零开始，3表示4月
var d2 = new Date(2018,2,7);//指定时间
console.log(d2.toLocaleString());
console.log( d1.getFullYear() );//年份（2018）
console.log( d1.getMonth() );//月份（2：表示3月）
console.log( d1.getDate() );//哪一天（7）
console.log( d1.getDay() );//星期几（3：表示星期三）
4、Math(数学)
对象
(1)Math.PI : 圆周率
(2)Math.ceil(): 向上取整 123.45
(3)Math.round(): 四舍五入 123.45
(4)Math.floor(): 向下取整 123.45
5
、Global
parseInt()?--?将给定的值转成整数
parseFloat() --?将给定的值转成浮点数
isNaN() --?判断一个值是否是非数字. true表示是非数字
eval() --?可以将一个字符串按照JS的语法解释执行
console.log( parseInt("123.45") );
console.log( parseFloat("123.45") );
console.log( isNaN("123.45") );//false
eval("alert(3+4)");
2.7.2????自定义对象
1.
自定义对象方式一:
声明p1对象并动态为对象添加属性及方法
function Person(){}
var p1 = new Person();
p1.name = "王海涛";
p1.age = 18;
p1.run = function(){
console.log(this.name+" : "+this.age);
}调用p1对象上的属性及方法:
console.log( p1.name );
console.log( p1.age );
p1.run();
或者
声明p2对象
function Person(name, age){
this.name = name;
this.age = age;
this.run = function(){
console.log( this.name+" : "+this.age );
}
}var p2 = new Person("陈子枢", 20);
调用p2上的属性及方法
console.log( p2.name );
console.log( p2.age );
p2.run();day05-DHTML
1.1 DHTML概述
?1.1.1?什么是DHTML?
DHTML: Dynamic HTML(动态的HTML)
DHTML不是一门新的技术, 而是将我们之前学过的HTML、CSS、JavaScript整合在了一起，使用JS来操作页面中的元素（或者操作CSS属性），使得页面元素有一个动态的变化，从而和用户具有了交互的行为。
1.1.2?DHTML工作原理
在DHTML中，将所有的HTML元素都用一个一个的JS对象来进行表示
利用对象来表示元素，利用对象的包含关系来表示元素之间的层级关系
对象有了，可以在对象上设计属性和方法， 利用对象上的属性和方法可以间接的操作元素的属性和行为。
正是利用这种方式，才可以使用JS来操作HTML元素、CSS属性，形成了DHTML这样一门技术。
可以将DHTML分为两部分内容：
BOM：（Browser Object Model）浏览器对象模型
DOM：（Document Object Model）文档对象模型
1.2 BOM
1.2.1?window对象
1、属性
（1）closed -- 返回引用窗口是否已经关闭
alert(window.closed);//true表示已经关闭
2、方法
（1）alert()方法 -- 消息对话框
window.alert("123");
（2）confirm()方法 -- 确认对话框
var res = confirm("欲练此功，必先自宫，是否确定？");
if(res){//点击是确定
alert("若是自宫，未必能成！");
}else{
alert("若不自宫，必不成功！");
}
3、事件！！！
（1）window.onload事件 -- 当整个HTML文档加载完之后立即触发执行。
/* 这是一个文档就绪事件，将会在整个HTML文档加载完之后再触发执行，由于执行时整个文档都已经加载完了，所以此时获取div是可以获取到的。
*/
window.onload = function(){
var oDiv = document.getElementById("div1");
alert( oDiv.innerHTML );
}
下面这种情况不需要使用文档就绪事件
/* 这个fn函数需要在点击div后立即执行，由于div已经加载并显示了，所有此时执行，是可以获取到div元素的
*/
function fn(){
var oDiv = document.getElementById("div1");
alert( oDiv.innerHTML );
}
<div onclick="fn()" id="div1" style="width:100px;height:100px;background-color:pink;">
这是一个div元素
</div>1.3?DOM
1.3.1 获取HTML中的元素
1、getElementById()方法
document.getElementById() -- 通过元素的id属性值获取指定id的元素
2、value属性
value -- 获取或设置表单项中的value值
示例：
function demo1(){
//1.获取用户名输入框(返回的是JS对象：表示用户名输入框)
var oInp = document.getElementById("username");
//2.通过用户名输入框获取其value值（即框中输入的内容）
alert( oInp.value );
oInp.value = "Hello 1712";
}
3、getElementsByName()
document.getElementsByName() -- 通过元素的
name属性值获取所有指定name值的元素，返回的是一个集合数组（可以当做数组来获取或遍历）
示例：
function demo2(){
//1.获取所有name为password的元素
var arrInp = document.getElementsByName("password");
//2.获取集合数组中的第一个元素(即密码输入框),再获取其value值
alert( arrInp[0].value );
}
4、getElementsByTagName()
document.getElementsByTagName() -- 通过元素名称获取指定名称的所有元素，返回的是一个集合数组（可以当做数组来获取或遍历）
示例：
function demo3(){
//1.获取所有input元素
var arrInp = document.getElementsByTagName("input");
//2.循环遍历input元素组成的数组,依次获取每一个input元素的value值
for(var i=0;i<arrInp.length;i++){
alert( arrInp[i].value );
}
}
5、innerHTML、innerText
（1）innerHTML -- 获取或设置元素内部的所有内容（即开始标签和结束标签之间的所有内容）（2）innerText -- 获取或设置元素内部的所有文本内容（仅仅是文本，不包含任何元素，注意，这个属性不兼容，部分浏览器不认识！）
1.3.2???? 增删改HTML元素
1、createElement()、appendChild()、body
(1)document.createElement(tagName) -- 创建一个指定元素名称的元素
(2)obj.appendChild(oChild) -- 通过父元素添加子元素
(3)document.body -- 获取body元素
示例： ? ?
function addNode(){
//1.创建一个div元素
var oNewDiv = document.createElement("div");
//>>给div设置HTML内容
oNewDiv.innerHTML = "我是新来的...";
//2.获取body元素
var oBody = document.body;
//3.将div元素挂载到body元素上
oBody.appendChild( oNewDiv );
}
2、removeChild()、replaceChild()
(1)obj.removeChild(oChild) -- 通过父元素删除指定的子元素
(2)obj.replaceChild(oNew, oChild) -- 通过父元素使用新元素替换已有的子元素
示例1：
function deleteNode(){
//1.获取将要被删除的元素
var oDiv_3 = document.getElementById("div_3");
//2.获取父元素
var oBody = oDiv_3.parentNode;
//3.通过父元素删除指定的子元素
oBody.removeChild( oDiv_3 );
}
示例2：
function updateNode(){
//1.获取id为div_2的元素
var oDiv_2 = document.getElementById("div_2");
//2.获取父元素
var oBody = oDiv_2.parentNode;
//3.创建新元素
var oNewDiv = document.createElement("div");
//>>为div设置HTML内容
oNewDiv.innerHTML = "我是来替换的...";
//4.通过父元素使用新元素替换已有的子元素.
oBody.replaceChild( oNewDiv, oDiv_2 );
}
3、cloneNode()、insertBefore()
(1) obj.cloneNode(boolean) -- 克隆元素， 参数默认是false,表示仅克隆元素，但不包含元素内容。可以传入参数true，表示既克隆元素，也克隆元素内容。(2) obj.insertBefore(oNew, oChild) -- 通过父元素将新元素插入到已有子元素的前面。
示例：
function copyNode(){
//1.获取id为div_4的元素
var oDiv_4 = document.getElementById("div_4");
//2.克隆div_4元素
var oCloneDiv = oDiv_4.cloneNode(true);//参数true:克隆元素并克隆元素内容
//3.获取body元素
var oBody = document.body;
//4.将克隆的元素添加到body元素中
//oBody.appendChild(oCloneDiv);
//4.将克隆的元素插入到div_2元素的前面
//>>获取div_2元素
var oDiv_2 = document.getElementById("div_2");
//>>插入到div_2元素的前面
oBody.insertBefore( oCloneDiv,oDiv_2 );
}
1.3.3 综合练习1：仿QQ好友列表
1、version_1: 点击分组名称,可以展开当前分组
function openDiv(thisobj){
//1.获取当前被点击的分组好友列表(div)
var oDiv = thisobj.parentNode.getElementsByTagName("div")[0];
//2.将当前好友列表(div)由隐藏设置为显示
oDiv.style.display = "block";
}
2、version_2: 点击分组名称,可以展开当前分组
function openDiv(thisobj){
//1.获取当前被点击的分组好友列表(div)
var oDiv = thisobj.parentNode.getElementsByTagName("div")[0];
//2.在展开当前分组之前,先关闭其他分组
//>>获取所有的分组(即所有div),依次关闭即可(即隐藏)
var arrDiv = document.getElementsByTagName("div");
//>>循环遍历,依次隐藏div
for(var i=0;i<arrDiv.length;i++){
arrDiv[i].style.display = "none";
}
//3.再展开当前分组
oDiv.style.display = "block";
}
3、version_3: 点击分组名称:
如果当前分组是关闭的, 点击之后应该先关闭其他分组,再展开当前分组
如果当前分组是展开的, 点击之后直接关闭即可!
function openDiv(thisobj){
//1.获取当前被点击的分组好友列表(div)
var oDiv = thisobj.parentNode.getElementsByTagName("div")[0];
if(oDiv.style.display == "block"){//如果分组是展开的
oDiv.style.display = "none";
}else{//如果分组是关闭的
//2.在展开当前分组之前,先关闭其他分组
//>>获取所有的分组(即所有div),依次关闭即可(即隐藏)
var arrDiv = document.getElementsByTagName("div");
//>>循环遍历,依次隐藏div
for(var i=0;i<arrDiv.length;i++){
arrDiv[i].style.display = "none";
}
//3.再展开当前分组
oDiv.style.display = "block";
}
}
或者
if(oDiv.style.display != "block"){//如果分组是关闭的
//2.在展开当前分组之前,先关闭其他分组
//>>获取所有的分组(即所有div),依次关闭即可(即隐藏)
var arrDiv = document.getElementsByTagName("div");
//>>循环遍历,依次隐藏div
for(var i=0;i<arrDiv.length;i++){
arrDiv[i].style.display = "none";
}
//3.再展开当前分组
oDiv.style.display = "block";
}else{//如果分组是展开的
oDiv.style.display = "none";
}
注意: JS在获取或设置CSS属性时,是获取元素上的CSS属性或着将CSS属性设置在元素上综合练习2：二级联动下拉框
1.3.4???? 综合练习2：二级联动下拉框
var data = {
"北京市": ["海淀区","朝阳区","丰台区"],
"河北省": ["石家庄","唐山","秦皇岛"],
"辽宁省": ["沈阳","大连","鞍山"],
"河南省": ["郑州","洛阳","许昌"],
"山东省": ["青岛","济南","烟台"]
}
/* 练习2 */
function selectCity(thisobj){
//1.获取用户选中的省份
/*
var prov = document.getElementById("province").value;
*/
var prov = thisobj.value;
//2.获取该省份对应的所有城市(数组)
/* ["石家庄","唐山","秦皇岛"] */
var citys = data[prov];
//>>获取城市select框
var oCity = document.getElementById("city");
//>>清空上个省份对应的城市列表
/* 方式一: */
//oCity.innerHTML = "<option>--选择城市--</option>";
/* 方式二: */
//>>获取城市select框中的所有option
var opts = oCity.getElementsByTagName("option");
var len = opts.length;
for(var i=1;i< len;i++){
//依次删除城市select框中option元素
oCity.removeChild( opts[1] );
}
//3.循环遍历城市组成数组, 获取每一个城市
for(var i=0;i<citys.length;i++){
//石家庄 --> <option>石家庄</option>
var oOpt = document.createElement("option");
oOpt.innerHTML = citys[i];
oCity.appendChild(oOpt);
}
}day06-jQuery
1.1?jQuery概述
1.1.1????什么是jQuery？
jQuery：（JavaScript Query）翻译过来就是JS查询
jQuery是一门轻量的、免费开源的JS函数库，能够极大简化JS代码。
1.1.2????jQuery优势
1、能够简化JS代码
2、能够像CSS那样来获取元素（通过jQuery选择器）
????比如：在css中，获取id为div1的元素：
????#div1{ background-color:red }
????.c1{ background-color:red }
????比如：在jQuery中，获取id为div1的元素
????$("#div1").css("background-color", "red");
????$(".c1").css("background-color", "red");
???
3、能够通过操作CSS属性来控制页面样式（效果）
????$("#div1").css("background-color", "red");
????$(".c1").css("background-color", "red");
4、能够兼容常用的浏览器
????比如在JS中，innerText、replaceNode()、removeNode()不兼容常用的浏览器
????在jQuery封装后，text()、replaceWith()、remove()都能够兼容常用的浏览器
???
1.1.3????jQuery的版本支持
1.x --?能够兼容常用浏览器及IE6+
2.x --?能够兼容常用浏览器及IE9+
3.x --?能够兼容常用浏览器及IE9+
jQuery的缺点：jQuery的高版本不兼容低版本。这是因为jQuery在升级时除了会做一些内部优化之外还会增删一些函数。所以在升级之后可能会造成之前的代码无法执行！
1.1.4????jQuery的引入
jQuery的库文件其实就是一个普通的JS文件。所以引入jQuery跟我们之前引入一个.js文件是一样
<!-- 引入jQuery的库文件 -->
<script src="js/jquery-1.4.2.js"></script>
<script>
/* 文档就绪事件函数 */
$(function(){
alert("如果看到这条信息，则表明jQuery引入成功！");
});
</script>
如果引入失败，可能会引发如下异常:
(1)找不到jQuery库文件
(2)$未定义
1.2?jQuery语法
1.2.1????$符号介绍
$符号相当于jQuery，调用$()其实就相等于调用jQuery()：
调用$()，该函数会返回一个jQuery对象(集合)。该对象中包含了若干HTML元素，可以通过jQuery提供的属性或方法对这些元素进行操作。
比如：找到id为div1下的所有span元素，并删除！
$("#div1 span").remove();
1.2.2????文档就绪事件函数
在jQuery中也提供了对应的文档就绪事件函数
在整个html文档加载完之后立即触发执行,格式:
$(function(){
js代码...
});
等价于:
window.onload = function(){ js代码... }其完整写法为:
$(document).ready(function(){
js代码...
});?1.2.3????JS对象和jQuery对象的互相转换?
通过$()函数获取的是一个jQuery对象,?可以通过该对象调用jQuery提供的属性或者是方法,?但是不能调用JS提供的属性或者是方法.
反之,?如果是获取一个JS对象,?也只能调用JS提供的属性或者是方法,?也不能调用jQuery提供的方法或属性,?否则会调用失败.
示例:
/* 1.使用传统JS实现 */
var oInp = document.getElementById("inp");
/* oInp是一个JS对象，value是JS提供的属性，所以调用没有问题。 */
alert( oInp.value );
/* 转换：如果将JS对象转成jQuery对象，就可以调用jQuery提供的函数或属性了 */
alert( $( oInp ).val() );//将JS对象转成jQuery对象
示例:
/* 2.使用jQuery实现 */
/* $("#inp")是一个jQuery对象，value是JS提供的属性，所有不能互相调用。 */
//alert( $("#inp").value );
alert( $("#inp").val() );
/* 转换：如果将jQuery对象转成JS对象，就可以直接调用JS提供的属性或者是方法了 */
alert( $("#inp")[0].value );//将jQuery对象转成JS对象.
//$("#inp").get(0)1.3?jQuery选择器
1.3.1????基本选择器
1、元素名选择器
通过元素名称选中指定名称的元素
示例：
/* 选中b1按钮,为b1按钮绑定点击事件 */
$("#b1").click(function(){
$("div").css("background-color","#FF69B4");
});2、id选择器
通过元素的id属性值选中指定id的元素
示例：
/* 选中b2按钮,为b2按钮绑定点击事件 */
$("#b2").click(function(){
$("#one").css("background-color","#9ACD32");
});
3、class选择器
通过元素的class属性值，选中指定class值的所有元素
??示例：
/* 选中b3按钮,为b3按钮绑定点击事件 */
$("#b3").click(function(){
$(".mini").css("background-color","#FF0033");
});
4、多元素（分组）选择器
将多个选择器选中的元素综合在一起，统一来设置样式或者进行操作
示例：
//改变所有的<span>元素和 id 为 two 的,id为one的，class为 mini的所有的元素的背景色为 #006400" id="b6"
$("#b6").click(function(){
$("span,#two,#one,.mini").css("background-color","#006400");
});
1.3.2????层级选择器
1、$("div span") --?匹配div内所有的span元素
2、$("div>span") --?匹配div内所有的span子元素
3、$("div+span") --?匹配div后紧邻的span兄弟元素
4、$("div").next(“span”) --?匹配div后紧邻的span兄弟元素
5、$("div").nextAll(“span”) --?匹配div后所有的span兄弟元素
6、$("div").prev(“span”) --?匹配div前面紧邻的span兄弟元素
7、$("div").prevAll(“span”) --?匹配div前面所有的span兄弟元素
8、$("div").siblings(“span”) --?匹配div前后所有的span兄弟元素
1.3.3????基本过滤选择器
1、$("div:first") --?匹配所有div中的第一个div元素
2、$("div:last") --?匹配所有div中的最后一个div元素
3、$("div:eq(n)") --?匹配所有div中的索引值为n的div元素
4、$("div:not(.one)") --?匹配所有class值不为one的div元素
5、$("div:lt(n)") --?匹配所有div中索引值小于（less than）n的div元素
6、$("div:gt(n)") --?匹配所有div中索引值大于（greater than）n的div元素
7、$("div:even") --?匹配所有div中索引值为偶数的div元素
8、$("div:odd") --?匹配所有div中索引值为奇数的div元素
1.3.4????内容选择器
1、$("div:contains('hello')") --?匹配div内容中包含'hello'?的div元素
2、$("div:empty") --?匹配所有空的（既不包含文本内容也不包含子元素）div元素
3、$("div:has(span)") --?匹配具有span子元素的div元素
4、$("div:parent") --?匹配非空div元素
1.3.5????可见选择器
1、$("div:visible") --?匹配所有可见的div元素
2、$("div:hidden") --?匹配所有隐藏的div元素
3、$("div:hidden").show() --?将所有隐藏的div元素设置为显示（show底层也是通过display设置元素显示）
4、$("div:visible").hide() --?将所有显示的div元素设置为隐藏（hide底层也是通过display设置元素隐藏）
5、$("div").toggle() --?匹配所有div元素，切换div的显示状态（如果div显示则设置为隐藏，如果div为隐藏则设置为显示）
1.3.6????属性选择器
1、$("div[class]") --?匹配所有div中具class属性的元素
2、$("div[class='c1']") --?匹配所有div中具class属性并且值为c1的元素
3、$("div[class='c1']") --?匹配所有div中具class属性但值不为c1的元素
1.3.7????子元素选择器
1、$("div:first-child")?或?$("div:nth-child(1)") --?匹配div内第一个子元素
2、$("div span:first-child")?或?$("div span:nth-child(1)") --?匹配div内第一个span子元素
3、$("div:last-child") --?匹配div内最后一个子元素
4、$("div:nth-child(n)") --?匹配div内第n个子元素
1.3.8????表单选择器
1、$(":input") --?匹配所有的表单项元素（input按钮、input输入框、input密码框、单选框、复选框、下拉选框、textarea等）
2、$(":password") --?匹配所有的密码输入框
3、$(":radio") --?匹配所有的单选框
4、$(":checkbox") --?匹配所有的复选框
5、$(":checked") --?匹配所有默认被选中的单选框、复选框、option选项
6、$(":selected") --?匹配所有默认被选中的option选项
1.4?文档操作
1.4.1??
元素的增删改
1、$("<div></div>") --?创建一个div元素
2、$("<div>这是一个div元素</div>") --?创建一个包含内容的div元素
3、append()/appendTo()
$("body").append("<div></div>") -- 创建一个div元素并添加到body元素的内部
$("<div></div>").appendTo( $("body") ) -- 同上4、remove()
$("div").remove() -- 删除所有的div元素5、replaceWith()
$("#div1").replaceWith("<p>我是来替换的!</p>")1.4.2????html元素内容及属性操作
1、
html()/text()
html() -- 获取或设置元素的html内容，比如：
$("div").html() -- 获取所有匹配的div元素中的第一个div的html内容
$("div").html("修改之后的内容") -- 为所有匹配的div元素设置html内容
$("div").text() -- 获取所有匹配的div元素的文本内容
$("div").text("修改之后的内容") -- 为所有匹配的div元素设置文本内容
2、attr() --?
获取或设置元素的属性（值）
$("#div1").attr("name") -- 获取所匹配元素的name属性值
$("#div1").attr("name", "xxxx") -- 为所匹配的元素设置name属性值
3、css() --?
获取或设置元素的
css
样式
$("#div1").css("background-color") -- 获取所匹配元素的background-color值
$("#div1").css("background-color", "red") -- 为所匹配的元素设置background-color值1.5?事件
1.5.1????事件
1.click() --?点击事件
$("div").click(function(){ //代码... }); --?为所匹配的元素绑定点击事件,
如果使用JS实现,代码如下:
var arrDiv = document.getElementsByTagName("div");
for(var i=0; i<arrDiv.length; i++){
????arrDiv[i].onclick(){ //代码... }
}2.change() --?下拉选框选项切换事件
3.ready() --?
文档就绪事件
$(document).ready(function(){ //代码将会在整个html文档加载完之后执行?});简写形式为:
$(function(){ ... });
等价于
$(function(){ ... });4.blur()?--?输入框失去输入焦点时触发执行,?等价于onblur
5.focus()?--?输入框获得输入焦点时触发执行,?等价于onfocus
示例:
<textarea name="desc" cols="30" rows="5">请输入描述信息！</textarea>
<script>
/* 获取自我描述文本输入框 */
var oTxt = document.getElementsByTagName("textarea")[0];
/* 为输入框绑定失去输入焦点事件 */
oTxt.onblur = function(){
if(this.value == ""){
this.value = "请输入描述信息！";
}
}
/* 为输入框绑定获得输入焦点事件 */
oTxt.onfocus = function(){
//清空提示信息
if(this.value == "请输入描述信息！"){
this.value = "";
}
}
1.5.2????
效果
1.hide()?--?
设置元素为隐藏
$("div:visible").hide() -- 将所有可见的div元素设置为隐藏2.show()
$("div:hidden").show() --?将所有隐藏的div元素设置为显示3.toggle()?--?切换元素的显示状态,如果元素显示则设置为隐藏,如果元素为隐藏则设置显示.
1.6?综合练习
1.6.1????仿QQ分组列表
/* --通过jQuery实现访QQ列表好友分组-- */
function openDiv(thisobj){
//1.在展开当前分组之前，先关闭其他分组
//$("div").hide();
$(thisobj).parents("tr").siblings("tr").find("div").hide();
//2.根据当前分组的状态：如果分组展开点击则关闭，如果分组关闭点击则展开
$(thisobj).next().toggle();
}? 1.6.2??二级联动下拉框
var data = {
"北京市": ["海淀区","朝阳区","丰台区"],
"河北省": ["石家庄","唐山","秦皇岛"],
"辽宁省": ["沈阳","大连","鞍山"],
"山东省": ["青岛","济南","烟台"]
}
/* --通过jQuery实现二级联动下拉框 -- */
function selectCity(thisobj){
//1.获取用户选中的省份 北京市
var prov = $(thisobj).val();
//2.根据省份获取该省份下所有的城市(或市区)
var citys = data[prov];
var $city = $("#city");//城市select选框
//>>清空上一个省份所对应的数据
$city.html("<option>--选择城市--</option>")
//3.循环遍历所有的城市,作为option依次添加到城市select框中
for(var i=0;i<citys.length;i++){
$("<option>"+ citys[i] +"</option>").appendTo( $city );
//$city.append( $("<option>"+ citys[i] +"</option>") )
}
}
1.6.3????模拟员工信息管理系统
1、添加一个新员工
function addEmp(){
//1.获取要添加的员工的信息
var id = $("#box1 input[name='id']").val().trim();
var name = $("#box1 input[name='name']").val().trim();
var email = $("#box1 input[name='email']").val().trim();
var salary = $("#box1 input[name='salary']").val().trim();
//alert(id+" : "+name+" : "+email+" : "+salary);
//2.校验数据(员工信息不能为空)
if( id == "" || name == "" || email == "" || salary == ""){
alert("员工信息不能为空!");
return;
}
//>>校验邮箱格式(自己完成!)
//>>校验薪资格式(必须为数值)(自己完成!)
//3.检查ID是否存在
//>>获取所有员工的ID所在的td元素
var flag = false;//假设ID是不存在的
$("table tr td:nth-child(2)").each( function(){
//获取当前被遍历td的内容(用户ID)
if(id == $(this).text()){
alert("id已存在!");
//return;//如果return放在each函数中,不能阻止函数接着执行!
flag = true;
}
} );
if(flag){
return;
}
2、删除选中的员工
function delEmp(){
//1.获取被选中的员工所在的tr行, 遍历所有行
$(":checked").parents("tr").each( function(){
//2.如果当前被遍历的tr行不是表头行，则删除
if( $(this).find("th").length == 0 ){//不是表头行
$(this).remove();
}
} );
//练习： 尝试使用别的方法实现删除选中的员工信息
//自己完成！
}
3、实现全选、全不选
function checkAll(thisobj){
/*
点击全选：如果全选框选中，则所有复选框都选中
如果全选框取消选中，则所有复选框也都取消选中！
*/
//1.先获取全选复选框的选中状态
var isCheck = $("#all").attr("checked");
//console.log("当前全选框的状态为："+isCheck);
//2.再获取所有的复选框，将全选的选中状态设置给所有复选框即可！
$(":checkbox").attr("checked", isCheck);
}
4、修改员工信息
/* --- 修改指定id的员工 --- */
function updEmp(){
//1.获取将要修改为的员工的信息
var id = $("#box2 input[name='id']").val().trim();
var name = $("#box2 input[name='name']").val().trim();
var email = $("#box2 input[name='email']").val().trim();
var salary = $("#box2 input[name='salary']").val().trim();
//2.校验数据(员工信息不能为空)
if(id == "" || name == "" || email == "" || salary == ""){
alert("员工信息不能为空!");
return;
}
//3.实现修改
$("table tr td:nth-child(2)").each(function(){
if(id == $(this).text()){//相等则执行修改
//$(this).next().text( name );
//$(this).next().next().text( email );
//$(this).next().next().next().text( salary );
$(this).nextAll("td:eq(0)").text(name);
$(this).nextAll("td:eq(1)").text(email);
$(this).nextAll("td:eq(2)").text(salary);
flag = true;
}
});
if( !flag ){
alert("您修改的员工id不存在!");
}
}