个人JQuery学习

最新推荐文章于 2023-05-31 16:56:02 发布

两条咸鱼儿

最新推荐文章于 2023-05-31 16:56:02 发布

阅读量146

点赞数 1

分类专栏：个人笔记文章标签：前端框架 jquery javascript html css

本文链接：https://blog.csdn.net/qq_51049931/article/details/119384692

版权

个人笔记专栏收录该内容

6 篇文章 0 订阅

订阅专栏

一、jQuery简介

1.1 什么是jQuery？

jQuery是一门轻量的、免费开源的JS函数库，主要作用是用于简化JS代码。

轻量的：代码或项目对该技术的依赖程度，依赖程度越低，这个技术越轻，反之，依赖程度越高，这个技术越重。推荐使用轻量级的技术框架

jQuery的核心思想：“写的更少，但做的更多”，它是一个对于JS的框架。

1.2 jQuery的优势

(1)可以极大的简化JS代码，例如：

JS获取元素：var d = document.getElementById("test1");

jQuery获取元素：$("#test1")

JS删除所有div元素：

var arrDivs = document.getElementsByTagName("div"); //返回所有div元素组成的JS对象数组

var len = arrDivs.length;

for(var i=0;i<len;i++){

arrDivs[0].parentNode.removeChild(arrDivs[0]);

}

jQuery删除所有div元素：$("div").remove();

(2)可以像CSS选择器一样非常方便的获取元素

$("div") -- 获取所有的div元素

$(".s1") -- 获取所有class值为s1的元素

$("#div1") -- 获取id值为div1的所有元素

$("div span") -- 获取div内部的所有span元素

(3)可以通过修改css样式控制页面的效果

$("div").css("background", "red");

$("div").css({

"background" : "blue",

"border" : "2px solid red",

"font-size" : "30px"

});

(4)可以兼容常用的浏览器(谷歌/火狐/苹果/欧朋...)

...

1.3 jQuery引入

jQuery函数库其实就是一个JS文件(这个文件中封装了很多的JS函数和少量的JS属性)

如果要使用这个文件中的函数或属性，需要在网页中通过script标签引入jQuery的函数库文件

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

在引入时，如果因为路径书写错误，导致jQuery引入失败，浏览器的控制台会报如下错误：

补充：俩种引入方式：

（1）引入方式一：

如图所示：

然后在浏览中显示，打开控制台，如果没有上述错误，说明引入成功。

（2）引入方式二：

在Eclipse中创建如图所示的文件

效果为：

弹出这个窗口，说明引入成功。

1.4 文档就绪事件函数

<head>

<meta charset="UTF-8">

<title>文档就绪事件函数</title>

<script>

//1.获取id为demo的h1元素

var oH1 = document.getElementById("test");

//2.获取h1元素的内容

alert( oH1.innerHTML );

</script>

</head>

<body>

<h1 id="test">演示文档就绪事件函数....</h1>

</body>

问题描述：上面的代码执行时，会报一个错误：

原因描述：在执行获取id为test的元素时, h1元素还没有被浏览器加载到，所以获取不到h1元素。

oH1就是一个null，在下方再通过oH1调用属性，由于null不能调用属性或函数，因此代码会抛异常！

解决方式一：

将script标签及其中的代码移到body内部，也可以h1元素的后面

这样浏览器在加载时，会先加载h1元素，在执行获取h1元素的代码，由于在获取h1元素之前，h1元素就已经被浏览器加载过了，所以后面再获取h1元素就能获取到。

<head>

<meta charset="UTF-8">

<title>文档就绪事件函数</title>

</head>

<body>

<h1 id="test">演示文档就绪事件函数....</h1>

<script>

//1.获取id为demo的h1元素

var oH1 = document.getElementById("test");

//2.获取h1元素的内容

alert( oH1.innerHTML );

</script>

</body>

解决方式二：

将获取元素的代码放在一个文档就绪事件函数中，因为文档就绪事件函数，会在浏览器加载完所有的html元素后立即执行。

此时整个html网页都被加载了，h1元素肯定也被加载了，此时再执行函数，执行获取h1元素的代码，一定能获取到！

<script>

//JS提供的文档就绪事件函数: 在浏览器加载完整个html后立即执行!

window.onload = function(){

//1.获取id为demo的h1元素

var oH1 = document.getElementById("test");

//2.获取h1元素的内容

alert( oH1.innerHTML );

}

</script>

<body>

<h1 id="test">演示文档就绪事件函数....</h1>

</body>

或者通过jQuery提供的文档就绪事件函数:



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

<script>

//jQuery提供的文档就绪事件函数：在浏览器加载完整个html后立即执行

$(function(){

//1.获取id为demo的h1元素

var oH1 = document.getElementById("test");

//2.获取h1元素的内容

alert( oH1.innerHTML );

});

</script>

<body>

<h1 id="test">演示文档就绪事件函数....</h1>

</body>

总结：什么时候该使用文档就绪事件函数？

如果在获取元素时，获取元素的代码执行的时机（时间）比元素本身加载的时间还要早，如果元素还没有加载到就获取，必然是获取不到的！

将获取元素的代码放在文档就绪事件函数中，等浏览器加载完整个网页后，文档就绪事件函数才会执行，此时所有的元素都被加载过了，再获取任何元素都能获取到！

jQuery提供的文档就绪事件函数（简写形式）：

<script>

//jQuery提供的文档就绪事件函数：

$(function(){

//在浏览器加载完整个html后立即执行

});

</script>

其完整写法为：

<script>

//jQuery提供的文档就绪事件函数：

$(document).ready(function(){

//在浏览器加载完整个html后立即执行

});

</script>

JS也为我们提供了文档就绪事件函数，其写法为：

<script>

//JS提供的文档就绪事件函数:

window.onload = function(){

//在浏览器加载完整个html后立即执行!

}

</script>

二、jQuery选择器(重点掌握)

2.1 通过以下例子来学习：

2.1.1 准备工作

打开Eclipse软件，创建一个静态的Web工程，并将以下代码及内容写入到自己新建的HTML文件里，在工程里再创建一个文件夹，放入要引入的JQuery函数库。

<!DOCTYPE>
<html>
<head>
<meta charset="utf-8"/>
<title>选择器练习</title>
<style type="text/css">
	body{ font-family:"微软雅黑"; font-size:20px;padding-bottom:300px;}
	input{font-size:18px;margin-top:10px;}
	div,span{width:300px;border:1px solid #000;padding-left:10px;background:#bed4ef;;}
	span{display:block;}
	body>div,body>span{height:100px;margin:10px 0px 0px 20px;display:inline-block;vertical-align:middle;}
	#one{width:300px;height:185px;}
	div>span,div>div{width:250px;height:35px;margin:10px;}
</style>

<!-- 引入jquery函数库文件 -->
<script src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
	/* 文档就绪事件函数(即在浏览器加载完最后一个html元素后立即执行) */
	$(function() {
		/* -------一、基本选择器练习------- */
		/* 1、选中id为b1的按钮,为b1按钮绑定点击事件，点击b1按钮：改变所有 div 元素的背景色为 #FD5551 */
		
		/* 2、选中id为b2的按钮,为b2按钮绑定点击事件，点击b2按钮：改变 id 为 one 的元素的背景色为 #91BF2F */

		/* 3、选中id为b3的按钮,为b3按钮绑定点击事件，点击b3按钮：
		改变 class 为 mini 的所有元素的背景色为 #EE82EE */

		/* ---------二、层级选择器------- */
		/* 4、选中id为b4的按钮,为b4按钮绑定点击事件，点击b4按钮：改变 div 内所有 span 的背景色为 #DC21D2 */
		
		/* 5、选中id为b5的按钮,为b5按钮绑定点击事件，点击b5按钮：改变 id为two 元素的下一个相邻的 div元素 的背景色为 #2CADAA */

		/* 6、选中id为b6的按钮,为b6按钮绑定点击事件，点击b6按钮：改变 id为two 元素的后面所有的div兄弟元素 的背景色为 #ECD822 */

		/* 7、选中id为b7的按钮,为b7按钮绑定点击事件，点击b7按钮：改变 id为two 元素的前、后所有的div兄弟元素 的背景色为 #EE0077 */
		
		/* ---------三、基本过滤选择器------- */
		/* 8、选中id为b8的按钮,为b8按钮绑定点击事件，点击b8按钮：改变第一个以及最后一个 div 元素的背景色为 #0074E8 */
		
		/* 9、选中id为b9的按钮,为b9按钮绑定点击事件，点击b9按钮：改变第4个 div 元素的背景色为 #D917C6 */
		
	});
</script>
</head>

<body>
	基本选择器→：
	<!-- 按钮,id为b1 -->
	<input type="button" id="b1" value="b1,改变所有 div 元素的背景色为 #FA8072" />
	<!-- 按钮,id为b2 -->
	<input type="button" id="b2" value="b2,改变 id 为 one 的元素的背景色为 #9ACD32"/>
	<!-- 按钮,id为b3 -->
	<input type="button" id="b3" value="b3,改变 class 为 mini 的所有元素的背景色为 #EE82EE"/>
	<hr/>
	层级选择器→：
	<!-- 按钮,id为b4 -->
	<input type="button" id="b4" value="b4,改变 div 内所有 span 的背景色为 #7CFC00"/>
	<!-- 按钮,id为b5 -->
	<input type="button" id="b5" value="b5,改变 id为two 元素的下一个相邻的 div元素 的背景色为 #48D1CC"/>
	<!-- 按钮,id为b6 -->
	<input type="button" id="b6" value="b6,改变 id为two 元素的后面所有的div兄弟元素 的背景色为 #D2FA7E"/>
	<!-- 按钮,id为b7 -->
	<input type="button" id="b7" value="b7,改变 id为two 元素的前、后所有的div兄弟元素 的背景色为 #FF69B4"/>
	<hr/>
	基本过滤选择器→：
	<!-- 按钮,id为b8 -->
	<input type="button" id="b8" value="b8,改变第一个/最后一个 div 元素的背景色为 #1E90FF"/>
	<!-- 按钮,id为b9 -->
	<input type="button" id="b9" value="b9,改变第4个 div 元素的背景色为 #EA3AD8"/>

	<h3>点击按钮查看效果...</h3>

	<div id="one">
		这是一个div1
		<div class="one01">这是一个div11</div>
		<span class="mini">这是一个span,class为mini</span>
		<span class="mini">这是一个span,class为mini</span>
	</div>
	<div>这是一个div2
		<input type="button" value="按钮1"/>
		<input type="button" value="按钮2"/>
	</div>
	<div id="two">这是一个div3,id是two
		<span>这是一个span</span>
	</div>
	<div>这是一个div4</div>
	<div>这是一个div5</div>
	<span class="mini">这是一个span,class为mini</span>
	<div>这是一个div6</div>
	<span class="mini01">这是一个span,class为mini01</span>
	<span class="mini">这是一个span,class为mini</span>

</body>
</html>

2.1.2 效果为：

2.1.3 提疑：为什么代码要放在文档就绪事件函数里面？

解释：如果放在文档就绪事件函数外面的话，可能会造成里面的内容获取不到，因为浏览器获取元素是自上而下获取的，放在外面的话会跳过里面的内容。

（1）试验：将代码放在文档准备就绪的外面

用JQuery的元素名选择器分别尝试：

$("div")------选中当前网页中的所有div

$("input")------选中当前网页中的所有input

/*如果这种方式能获取到div的话，那么它的返回值是一个JQuery对象，这个对象也是一个集合，这个集合是有长度的，而集合的长度是由集合里面的元素个数决定的*/

$("div").length-------获取集合的长度

$("input").length-------获取集合的长度

/*用弹窗的方式来查看有没有获取到长度*/

alert($("div").length);

alert($("input").length);

/*此时会发现，弹出的窗口上显示的长度为零，说明没有获取到长度,要想获取到它的长度，就要把弹窗的代码放入文档准备就绪事件的里面*/

（2）练习

----------------------------------------------一、基本选择器练习--------------------------------------------------

要求 1：选中id为b1的按钮,为b1按钮绑定点击事件，点击b1按钮：改变所有 div 元素的背景色为 #FD5551。（元素名选择器）

$("#b1").click(function(){
$("div").css("background"," #FD5551");
});

要求 2：选中id为b2的按钮,为b2按钮绑定点击事件，点击b2按钮：改变 id 为 one 的元素的背景色为 #91BF2F。（id选择器）

$("#b2").click(function(){
$("#one").css("background-color","#91BF2F");
});

要求3：选中id为b3的按钮,为b3按钮绑定点击事件，点击b3按钮：改变 class 为 mini 的所有元素的背景色为 #EE82EE 。（class选择器）

$("#b3").click(function(){
$(".mini").css("background-color","#EE82EE");
});

----------------------------------------------二、层级选择器练习--------------------------------------------------

要求4：选中id为b4的按钮,为b4按钮绑定点击事件，点击b4按钮：改变 div 内所有 span 的背景色为 #DC21D2 。

/*空格和逗号的区别：空格是表示包含关系，逗号是表示并列关系*/

$("#b4").click(function(){
$("div span").css("background-color","#DC21D2");
});

要求5：选中id为b5的按钮,为b5按钮绑定点击事件，点击b5按钮：改变 id为two 元素的一个相邻的 div元素的背景色为 #2CADAA 。

$("#b5").click(function(){
           $("#two").next().css("background-color","#2CADAA");//（后）下一个相邻
           $("#two").prev().css("background-color","yellow");//（前）上一个相邻
       });

要求6：选中id为b6的按钮,为b6按钮绑定点击事件，点击b6按钮：改变 id为two 元素的后面所有的div兄弟元素的背景色为 #ECD822 。

$("#b6").click(function(){
           $("#two").nextAll("div").css("background","#ECD822");
       });

/*如果要改变id为two 元素的后面所有的兄弟元素的背景色为 red

$("#b6").click(function(){
           $("#two").nextAll().css("background","#ECD822");
       });

*/

/*也可以选中id为b6的按钮,为b6按钮绑定点击事件，点击b6按钮：改变 id为two 元素的前面所有的div兄弟元素和所有的兄弟元素的背景cyan*/

$("#b6").click(function(){
           $("#two").prevAll("div").css("background","cyan");
       });

$("#b6").click(function(){
           $("#two").prevAll().css("background","cyan");
       });

要求7：选中id为b7的按钮,为b7按钮绑定点击事件，点击b7按钮：改变 id为two 元素的前、后所有的div兄弟元素的背景色为 #EE0077 。

/*用俩个代码表示：*/

$("#b7").click(function(){
           $("#two").nextAll("div").css("background","#EE0077");
           $("#two").prevAll("div").css("background","#EE0077");
       });

/*用一个代码表示：*/

$("#two").siblings("div").css("background","#EE0077");

----------------------------------------------三、基本过滤选择器--------------------------------------------------
要求8：选中id为b8的按钮,为b8按钮绑定点击事件，点击b8按钮：改变第一个以及最后一个 div 元素的背景色为 #0074E8 */

//获取所有div中的第一个div元素--四种方法
$("div:first").css("background","#0074E8");
$("div").first().css("background","#0074E8");
           $("div:eq(0)").css("background","#0074E8");//eq(0):下标从0开始
           $("div").eq(0).css("background","#0074E8");

//获取所有div中的最后一个div元素--四种方法
$("div:last").css("background","#0074E8");
$("div").last().css("background","#0074E8");
$("div:eq(-1)").css("background","#0074E8");//eq(-1):-1表示最后一个
           $("div").eq(-1).css("background","#0074E8");

要求9：选中id为b9的按钮,为b9按钮绑定点击事件，点击b9按钮：改变第4个 div 元素的背景色为 #D917C6 。

$("#b9").click(function(){
           $("div:eq(3)").css("background","#D917C6");//eq(0):下标从0开始
           //$("div").eq(3).css("background","#D917C6");
       });

补充：常用的三种按钮绑定事件：

第一种按钮绑定事件：用onclick绑定的按钮点击事件；

<input type="button" id="b1" οnclick="fn()" value="b1,改变所有 div 元素的背景色为 #FA8072" />

/*这种方式要在<script></script>里面，文档就绪事件外面要声明一个函数*/

function fn(){

alert("b1按钮被点击了~~~~~");

}

第二种按钮绑定事件：用js选中元素实现绑定事件

//在文档准备就绪事件函数里面添加：

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

b1.onclick = function(){

alert("b1按钮被点击了~~~~~");

}

第三种按钮绑定事件：用JQuery选择器实现绑定事件；

//在文档准备就绪事件函数里面添加：

$("#b1").click(functio(){

alert("b1按钮被点击了~~~~~");

});

2.1.4 JQuery选择器总结

一、基本选择器

$("div") -- 选中所有的div元素

$("span") -- 选中所有的span元素

$(".mini") -- 选中所有class值为mini的元素(class值为mini的元素可能是任何元素)

$("span.mini") -- 选中所有class值为mini的span元素

$("#one") -- 选中id为one的元素

$("div,span,.mini,#one") -- 选中所有的div元素，以及所有的span元素，以及所有class值为mini的元素，以及id为one元素

二、层级选择器

$("div span") -- 选中所有div元素内部的所有span元素

$("#one div") -- 选中id为one的元素内部的所有div元素

$("#two").next("div") -- 选中id为two的元素后面紧邻的div兄弟元素

$("#two").prev("div") -- 选中id为two的元素前面紧邻的div兄弟元素

$("#two").nextAll() -- 选中id为two的元素后面所有的兄弟元素

$("#two").nextAll("span") -- 选中id为two的元素后面所有的span兄弟元素

$("#two").prevAll() -- 选中id为two的元素前面所有的兄弟元素

$("#two").prevAll("span") -- 选中id为two的元素前面所有的span兄弟元素

$("#two").siblings() -- 选中id为two的元素前、后所有的兄弟元素

$("#two").siblings("div") -- 选中id为two的元素前、后所有的div兄弟元素

三、基本过滤选择器

(1)选中第一个div元素

$("div:first")

$("div:eq(0)")

$("div").eq(0)

(2)选中最后一个div元素

$("div:last")

$("div:eq(-1)")

$("div").eq(-1)

(3)选中第n+1个div元素(n从零开始)

$("div:eq(n)")

$("div").eq(n)

三、综合案例

3.1 创建表格元素

练习3.1.1：创建单行单列的表格

/** 练习1：创建单行单列的表格 */

function createTable1(){

//创建一个table元素

var $tab = $("<table></table>");

//创建一个tr元素

var $tr = $("<tr></tr>");

//创建一个td元素,并给td添加内容

var $td = $("<td></td>");

$td.html( "我是TD元素!" );

/*或者可以用var $td = $("<td>我是TD元素!</td>"); */

//将td元素添加到tr中

$tr.append( $td );

//将tr元素添加到table中

$tab.append( $tr );

//将table添加到body内部

$("body").append( $tab );

/*以上代码也可以一行代码搞定：

$("body").append("<table><tr><td>我是TD元素~~</td></tr></table>");*/

}

练习3.1.2：创建单行6列的表格

/** 练习3.1.2：创建单行6列的表格 */

function createTable2(){

//创建一个table元素

var $tab = $("<table></table>");

//创建一个tr元素

var $tr = $("<tr></tr>");

for(var i=0;i<6;i++){ //内层循环控制列数

//创建一个td元素,并给td添加内容

var $td = $("<td></td>");

$td.html( "我是TD元素!" );

//将td元素添加到tr中

$tr.append( $td );

}

//将tr元素添加到table中

$tab.append( $tr );

//将table添加到body内部

$("body").append( $tab );

}

练习3.1.3：创建5行6列的表格

/** 练习3.1.3：创建5行6列的表格 */

function createTable2(){

//创建一个table元素

var $tab = $("<table></table>");

for(var j=0;j<5;j++){ //外层循环控制行数

//创建一个tr元素

var $tr = $("<tr></tr>");

for(var i=0;i<6;i++){ //内层循环控制列数

//创建一个td元素,并给td添加内容

var $td = $("<td></td>");

$td.html( "我是TD元素!" );

//将td元素添加到tr中

$tr.append( $td );

}

//将tr元素添加到table中

$tab.append( $tr );

}

//将table添加到body内部

$("body").append( $tab );

}

练习3.1.4：创建指定行和列的表格

/** 练习3.1.4：创建指定行和列的表格 */

function createTable3(){

//获取用户输入的行数和列数

//var rows = document.getElementById("rows").value（）;--js方法

var rows = $("#rows").val();

var cols = $("#cols").val();

//创建一个table元素

var $tab = $("<table></table>");

for(var j=0;j<rows;j++){ //外层循环控制行数

//创建一个tr元素

var $tr = $("<tr></tr>");

for(var i=0;i<cols;i++){ //内层循环控制列数

//创建一个td元素,并给td添加内容

var $td = $("<td></td>");

$td.html( "我是TD元素!" );

//将td元素添加到tr中

$tr.append( $td );

}

//将tr元素添加到table中

$tab.append( $tr );

}

//将table添加到body内部

$("body").append( $tab );

}

完整代码如下：

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<title>创建表格</title>

<style type="text/css">
	/* 为表格定义CSS样式 */
	body{padding-left:15px;font-size:20px;}
	table{ border:1px solid #0099FF; width:70%; border-collapse:collapse; }
	table td{ border:#0099FF 1px solid; padding:10px 20px 3px 1px; }
	input[type='text']{width:150px;height:20px;vertical-align:text-bottom;text-indent:5px;font-size:20px;}
	input[type='button']{font-size:20px;}
</style>

<!-- 引入jquery函数库文件 -->
<script src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
	/** 练习1：创建单行单列的表格 */
	function createTable1(){
		//创建table元素
		var $table = $("<table></table>");
		//创建tr元素
		var $tr = $("<tr></tr>");
		//创建td元素并为td添加内容
		var $td = $("<td>Hello,我是td</td>");/*或者可以用var $td = $("<td></td>");$td.html("Hello,我是") */
		//将td添加到tr上
		$tr.append($td);	
		//将tr添加到table上
		$table.append($tr);
		//将创建的整个table添加到body内部
		$("body").append($table);
		$("body").append("<hr/>");
	}

	/** 练习2：创建5行6列的表格 */
	function createTable2(){
		//创建table元素
		var $table = $("<table></table>");
		for(var r=0;r<5;r++){//循环5次,table中添加5个tr
			//创建tr元素
			var $tr = $("<tr></tr>");
			for(var c=0;c<6;c++){//循环6次,tr中添加6个td
				//创建td元素并为td添加内容
				var $td = $("<td>Hello,我是td</td>");
				//将td添加到tr上
				$tr.append($td);	
			}
			//将tr添加到table上
			$table.append($tr);
		}
		//将创建的整个table添加到body内部
		$("body").append($table);
		$("body").append("<hr/>");
	}

	/** 练习3：创建指定行和列的表格 */
	function createTable3(){
		var rows = $("#rows").val();//获取指定的行数
		var cols = $("#cols").val();//获取指定的列数
		//创建table元素
		var $table = $("<table></table>");
		for(var r=0;r<rows;r++){//循环5次,table中添加5个tr
			//创建tr元素
			var $tr = $("<tr></tr>");
			for(var c=0;c<cols;c++){//循环6次,tr中添加6个td
				//创建td元素并为td添加内容
				var $td = $("<td>Hello,我是td</td>");
				//将td添加到tr上
				$tr.append($td);	
			}
			//将tr添加到table上
			$table.append($tr);
		}
		//将创建的整个table添加到body内部
		$("body").append($table);
		$("body").append("<hr/>");
	}
</script>
</head>
<body>
	<!-- 练习1：点击下列按钮创建单行单列表格 -->
	<input type="button" value="创建单行单列表格" onclick="createTable1()" /><br/><br/>

	<!-- 练习2：点击下列按钮创建5行6列表格 -->
	<input type="button" value="创建表格(5行6列)" onclick="createTable2()" /><br/><br/>

	<!-- 练习3：点击下列按钮创建指定行、指定列的表格 -->
	<input type="button" value="创建表格（输入行数和列数）" onclick="createTable3()" /><br/>
	行数：<input type="text" id="rows"/><br/>
	列数：<input type="text" id="cols"/><br/><br/>

	<!-- 将创建的表格添加到body内部(追加到最后) --><hr/>
	
	
	
</body>
</html>

3.2 仿QQ好友列表

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>仿QQ好友列表</title>
		<style type="text/css">
			table{
				/* 给表格设置边框 */
				border: #09f solid 2px;
				/* 设置表格的宽度 */
				width: 100px;
				/* 设置表格与内容的间距 */
				border-collapse: collapse;
				/* 设置表格的外边距 */
				margin:20px 20px;
			}
			table td{
				/* 给表格的单元格设置边框 */
				border:#06f 2px solid;
				/* 给单元格设置背景颜色 */
				background-color:#6f5f3e;
				/* 设置单元格里的文本格式为居中 */
				text-align:center;
				/* 设置单元格的边框与文字间的内边距 */
				padding:5px 0;
			}
			table td span{
				/* 设置span标签的里的字体颜色，字体大小 */
				color:#fff;
				font-size:19px;
				width:100%;
				border:none;
				display:block;
				cursor:pointer;
			}
			table td div{
				background-color:#ff9;
				text-align:left;
				line-height:28px;
				padding-left:14px;
				text-indent:padding-left:20px;
			}
			table td span:hover{
				color:#0c0;
			}
			
		</style>
		<!-- 引入JQuery的JS库 -->
		<script src="js/jquery-1.8.3.min.js"></script>
		<script type="text/javascript">
			/* 一、通过JavaScript实现 
			//声明一个函数用来获取所需对象
			function openDiv(thisobj){
				//1.获取当前分组内好友列表div
				var oDiv = thisobj.parentNode.getElementsByTagName("div")[0];
				//2.判断当前分组是关闭的还是展开的
				if(oDiv.style.display == "block"){
					//3.如果当前div是打开的，只需要关闭div即可
					oDiv.style.display == "none";
				}else{
					//4.如果当前div是关闭的，先关闭其他分组的div，再打开当前的div
					//(1)获取所有分组内的div，依次遍历关闭分组
					var aDiv = document.getElementsByTagName("div");
					for(var i = 0;i < aDiv.length;i++){
						aDiv[i].style.display = "none";
					}
					//(2)再打开当前分组
					oDiv.style.display = "block";
				}
			}
			*/
			/* 二、通过JQuery实现 */
			function openDiv(thisobj){//this是js对象
			//1单独的将元素设置为显示
				//$(thisobj).next("div").css("display","block");
			//2如果要根据被点击的分组（span）找到并切换分组内div元素的显示状态：
			//$(thisobj).next("div").toggle();//toggle()元素点击后可展开可关闭
			//3设置点击后至多有一个元素是展开的
			//(1)先将其他三组设置为隐藏然后再显示点击的那个元素----第一种写法
			$("table span").not(thisobj).next("div").css("display","none");
			$(thisobj).next("div").toggle();
			//（2）第二种写法：
			//$("table span").not(thisobj).next("div").hide();//hide()隐藏，show()显示
			//$(thisobj).next("div").toggle(2000);//toggle()元素也可以设置按时间显示，单位是ms
			//(3)第三种写法:
			//$("table span").not(thisobj).next("div").slideup(100);//slideup()收缩，slidedown()伸展
			//$(thisobj).next("div").slideToggle(100);
			}
		</script>
	</head>
	<body>
		<table>
			<!-- 第一行 -->
			<tr>
				<td>
					<!-- this表示当前包裹它的这个元素 span-->
					<span onclick="openDiv(this)">四大名著</span>
					<div style="display: none;">
						西游记<br/>
						红楼梦<br/>
						水浒传<br/>
						三国演义<br/>
					</div>
				</td>
			</tr>
			<!-- 第二行 -->
			<tr>
				<td>
					<span onclick="openDiv(this)">王者英雄</span>
					<div style="display: none;">
						鲁班七号<br />
						亚瑟<br />
						妲己<br />
						貂蝉<br />
					</div>
				</td>
			</tr>
			<!-- 第三行 -->
			<tr>
				<td>
					<span onclick="openDiv(this)">古代圣贤</span>
					<div style="display: none;">
						孔子<br />
						墨子<br />
						庄子<br />
						孟子<br />
					</div>
				</td>
			</tr>
			<!-- 第四行 -->
			<tr>
				<td>
					<span onclick="openDiv(this)">古代诗人</span>
					<div style="display: none;">
						李白<br />
						杜甫<br />
						屈原<br />
						苏轼<br />
					</div>
				</td>
			</tr>
		</table>
		
	</body>
</html>

3.3 模拟学生信息管理系统

1、添加一个新学员

/* 1.添加一个新学员 */
           function addEmp(){
               /*(1)获取要添加的学生信息（id,name,phone,email）,
               先保证可以添加上去（（1）和（2）），再考虑细节（（3））*/
               var id = $("#box1 input[name='id']").val().trim();//获取用户输入的id
               var name = $("#box1 input[name='name']").val().trim();//获取用户输入的name
               var phone = $("#box1 input[name='phone']").val().trim();//获取用户输入的phone
               var email = $("#box1 input[name='email']").val().trim();//获取用户输入的email
               //val()获取信息，trim（）是JQuery提供的删除内容俩边的空格
               //(3)数据校验
               //（3.1）校验添加的学生信息是否为空
               if(id == "" || name == "" || phone == "" || email == ""){
                   alert("添加的学生信息不能为空！");
                   return;//如果为空就终止程序往下运行
               }
               //（3.2）校验添加的学生信息id是否已经存在（是否重复）
               //(3.2.2)假设id不存在
               var flag = false;
               //(3.2.1)获取所有的tr行，并遍历每一个<tr>
               $("table tr").each(function(){//each函数是JQuery提供的遍历函数
                   var _id = $(this).find("td").eq(1).text();//当前行的id
                   //find()元素找内部元素，parent()元素找祖先元素;
                   //text()只能获取文本，html()可以获取全部元素内容
                   //用户输入的id和当前行中的id进行比较
                   if(id == _id){//只要有一个相等，就说明id已经存在，就停止添加
                       alert("你输入的id已经存在，请重新输入！");
                       //return;
                       /*return只能放在if，for等遍历函数里面，
                       不能放在each函数中，否则不能终止程序*/
                       flag = true;
                   }
               });
               if(flag){//当flag==true时，表示id已存在
                   return;//终止程序往下运行
               }

               //(2)将学生信息添加到页面上的table中
               //创建一个tr元素
               var $tr = $("<tr></tr>");
               //创建5个td元素
               var $td1 = $("<td><input type='checkbox'/></td>");
               var $td2 = $("<td>"+id+"</td>");
               var $td3 = $("<td>"+name+"</td>");
               var $td4 = $("<td>"+phone+"</td>");
               var $td5 = $("<td>"+email+"</td>");
               //将td添加到tr元素内部
               /*第一种写法：
               $tr.append($td1);
               $tr.append($td2);
               $tr.append($td3);
               $tr.append($td4);
               $tr.append($td5);*/
               //第二种写法：
               $tr.append($td1).append($td2).append($td3).append($td4).append($td5);
               //将tr添加到table元素内部
               $("table").append($tr);
           }

2、点击全选设置 学生所在的行全选或者全不选

/* 2.点击全选或取消全选设置 */
           function checkAll(){
               //1.获取全选框元素，并获取全选框当前的状态（选中或者取消选中俩种状态）
               var isCheck = $("#all").prop("checked");//这个值就只有true和false
               //2.将全选框的选中状态设置给其他普通复选框
               $("input[type='checkbox'][id !='all']").prop("checked",isCheck);
           }

3、删除选中的学生

//1.获取所有被选中的复选框所在的tr行
               //$("input[type='checkbox']:checked").parents("tr").remove();
               /* 这里的checked选中的有三个值：checked、radio、option;
               这里用remove()函数将会把表头都会删除*/
               $("input[type='checkbox']:checked").parent("td").parent("tr").remove();
           }

4、修改指定id的学生

/* 4.修改指定学号的学生 */
           function updEmp(){
               //1.获取修改后的学生信息
               var id = $("#box2 input[name='id']").val().trim();
               var name = $("#box2 input[name='name']").val().trim();
               var phone = $("#box2 input[name='phone']").val().trim();
               var email = $("#box2 input[name='email']").val().trim();

               //2.数据校验
               //2.1修改后的学生信息不能为空
               if(id == "" || name == "" || phone == "" || email == ""){
                   alert("修改后的员工信息不能为空！！！");
                   return;
               }
               //2.2要修改的学生id必须是存在的
               var flag = false;//假设id不存在
               //获取所有行的tr行并遍历每一个tr元素
               $("table tr").each(function(){
                   var _id = $(this).find("td").eq(1).text();//获取当前行中的id值
               //用户输入的id和当前行中的id进行比较
                   if(id == _id){
                       //3.根据id修改学生信息（只需要修改name,phone,email）
                       $(this).find("td").eq(2).text(name);
                       $(this).find("td").eq(3).text(phone);
                       $(this).find("td").eq(4).text(email);
                       flag = true;//id是存在的
               }
           });
           if(!flag){//flag=false ,!flag=true
               alert("修改失败，你输入的id不存在,请重新输入。")
           }
       }

5.完整代码和说明

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>模拟学生信息管理系统</title>
		<style type="text/css">
			body{
				font-family: "微软雅黑";
			}
			h2,h4{
				text-align:center;
			}
			#box1,#box2{
				text-align: center;
			}
			hr{
				margin: 20px 0;
			}
			table{
				margin: 0 auto;
				width: 70%;
				text-align: center;
				/* 设置外边框和单元格边框合并 */
				border-collapse: collapse;
			}
			tr,th{
				padding: 7px;
				width: 20%;
			}
			th{
				background-color: #d9b7b7;
			}
			input[type='text']{
				width: 130px;
			}
		</style>
		<script src="js/jquery-1.8.3.min.js"></script>
		<script type="text/javascript">
			/* 1.添加一个新学生 */
			function addEmp(){
				/*(1)获取要添加的学生信息（id,name,phone,email）,
				先保证可以添加上去（（1）和（2）），再考虑细节（（3））*/
				var id = $("#box1 input[name='id']").val().trim();//获取用户输入的id
				var name = $("#box1 input[name='name']").val().trim();//获取用户输入的name
				var phone = $("#box1 input[name='phone']").val().trim();//获取用户输入的phone
				var email = $("#box1 input[name='email']").val().trim();//获取用户输入的email
				//val()获取信息，trim（）是JQuery提供的删除内容俩边的空格
				//(3)数据校验
				//（3.1）校验添加的学生信息是否为空
				if(id == "" || name == "" || phone == "" || email == ""){
					alert("添加的学生信息不能为空！");
					return;//如果为空就终止程序往下运行
				}
				//（3.2）校验添加的学生信息id是否已经存在（是否重复）
				//(3.2.2)假设id不存在
				var flag = false;
				//(3.2.1)获取所有的tr行，并遍历每一个<tr>
				$("table tr").each(function(){//each函数是JQuery提供的遍历函数
					var _id = $(this).find("td").eq(1).text();//当前行的id
					//find()元素找内部元素，parent()元素找祖先元素;
					//text()只能获取文本，html()可以获取全部元素内容
					//用户输入的id和当前行中的id进行比较
					if(id == _id){//只要有一个相等，就说明id已经存在，就停止添加
						alert("你输入的id已经存在，请重新输入！");
						//return;
						/*return只能放在if，for等遍历函数里面，
						不能放在each函数中，否则不能终止程序*/
						flag = true;
					}
				});
				if(flag){//当flag==true时，表示id已存在
					return;//终止程序往下运行
				}
				
				//(2)将学生信息添加到页面上的table中
				//创建一个tr元素
				var $tr = $("<tr></tr>");
				//创建5个td元素
				var $td1 = $("<td><input type='checkbox'/></td>");
				var $td2 = $("<td>"+id+"</td>");
				var $td3 = $("<td>"+name+"</td>");
				var $td4 = $("<td>"+phone+"</td>");
				var $td5 = $("<td>"+email+"</td>");
				//将td添加到tr元素内部
				/*第一种写法：
				$tr.append($td1);
				$tr.append($td2);
				$tr.append($td3);
				$tr.append($td4);
				$tr.append($td5);*/
				//第二种写法：
				$tr.append($td1).append($td2).append($td3).append($td4).append($td5);
				//将tr添加到table元素内部
				$("table").append($tr);
			}
			/* 2.点击全选或取消全选设置 */
			function checkAll(){
				//1.获取全选框元素，并获取全选框当前的状态（选中或者取消选中俩种状态）
				var isCheck = $("#all").prop("checked");//这个值就只有true和false
				//2.将全选框的选中状态设置给其他普通复选框
				$("input[type='checkbox'][id !='all']").prop("checked",isCheck);
			}
			/* 3.删除选中的学生 */
			function delEmp(){
				//1.获取所有被选中的复选框所在的tr行
				//$("input[type='checkbox']:checked").parents("tr").remove();
				/* 这里的checked选中的有三个值：checked、radio、option;
				 这里用remove()函数将会把表头都会删除*/
				$("input[type='checkbox']:checked").parent("td").parent("tr").remove();
			}
			/* 4.修改指定学号的学生 */
			function updEmp(){
				//1.获取修改后的学生信息
				var id = $("#box2 input[name='id']").val().trim();
				var name = $("#box2 input[name='name']").val().trim();
				var phone = $("#box2 input[name='phone']").val().trim();
				var email = $("#box2 input[name='email']").val().trim();
				
				//2.数据校验
				//2.1修改后的学生信息不能为空
				if(id == "" || name == "" || phone == "" || email == ""){
					alert("修改后的员工信息不能为空！！！");
					return;
				}
				//2.2要修改的学生id必须是存在的
				var flag = false;//假设id不存在
				//获取所有行的tr行并遍历每一个tr元素
				$("table tr").each(function(){
					var _id = $(this).find("td").eq(1).text();//获取当前行中的id值
				//用户输入的id和当前行中的id进行比较
					if(id == _id){
						//3.根据id修改学生信息（只需要修改name,phone,email）
						$(this).find("td").eq(2).text(name);
						$(this).find("td").eq(3).text(phone);
						$(this).find("td").eq(4).text(email);
						flag = true;//id是存在的
				}
			});
			if(!flag){//flag=false ,!flag=true
				alert("修改失败，你输入的id不存在,请重新输入。")
			}
		}	
		</script>
	</head>
	<body>
		
		<h2>学生信息管理系统</h2>
		<div id="box1">
		学号：<input type="text" name="id"/>
		姓名：<input type="text" name="name"/>
		联系方式：<input type="text" name="phone"/>
		邮箱：<input type="text" name="email"/>
		<input type="button" onclick="addEmp()" id="add" value="添加一个新学生"/>
		</div>
		<hr />
		<table border="2">
			<!-- 标题行 -->
			<tr>
				<th>
					<!-- 全选复选框 -->
					<input type="checkbox" onclick="checkAll()" id="all"/>
					<!-- checked属性里面有js对象的一个默认checked="checked"的值-->
				</th>
				<th>学号</th>
				<th>姓名</th>
				<th>联系方式</th>
				<th>邮箱</th>
			</tr>
			<!-- 第一行 -->
			<tr>
				<td>
					<input type="checkbox"/>
				</td>
				<td>01</td>
				<td>鲁班七号</td>
				<td>110</td>
				<td>lbqh@qq.com</td>
			</tr>
			<!-- 第二行 -->
			<tr>
				<td>
					<input type="checkbox"/>
				</td>
				<td>02</td>
				<td>亚瑟</td>
				<td>120</td>
				<td>ys@qq.com</td>
			</tr>
			<!-- 第三行 -->
			<tr>
				<td>
					<input type="checkbox"/>
				</td>
				<td>03</td>
				<td>妲己</td>
				<td>1314</td>
				<td>dj@qq.com</td>
			</tr>
			<!-- 第四行 -->
			<tr>
				<td>
					<input type="checkbox"/>
				</td>
				<td>04</td>
				<td>貂蝉</td>
				<td>520</td>
				<td>dc@qq.com</td>
			</tr>
		</table>
		<!--a href="javascript:void(0)"可以阻止超链接跳转  -->
		<h4><a href="javascript:void(0)" onclick="delEmp()" id="del">删除选中的学生信息</a></h4>
		<hr />
		<div id="box2">
			学号：<input type="text" name="id"/>
			姓名：<input type="text" name="name"/>
			联系方式：<input type="text" name="phone"/>
			邮箱：<input type="text" name="email"/>
			<input type="button" onclick="updEmp()" id="upd" value="根据学号修改学生信息"/>
		</div>
	</body>
</html>

效果图：

四、jQuery事件绑定

以点击事件为例，为元素绑定点击事件的方式为:

方式1(js版)：

<script>

function fn(){

alert("input按钮被点击了...");

}

</script>

<body>

<input onclick="fn()" type="button" value="点我~!" />

</body>

方式2(js版)：

<script>

window.onload = function(){

//获取id为btn的元素

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

btn.onclick = function(){

alert("input按钮被点击了...");

}

}

</script>

</head>

<body>

<input id="btn" type="button" value="点我~!" />

</body>

方式3(jQuery版)：

<script>

$(function(){

//当点击btn按钮时,触发点击事件执行其中的函数

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

alert("input按钮被点击了...");

});

});

</script>

<body>

<input id="btn" type="button" value="点我~!" />

</body>

两条咸鱼儿

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
个人JQuery学习

一、jQuery简介1.1什么是jQuery？jQuery是一门轻量的、免费开源的JS函数库，主要作用是用于简化JS代码。轻量的：代码或项目对该技术的依赖程度，依赖程度越低，这个技术越轻，反之，依赖程度越高，这个技术越重。推荐使用轻量级的技术框架jQuery的核心思想：“写的更少，但做的更多”，它是一个对于JS的框架。1.2jQuery的优势(1)可以极大的简化JS代码，例如：JS获取元素：var d = document.g...
复制链接

扫一扫