py-10-JQuery

最新推荐文章于 2024-10-11 17:39:47 发布

从码农到码到成功

最新推荐文章于 2024-10-11 17:39:47 发布

阅读量425

点赞数

文章标签： jquery javascript 前端

本文链接：https://blog.csdn.net/weixin_39519454/article/details/121756557

版权

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") );//string

3、delete : 用来删除数组中的元素或者对象上的属性或方法

var arr = [55, "abc", true, 123];
alert(arr);//55, "abc", true, 123
delete arr[1];
alert(arr);//55, , true, 123

2.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不存在!");
}
}