第86节:Java中的JQuery基础
第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 Get
和 HTTP 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 点赞
第86节:Java中的JQuery基础相关推荐
- 第87节:Java中的Bootstrap基础与SQL入门
第87节:Java中的Bootstrap基础与SQL入门 前言复习 什么是JQ? : write less do more 写更少的代码,做更多的事 找出所有兄弟: $("div" ...
- 第90节:Java中的Linux基础
第90节:Java中的Linux基础 linux是装载虚拟机上面的: JDK依赖包: yum install glibc.i686MYSQL依赖包: yum -y install libaio.so. ...
- 第76节:Java中的基础知识
第76节:Java中的基础知识 设置环境,安装操作系统,安装备份,就是镜像,jdk配置环境,eclipse下载解压即可使用,下载tomcat 折佣动态代理解决网站的字符集编码问题 使用request. ...
- 第68节:Java中的MYSQL运用从小白到大牛
第68节:Java中的MYSQL运用从小白到大牛 前言 学习java必备要求,学会运用!!! 常见关系化数据库 BootStrap是轻量级开发响应式页面的框架,全局css组件,js插件.栅格系统是将页 ...
- 第69节:Java中数据库的多表操作
第69节:Java中数据库的多表操作 前言 学习数据库的多表操作,去电商行业做项目吧!!! 达叔,理工男,简书作者&全栈工程师,感性理性兼备的写作者,个人独立开发者,我相信你也可以!阅读他的文 ...
- 第79节:Java中一些要点
第79节:Java中一些要点 前言 一些知识点忘了没,可以通过一个点引出什么内容呢?做出自己的思维导图,看看自己到了哪一步了呢 内容 如果有人问jre,jdk,jvm是什么,你怎么回答呢? jre的英 ...
- java mysql单库多表_第69节:Java中数据库的多表操作
第69节:Java中数据库的多表操作 前言 学习数据库的多表操作,去电商行业做项目吧!!! 达叔,理工男,简书作者&全栈工程师,感性理性兼备的写作者,个人独立开发者,我相信你也可以!阅读他的文 ...
- 第78节:Java中的网络编程(上)
第78节:Java中的网络编程(上) 前言 网络编程涉及ip,端口,协议,tcp和udp的了解,和对socket通信的网络细节. 网络编程 OSI开放系统互连 网络编程指IO加网络 TCP/IP模型: ...
- 第80节:Java中的MVC设计模式
第80节:Java中的MVC设计模式 前言 了解java中的mvc模式.复习以及回顾! 事务,设置自动连接提交关闭. setAutoCommit(false); conn.commit(); conn ...
- 第83节:Java中的学生管理系统分页功能
第83节:Java中的学生管理系统分页功能 分页功能一般可以做成两种,一种是物理分页,另一种是逻辑分页.这两种功能是有各自的特点的,物理分页是查询的时候,对数据库进行访问,只是查一页数据就进行返回,其 ...
最新文章
- Python-解决粘包
- android 活动说明,Android – 如何发送GCM推送通知以及要加载哪些活动的说明?
- python history没有定义_python AttributeError:'Tensor'对象没有属性'_keras_history'_python_酷徒编程知识库...
- QT的QSqlQueryModel类的使用
- P1311,jzoj3025-选择客栈【统计】
- 编程不仅是写代码!?
- 转载在linux下执行java窗口被锁定问题
- shell export path_Shell的变量声明
- 中国实现量子计算第一个里程碑:原型机 “九章”比最快的超级计算机快一百万亿倍...
- div中赋值html字符串
- 本地idea运行spark,A master URL must be set in your configuration
- 鸢尾花(Iris)数据集
- Python Network(二)绘图draw系列draw(),draw_networkx(),draw_networkx_nodes(),draw_networkx_edges()
- 奇点云数据中台技术汇(五)| CDP,线下零售顾客运营中台
- 2022-2028全球与中国工业蜂窝网关市场现状及未来发展趋势
- Java程序设计——实现求几何图形的周长面积
- python 字符串前面加‘r’的作用(并举例说明)
- The King’s Ups and Downs HDU - 4489(计数+dp)
- HyperLynx(三十二)高速串行总线仿真(四)
- apache-tomcat-10.0.18配置