web-day4

2023-08-05 18:54:58

第4章WEB04- JQuery篇

今日任务

使用JQuery完成页面定时弹出广告
使用JQuery完成表格的隔行换色
使用JQuery完成复选框的全选效果
使用JQuery完成省市联动效果
使用JQuery完成下列列表左右选择

教学导航

教学目标

掌握JQuery的基本使用

掌握JQuery的基本选择器,层次选择器

会使用JQuery完成DOM的基本操作.

教学方法

案例驱动法

1.1 上次课的内容回顾：

JavaScript:

* JavaScript:基本使用:

* ECMAScript:

* 变量：弱变量类型: var i;

* 数据类型:原始类型和引用类型.

* 语句

* 运算符

* 对象:

* String,Boolean,Date,Math,Number,正则...

* 全局函数:eval(),encodeURI(),encodeURIComponent(),decodeURI(),decodeURIComponent(),parseInt(),parseFloat()

* BOM:浏览器对象.

* window:

* Navigator:

* Screen:

* History:

* Location:

* DOM：文档对象.

* 获得元素:

* document.getElementById(),document.getElementsByName(),document.getElementsByTagName();

* 添加元素:

* element.appendChild(),element,insertBefore();

* 删除元素:

* element.removeChild();

* 创建元素:

* document.createElement(),document.createTextNode();

* 修改元素值:

* innerHTML属性:

1.2 使用JQuery完成定时弹出广告：

1.2.1 需求：

之前使用的JS的方式完成定时弹出广告，现在使用JQuery完成同样的效果:

1.2.2 分析

1.2.2.1 技术分析：

【JQuery的概述】

什么是JQuery:

JQuery是一个JS的框架（JS的类库）.对传统的JS进行了封装.

现在企业的开发中往往不会使用传统的JS进行开发，通常都会使用JS框架进行开发.

JS的常用的框架:

JQuery,ExtJS,DWR,Prototype... EasyUI 处理后台功能的前端框架

JQ的使用:

学习JQuery的语法.

【JQuery的入门】

引入Jquery的js文件.

JQuery的入口函数:

// 传统的JS的方式：页面加载的事件只能执行一次.

/*window.onload = function(){

alert("aaa");

}

window.onload = function(){

alert("bbb");

}*/

// JQuery的方式：相当于页面加载的事件,可以执行多次.效率比window.onload要高.

// window.onload 等页面加载完成后执行该方法.

// $(function(){}):等页面的DOM树绘制完成后执行此方法.

// $相当于JQuery

$(function(){ //等dom树绘制完成后执行function方法内容是alert（aaa）

alert("aaa");

});

$(function(){

alert("bbb");

});

【JS对象和JQ对象的转换】

window.onload = function(){

// 传统JS方式：

var d1 = document.getElementById("d1");

// JS对象的属性和方法:

// d1.innerHTML = "JS对象的属性";

// d1.html("aaaaaa");

// 将JS对象转成JQ的对象.

$(d1).html("JS对象转成JQ对象");html是jq对象的方法。

}

$(function(){ //dom树绘制完成后就执行function方法

var $d1 = $("#d1"); //通过id获取jq对象

// $d1.html("JQ对象的属性"); html通常用于设置元素的值

// 转成JS的对象:

// 一种方式

// $d1[0].innerHTML = "将JQ的对象转成JS对象";

// 二种方式:

$d1.get(0).innerHTML = "将JQ的对象转成JS对象的方式二";

});

【JQ显示和隐藏】

JQ的效果操作:

* show();

* 使用一:Jq对象.show();

* 使用二:Jq对象.show(“slow”); // slow,normal,fast

* 使用三:Jq对象.show(毫秒值); // 1000

* 使用四:Jq对象.show(毫秒值,function(){});

* hide();

* 使用一:Jq对象.hide();

* 使用二:Jq对象.hide(“slow”); // slow,normal,fast

* 使用三:Jq对象.hide(毫秒值); // 1000

* 使用四:Jq对象.hide(毫秒值,function(){});

* slideDown(); --向下滑动

* 使用一:Jq对象.slideDown();

* 使用二:Jq对象.slideDown(“slow”); // slow,normal,fast

* 使用三:Jq对象.slideDown(毫秒值); // 1000

* 使用四:Jq对象.slideDown(毫秒值,function(){});

* slideUp(); --向上滑动

* 使用一:Jq对象.slideUp();

* 使用二:Jq对象.slideUp(“slow”); // slow,normal,fast

* 使用三:Jq对象.slideUp(毫秒值); // 1000

* 使用四:Jq对象.slideUp(毫秒值,function(){});

* fadeIn(); --淡入

* 使用一:Jq对象.fadeIn();

* 使用二:Jq对象.fadeIn(“slow”); // slow,normal,fast

* 使用三:Jq对象.fadeIn(毫秒值); // 1000

* 使用四:Jq对象.fadeIn(毫秒值,function(){});

* fadeOut(); --淡出

* 使用一:Jq对象.fadeOut();

* 使用二:Jq对象.fadeOut(“slow”); // slow,normal,fast

* 使用三:Jq对象.fadeOut(毫秒值); // 1000

* 使用四:Jq对象.fadeOut(毫秒值,function(){});

* animate(); --自定义动画

* toggle(); --单击切换函数

* Jq对象.toggle(fn1,fn2...);单击第一下的时候执行fn1,单击第二下执行fn2...

1.2.2.2 步骤分析：

【步骤一】：创建一个HTML的页面.

【步骤二】：在页面中创建一个广告部分的DIV,并且设置DIV是隐藏的.

【步骤三】：设置定时操作,5秒钟执行一个显示的方法.

【步骤四】：在设置一个定时,5秒钟执行一个隐藏的方法.

1.2.3 代码实现

var time ;

$(function(){

// 设置定时 5秒钟执行一个显示广告的方法：

time = setInterval("showAd()",5000);

});

function showAd(){

// 获得元素：

//$("#adDiv").show(2000);

// $("#adDiv").slideDown(2000);

$("#adDiv").fadeIn(3000);

clearInterval(time);

// 再设置定时 5秒钟隐藏.

time = setInterval("hideAd()",5000);

}

function hideAd(){

//$("#adDiv").hide(2000);

// $("#adDiv").slideUp(2000);

$("#adDiv").fadeOut(3000);

clearInterval(time);

}

</script>

1.2.4 总结：

1.2.4.1 JQuery的选择器：

【基本选择器】(*****)

id选择器

* 用法:$(“#id”)

类选择器

* 用法:$(“.类名”)

元素选择器

* 用法:$(“元素名称”)

通配符选择器

* 用法:$(“*”)

并列选择器

* 用法:$(“选择器,选择器,选择器”)

//这是id选择器的用法

$(function(){

$("#but1").click(function(){//这是jq对象绑定的事件的用法。

// alert("aaaa");

$("#one").css("background","#bbffaa");//这是jq对象绑定的样式的用法

});

$("#but2").click (function(){

$(".mini")//类选择器，选择类名为mini的所有对象.css("background","#bbffaa");

});

$("#but3").click(function(){

$("div").css("background","#bbffaa");//这是元素选择器，元素就是标签

});

$("#but4").click(function(){

$("*").css("background","#bbffaa");//这是通配符选择器

});

$("#but5").click(function(){

$("#two,span,.mini").css("background","#bbffaa");//并列选择器可以把很多选择器都放到这里边

});

【层级选择器】：

后代选择器：使用空格所有后代包含孙子及以下的元素 //元素就是标签
子元素选择器：使用> 第一层的元素（儿子）
下一个元素:使用+ 下一个同辈元素并不包含下一个元素里边的相同名称的标签
兄弟元素:使用~ 后面所有的同辈元素和+的区别就是这是下边所有的而+只是一个且两个都不
包含他们的子类标签。

$(function(){

// 后代选择器:

$("#but1").click(function(){

$("body div").css("background","#bbffaa");//后代选择器，选择的是哪些对象

});

// body下的第一层div元素

$("#but2").click(function(){

$("body > div").css("background","#bbffaa");

});

// 查找下一个同辈的元素(并不是他的子标签而是和他同级的下一层div标签

但是并不包含下一个标签里边中的div标签)。

$("#but3").click(function(){

$("#three + div").css("background","#bbffaa");

});

$("#but4").click(function(){

$("#two ~ div").css("background","#bbffaa");

});

</script>

【基本过滤选择器】

$(function(){

$("#but1").click(function(){

//three下的子div标签中的第一个

$("#three div:first").css("background","#bbffaa");

});

$("#but2").click(function(){

//three下的子div标签中的最后一个

$("#three div:last").css("background","#bbffaa");

});

//选择所有div中的奇数div：从0开始数的，从上往下依次数外层-里层-外层-里层

$("#but3").click(function(){

$("div:odd").css("background","#bbffaa");

});

//选择所有div中的偶数div：从0开始数的，从上往下依次数外层-里层-外层-里层所有的div在同一级别

$("#but4").click(function(){

$("div:even").css("background","#bbffaa");

});

$("#but5").click(function(){

//选择id为three的子类的第二个div从0开始，0代表第一个，1代表第二个，2代表第三个

$("#three div:eq(1)").css("background","#bbffaa");

});

</script>

【内容选择器】

$(function(){

$("#but1").click(function(){

//选择所有div中内容包含1的，子类和父类都包含在里边的

$("div:contains('1')").css("background","#bbffaa");

});

</script>

【属性选择器】

$(function(){

$("#but1").click(function(){

//选择有id属性的div （包括子类和父类）

$("div[id]").css("background","#bbffaa");

});

$("#but2").click(function(){

//选择有title=‘aaa’的div包含子类和父类的

$("div[title='aaa']").css("background","#bbffaa");

});

</script>

【表单选择器】

$(function(){

$("#but1").click(function(){

//表单中所有含有input的都运用这个样式

$(":input").css("background","#bbffaa");

});

$("#but2").click(function(){

// $(":text").css("background","#bbffaa");

//选择input标签中type=text的所有都运用这个样式

$("input[type='text']").css("background","#bbffaa");

});

</script>

【表单属性选择器】

$(function(){

$("#but1").click(function(){

//选择有id属性的div包括父标签和子标签

$("div[id]").css("background","#bbffaa");

});

$("#but2").click(function(){

//选择有title属性为aaa的div元素

$("div[title='aaa']").css("background","#bbffaa");

});

</script>

1.3 案例二：表格隔行换色的案例：

1.3.1 需求：

对数据的表格进行隔行换色的显示效果,使用JQuery完成该效果.

1.3.2 分析：

1.3.2.1 技术分析：

【JQuery的选择器】

* 基本过滤选择器：

* odd ：偶数

* even : 基数

【JQuery中添加和移除样式】

* 如果样式没有事先定义,可以使用css方法为奇数行或者偶数行设置背景颜色.

* 如果已经在css文件中事先将样式定义完成了,不用使用css方法了.使用JQ中的CSS类中的方法：

* addClass();

* removeClass();

1.3.2.2 步骤分析：

【步骤一】：引入jquery的js

【步骤二】：在页面加载的函数中,选择奇数行,添加样式

【步骤三】：在页面加载的函数中,选择偶数行,添加样式

1.3.3 代码实现:

$(function(){

/*$("tr:odd").addClass("odd");

//基本过滤选择区

$("tr:even").addClass("even");*/

//引入的js文件里边有这就是固定格式

$("tbody tr:odd").addClass("odd");

$("tbody tr:even").addClass("even");

});

</script>

1.4 案例三：使用JQuery完成复选框的全选和全不选

1.4.1 需求：

使用JQuery完成复选框的全选和全不选的操作:

1.4.2 分析：

1.4.2.1 技术分析:

【JQuery对属性的操作的方法】

* attr();

* 使用方法一：$(“”).attr(“src”);

* 使用方法二：$(“”).attr(“src”,”test.jpg”);

* 使用方法三：$(“”).attr({“src”:”test.jpg”,”width”:”100”});

* removeAttr();

* prop();新版本的方法.

* 使用方法一：$(“”).prop(“src”);

* 使用方法二：$(“”).prop(“src”,”test.jpg”);

* 使用方法三：$(“”).prop({“src”:”test.jpg”,”width”:”100”});

* removeProp();

* addClass()

* removeClass();

1.4.2.2 步骤分析:

【步骤一】：在页面中添加复选框.

【步骤二】：引入jquery的js

【步骤三】：编写JQ的入口函数

【步骤四】：点击上面的复选框,获得下面的所有的复选框.

【步骤五】：修改下面的复选框的值.

1.4.3 代码实现：

// 复选框全选和全不选

$(function(){

// 获得上面的复选框:

//var $selectAll = $("#selectAll");

// alert($selectAll.attr("checked"));

/*$selectAll.click(function(){

// alert($selectAll.prop("checked"));

if($selectAll.prop("checked") == true){

// 上面的复选框被选中

$(":checkbox[name='ids']").prop("checked",true);

}else{

// 上面的复选框没有被选中

$(":checkbox[name='ids']").prop("checked",false);

}

});*/

// 简化：

$("#selectAll").click(function(){

$(":checkbox[name='ids']").prop("checked",this.checked);

});

1.5 案例四：使用JQuery完成省市二级联动:

1.5.1 需求：

在注册页面上籍贯的信息,需要用到省市联动效果.

1.5.2 分析：

1.5.2.1 技术分析:

【JQuery的DOM操作】

* 常用的方法:

* append(); ---在某个元素后添加内容.

* appendTO(); ---将某个元素添加到另一个元素后.

* remove(); ---将某个元素移除.

【JQuery的遍历】

遍历的方式一：

* $.each(objects,function(i,n){

});

遍历的方式二:

* $(“”).each(function(i,n){

});

$(function(){

var arrs = new Array("张森","张凤","张芙蓉");

// 将这个数组转成JQ的对象使用each方法.

/*$(arrs).each(function(i,n){ 便利arrs数组并得到 I n 值然后触发function方法将I n 值传进去并进行下一步运算

alert(i+" "+n);

});*/

$.each(arrs,function(i,n){

alert(i+" "+n);

});

1.5.2.2 步骤分析：

【步骤一】：引入注册页面，引入jq的js.

【步骤二】：获得到第一个下拉列表,change事件.

【步骤三】：获得到被选中的下拉列表的值.

【步骤四】：去数组中进行比对.

【步骤五】：将数组中的值遍历获得到.

【步骤六】：创建元素，创建文本,将文本添加到元素中,将元素添加到第二个列表中.

1.5.3 代码实现：

$(function(){

// 定义数组：

/*var arrs = new Array(5);

arrs[0] = new Array("杭州市","绍兴市","温州市","义乌市","嘉兴市");

arrs[1] = new Array("南京市","苏州市","扬州市","无锡市");

arrs[2] = new Array("武汉市","襄阳市","荆州市","宜昌市","恩施");

arrs[3] = new Array("石家庄市","唐山市","保定市","邢台市","廊坊市");

arrs[4] = new Array("长春市","吉林市","四平市","延边市");*/

var cities = [

["杭州市","绍兴市","温州市","义乌市","嘉兴市"],

["南京市","苏州市","扬州市","无锡市"],

["武汉市","襄阳市","荆州市","宜昌市","恩施"],

["石家庄市","唐山市","保定市","邢台市","廊坊市"],

["长春市","吉林市","四平市","延边市"]

];

var $city = $("#city");

// 获得代表省份的下拉列表:

$("#province").change(function(){

// alert(this.value);

// alert($(this).val());

$city.get(0).options.length = 1;

var val = this.value;

// 遍历并且判断:

$.each(cities,function(i,n){

// 判断:

if(i == val){

$(n).each(function(j,m){

// alert(j+" "+m);

$city.append("<option>"+m+"</option>");

});

}

});

</script>

1.6 案例五：下拉列表的左右选择：

1.6.1 需求:

在分类的修改的页面中,有某个分类下的所属的商品的信息.可以对这些商品信息进行选择.

1.6.2 分析:

1.6.2.1 技术分析：

【JQuery的选择器】

1.6.3 代码实现:

传统的JS的方式进行实现:

window.onload=function(){

// 添加到右侧:

document.getElementById("addRight").onclick = function(){

// 获得左侧的下拉列表

var selectLeft = document.getElementById("selectLeft");

// 遍历左侧列表中的所有的option元素.

for(var i = selectLeft.options.length - 1;i>=0;i--){

// 判断该元素是否被选中

if(selectLeft.options[i].selected == true){

document.getElementById("selectRight").appendChild(selectLeft.options[i]);

}

// 全部到右侧:

document.getElementById("addAll").onclick = function(){

// 获得左侧的下拉列表

var selectLeft = document.getElementById("selectLeft");

// 遍历左侧列表中的所有的option元素.

for(var i = selectLeft.options.length - 1;i>=0;i--){

document.getElementById("selectRight").appendChild(selectLeft.options[i]);

}

使用JQ完成下拉列表左右选择:

$(function(){

// 添加左侧选中的元素到右侧

$("#addRight").click(function(){

// 获得左侧被选中的option元素:

$("#selectLeft option:selected").appendTo("#selectRight");

});

// 添加所有到右侧

$("#addAll").click(function(){

// 获得左侧被选中的option元素:

$("#selectLeft option").appendTo("#selectRight");

});

// 移除右侧被选中元素到左侧:

$("#removeLeft").click(function(){

$("#selectRight option:selected").appendTo("#selectLeft");

});

// 移除右侧被选中元素到左侧:

$("#removeAll").click(function(){

$("#selectRight option").appendTo("#selectLeft");

});

// 双击左侧的的某个元素，移动到右侧:

$("#selectLeft").dblclick(function(){

$("option:selected",this).appendTo("#selectRight");

});

// 双击左侧的的某个元素，移动到右侧:

$("#selectRight").dblclick(function(){

$("option:selected",this).appendTo("#selectLeft");

});

1.6.4 总结:

1.6.4.1 JQuery常用事件：

1.6.4.2 JQ的事件切换：

* toggle(); --单击事件的切换

* hover(); --鼠标悬停的切换

码农公寓

第4章WEB04- JQuery篇

1.1 上次课的内容回顾：

1.2 使用JQuery完成定时弹出广告：

1.2.1 需求：

1.2.2 分析

1.2.2.1 技术分析：

1.2.2.2 步骤分析：

1.2.3 代码实现

1.2.4 总结：

1.2.4.1 JQuery的选择器：

1.3 案例二：表格隔行换色的案例：

1.3.1 需求：

1.3.2 分析：

1.3.2.1 技术分析：

1.3.2.2 步骤分析：

1.3.3 代码实现:

1.4 案例三：使用JQuery完成复选框的全选和全不选

1.4.1 需求：

1.4.2 分析：

1.4.2.1 技术分析:

1.4.2.2 步骤分析:

1.4.3 代码实现：

1.5 案例四：使用JQuery完成省市二级联动:

1.5.1 需求：

1.5.2 分析：

1.5.2.1 技术分析:

1.5.2.2 步骤分析：

1.5.3 代码实现：

1.6 案例五：下拉列表的左右选择：

1.6.1 需求:

1.6.2 分析:

1.6.2.1 技术分析：

1.6.3 代码实现:

1.6.4 总结:

1.6.4.1 JQuery常用事件：

1.6.4.2 JQ的事件切换：

相关文章