java web jquery_JavaWEB开发04——JQuery

今日任务

使用JQuery完成页面定时弹出广告

定时器:

​ setInterval clearInterval

​ setTimeout clearTimeout

显示: img.style.display = "block"

隐藏: img.style.display = "none"

img 对象

​ style属性: style对象

使用JQuery完成表格的隔行换色

获得所有的行

​ table.rows[]

修改行的颜色

​ row.bgColor ="red"

​ row.style.backgroundColor = "black"

​ row.style.background = "red"

​ "background-color:red"

​ "background:red"

使用JQuery完成复选框的全选效果

checked属性

如何获取所有复选框:

​ document.getElementsByName get Elements By Name 数据库里面

使用JQuery完成省市联动效果

​ JS中的数组: ["城市"]

​ new Array()

​ DOM树操作:

​ 创建节点: document.createElement

​ 创建文本节点: document.createTextNode

​ 添加节点: appendChild

使用JQuery完成下列列表左右选择

​ select下拉列表

​ multiple 允许多选

​ ondblclick : 双击事件

​ for循环遍历,一边遍历一边移除出现的问题

使用JQuery完成表单的校验(扩展)

​ 事件:

​ 获得焦点事件: onfocus

​ 失去焦点事件: onblur

​ 按键抬起事件: onkeyup

​ 鼠标移入: onmouseenter

​ 鼠标移出: onmouseout

​ JS引入外部文件 : script

今日目标：

掌握JQuery的基本使用

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

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

1. 使用JQuery完成页面定时弹出广告

1.1 需求分析：

当用户打开界面，3秒钟之后弹出广告，这个广告显示5秒钟，隐藏广告

1.2 技术分析

定时器: setTimeout

显示和隐藏: style.display = "block/none"

什么JQuery:

jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架)。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的css选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等

JQuery的作用:

​ 1. 写更少的代码,做更多的事情: write Less ,Do more

2. 将我们页面的JS代码和HTML页面代码进行分离

为什么学习JQuery:

​ 提高我们的工作效率

JQ的入门

//js文档加载完成的事件

window.onload = function(){

alert("window.onload 111");

}

window.onload = function(){

alert("window.onload 222");

}

/*文档加载完成的事件*/

jQuery(document).ready(function(){

alert("jQuery(document).ready(function()");

});

/*

jQuery 简写成 $

*/

$(document).ready(function(){

alert("$(document).ready(function()");

});

/*

最简单的写法

*/

$(function(){

alert("$(function(){");

});

【JQ中根据ID查找元素】

全都是根据选择器去找的

#ID{}

.类名{}

$("#ID的名称")

【JQ和JS之间的转换】

JQ对象,只能调用JQ的属性和方法

JS对象 只能调用JS的属性和方法

function changeJS(){

var div = document.getElementById("div1");

// div.innerHTML = "JS成功修改了内容"

//将JS对象转成JQ对象

$(div).html("转成JQ对象来修改内容")

}

$(function(){

//给按钮绑定事件

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

//找到div1

// $("#div1").html("JQ方式成功修改了内容");

//将JQ对象转成JS对象来调用

var $div = $("#div1");

// var jsDiv = $div.get(0);

var jsDiv = $div[0];

jsDiv.innerHTML="jq转成JS对象成功";

});

});

JQ的开发步骤: (将我们页面的JS代码和HTML页面代码进行分离)

1. 导入JQ相关的文件

2. 文档加载完成事件: $(function) : 页面初始化的操作: 绑定事件, 启动页面定时器

3. 确定相关操作的事件

4. 事件触发函数

5. 函数里面再去操作相关的元素

显示和隐藏 img.style.display

【JQ中的动画效果】

show()

hide()

slideUp

slideDown

fadeIn

fadeOut

animate : 自定义动画

1.3 步骤分析：

导入JQ的文件

编写JQ的文档加载事件

启动定时器 setTimeout("",3000);

编写显示广告的函数

在显示广告里面再启动一个定时器

编写隐藏广告的函数

1.4 代码实现

//显示广告

function showAd(){

$("#img1").slideDown(2000);

setTimeout("hideAd()",3000);

}

//隐藏广告

function hideAd(){

$("#img1").slideUp(2000);

}

$(function(){

setTimeout("showAd()",3000);

});

JQuery中的选择器

让我们能够更加精确找到我们要操作的元素

基本选择器

ID选择器 : #ID的名称

类选择器: 以 . 开头 .类名

元素选择器: 标签的名称

通配符选择器: *

选择器,选择器: 选择器1,选择器2

基本选择器的案例

//文档加载事件,页面初始化的操作

$(function(){

//初始化操作: 给按钮绑定事件

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

$("#two").css("background-color","palegreen");

});

//找出mini类的所有元素

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

$(".mini").css("background-color","palegreen");

});

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

$("div").css("background-color","palegreen");

});

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

$("*").css("background-color","palegreen");

});

/*选择器分组*/

//找出mini类 和 span元素

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

$(".mini,span").css("background-color","palegreen");

});

});

JQ中的层级选择器

子元素选择器: 选择器1 > 选择器2

后代选择器: 选择器1 儿孙

相邻兄弟选择器 : 选择器1 + 选择器2 : 找出紧挨着的一个弟弟

找出所有弟弟: 选择器1~ 选择器2 : 找出所有的弟弟

//文档加载事件,页面初始化的操作

$(function(){

//初始化操作: 给按钮绑定事件

//找出body下面的子div

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

$("body > div").css("background-color","palegreen");

});

//找出body下面的所有div

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

$("body div").css("background-color","palegreen");

});

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

$("#one+div").css("background-color","palegreen");

});

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

$("#two~div").css("background-color","palegreen");

});

});

JQ中的基本过滤器

$(function(){

/

//文档加载事件,页面初始化的操作

$(function(){

//初始化操作: 给按钮绑定事件

//过滤出所有div中第一个元素

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

$("div:first").css("background-color","palegreen");

});

//过滤出所有div中偶数位的div

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

$("div:even").css("background-color","palegreen");

});

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

$("div:odd").css("background-color","palegreen");

});

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

$("div:gt(2)").css("background-color","palegreen");

});

});

JQ中的属性选择器

$(function(){

//找到有name属性的input

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

$("input[name]").attr("checked",true);

});

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

$("input[name='accept']").attr("checked",true);

});

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

$("input[name='newsletter'][value='Hot Fuzz']").attr("checked",true);

});

});

JQ中的表单过滤器

//1.文档加载事件

$(function(){

$(":text").css("background-color","pink");

});

上午的内容回顾:

什么是JQ: write less , do more: 写更少的代码,做更多的事

​ javascript函数库

1.11版本

定时器:

动画效果:

​ show : 显示

​ hide : 隐藏

​ slideDown:

​ slideUp: 向上滑动

​ fadeIn

​ fadeOut

JQ选择器:

基本选择器:

​ ID选择器: #ID的名字

​ 类选择器: .类名

​ 元素选择器: 标签名称

​ 通配符选择器: *

​ 选择器分组: 选择器1,选择器2

层级选择器:

​ 后代选择器: 选择器1 儿孙

​ 子元素选择器: 选择器1 > 儿子

​ 相邻兄弟选择器: 选择器1 + 选择器2 找出紧挨着它的弟弟

​ 所有弟弟选择器: 选择器1~选择器2 找出所有弟弟

基本过滤器:

​ 选择器:first : 找出的是第一个

​ :last

​ :even 找出索引为偶数

​ :odd 找出奇数索引

​ :gt(index) : 大于索引

​ :lt(index) 小于

​ :eq(index) 等于

属性选择器:

​ 选择器[href] : 单个属性

选择器[href][title] : 多个属性

选择器[href][title='test'] : 多个属性,包含值

表单过滤器:

​ :input 找出所有输入项: input textarea select

​ :text

​ :password

表单对象属性:

​ 找出select中被选中的那一项:

​ option:selected

JQ的开发步骤:

1. 导入JQ相关的包

2. 文档加载文成的事件: 页面初始化: 绑定事件, 启动定时器

3. 确定事件

4. 实现事件索要触发的函数

5. 函数里面再去操作我们要操作的元素

使用JQ完成表格的隔行换色

需求分析:

在我们的实际开发过程中,我们的表格如果所有的行都是一样的话,很容易看花眼,所以我们需要让我们的表格隔行换色

技术分析:

获取所有行 table.rows

遍历所有行

根据行号去修改每一行的背景颜色: bgColor

​ style.backgroundColor = "red"

步骤分析:

导入JQ的包

文档加载完成函数: 页面初始化

获得所有的行 : 元素选择器

根据行号去修改颜色

代码实现:

$(function(){

//获得所有的行 : 元素选择器

$("tbody > tr:even").css("background-color","#CCCCCC");

//修改基数行

$("tbody > tr:odd").css("background-color","#FFF38F");

// $("tbody > tr").css("background-color","#FFF38F");

});

使用JQuery完成表单的全选全不选功能

需求分析

​ 在我们对表格处理的时,有些情况下,我们需要对表格进行批量处理,

技术分析:

代码实现:

使用JQ完成省市联动效果

需求分析:

​ 在我们的注册表单中,通常我们需要知道用户的籍贯,需要一个给用选择的项,当用户选中了省份之后,列出省下面所有的城市

技术分析:

准备工作 : 城市信息的数据

添加节点 : appendChild (JS)

append : 添加子元素到末尾

appendTo : 给自己找一个爹,将自己添加到别人家里

prepend : 在子元素前面添加

after : 在自己的后面添加一个兄弟

遍历的操作:

​

步骤分析:

导入JQ的文件

文档加载事件:页面初始化

进一步确定事件: change事件

函数: 得到当前选中省份

得到城市, 遍历城市数据

将遍历出来的城市添加到城市的select中

代码实现:

$(function(){

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

// alert(this.value);

//得到城市信息

var cities = provinces[this.value];

//清空城市select中的option

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

//将JQ对象转成JS对象

var citySelect = $city.get(0)

citySelect.options.length = 0;*/

$("#city").empty(); //采用JQ的方式清空

//遍历城市数据

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

$("#city").append(""+n+"");

});

});

});

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

需求分析

我们的商品通常包含已经有了的, 还有没有的,现在我们需要有一个页面用于动态编辑这些商品

技术分析

步骤分析

1. 导入JQ的文件

2. 文档加载函数 :页面初始化

3.确定事件 :　点击事件　onclick

4. 事件触发函数

1. 移动被选中的那一项到右边

代码实现

$(function(){

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

//找到被选中的那一项

//将被选中项添加到右边

$("#rightSelect").append($("#leftSelect option:selected"));

});

//将左边所有商品移动到右边

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

$("#rightSelect").append($("#leftSelect option"));

});

});

今天内容总结:

定时器

动画效果: show hide slideDown slideUp fadeIn fadeOut animate

基本选择器:

​ ID选择器: #ID名称

​ 类选择器: .类名

​ 元素选择器: 元素/标签名称

​ 通配符选择器: * 找出所有页面元素 包含页面上所有的标签

​ 选择器分组 : 选择器1, 选择器2 [选择器1,选择器2]

层级选择器:

​ 后代选择器: 选择器1 选择器2 找出所有的后代,儿子孙子曾孙

​ 子元素选择器: 选择器1 >选择器2 找出所有儿子

​ 相邻兄弟选择器: 选择器1+选择器2 : 找出紧挨着自己那个弟弟

​ 兄弟选择器 :　　　选择器1~选择器2 : 找出所有的弟弟

属性选择器:

​ 选择器[属性名称]

选择器[属性名称][属性名名]

选择器[属性名称='属性值'][属性名称='属性值'][属性名称='属性值']

表单选择器:

​ :input 找出所有的输入项 : 不单单找出input textarea select

​ :text 找出type类型为 text

​ :password

基本过滤器:

​ :even

​ :odd

​ :gt

​ :lt

​ :eq

​ :first

​ :last

表单对象属性:

​ :selected

​ :checked

$(function) : 文档加载完成的事件

css() : 修改css样式

prop() : 修改属性/ 获取属性

html() : 修改innerHTML

append : 给自己添加子节点

appendTo : 将自己添加到别人家,给自己找一个爹

prepend : 在自己最前面添加子节点

after : 在自己后面添加一个兄弟

empty : 清空所有子节点

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

})

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

});

了解, 熟悉, 熟练, 精通

经过一个项目,将所有学过串起来

使用JQ完成表单的校验(扩展)

需求分析

在用户提交表单的时候, 我们最好是能够在用户数据提交给服务器之前去做一次校验,防止服务器压力过大,并且需要给用户一个友好提示

技术分析

trigger

triggerHandler

is()

步骤分析

首先给必填项,添加尾部添加一个小红点

获取用户输入的信息,做相应的校验

事件: 获得焦点, 失去焦点, 按键抬起

表单提交的事件

代码实现