第86节：Java中的JQuery基础
标题图
第86节：Java中的JQuery
前言复习
定时器：
setInterval clearIntervalsetTimeout clearTimeout显示：
img.style.display = "block"隐藏：
img.style.display = "none"获取行
table.rows[]DOM:
document.createElementdocument.createTextNodeappendChild什么是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")><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 被加载的数据的 URLdata 发送到服务器的数据callback 被加载时，所执行的函数type 被返回的数据的类型options 完整 AJAX 请求小结
hide() 函数fadeout() 函数animate() 函数$("button#demo").click()$("button#demo").click(function(){$("img").hide()})
效果
效果
效果
效果
结言
好了，欢迎在留言区留言，与大家分享你的经验和心得。
感谢你学习今天的内容，假如你觉得这篇文章对你有帮助的话，也欢迎把它分享给更多的朋友，感谢。
达叔小生：往后余生，唯独有你
You and me, we are family !
90后帅气小伙，良好的开发习惯；独立思考的能力；主动并且善于沟通
简书博客： 达叔小生
https://www.songma.com/u/c785ece603d1
结语
- 下面我将继续对 其余知识 深入讲解 ，有兴趣可以继续关注
- 小礼物走一走 or 点赞
上一篇 目录 已是最后
说明
1. 本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！
2. 分享目的仅供大家学习和交流，您必须在下载后24小时内删除！
3. 不得使用于非法商业用途，不得违反国家法律。否则后果自负！
4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
5. 如有链接无法下载、失效或广告，请联系管理员处理！
6. 本站资源售价只是摆设，本站源码仅提供给会员学习使用！
7. 如遇到加密压缩包，请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » 第86节：Java中的JQuery基础
1. 本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！
2. 分享目的仅供大家学习和交流，您必须在下载后24小时内删除！
3. 不得使用于非法商业用途，不得违反国家法律。否则后果自负！
4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
5. 如有链接无法下载、失效或广告，请联系管理员处理！
6. 本站资源售价只是摆设，本站源码仅提供给会员学习使用！
7. 如遇到加密压缩包，请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » 第86节：Java中的JQuery基础
