文档章节

第86节:Java中的JQuery基础

达叔小生
 达叔小生
发布于 02/11 14:14
字数 2400
阅读 0
收藏 0

标题图

第86节:Java中的JQuery

前言复习

定时器:

setInterval clearInterval
setTimeout clearTimeout

显示:

img.style.display = "block"

隐藏:

img.style.display = "none"

获取行

table.rows[]

DOM:

document.createElement
document.createTextNode
appendChild

什么是JQuery,有什么用?

jquery是一种快速,小巧,功能丰富的JavaScript库,可以让html文档遍历和操作,事件处理,动画和ajax更加容易使用的一种api,可以在多种浏览器中工作。

封装了JavaScript常用的功能代码,提供了一种简便的JavaScript设计模式,优化了HTML文档操作,事件处理,动画设计和ajax交互。

简单来说jquery是一个JavaScript库,简化了JavaScript的编程,很容易学习。

事件,ready(fn)

当dom载入就绪就可以查询及操纵时绑定的一个要执行的函数,这是事件模块中最重要的一个函数,因为它可以提高web应用程序的响应速度。

jquery代码:

$().ready(function(){

});
// 导包,引入JQ的文件
<script type="text/javascript" src="../../js/jquery-1.11.0.js" ></script>
/*文档加载完成的事件*/
jQuery(document).ready(function(){
 alert("jQuery(document).ready(function()");
});
// 最简单的写法 
$(function(){
 alert("$(function(){");
});

js和jq对象之间的转换

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="../../js/jquery-1.11.0.js" ></script>
		<script>
			function changeJS(){
				var div = document.getElementById("div1");
//				div.innerHTML = "JS"
				$(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对象成功";
				});
			});
			
			
		</script>
	</head>
	<body>
		<input type="button" value="JS" onclick="changeJS()" />
		<input type="button" value="JQ" id="btn2" />
		<div id="div1">
			这里的内容
		</div>
		<div id="div1">
			这里的内容
		</div>
	</body>
</html>

事件

click([[data],fn])

触发每一个匹配的click事件,这个函数会调用执行绑定到click事件的所有函数。

fn,在每个匹配元素的click世界中绑定的处理函数
[data],fn
$("p").click();
// 所有段落点击隐藏
$("p").click( function(){
 $(this).hide();
});

效果:

show([speed,[easing],[fn]])
[speed,[easing],[fn]]
speed,[easing],[fn]
speed,[easing],[fn]:
speed三种预定速度之一的字符串("slow","normal",or"fase")或表示动画时长的毫秒数值,fn: 在动画完成执行的函数,每个元素执行一次

// 显示段落
html代码:
<p style="display: none">hello</p>
jquery代码
$("p").show()

jquery库可以通过一行简单的代码添加到网页中,库包含html元素选取和操作,css操作,html事件函数,JavaScript特效和动画,html dom遍历和修改,ajax,utilities。

网页中添加jquery库

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

简单案例:

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
</script>
</head>

<body>
<p>dashucoding.</p>
<button type="button">Click me</button>
</body>
</html>
// Google 
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs
/jquery/1.4.0/jquery.min.js"></script>
</head>
// Microsoft 
<head>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery
/jquery-1.4.min.js"></script>
</head>

jquery语法:

jQuery hide() 函数
$(this).hide()隐藏当前的 HTML 元素

$(selector).action()
$(this).hide() - 隐藏当前元素

jquery函数

// 为了防止文档完全加载就绪之前运行的代码
$(document).ready(function(){
});

选择器

元素选择器

$("p.kk")
class="kk" 的 <p> 元素

属性选择器

$("[href]") 选取带有 href 属性的元素

$("[href='#']") 选取带有 href 值等于 "#" 的元素

$("[href!='#']") 选取带有 href 值不等于 "#" 的元素

$("[href$='.jpg']") 选取带有 href 值以 ".jpg" 结尾的元素

CSS 选择器

$("p").css("background-color","red");

例子:

$("#intro") id="intro" 的第一个元素 
$("ul li:first") 每个 <ul> 的第一个 <li> 元素 
$("[href$='.jpg']") 
所有带有以 ".jpg" 结尾的 href 属性的属性 

事件

jquery事件处理函数是jquery中和核心函数。

jquery案例:

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
  $("p").hide();
  });
});
</script>
</head>

<body>
<p>dashucoding</p>
<button type="button">Click me</button>
</body>

</html>
$("button").click(function() { ... } )
$("p").hide();

事件处理器:

$(document).ready(function() {...} )

独立的jquery文件:

<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="my_jquery_functions.js"></script>
</head>

如果存在名称冲突,需要重命名 jQuery 库

$(document).ready(function)
$(selector).click(function)
$(selector).dblclick(function)
$(selector).focus(function)
$(selector).mouseover(function)

slide panel 效果

<html>
<head>

<script type="text/javascript" src="../jquery/jquery.js" tppabs="http://www.w3school.com.cn/jquery/jquery.js"></script>
<script type="text/javascript"> 
$(document).ready(function(){
$(".flip").click(function(){
    $(".panel").slideToggle("slow");
  });
});
</script>
 
<style type="text/css"> 
div.panel,p.flip
{
margin:0px;
padding:5px;
text-align:center;
background:#e5eecc;
border:solid 1px #c3c3c3;
}
div.panel
{
height:120px;
display:none;
}
</style>
</head>
 
<body>
 
<div class="panel">
<p>dashucoding</p>
</div>
 
<p class="flip">Show</p>
 
</body>
</html>

jQuery fadeTo() 函数

<html>
<head>
<script type="text/javascript" src="../jquery/jquery.js" tppabs="http://www.w3school.com.cn/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
  $("div").fadeTo("slow",0.25);
  });
});
</script>
</head>

<body>
// 淡化
<div id="test" style="background:yellow;width:300px;height:300px">
<button type="button">Fade</button>
</div>

</body>

</html>

jQuery animate() 函数

<html>
<head>
<script type="text/javascript" src="../jquery/jquery.js" tppabs="http://www.w3school.com.cn/jquery/jquery.js"></script>
<script type="text/javascript"> 
$(document).ready(function(){
  $("#start").click(function(){
  $("#box").animate({height:300},"slow");
  $("#box").animate({width:300},"slow");
  $("#box").animate({height:100},"slow");
  $("#box").animate({width:100},"slow");
  });
});
</script> 
</head>
 
<body>

<p><a href="#" id="start">dashucoding</a></p>

<div id="box"
style="background:#98bf21;height:100px;width:100px;position:relative">
</div>
 
</body>
</html>

隐藏和显示

$("#hide").click(function(){
$("p").hide();
});

$("#show").click(function(){
$("p").show();
});

speed 参数

设置值:

"slow", "fast", "normal" 或 milliseconds
$("button").click(function(){
$("p").hide(1000);
});

隐藏显示的元素,显示隐藏的元素

$(selector).toggle(speed,callback)
<html>
<head>
<script type="text/javascript" src="../jquery/jquery.js" tppabs="http://www.w3school.com.cn/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
  $("p").toggle();
  });
});
</script>
</head>
<body>
<button type="button">Toggle</button>
<p>dashucoding</p>

</body>
</html>

滑动函数

$(selector).slideDown(speed,callback)

$(selector).slideUp(speed,callback)

$(selector).slideToggle(speed,callback)

speed 参数

值:"slow", "fast", "normal" 或 毫秒
$(".flip").click(function(){
$(".panel").slideDown();
});
$(".flip").click(function(){
$(".panel").slideUp()
})
$(".flip").click(function(){
$(".panel").slideToggle();
});

jQuery Fade 函数

$(selector).fadeIn(speed,callback)

$(selector).fadeOut(speed,callback)

$(selector).fadeTo(speed,opacity,callback)
$("button").click(function(){
$("div").fadeTo("slow",0.25);
});
$("button").click(function(){
$("div").fadeOut(4000);
});

jQuery 自定义动画

$(selector).animate({params},[duration],[easing],[callback])
animate({width:"70%",opacity:0.5,marginLeft:"0.6in",fontSize:"4em"});
<script type="text/javascript">
$(document).ready(function(){
$("#start").click(function(){
$("#box").animate({height:300},"slow");
$("#box").animate({width:300},"slow");
$("#box").animate({height:100},"slow");
$("#box").animate({width:100},"slow");
});
});
</script> 
<script type="text/javascript">
$(document).ready(function(){
$("#start").click(function(){
$("#box").animate({left:"100px"},"slow");
$("#box").animate({fontSize:"3em"},"slow");
});
});
</script> 
// 效果
$(selector).fadeIn() 
淡入被选元素 

$(selector).fadeOut() 
淡出被选元素 

$(selector).fadeTo() 
把被选元素淡出为给定的不透明度 

Callback 函数

$("button").click(function(){
$("p").hide(1000);
});
// "slow", "fast", "normal" 或毫秒

语法:

$(selector).hide(speed,callback)
$("p").hide(1000,function(){
alert("dashucoding");
});

HTML 操作

$(selector).html(content)
// 追加内容
$(selector).append(content)
// 内部预置(Prepend)内
$(selector).prepend(content)

// 元素之后插入 HTML 内容
$(selector).after(content)
$(selector).before(content)

CSS 函数

$(selector).css(name,value) 
$(selector).css({properties}) 
$(selector).css(name) 
$("p").css("background-color","yellow");
$("p").css({"background-color":"yellow","font-size":"200%"});
$(this).css("background-color");

$(selector).height(value) 
$(selector).width(value) 

<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("#id1").height("200px");
  });
});
</script>

$(selector).width(value)
$("#id200").width("300px");

<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
  $("#id2").width("300px");
  });
});
</script>

jQuery AJAX 函数

什么是 AJAX?

Asynchronous JavaScript and XML 一种快速创建动态网页的技术

AJAX 和 jQuery-HTTP GetHTTP Post

语法如下

$(selector).load(url,data,callback)
// $.ajax(options) 是低层级 AJAX 函数的语法
url 被加载的数据的 URL
data 发送到服务器的数据
callback 被加载时,所执行的函数
type 被返回的数据的类型
options 完整 AJAX 请求

小结

hide() 函数
fadeout() 函数
animate() 函数
$("button#demo").click()
$("button#demo").click(function(){$("img").hide()})

效果

效果

效果

效果

// jq查找元素
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="../../js/jquery-1.11.0.js" ></script>
		
		
		<script>
			//文档加载顺序
			$(function(){
				$("#div1").html("李四");
				
//				div1.innerHTML = "王五"; 
			});
//			alert($("#div1"));
			
		</script>
	</head>
	<body>
		<div id="div1">dashucoding</div>
	</body>
</html>

表单选择器

效果

层级选择器

后代选择器:  选择器1 选择器2
子元素选择器:   选择器1 > 选择器2
相邻兄弟选择器 :  选择器1 + 选择器2

效果

效果

效果

定时弹出广告

<img src="../img/555.jpg" id="img1" width="100%" style="display:none"  />

function showAd(){
 $("#img1").slideDown(2000);
 setTimeout("hideAd()",3000);
}

function hideAd(){
 $("#img1").slideUp(2000);
}

$(function(){
  setTimeout("showAd()",3000);
});

表格隔行换色

效果

$(function(){
 $("#checkAll").click(function(){
  $("input").prop("checked",this.checked);
 });
});

省市联动

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="../js/jquery-1.11.0.js" ></script>
		<script>
			var provinces = [
				["深圳市","东莞市","惠州市","广州市"],
				["长沙市","岳阳市","株洲市","湘潭市"],
				["厦门市","福州市","漳州市","泉州市"]
			];
			
			$(function(){
				$("#province").change(function(){
					//得到城市信息
					var cities = provinces[this.value];
					$("#city").empty();  
					//采用JQ的方式清空
					//遍历城市数据
					$(cities).each(function(i,n){
						$("#city").append("<option>"+n+"</option>");
					});
				});
			});
			
		</script>
	</head>
	<body>
		<!--选择省份-->
		<select id="province">
			<option value="-1">--请选择--</option>
			<option value="0">广东省</option>
			<option value="1">湖南省</option>
			<option value="2">福建省</option>
		</select>
		<!--选择城市-->
		<select id="city">
			
		</select>
	</body>
</html>

动画效果

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="../../js/jquery-1.11.0.js" ></script>
		
		<script>
			$(function(){
				$("#btn1").click(function(){
//					$("#img1").show();
//					$("#img1").slideDown();
//					$("#img1").fadeIn(5000);
					$("#img1").animate({ width:"800px",opacity:"1"},5000);
					
				});
				
				//隐藏页面图片
				$("#btn2").click(function(){
					//获得img
//					$("#img1").hide(10000);
//					$("#img1").slideUp(500);
//					$("#img1").fadeOut(5000);
					$("#img1").animate({ width:"1366px",opacity:"0.2"},5000);
				});
			});
		</script>
	</head>
	<body>
		<input type="button" value="显示" id="btn1" /> 
		<input type="button" value="隐藏" id="btn2"/> <br />
		<img src="../../img/555.png" id="img1" width="500px" />
	</body>
</html>

效果

小结

定时器:

setInterval clearInterval setTimeout clearTimeout

img.style.display = "block" img.style.display = "none"

获得所有的行

table.rows[]

row.bgColor ="red" row.style.backgroundColor = "black"

document.getElementsByName

创建节点: document.createElement

创建文本节点: document.createTextNode

添加节点: appendChild

select下拉列表

multiple 允许多选

ondblclick : 双击事件

获得焦点事件: onfocus

失去焦点事件: onblur

按键抬起事件: onkeyup

效果

效果

效果

效果

效果

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

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

结言

好了,欢迎在留言区留言,与大家分享你的经验和心得。

感谢你学习今天的内容,如果你觉得这篇文章对你有帮助的话,也欢迎把它分享给更多的朋友,感谢。

达叔小生:往后余生,唯独有你 You and me, we are family ! 90后帅气小伙,良好的开发习惯;独立思考的能力;主动并且善于沟通 简书博客: 达叔小生 https://www.jianshu.com/u/c785ece603d1

结语

  • 下面我将继续对 其他知识 深入讲解 ,有兴趣可以继续关注
  • 小礼物走一走 or 点赞

© 著作权归作者所有

达叔小生
粉丝 1
博文 101
码字总数 177789
作品 0
广州
程序员
私信 提问
Java程序员从笨鸟到菜鸟之(八十六)跟我学jquery(二)大话jquery选择器

本篇博客我将带大家来学习一下jquery的第一个比较重要的知识点,这个知识点对学习jquery的同学来说是必须掌握的,因为他是所有操作的基础,这个知识点就是jquery的对象选择器,我们利用jquer...

长平狐
2012/11/12
162
1
Java程序员从笨鸟到菜鸟全部博客目录【2012年十一月七日更新】

本文来自:曹胜欢博客专栏。转载请注明出处:http://blog.csdn.net/csh624366188 大学上了一年半,接触java也一年半了,虽然中间也有其他东西的学习,但是还是以java为主路线,想想这一年半,...

长平狐
2012/11/12
103
0
web前端、c++、项目管理、java、php书籍10-40/本,转让

本人因转行,又因经济困难,所以转让一下书籍。按标价出售,人在北京。联系qq:602505 可在东城区、中关村、回龙观等地当面交易。 书新旧程度全部在9成新以上。 点击书名查看书籍介绍和原价。...

匿名网友
2011/02/24
1K
17
《Java程序员由笨鸟到菜鸟》电子版书正式发布,欢迎大家下载

在众多朋友的支持和鼓励下,《Java程序员由菜鸟到笨鸟》电子版终于和大家见面了。本电子书涵盖了从java基础到javaweb开放框架的大部分内容。在编写的过程中,难免会出现一些错误,希望大家能...

长平狐
2012/11/12
128
0
《Java程序员由笨鸟到菜鸟》电子版书正式发布,欢迎大家下载

在众多朋友的支持和鼓励下,《Java程序员由菜鸟到笨鸟》电子版终于和大家见面了。本电子书涵盖了从java基础到javaweb开放框架的大部分内容。在编写的过程中,难免会出现一些错误,希望大家能...

长平狐
2012/11/12
112
0

没有更多内容

加载失败,请刷新页面

加载更多

OSChina 周三乱弹 —— 公司俩美女离职了

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @无形的肖申克 :分享広橋真紀子的单曲《時には昔の話を》: 《時には昔の話を》- 広橋真紀子 手机党少年们想听歌,请使劲儿戳(这里) @小橙子...

小小编辑
38分钟前
521
11
内存池和tcmalloc的性能比较

最近在测试tcmalloc性能的时候发现了一个现象!!!!就是new似乎很消耗性能!!直接上代码! #include "time.h" #include <gperftools/tcmalloc.h> using namespace std; #define MAX_SIZE......

shzwork
今天
5
0
Protocol Buffers 简介

文档编辑和持续集成状态: 本文档的 Protocol Buffer 的中文文档使用的是 Asciidoctor 进行编排的 http://docs.ossez.com/protocol-buffers-docs/index.html(本 WIKI 中的内容将会与在线发布...

honeymoose
今天
6
0
uniapp + bootstrapvue 移动/PC 一套搞定 (一)配置bootstrapvue

1.准备文件 自己到DCloud官网: http://dcloud.io/ 去下载官方的IDE Hbuilder,新建一个空的uniapp项目即可。 uniapp框架自带优化的vue,我们仅仅需要准备以下三个文件: bootstrap.min.css ...

panyunxing
今天
15
0
Android Camera原理之camera service类与接口关系

camera service主要是指 frameworks/av/services/camera/下面的代码,最近在看这一块的代码,为了更好地理清这一块的代码,也为了后续学习camera方便一些,我觉得很有必要理一下这一块的整体...

天王盖地虎626
今天
11
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部