py-10-JQuery

目录:

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") );//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(){ ... });

等价于

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

作者:Darren

QQ:603026148

以上内容归Darren所有,如果有什么错误或者不足的地方请联系我,希望我们共同进步。

  • 0
    点赞
  • 0
    收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

GC-扫地僧

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值