WEB06_jQuery

最新推荐文章于 2023-12-16 12:23:20 发布
最新推荐文章于 2023-12-16 12:23:20 发布
阅读量208 收藏
点赞数
分类专栏： JavaEE 文章标签： jQuery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/pQ561017_/article/details/81203169
版权

今日任务

使用JQuery完成页面定时弹出广告(DOM转换和选择器)

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

使用JQuery完成复选框的全选效果(jQuery的属性操作)

使用JQuery完成省市联动效果(jQuery的遍历和DOM操作)

使用JQuery完成下列列表左右选择(jQuery的事件)

使用JQuery完成表单的校验.

 

教学导航

教学目标

掌握JQuery的基本使用

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

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

教学方法

案例驱动法

 

一、使用JQ完成首页的定时广告弹出

1.需求分析

在首页中(logo的上方)显示一个广告图片(页面加载后，间隔3秒弹出广告图片，再间隔3秒后隐藏广告图片)。【使用jQuery实现】

 

2.技术分析

2.1 jquery相关的知识

  • 什么是jquery

Jquery它是javascript的一个轻量级框架，对javascript进行封装，它提供了很多方便的选择器。供你快速定位到需要操作的元素上面去。还提供了很多便捷的方法。

 

  • 怎么使用jquery

Jquery它是一个库(框架)，要想使用它，必须先引入！

jquery-1.8.3.js：一般用于学习阶段。

jquery-1.8.3.min.js：用于项目使用阶段

 

  • Jquery的简单入门

所有的jquery代码写在页面加载函数

$(function(){

Jquery代码

});

 

 

<html>

<head>

<meta charset="UTF-8">

<title>jquery入门</title>

<script src="../../js/jquery-1.8.3.js"></script>

<script>

//整个文档加载完毕后执行

/*function init(){

alert("张三");

}*/

 

/*window.οnlοad= function(){

alert("张三");

}

 

//整个文档加载完毕后(包括图片)执行

window.οnlοad= function(){

alert("老王");

}

 

//dom树绘制完毕后执行,可能DOM元素关联的东西并没有加载完

jQuery(document).ready(function(){

alert("李四");

});

 

//jquery的简写方法(页面加载)

$(function(){

alert("王五");

});

*/

 

function init(){

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

location.href="";

}

}

 

$(function(){

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

location.href="";

}

});

 

$(function(){

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

location.href="";

}

});

 

</script>

 

</head>

<body onload="init()">

<a href="#" id="a1">ss</a>

<a href="#" id="a2"></a>

</body>

</html>

 

  • 获取元素

JS:document.getElementById();

JQ:$(“#id”);

 

  • Jquery对象与DOM对象转换

<html>

<head>

<meta charset="UTF-8">

<title></title>

<script type="text/javascript" src="../../js/jquery-1.8.3.js" ></script>

<script>

function JSWrite(){

//document.getElementById("span1").innerHTML="美美哒！";

var spanEle = document.getElementById("span1");

$(spanEle).html("美美哒！");

}

 

$(function(){

/*document.getElementById("btn1").onclick = function(){

document.getElementById("span1").innerHTML="帅帅哒！";

}*/

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

//JQ对象转换成DOM对象的第一种方式

//$("#span1")[0].innerHTML="呵呵哒！";

//JQ对象转换成DOM对象的第二种方式

$("#span1").get(0).innerHTML="呵呵哒！";

});

 

});

</script>

</head>

<body>

<input type="button" value="JS写入" onclick="JSWrite()"/>

<input type="button" value="JQ写入" id="btn1"/><br /><br />

<span id="span1">sssss</span>

</body>

</html>

 

注意：JQ对象只能操作JQ里面的属性和方法

  JS对象只能操作JS里面的属性和方法。

  • Jquery的效果

3.实现步骤

第一步：引入jQuery相关的文件

第二步：书写页面加载函数

第三步：在页面加载函数中，获取显示广告图片的元素。

第四步：设置定时操作(显示广告图片的函数)

第五步：在显示广告图片的函数中，使用jQuery的方法让广告图片显示(show())

第六步：清除显示广告图片的定时操作

第七步：设置定时操作(隐藏广告图片的函数)

第八步：在隐藏广告图片的函数中，使用jQuery的方法让广告图片隐藏(hide())

第九步：清除隐藏广告图片的定时操作

4.代码实现

<script type="text/javascript">

var time;

$(function(){

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

});

 

function showAd(){

//$("#img1").show();

//$("#img1").slideDown(3000);

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

clearInterval(time);

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

}

 

function hideAd(){

//$("#img1").hide();

//$("#img1").slideUp(3000);

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

clearInterval(time);

}

 

</script>

 

5.补充内容

Toggle的使用

<html>

<head>

<meta charset="UTF-8">

<title></title>

<script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>

<script>

$(function(){

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

$("#img1").toggle();

});

});

 

</script>

</head>

<body>

<input type="button" value="显示/隐藏" id="btn1"/><br />

<img src="../img/registImg.jpg" id="img1" />

</body>

</html>

 

6.总结

6.1 jquery的选择器

  • 基本选择器

id选择器：$(“#id名称”);

元素选择器：$(“元素名称”);

类选择器：$(“.类名”);

通配符：*

多个选择器共用(并集)

 

案例代码：

<html>

<head>

<meta charset="UTF-8">

<title>基本选择器</title>

<link rel="stylesheet" href="../../css/style.css" type="text/css"/>

<script type="text/javascript" src="../../js/jquery-1.8.3.js" ></script>

<script>

$(function(){

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

$("#one").css("background-color","pink");

});

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

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

});

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

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

});

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

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

});

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

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

});

});

</script>

</head>

<body>

<input type="button" id="btn1" value="选择为one的元素"/>

<input type="button" id="btn2" value="选择样式为mini的元素"/>

<input type="button" id="btn3" value="选择所有的div元素"/>

<input type="button" id="btn4" value="选择所有元素"/>

<input type="button" id="btn5" value="选择id为two并且样式为mini的元素"/>

<hr/>

<div id="one">

<div class="mini">

111

</div>

</div>

 

<div id="two">

<div class="mini">

222

</div>

<div class="mini">

333

</div>

</div>

 

<div id="three">

<div class="mini">

444

</div>

<div class="mini">

555

</div>

<div class="mini">

666

</div>

</div>

 

<span id="four">

 

</span>

</body>

</html>

 

 

 

 

  • 层级选择器

ancestor descendant: 在给定的祖先元素下匹配所有的后代元素(儿子、孙子、重孙子)

parent > child : 在给定的父元素下匹配所有的子元素(儿子)

prev + next: 匹配所有紧接在 prev 元素后的 next 元素(紧挨着的，同桌)

prev ~ siblings: 匹配 prev 元素之后的所有 siblings 元素(兄弟)

 

代码演示：

<html>

<head>

<meta charset="UTF-8">

<title>层级选择器</title>

<link rel="stylesheet" href="../../css/style.css" />

<script type="text/javascript" src="../../js/jquery-1.8.3.js" ></script>

<script>

$(function(){

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

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

});

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

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

});

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

$("#two+div").css("background-color","pink");

});

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

$("#one~div").css("background-color","pink");

});

});

 

</script>

 

 

</head>

<body>

<input type="button" id="btn1" value="选择body中的所有的div元素"/>

<input type="button" id="btn2" value="选择body中的第一级的孩子"/>

<input type="button" id="btn3" value="选择id为two的元素的下一个元素"/>

<input type="button" id="btn4" value="选择id为one的所有的兄弟元素"/>

 

<hr/>

<div id="one">

<div class="mini">

111

</div>

</div>

 

<div id="two">

<div class="mini">

222

</div>

<div class="mini">

333

</div>

</div>

 

<div id="three">

<div class="mini">

444

</div>

<div class="mini">

555

</div>

<div class="mini">

666

</div>

</div>

 

<span id="four">

 

</span>

</body>

</html>

 

  • 基本过滤选择器

$('li').first() 等价于：$(“li:first”)

代码案例演示：

 

<html>

<head>

<meta charset="UTF-8">

<title>基本过滤选择器</title>

<link rel="stylesheet" href="../../css/style.css" type="text/css"/>

<script type="text/javascript" src="../../js/jquery-1.8.3.js" ></script>

<script>

$(function(){

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

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

});

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

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

});

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

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

});

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

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

});

});

</script>

 

</head>

<body>

<input type="button" id="btn1" value="body中的第一个div元素"/>

<input type="button" id="btn2" value="body中的最后一个div元素"/>

<input type="button" id="btn3" value="选择body中的奇数的div"/>

<input type="button" id="btn4" value="选择body中的偶数的div"/>

 

<hr/>

<div id="one">

<div class="mini">

111

</div>

</div>

 

<div id="two">

<div class="mini">

222

</div>

<div class="mini">

333

</div>

</div>

 

<div id="three">

<div class="mini">

444

</div>

<div class="mini">

555

</div>

<div class="mini">

666

</div>

</div>

 

<span id="four">

 

</span>

</body>

</html>

 

  • 属性选择器

<html>

<head>

<meta charset="UTF-8">

<title>层级选择器</title>

<link rel="stylesheet" href="../../css/style.css"  type="text/css"/>

<script type="text/javascript" src="../../js/jquery-1.8.3.js" ></script>

<script>

$(function(){

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

$("div[id]").css("background-color","pink");

});

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

$("div[id='two']").css("background-color","pink");

});

});

 

</script>

</head>

<body>

<input type="button" id="btn1" value="选择有id属性的div"/>

<input type="button" id="btn2" value="选择有id属性的值为two的div"/>

 

<hr/>

<div id="one">

<div class="mini">

111

</div>

</div>

 

<div id="two">

<div class="mini">

222

</div>

<div class="mini">

333

</div>

</div>

 

<div id="three">

<div class="mini">

444

</div>

<div class="mini">

555

</div>

<div class="mini">

666

</div>

</div>

 

<span id="four">

 

</span>

</body>

</html>

 

  • 表单选择器

<html>

<head>

<meta charset="UTF-8">

<title>表单选择器</title>

<link rel="stylesheet" type="text/css" href="../../css/style.css"/>

<script type="text/javascript" src="../../js/jquery-1.8.3.js" ></script>

<script>

$(function(){

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

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

});

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

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

});

});

</script>

</head>

<body>

<input type="button" id="btn1" value="选择所有input元素" />

<input type="button" id="btn2" value="选择文本框" />

<br/>

<form>

<input type="text" /><br />

<input type="checkbox" /><br />

<input type="radio" /><br />

<input type="image" /><br />

<input type="file" /><br />

<input type="submit" />

<input type="reset" /><br />

<input type="password" /><br />

<input type="button" /><br />

<select><option/></select><br />

<textarea></textarea><br />

<button></button>

</form>

</body>

</html>

 

 

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

1.需求分析

在页面加载的时候让显示用户的表格进行隔行换色显示，效果如下：使用JQ实现！

 

 

2.技术分析

需要使用jquery的选择器(基本选择器、基本过滤选择器)

还需要使用jquery的CSS的方法(css(name,value))

 

如果CSS样式已经由美工写好，此时可以使用jquery的CSS类操作

3.步骤分析

第一步：引入jquery的类库

第二步：直接写页面加载函数

第三步：直接使用jquery的选择器(组合选择)拿到需要操作的元素(奇数行和偶数行)

第四步：分别使用CSS的方法(css(name,value))对奇数行和偶数行设置背景颜色。

 

4.代码实现

<script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>

<link rel="stylesheet" type="text/css" href="../css/style.css"/>

<script>

$(function(){

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

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

});

</script>

 

三、使用JQ完成全选和全不选

1.需求分析

在系统后台进行人员管理时，进行批量删除，使用jq完成全选和全不选

 

 

2.技术分析

需要使用jquery的选择器(id选择器、类选择器)

 

需要使用jquery的属性操作方法 prop()

3.步骤分析

第一步：引入jquery文件

第二步：书写页面加载函数

第三步：为上面的复选框绑定单击事件

第四步：将下面所有的复选框的选中状态设置成跟上面的一致！

4.代码实现

<script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>

<script>

$(function(){

//找到下面所有的复选框并设置属性checked()

/*if($("#select")[0].checked==true){

$(".selectOne").attr("checked",true)

}*/

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

$(".selectOne").attr("checked",this.checked);

});

});

</script>

 

注意：attr在jquery1.11版本不适用，采用prop()来替代(在各个版本都适用)。

 

 

在jquery中如何调用方法？

 

元素.方法（）

 

 

四、使用JQ完成省市二级联动

1.需求分析

使用jquery完成省市二级联动

 

2.技术分析

2.1数组的遍历操作

方式一：

$(function(){

// 全选/ 全不选

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

var isChecked = this.checked;

//使用对象访问的方式进行遍历，语法：$().each(function(){})

$("input[name='hobby']").each(function(){

this.checked = isChecked;

});

});

});

 

方式二：

$.each( [0,1,2], function(i, n){

  alert( "Item #" + i + ": " + n );

});

 

2.2 文档处理操作

追加内容

apend:  A.append(B)  将B追加到A的内容的末尾处

appendTo: A.appendTo(B)  将A加到B内容的末尾处

 

3.步骤分析

第一步：确定事件(change事件),在绑定的函数里面获取用户选择的省份

第二步：创建二维数组来存储省份和城市

第三步：遍历二维数组中的省份(与用户选择的省份进行比较)【使用JQ的遍历操作】

第四步：接着遍历数组中的城市

第五步：创建一个城市文本节点

第六步：创建option元素节点

第七步：将文本节点添加到元素节点中【使用JQ的文档操作方法】

第八步：获取第二个下拉列表并将option元素节点添加进去

第九步：清除第二个下拉列表的option内容

 

4.代码实现

<script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>

<script>

$(function(){

//2.创建二维数组用于存储省份和城市

var cities = new Array(3);

cities[0] = new Array("武汉市","黄冈市","襄阳市","荆州市");

cities[1] = new Array("长沙市","郴州市","株洲市","岳阳市");

cities[2] = new Array("石家庄市","邯郸市","廊坊市","保定市");

cities[3] = new Array("郑州市","洛阳市","开封市","安阳市");

 

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

//10.清除第二个下拉列表的内容

$("#city").empty();

 

//1.获取用户选择的省份

var val = this.value;

//alert(val);

//3.遍历二维数组中的省份

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

//alert(i+":"+n);

//4.判断用户选择的省份和遍历的省份

if(val==i){

//5.遍历该省份下的所有城市

$.each(cities[i], function(j,m) {

//alert(m);

//6.创建城市文本节点

var textNode = document.createTextNode(m);

//7.创建option元素节点

var opEle = document.createElement("option");

//8.将城市文本节点添加到option元素节点中去

$(opEle).append(textNode);

//9.将option元素节点追加到第二个下拉列表中去

$(opEle).appendTo($("#city"));

});

}

});

 

});

});

</script>

 

 

 

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

1.需求分析

见图片文字部分内容。

 

2.分析

第一步：确定事件(鼠标单击事件click)

第二步：获取左侧下拉列表被选中的option($(“#left option:selected”)) [假设左侧select定义了一个id=left]

第三步：将获取到的option添加到右侧的下拉列表中去。(append方法的使用)

 

3.代码实现

<script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>

<script>

$(function(){

/*1.选中单击去右边*/

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

$("#left option:selected").appendTo($("#right"));

});

 

/*2.单击全部去右边*/

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

$("#left option").appendTo($("#right"));

});

 

/*3.选中双击去右边*/

$("#left option").dblclick(function(){

$("#left option:selected").appendTo($("#right"));

});

});

</script>

 

六、使用JQ完成表单校验

1.需求分析

 

 

 

2.技术分析

这里使用validation插件完成对表单数据的校验

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

pQ561017_
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
各个版本的jQuery
07-13
这里收集了各个版本的jq，比较全，从1.6.4到3.3.1都有。我给每个文件都按版本号重新命名了一下，方便大家获取。本人喜欢用1.8.3的版本jq,bootstrap需要的是1.9以上的jq，2.0以上的jq不再兼容IE8，3以上的jq有了很多新功能，大家可以根据需要来选择版本。
jQuery使用（超详细）
热门推荐
Eliauk_Doubling的博客
08-12 1万+
会把这个dom对象转换成jQuery对象,即 [object HTMLSpanElement] ======> [object Object]* 4.传入参数为[DOM对象]时，将DOM对象包装为jQuery对象返回。* 2.传入参数为[HTML字符串]时，根据这个字符串创建元素节点对象。* 3.传入参数为[选择器字符串]时，根据这个字符串查找元素节点对象。*1. 传入参数为[函数]是，在文档加载完成以后执行这个函数。jQuery对象的本质时dom对象的数组+jQuery提供的一系列的功能函数。
jquery的使用
weixin_53748496的博客
12-08 8002
JS和jquery在添加内容和样式时的区别：jquery的一些方法。jquery实现内容的显示和隐藏。对标签坐标信息或尺寸信息的获取。给button按钮添加点击事件:延迟动画。fadeIn():淡入。fadeOut()：淡出。实现留言板。实现点击返回到顶部
jQuery
最新发布
White-Camellia
12-16 1326
jQuery 是一个快速、简洁的 JavaScript 库，其设计的宗旨是“Write Less，Do More”，即倡导写更少的代码，做更多的事情。
WEB06_jQuery基础.zip
11-13
本教程的"WEB06_jQuery基础.zip"文件是为初学者设计的，旨在帮助那些对JavaScript不太熟悉的开发者快速入门jQuery。 1. **jQuery核心概念** - **选择器**: jQuery的选择器类似于CSS，用于选取HTML元素，如`$("#id...
2_web开发_jquery_
10-02
**jQuery基础及应用详解** jQuery是一款广泛应用于Web开发的JavaScript库，它...通过上述实践，你将对jQuery有更深入的理解，能够熟练运用其功能，提升Web开发效率。同时，撰写实验报告有助于巩固知识，锻炼表达能力。
jQuery-Lerning.zip_Jquery 基础教程_javascript 教程_jquery_web前端
09-22
《jQuery Learning.zip - Jquery 基础教程_javascript 教程_jquery_web前端》 在Web前端开发领域，jQuery是一个不可或缺的JavaScript库，它极大地简化了JavaScript的DOM操作、事件处理、动画制作以及Ajax交互。这个...
jQuery-API.rar_javascript_jquery_jquery api
09-23
在Web开发领域，JavaScript是一种不可或缺的脚本语言，而jQuery库则是JavaScript的一个强大工具，极大地简化了DOM操作、事件处理、动画制作和Ajax交互等任务。本教程将深入探讨jQuery API，帮助开发者更好地理解和...
jquery-easyui.rar_jquery easyui _jquery对话框
09-24
jQuery EasyUI是一款基于jQuery的轻量级前端框架，它极大地简化了网页开发中的用户界面构建工作。这个框架提供了丰富的UI组件，...通过熟练掌握jQuery EasyUI，开发者可以快速构建功能完备、用户体验优良的Web应用。
jQuery的基本使用方法
qq_52990325的博客
07-30 9942
jQuery基本使用
jquery
m0_61927991的博客
04-25 865
第一步使用jQuery 先去官网下载 复制 粘贴 (1)等待文档加载完毕再去执行js代码$(document).ready(function(){代码块}); (2)等待文档加载完毕再去执行js代码$(function(){代码块}) (3)$符号是jquery的顶级对象 可以用Jquery代替 (4)Jquery对象和dom对象 dom对象 doucment.queryselector('div) jquery对象 $('div) 不能使用原生的js方法 (5）Jquery和js对象相互转化
jQuery总结
A_ning2014的博客
08-23 725
jQuery总结 jQuery第一天 jQuery jQuery是一个快速,简洁的JavaScript库 JavaScript库:是一个封装好的特定的集合(方法和函数) 学习jQuery本质:学习调用这些函数(方法) j 就是 JavaScript；Query 查询； 意思就是查询js，把js中的DOM操作做了封装，我们可以快速的查询使用里面的功能。 JavaScript库 jquery...
jQuery基础
weixin_51445423的博客
07-12 641
公司摸鱼自学jQuery
JQuery入门基础
m0_74934282的博客
03-30 8651
jQuery 是一个快速、简洁的 **`JavaScript 库`**，其设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。JavaScript库**`仓库`**： 可以把很多东西放到这个仓库里面。找东西只需要到仓库里面查找到就可以了。**`JavaScript库`**：即 library，是一个封装好的特定的集合（方法和函数）。
jQuery(JS库) | 一文带你掌握jQuery的使用
m0_61933976的博客
01-06 8905
jQuery(JS库) | 一文带你掌握jQuery的使用
jquery使用
早日成为鹏总
04-14 1411
入口函数 // 第一种: 简单易用。 $(function () { ... // 此处是页面 DOM 加载完成的入口 }) ; // 第二种: 繁琐，但是也可以实现 $(document).ready(function(){ ... // 此处是页面DOM加载完成的入口 }); jQuery 对象和 DOM 对象 1. 用原生 JS 获取来的对象就是 DOM 对象 2. jQuery 方法获取的元素就是 jQuery 对象。 3.只有 jQuery 对象才...
jQuery详解
m0_71012114的博客
08-29 1618
本文详细介绍了jQuery知识，举了大量例子实现了用代码完整的体现了jQuery的各种功能。
web网页设计jquery
09-05
在网页中使用jQuery，你可以通过以下步骤导入： 1. 首先，在你的HTML文件中，确保你已经下载了jQuery库文件。你可以在jQuery的官方网站（https://jquery.com/）下载最新版本的库文件。 2. 将下载好的jQuery库文件...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值