jQuery学习笔记--效果，操作html元素，遍历DOM树
参考W3school:
http://www.w3school.com.cn/jquery/jquery_hide_show.asp
jQuery效果：
隐藏：
基础语句：
$(selector).hide(speed,callback);
可选的 speed 参数规定隐藏/显示的速度，可以取以下值：”slow”、”fast” 或毫秒。
可选的 callback 参数是隐藏或显示完成后所执行的函数名称。
实现：单击p标签的文字 文字消失
<script> $(document).ready(function(){ $("p").click(function(){ $(this).hide(); }); }); </script>实现：单击button按钮 文字在2秒内消失
<script type="text/javascript"> $(document).ready(function(){ $("button").click(function(){ $("p").hide(2000); }); }); </script>实现：单击按钮 包含按钮的div缓慢隐藏
<!DOCTYPE html> <html> <head> <script src="/jquery/jquery-1.11.1.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $(".ex .hide").click(function(){ $(this).parents(".ex").hide("slow"); }); }); </script> <style type="text/css"> div.ex { background-color:#e5eecc; padding:7px; border:solid 1px #c3c3c3; } </style> </head> <body> <div class="ex"> <button class="hide" type="button">隐藏</button> <p>大家好<br /> 我是小莫<br /> 哈哈</p> </div> </body> </html>注意：
parents(“.ex”)父亲节点中class为ex的元素
div.ex表示 又是div又是class为ex的元素
div .ex则表示 div中 class为ex的元素
区别 中间空格
而#ex则表示id为ex的元素
$(“.ex .hide”)表示class为ex元素中的class为hide的元素
hide(“slow”)是缓慢消失的意思
显示：
基础语句：
$(selector).show(speed,callback);
可选的 speed 参数规定隐藏/显示的速度，可以取以下值：”slow”、”fast” 或毫秒。
可选的 callback 参数是隐藏或显示完成后所执行的函数名称。
实现：单击id为show的元素时候p文本文件显示
<script type="text/javascript"> $(document).ready(function(){ $("#show").click(function(){ $("p").show(); }); }); </script>那有没有方法实现hide和show转换的呢？
有，还真有 那就是toggle()函数:
显示被隐藏的元素，并隐藏已显示的元素：
语法：
$(selector).toggle(speed,callback);
可选的 speed 参数规定隐藏/显示的速度，可以取以下值：”slow”、”fast” 或毫秒。
可选的 callback 参数是 toggle() 方法完成后所执行的函数名称。
<script type="text/javascript"> $(document).ready(function(){ $("button").click(function(){ $("p").toggle(); }); }); </script>淡入淡出：
淡入：
实现：单击按钮 id为div1的淡入 id为div2缓慢淡入 id为div3 3秒内淡入
前提三个div中style：display:none
fadeIn（）
<script> $(document).ready(function(){ $("button").click(function(){ $("#div1").fadeIn(); $("#div2").fadeIn("slow"); $("#div3").fadeIn(3000); }); }); </script>淡出：
fadeOut（）类似fadeIn（）
<script type="text/javascript"> $(document).ready(function(){ $("button").click(function(){ $("#div1").fadeOut(); $("#div2").fadeOut("slow"); $("#div3").fadeOut(3000); }); }); </script>转换淡入淡出：
fadeToggle()类似于上文的toggle（）
<script> $(document).ready(function(){ $("button").click(function(){ $("#div1").fadeToggle(); $("#div2").fadeToggle("slow"); $("#div3").fadeToggle(3000); }); }); </script>可以指定淡出的透明度：
fadeTo(速度,透明度);
<script> $(document).ready(function(){ $("button").click(function(){ $("#div1").fadeTo("slow",0.1); $("#div2").fadeTo("slow",0.4); $("#div3").fadeTo("slow",0.7); }); }); </script>总结：
通过 jQuery，您可以实现元素的淡入淡出效果。
jQuery 拥有下面四种 fade 方法：
- fadeIn() 淡入
- fadeOut() 淡出
- fadeToggle() 转换淡入淡出
- fadeTo() 指定淡出透明度
jQuery fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。
如果元素已淡出，则 fadeToggle() 会向元素添加淡入效果。
如果元素已淡入，则 fadeToggle() 会向元素添加淡出效果。
语法：
$(selector).fadeIn(speed,callback); $(selector).fadeOut(speed,callback); $(selector).fadeToggle(speed,callback);可选的 speed 参数规定效果的时长。它可以取以下值：”slow”、”fast” 或毫秒。
可选的 callback 参数是 fading 完成后所执行的函数名称。
fadeTo有点不同：
$(selector).fadeTo(speed,opacity,callback);
fadeTo() 方法中必需的 opacity 参数将淡入淡出效果设置为给定的不透明度（值介于 0 与 1 之间）。
滑动：
jQuery 拥有以下滑动方法：
slideDown()
slideUp()
slideToggle()
slideDown() 向下滑动显示：
div.panel { height:120px; display:none; } <script type="text/javascript"> $(document).ready(function(){ $(".flip").click(function(){ $(".panel").slideDown("slow"); }); }); </script>slideUp() 向上滑动隐藏
div.panel { height:120px; } <script type="text/javascript"> $(document).ready(function(){ $(".flip").click(function(){ $(".panel").slideUp("slow"); }); }); </script>转换滑动方向也相当于 转换显示和隐藏
slideToggle()
如果元素向下滑动，则 slideToggle() 可向上滑动它们。
如果元素向上滑动，则 slideToggle() 可向下滑动它们。
div.panel { height:120px; display:none; } <script type="text/javascript"> $(document).ready(function(){ $(".flip").click(function(){ $(".panel").slideToggle("slow"); }); }); </script>语法：
$(selector).slideDown(speed,callback); (selector).slideUp(speed,callback);(selector).slideUp(speed,callback);(selector).slideToggle(speed,callback);
可选的 speed 参数规定效果的时长。它可以取以下值：”slow”、”fast” 或毫秒。
可选的 callback 参数是滑动完成后所执行的函数名称。
动画：
animate() 方法用于创建自定义动画
语法：
$(selector).animate({params},speed,callback);
必需的 params 参数定义形成动画的 CSS 属性。
可选的 speed 参数规定效果的时长。它可以取以下值：”slow”、”fast” 或毫秒。
可选的 callback 参数是动画完成后所执行的函数名称。
单击按钮 div元素移动到离左端100px的地方
<script> $(document).ready(function(){ $("button").click(function(){ $("div").animate({left:'100px'}); }); }); </script> <div style="background:#98bf21;height:100px;width:100px;position:absolute;">也可以操作多个属性：
{params}中有多个属性 里面是最终的状态
举个栗子： 离左端250px 透明度50% 高度150px 宽150px
<script> $(document).ready(function(){ $("button").click(function(){ $("div").animate({ left:'250px', opacity:'0.5', height:'150px', width:'150px' }); }); }); </script> 可以使用相对值：
<script> $(document).ready(function(){ $("button").click(function(){ $("div").animate({ left:'250px', height:'+=150px', width:'+=150px' }); }); }); </script> 使用预定义的值:
把属性的动画值设置为 “show”、”hide” 或 “toggle”
高度显示和隐藏通过按钮转换
<script> $(document).ready(function(){ $("button").click(function(){ $("div").animate({ height:'toggle' }); }); }); </script> 队列功能：
依次执行animate
<script> $(document).ready(function(){ $("button").click(function(){ var div=$("div"); div.animate({height:'300px',opacity:'0.4'},"slow"); div.animate({width:'300px',opacity:'0.8'},"slow"); div.animate({height:'100px',opacity:'0.4'},"slow"); div.animate({width:'100px',opacity:'0.8'},"slow"); }); }); </script> 总结：
默认情况下，所有 HTML 元素的位置都是静态的，并且无法移动。如需对位置进行操作，记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute。
注意：
提示：可以用 animate() 方法来操作所有 CSS 属性吗？ 是的，几乎可以！不过，需要记住一件重要的事情：当使用 animate() 时，必须使用 Camel 标记法书写所有的属性名，比如，必须使用 paddingLeft 而不是 padding-left，使用 marginRight 而不是 margin-right，等等。 同时，色彩动画并不包含在核心 jQuery 库中。 如果需要生成颜色动画，您需要从 jQuery.com 下载 Color Animations 插件。stop()
stop() 方法用于停止动画或效果，在它们完成之前。
stop() 方法适用于所有 jQuery 效果函数，包括滑动、淡入淡出和自定义动画。
id为panel动画下滑的时候 单击id为panel的按钮暂停 单击id为flip的按钮继续
<script> $(document).ready(function(){ $("#flip").click(function(){ $("#panel").slideDown(5000); }); $("#stop").click(function(){ $("#panel").stop(); }); }); </script>注意：
stop语法
$(selector).stop(stopAll,goToEnd); 可选的 stopAll 参数规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。 可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。Callback 函数
在当前动画 100% 完成之后执行。
实现：单击按钮 文字文本1秒内隐藏后 输出”hahaha”
<script type="text/javascript"> $(document).ready(function(){ $("button").click(function(){ $("p").hide(1000,function(){ alert("hahaha"); }); }); }); </script>一种名为链接（chaining）的技术，允许我们在相同的元素上运行多条 jQuery 命令，一条接着另一条。
举个栗子：
“p1” 元素首先会变为红色，然后向上滑动，然后向下滑动
$("#p1").css("color","red").slideUp(2000).slideDown(2000);等效于：
$("#p1").css("color","red") .slideUp(2000) .slideDown(2000);jQuery 会抛掉多余的空格，并按照一行长代码来执行上面的代码行。
jQuery操作DOM
三个简单实用的用于 DOM 操作的 jQuery 方法：
text() - 设置或返回所选元素的文本内容 html() - 设置或返回所选元素的内容（包括 HTML 标记） val() - 设置或返回表单字段的值举个栗子：
<script> $(document).ready(function(){ $("#btn1").click(function(){ alert("Text: " + $("#test").text()); }); $("#btn2").click(function(){ alert("HTML: " + $("#test").html()); }); }); </script> <p id="test">这是段落中的<b>粗体</b>文本。</p>第一个alert返回的是
这是段落中的粗体文本。
第二个alert返回的是
这是段落中的<b>粗体</b>文本。
<script> $(document).ready(function(){ $("button").click(function(){ alert("Value: " + $("#test").val()); }); }); </script>返回的是表单的内容 如果是text返回的是 输入的值或者默认值
attr() 方法用于获取属性值。
返回的是id为w3s的href属性值
<script> $(document).ready(function(){ $("button").click(function(){ alert($("#w3s").attr("href")); }); }); </script>也可直接通过上述方法修改内容 举个栗子:
修改id为test1的文本文件值为”Hello world!”
修改id为test2的html内容为<b>Hello world!</b>
修改id为test3的内容为Dolly Duck
<script> $(document).ready(function(){ $("#btn1").click(function(){ $("#test1").text("Hello world!"); }); $("#btn2").click(function(){ $("#test2").html("<b>Hello world!</b>"); }); $("#btn3").click(function(){ $("#test3").val("Dolly Duck"); }); }); </script>设置属性 - attr()
修改id为w3s的href属性为
$("button").click(function(){ $("#w3s").attr("href","http://www.w3school.com.cn/jquery"); });attr() 方法也允许您同时设置多个属性。
$("button").click(function(){ $("#w3s").attr({ "href" : "http://www.w3school.com.cn/jquery", "title" : "hhaha" }); });attr其实有个问题 如果涉及到复选框之类的设置true false值的时候就不可靠 要用prop
使用attr获取checked属性时返回”checked”和”“,现在使用prop方法获取属性则统一返回true和false。
那么，什么时候使用attr()，什么时候使用prop()？
1.添加属性名称该属性就会生效应该使用prop(); 2.是有true,false两个属性使用prop(); 3.其他则使用attr();参考：
https://www.cnblogs.com/smartXiang/p/5686800.html
text()、html() 以及 val() 的回调函数
回调函数由两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值。然后以函数新值返回您希望使用的字符串。
$("#btn1").click(function(){ $("#test1").text(function(i,origText){ return "Old text: " + origText + " New text: Hello world! (index: " + i + ")"; }); }); $("#btn2").click(function(){ $("#test2").html(function(i,origText){ return "Old html: " + origText + " New html: Hello <b>world!</b> (index: " + i + ")"; }); }); $("button").click(function(){ $("#w3s").attr("href", function(i,origValue){ return origValue + "/jquery"; }); });添加新的 HTML 内容
append() - 在被选元素的结尾插入内容 prepend() - 在被选元素的开头插入内容 after() - 在被选元素之后插入内容 before() - 在被选元素之前插入内容append(): 元素结尾插入
在p结尾添加粗体
在ol列表中结尾添加一行
<script> $(document).ready(function(){ $("#btn1").click(function(){ $("p").append(" <b>Appended text</b>."); }); $("#btn2").click(function(){ $("ol").append("<li>Appended item</li>"); }); }); </script>appendTo跟append相反
prepend():元素开头插入
<script> $(document).ready(function(){ $("#btn1").click(function(){ $("p").prepend("<b>Prepended text</b>. "); }); $("#btn2").click(function(){ $("ol").prepend("<li>Prepended item</li>"); }); }); </script>append和prepend可以一次性添加多个
function appendText() { var txt1="<p>Text.</p>"; // 以 HTML 创建新元素 var txt2=$("<p></p>").text("Text."); // 以 jQuery 创建新元素 var txt3=document.createElement("p"); // 以 DOM 创建新元素 txt3.innerHTML="Text."; $("p").append(txt1,txt2,txt3); // 追加新元素 }after() 和 before()
元素前面和元素后面添加元素
<script> $(document).ready(function(){ $("#btn1").click(function(){ $("img").before("<b>Before</b>"); }); $("#btn2").click(function(){ $("img").after("<i>After</i>"); }); }); </script>通过 after() 和 before() 方法添加若干新元素
<script> function afterText() { var txt1="<b>I </b>"; // 以 HTML 创建元素 var txt2=$("<i></i>").text("love "); // 通过 jQuery 创建元素 var txt3=document.createElement("big"); // 通过 DOM 创建元素 txt3.innerHTML="jQuery!"; $("img").after(txt1,txt2,txt3); // 在 img 之后插入新元素 } </script>删除元素
remove() - 删除被选元素（及其子元素） empty() - 从被选元素中删除子元素举个栗子:
删除id为div1的元素
删除id为div2的元素中的子元素
$("#div1").remove(); $("#div2").empty();过滤被删除的元素
添加参数即可
删除 class=”italic” 的所有
元素
$("p").remove(".italic");获取并设置 CSS 类
addClass() - 向被选元素添加一个或多个类 removeClass() - 从被选元素删除一个或多个类 toggleClass() - 对被选元素进行添加/删除类的切换操作 css() - 设置或返回样式属性addClass()
向元素添加css样式
也可向多个元素添加同一个css样式
$("button").click(function(){ $("h1,h2,p").addClass("blue"); $("div").addClass("important"); });removeClass()
移除一个或者多个类的css样式
$("button").click(function(){ $("h1,h2,p").removeClass("blue"); });toggleClass()
该方法对被选元素进行添加/删除类的切换操作
先添加blue样式 后删除blue样式
$("button").click(function(){ $("h1,h2,p").toggleClass("blue"); });返回 CSS 属性
css()
设置或返回被选元素的一个或多个样式属性
$(“p”).css(“background-color”);
如果有多个p则返回首个匹配元素的 background-color 值
设置 CSS 属性
所有匹配元素设置 background-color 值为yellow
$("p").css("background-color","yellow");设置多个 CSS 属性
为所有匹配元素设置 background-color 和 font-size
$("p").css({"background-color":"yellow","font-size":"200%"});jQuery 提供多个处理尺寸的重要方法：
width()不包括内边距、边框或外边距 height()不包括内边距、边框或外边距 innerWidth()包括内边距 innerHeight()包括内边距 outerWidth()包括内边距和边框 outerHeight()包括内边距和边框 outerWidth(true) 方法返回元素的宽度（包括内边距、边框和外边距）。 outerHeight(true) 方法返回元素的高度（包括内边距、边框和外边距）。设置指定的 <div >元素的宽度和高度
$("button").click(function(){ $("#div1").width(500).height(500); });返回文档（HTML 文档）和窗口（浏览器视口）的宽度和高度
$("button").click(function(){ var txt=""; txt+="Document width/height: " + $(document).width(); txt+="x" + $(document).height() + "\n"; txt+="Window width/height: " + $(window).width(); txt+="x" + $(window).height(); alert(txt); });遍历:
向上遍历 DOM 树
parent()
返回被选元素的直接父元素
返回span元素的直接父类
$("span").parent();parents()
方法返回被选元素的所有祖先元素，它一路向上直到文档的根元素 ()。
所有的span的祖先元素的css元素都设置为红色
$("span").parents().css("color":"red");返回所有 元素的所有祖先，并且它是 <ul>>元素
$(document).ready(function(){ $("span").parents("ul"); });span的所有祖先父类 但是低于div元素父类 就是介于span和div之间的所有元素
$(document).ready(function(){ $("span").parentsUntil("div"); });向下遍历 DOM 树
children() 方法返回被选元素的所有直接子元素
返回每个 <div>元素的所有直接子元素
$(document).ready(function(){ $("div").children(); });可以使用可选参数来过滤对子元素的搜索
比如:
返回类名为 “1” 的所有 <p> 元素，并且它们是 <div>的直接子元素
$("div").children("p.1");find()
返回被选元素的后代元素，一路向下直到最后一个后代。
比如:
<div> 后代的所有 <span> 元素
$(document).ready(function(){ $("div").find("span"); });返回 <div>>的所有后代:
$(document).ready(function(){ $("div").find("*"); });同胞遍历:
siblings() 返回被选元素的所有同胞元素 next() 返回被选元素的下一个同胞元素 只有一个 nextAll() 返回被选元素的所有跟随的同胞元素 nextUntil() 回介于两个给定参数之间的所有跟随的同胞元素 prev() prevAll() prevUntil()prev(), prevAll() & prevUntil() 跟前面的一样 不过是向前而已
siblings() 返回被选元素的所有同胞元素
也可以使用可选参数来过滤对同胞元素的搜索。
$("h2").siblings(); 所有同胞 $("h2").siblings("p"); 是p类型的同胞nextUntil()
举例:
返回介于 <h2>与 <h6>元素之间的所有同胞元素 不包括h2和h6
$(document).ready(function(){ $("h2").nextUntil("h6"); });过滤
- first() 第一个元素
- last() 最后一个元素
- eq() 根据指定索引找元素
- filter() 匹配元素
- not() 返回不匹配的元素
它们允许您基于其在一组元素中的位置来选择一个特定的元素
first()
返回被选元素的首个元素。
选取首个 <div>元素内部的第一个 <p>元素
$(document).ready(function(){ $("div p").first(); });last()
相反:
选择最后一个 <div> 元素中的最后一个 <p> 元素
$(document).ready(function(){ $("div p").last(); });eq()
返回被选元素中带有指定索引号的元素
从0开始
举例:选取第二个 <p> 元素
$(document).ready(function(){ $("p").eq(1); });filter()
返回匹配的元素
举例:
返回带有类名 “intro” 的所有 <p>元素
$(document).ready(function(){ $("p").filter(".intro"); });not()
回不匹配标准的所有元素
not() 方法与 filter() 相反。
返回不带有类名 “intro” 的所有<p>元素
$(document).ready(function(){ $("p").not(".intro"); });
关注公众号 低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。
持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。
转载内容版权归作者及来源网站所有，本站原创内容转载请注明来源。
- 上一篇
Java小白进阶笔记(6)-异常
继续学习偏头痛杨的博客----偏头痛杨的Java入门教学系列之异常篇详细内容见链接中的博客，下面是简单的学习笔记和偏头痛杨留下的作业解答。 异常的分类 检查性异常（checked exception) 编译时出现的异常 unchecked exc 可以通过编译，但运行时会出现异常。如：ArrayIndexOutOfBoundsException。 错误（error) 错误不是异常。Java虚拟机运行错误（Virtual MachineError），类定义错误（NoClassDefFoundError），内存溢出错误（OutOfMemoryError）等 异常的层次结构 图：见原文 Throwable 有两个重要的子类：Exception（异常）和 Error（错误） Exception 有两个重要子类：IOException和RuntimeException Error 略 异常处理 过程 抛出->捕获->处理 处理异常的两种方式 自行处理： 将可能引发异常的语句封在try语句块内，处理异常的相应语句封入catch块内 回避处理： 在方法声明中包含throws子句，通知潜在...
- 下一篇
如何让jpa 持久化时不校验指定字段
源文：https://www.toocruel.net/jpa-validate/ 怎么让jpa 持久化时不校验指定字段 本文提供全流程，中文翻译。 Chinar 坚持将简单的生活方式，带给世人！（拥有更好的阅读体验 —— 高分辨率用户请根据需求调整网页缩放比例） Chinar —— 心分享、心创新！助力快速完成jpa 持久化时不校验指定字段/文字为新手节省宝贵的时间，避免采坑！ 1 Problem —— 问题/需求 2 Wrong again —— 错误重现 3 SoluTion —— 解决方案 支持 May Be —— 搞开发，总有一天要做的事！ 全文高清图片，点击即可放大观看 (很多人竟然不知道) 1 Problem —— 问题/需求 spring data jpa ，使用了 validate 校验 校验直接加在了要持久化实体类上，为了方便简洁并没有使用 DTO 做验证 但是有的校验仅在 Controller 层需要校验，持久化时不需校验 因为我把他声明为 @Transient 的了，如下 User 类： /// <summary> /// 用户类 /// </...
相关文章
文章评论
共有0条评论来说两句吧...
文章二维码
点击排行
推荐阅读
最新文章
- SpringBoot2整合MyBatis，连接MySql数据库做增删改查操作
- CentOS8编译安装MySQL8.0.19
- SpringBoot2初体验，简单认识spring boot2并且搭建基础工程
- CentOS8安装Docker，最新的服务器搭配容器使用
- CentOS7,CentOS8安装Elasticsearch6.8.6
- Red5直播服务器，属于Java语言的直播服务器
- CentOS8安装MyCat，轻松搞定数据库的读写分离、垂直分库、水平分库
- Hadoop3单机部署,实现最简伪集群
- SpringBoot2编写第一个Controller，响应你的http请求并返回结果
- CentOS7编译安装Cmake3.16.3，解决mysql等软件编译问题
微信收款码
支付宝收款码