第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后帅气小伙,良好的开发习惯;独立思考的能力;主动并且善于沟通
简书博客: 达叔小生
结语
- 下面我将继续对 其他知识 深入讲解 ,有兴趣可以继续关注
- 小礼物走一走 or 点赞
上一篇: java虚拟机和内存优化总结
下一篇: 同事闷闷不乐
推荐阅读
-
Java基础之集合框架--Collections工具类中的sort()方法
-
JavaEE基础day02 1.定义Java中的变量 四类八种 2.变量定义和使用的注意事项 3.数据类型的转换、强制数据类型转换4.算数运算符、比较运算符、逻辑运算符、赋值运算符、三元运算符
-
java中的内部类(基础)
-
请教一个相当基础的问题,Java中为什么拥有类可以访问内部类的私有成员? JavaAccessSUN
-
Java中File文件操作类的基础用法
-
java基础学习JVM中GC的算法
-
Kotlin 基础教程之注解与java中的注解比较
-
Java基础将Bean属性值放入Map中的实例
-
Kotlin 基础教程之注解与java中的注解比较
-
Java基础将Bean属性值放入Map中的实例