Jquery中的事件和动画
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Jquery中的事件和动画相关的知识，希望对你有一定的参考价值。
在学习Jquery中的过程中我们绝大部分都用到了事件的操作，也可以说事件是Jquery中必不可少的一部分，我们常见的一些事件有单击事件，鼠标事件，键盘事件等等。在Jquery中的学习中为了能使让页面以更绚丽的方式呈现给用户浏览，往往会用到动画。下面我主要就针对事件和动画进行详细的说明。
一.Jquery中的事件
我们说事件总体上可以分为两大类：简单事件和复合事件。这里的简单事件和javascript中的事件几乎完全一样，都含有windos的事件，鼠标事件，键盘事件，表单事件等，只是在JavaScript中注册事件为dom对象.onclick=函数；而在Jquery中是以函数的形式来体现的，
Jquery对象.click(函数);那么复合事件是截取组合了用户操作，并且以多个函数作为响应而自定义的处理程序。
1.基础事件
01.window事件
所谓window事件，就是当用户执行某些会影响浏览器的操作时，而触发的事件.比如我们常用的文档就绪事件$(函数);这个事件的执行时机就是当网页中的所有DOM文档结构绘制完毕后立刻执行，并没有等到DOM元素所关联的内容（图片，视频）加载完。
02.鼠标事件
鼠标事件就是当用户在浏览器上用移动鼠标产生的事件。
常用鼠标事件的方法
| 方法 | 描述 | 执行时机 |
| click（） | 触发或将函数绑定到指定元素的click事件 | 单击鼠标 |
| mouseover（） | 触发或将函数绑定到指定元素的mouseover事件 | 鼠标指针移过时 |
| mouseout（） | 触发或将函数绑定到指定元素的mouseout事件 | 鼠标指针移出时 |
eg：
当鼠标移到div上让背景颜色变红，移出时背景颜色消失。
div {
border:1px solid blue;
width:50px;
height:50px;
}
</style> <script src="js/jquery-1.8.3.min.js"></script> <script type="text/javascript">
$(function() { //首先定位到div元素，然后给定注册鼠标移过的事件让其背景颜色变红 $("div").mouseover(function () { $(this).css("background","red"); }).mouseout(function () { //注册鼠标移出的事件让其背景颜色消失 $(this).css("background", ""); }); }); </script> </head> <body> <div></div> </body> </html>
03.键盘事件
键盘事件指当键盘聚焦到web浏览器是，用户每次按下或者是释放键盘上的按键是都会产生事件。
常用键盘事件的方法
| 方法 | 描述 | 执行时机 |
| keydown（） | 触发或将函数绑定到指定元素的keydown事件 | 按下键时 |
| keyup（） | 触发或将函数绑定到指定元素的keyup（）事件 | 释放键时 |
| keypress | 触发或将函数绑定到指定元素的keypress事件 | 产生开打印的字符时 |
eg：
//三个按键的执行顺序：keydown keypress keyup
$(function () { //定位到文本框注册当用户按下键盘的事件 $("input").keydown(function () { $("div").append("keydown"); //追加到div中显示 //注册当用户释放键盘的事件 }).keyup(function () { $("div").append("keydoup"); //追加到div中显示 //注册当文本框中有值键盘的事件 }).keypress(function () { $("div").append("keypress"); //追加到div中显示 }); }); </script> </head> <body> <input type="text" name="name" value=" " /> <div></div> </body> </html>获取用户按下的键盘的对应的keycod码
$(function() { //按下键盘释放的事件 $("input").keyup(function (event) { var result = event.keyCode; $("div").append(result); }); }); </script> </head> <body> <input type="text" name="name" value=" " /> <div></div> </body> </html>
04.表单事件
表单事件是所有事件类型中最稳定的，当用户在填写一些注册信息时，通常会用到这个事件。
常用表单事件的方法
| 方法 | 描述 | 执行时机 |
| focus（） | 触发或将函数绑定到指定元素的focus事件 | 获得焦点 |
| blur（） | 触发或将函数绑定到指定元素的blur事件 | 失去焦点 |
$(function() { //获得焦点改变边框颜色 $("input").focus(function () { $(this).css("border", "1px solid blue"); //失去焦点恢复边框颜色 }).blur(function () { $(this).css("border", "1px solid"); }); }); </script> </head> <body> <input type="text" name="name" value=" " /> </body> </html>
2.复合事件
Jquery中有两个复合事件方法------hover()和toggle().
01.hover()方法：
hover（）方法用于模拟鼠标指针悬停事件，他是相当于一个mouseover和mouseout的组合。
div {
border:1px solid blue;
width:50px;
height:50px;
}
</style> <script src="js/jquery-1.8.3.min.js"></script> <script type="text/javascript">
$(function() { //首先定位到div元素，然后给定注册鼠标移过的事件让其背景颜色变红鼠标移出的事件让其背景颜色消失 $("div").hover(function(){ $(this).css("background","red"); },function(){ $(this).css("background", ""); }); }); </script> </head> <body> <div></div> </body> </html>
02.toggle()方法：
toggle方法用于模拟鼠标连续click事件
eg：
$(function() { //点击点我按钮切换页面背景颜色 $("input").toggle(function () { $("body").css("background","pink"); }, function () { $("body").css("background", "blue"); }, function () { $("body").css("background", "red"); }); }); </script> </head> <body> <input type="button" name="name" value="点我" /> </body> </html>
二.绑定事件和移除事件
我们这里绑定事件用到了bind，live，解除事件用到了unbind，die
返回值:jQuerybind(type, [data], fn)
概述
为每个匹配元素的特定事件绑定事件处理函数。
.bind() 方法是用于往文档上附加行为的主要方式。
任何作为type参数的字符串都是合法的；如果一个字符串不是原生的JavaScript事件名，那么这个事件处理函数会绑定到一个自定义事件上。这些自定义事件绝对不会由浏览器触发，但可以通过使用.trigger()或者.triggerHandler()在其他代码中手动触发。
如果type参数的字符串中包含一个点(.)字符，那么这个事件就看做是有命名空间的了。这个点字符就用来分隔事件和他的命名空间。举例来说，如果执行 .bind(‘click.name‘, handler) ，那么字符串中的 click 是事件类型，而字符串 name 就是命名空间。命名空间允许我们取消绑定或者触发一些特定类型的事件，而不用触发别的事件。参考unbind()来获取更多信息。
当一个事件传到一个元素上，所有绑定在上面的针对哪个事件的处理函数都会触发。如果注册了多个事件处理函数，总是按照绑定的顺序依次触发。当所有绑定的事件处理函数执行完毕后，事件继续沿着普通的事件冒泡途径上浮。
返回值:jQueryunbind([type], [fn])
概述
bind()的反向操作，从每一个匹配的元素中删除绑定的事件。
如果没有参数，则删除所有绑定的事件。
你可以将你用bind()注册的自定义事件取消绑定。
如果提供了事件类型作为参数，则只删除该类型的绑定事件。
如果把在绑定时传递的处理函数作为第二个参数，则只有这个特定的事件处理函数会被删除。
eg：
$(function() { //----------------01使用bind和unbind绑定事件和移除事件 //使用bind绑定事件(使用两次bind) $("li").bind("mouseover", function () { $(this).css("background","blue"); }).bind("mouseout", function () { $(this).css("background", ""); }); //使用bind一次绑定多个事件 $("li").bind({ mouseover: function () { $(this).css("background", "blue"); }, mouseout: function () { $(this).css("background", ""); } }); //使用unbind解除事件 $("li").unbind("mouseover mouseout"); //----------------02使用on和off绑定事件和移除事件（他可以和bind混合使用自从jquery1.7版本以后bind()函数推荐用on()来代替。） // 使用on绑定事件 $("li").on("mouseover", function () { $(this).css("background", "blue"); }).bind("mouseout", function () { $(this).css("background", ""); }); //使用off解除事件 $("li").off("mouseover mouseout"); //----------------03使用live和die绑定事件和移除事件 //添加多个事件 $("li").live({ mouseover: function () { $(this).css("background", "blue"); }, mouseout: function () { $(this).css("background", ""); } }); // 移除多个事件 $("li").die("mouseover mouseout"); }); </script> </head> <body> <ul> <li>中国</li> <li>韩国</li> <li>美国</li> </ul> </body> </html>
三.动画
show()：显示隐藏的匹配元素。
如果选择的元素是可见的，这个方法将不会改变任何东西。无论这个元素是通过hide()方法隐藏的还是在CSS里设置了display:none;，这个方法都有效。
返回值：jQuery
显示所有段落
HTML 代码:
<p style="display: none">Hello</p>
jQuery 代码:
$("p").show()
show(speed,[callback])
以优雅的动画显示所有匹配的元素，并在显示完成后可选地触发一个回调函数。
可以根据指定的速度动态地改变每个匹配元素的高度、宽度和不透明度。
返回值：jQuery
参数
speed (String,Number) : 三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如：1000)
callback (Function) : (Optional) 在动画完成时执行的函数，每个元素执行一次。
示例
用缓慢的动画将隐藏的段落显示出来，历时600毫秒。
HTML 代码:
<p style="display: none">Hello</p>
jQuery 代码:
$("p").show("slow");
用迅速的动画将隐藏的段落显示出来，历时200毫秒。并在之后执行反馈！
HTML 代码:
<p style="display: none">Hello</p>
jQuery 代码:
$("p").show("fast",function(){
$(this).text("Animation Done!");
});
将隐藏的段落用将近4秒的时间显示出来。。。并在之后执行一个反馈。。。
} HTML 代码:
<p style="display: none">Hello</p>
jQuery 代码:
$("p").show(4000,function(){
$(this).text("Animation Done...");
});
hide()隐藏显示的元素
如果选择的元素是隐藏的，这个方法将不会改变任何东西。
返回值:jQuery
示例
隐藏所有段落
jQuery 代码:
$("p").hide()
hide(speed,[callback])
以优雅的动画隐藏所有匹配的元素，并在显示完成后可选地触发一个回调函数。
可以根据指定的速度动态地改变每个匹配元素的高度、宽度和不透明度。
返回值:jQuery
参数
speed (String,Number) :三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如：1000)
callback (FunctionFunction) : (Optional) 在动画完成时执行的函数，每个元素执行一次。
示例
用600毫秒的时间将段落缓慢的隐藏
jQuery 代码:
$("p").hide("slow");
用200毫秒将段落迅速隐藏，之后弹出一个对话框。
jQuery 代码:
$("p").hide("fast",function(){
alert("Animation Done.");
});
toggle()切换元素的可见状态。
如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的。
返回值:jQuery
示例
切换所有段落的可见状态。
HTML 代码:
<p>Hello</p><p style="display: none">Hello Again</p>
jQuery 代码:
$("p").toggle()
结果:
<p tyle="display: none">Hello</p><p style="display: block">Hello Again</p>
jQuery中的滑动
slideDown(speed,[callback])
通过高度变化（向下增大）来动态地显示所有匹配的元素，在显示完成后可选地触发一个回调函数。
这个动画效果只调整元素的高度，可以使匹配的元素以“滑动”的方式显示出来。
返回值:jQuery
参数
speed (String,Number) :三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如：1000)
callback (FunctionFunction) : (可选) 在动画完成时执行的函数
示例
用600毫秒缓慢的将段落滑下
jQuery 代码:
$("p").slideDown("slow");
用200毫秒快速将段落滑下，之后弹出一个对话框
<p style="display: none;width:200px;height:200px;background-color:Red;">Hello</p>
jQuery 代码:
} $("p").slideDown("fast",function(){
alert("Animation Done.");
});
slideUp(speed,[callback])通过高度变化（向上减小）来动态地隐藏所有匹配的元素，在隐藏完成后可选地触发一个回调函数。
这个动画效果只调整元素的高度，可以使匹配的元素以“滑动”的方式隐藏起来。
返回值:jQuery
参数
speed (String,Number) : 三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如：1000)
callback (Function) : (可选) 在动画完成时执行的函数
示例
用600毫秒缓慢的将段落滑上
jQuery 代码:
$("p").slideUp("slow");
用200毫秒快速将段落滑上，之后弹出一个对话框
jQuery 代码:
$("p").slideUp("fast",function(){
alert("Animation Done.");
});
slideToggle(speed,[callback])通过高度变化来切换所有匹配元素的可见性，并在切换完成后可选地触发一个回调函数。
这个动画效果只调整元素的高度，可以使匹配的元素以“滑动”的方式隐藏或显示。
返回值：jQuery
参数
speed (String,Number) : 三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如：1000)
callback (Function) : (可选) 在动画完成时执行的函数
示例
用600毫秒缓慢的将段落滑上或滑下
jQuery 代码:
$("p").slideToggle("slow");
用200毫秒快速将段落滑上或滑下，之后弹出一个对话框
jQuery 代码:
$("p").slideToggle("fast",function(){
alert("Animation Done.");
});
jQuery中淡入淡出效果
fadeIn(speed,[callback])通过不透明度的变化来实现所有匹配元素的淡入效果，并在动画完成后可选地触发一个回调函数。
这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。
返回值：jQuery
参数
speed (String,Number) : 三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如：1000)
callback (Function) : (Optional) (可选) 在动画完成时执行的函数
示例
用600毫秒缓慢的将段落淡入
jQuery 代码:
$("p").fadeIn("slow");
用200毫秒快速将段落淡入，之后弹出一个对话框
jQuery 代码:
$("p").fadeIn("fast",function(){
alert("Animation Done.");
});
fadeOut(speed,[callback])通过不透明度的变化来实现所有匹配元素的淡出效果，并在动画完成后可选地触发一个回调函数。
这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。
返回值：jQuery
参数
speed (String,Number) :三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如：1000)
callback (Function) :(可选) 在动画完成时执行的函数
示例
用600毫秒缓慢的将段落淡出
jQuery 代码:
$("p").fadeOut("slow");
用200毫秒快速将段落淡出，之后弹出一个对话框
jQuery 代码:
$("p").fadeOut("fast",function(){
alert("Animation Done.");
});
fadeTo(speed,opacity,[callback])把所有匹配元素的不透明度以渐进方式调整到指定的不透明度，并在动画完成后可选地触发一个回调函数。
这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。
返回值:jQuery
参数
speed (String,Number) : 三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如：1000)
opacity (Number) : 要调整到的不透明度值(0到1之间的数字).
callback (Function) : (可选) 在动画完成时执行的函数
示例
用600毫秒缓慢的将段落的透明度调整到0.66，大约2/3的可见度
jQuery 代码:
$("p").fadeTo("slow", 0.66);
用200毫秒快速将段落的透明度调整到0.25，大约1/4的可见度，之后弹出一个对话框
jQuery 代码:
$("p").fadeTo("fast", 0.25, function(){
alert("Animation Done.");
});
四.自定义动画
#box {
width: 100px;
height: 100px;
background
-color: red; position:absolute; } #pox { width: 100px; height: 100px; background-color: green; position: absolute; top: 200px; } </style> <script src="js/jquery-1.8.3.min.js"></script> <script type="text/javascript">
$(function() { //在自定义动画中要想使用right top let bottom这种方向性的属性，必须给外层样式加上决定定位 // $("#box").animate({ left: "30px", top: "50px", right: "100px", bottom: "30px" }); //自定义动画中，每次开始运动都必须是初始位置或初始状态，而有时我们想通过当前位置或状态下再进行动画。jQuery 提供了自定义动画的累加、累减功能。 //$(".button").click(function () { // $("#box").animate({left:"+=50px"});//每按一次开始按钮div就会先做移动50px // }); //-----------------------下面是同步动画------------------- //一个CSS 变化就是一个动画效果，下面的例子中，已经有四个CSS 变化（分别是width，height，opacity，fontSize的变化）实现了多重动画同步运动的效果。 //（所谓多重同步运动的效果就是，这四个css属性的值在同一时间，同时变化） //$(".button").click(function () { // $("#box").animate({ width: "300px", height: "300px", background: "blue", fontSize: "40px" }, 1000, function () { // $(this).hide(1000); // }); /*对于同步动画的三个参数的理解 1.第一个参数相当于css中的属性 2.第二个参数是这个动画需要执行的速度，默认是600毫秒 3.第三个参数是回调函数，执行完这个动画后要执行的动画 */ //--------------------队列动画--------------------------------- //通过回调函数现实队列动画。（效果就是：首先#box的宽度变为300px 然后高度变为200px,然后透明度变为50%，字体大小变为150px 最后弹出一个“完毕”） //$(".button").click(function () { // $("#box").animate({ width: "300px"}, 2000, function(){ // $(this).animate({height:"200px"},2000,function(){ // $(this).animate({ opacity: 0.5 }, 2000, function () { // $(this).animate({ fontSize: "150px" }, 2000, function () { alert("完毕") }) // }); // }); // }); //}); //在同一个元素的基础上，使用链式调用也可以实现列队动画 //$(".button").click(function () { // $("#box").animate({ width: "300px" }, 2000) // .animate({ height: "200px" }, 2000) // .animate({ opacity: 0.5 }, 2000) // .animate({ fontSize: "150px" }, 2000, function () { // alert("完毕"); // }) //}); //在同一个元素的基础上，通过依次顺序实现列队动画 (如果有多个元素则不能实现，两个元素之间的动画是同步的。) //$(".button").click(function () { // $("#box").animate({ width: "300px" }, 1000); // $("#box").animate({ height: "200px" }, 1000); // $("#box").animate({ opacity: 0.5 }, 1000); // $("#box").animate({ fontSize: "150px" }, 1000, function () { alert("列队动画执行完毕") }); //}) //如果有多个元素则不能实现 不信请看下面代码 (通过执行下面这段代码，我们发现#box 与#pox这两个元素的动画是同时执行的，属于#box的那两段动画是先执行 $("#box").animate({ width: "300px" }, 1000)然后再执行("#box").animate({ opacity: 0.5 }, 1000); 他们两个有列队动画的效果) 而属于#pox的两段动画是先执行 $("#pox").animate({ height: "200px" }, 1000)然后再执行 $("#pox").animate({ fontSize: "150px" }, 1000)他们两个有列队动画的效果。 但是 $("#box").animate({ width: "300px" }, 1000)与$("#pox").animate({ height: "200px" }, 1000); 同时执行的。 $("#box").animate({ opacity: 0.5 }, 1000)与$("#pox").animate({ fontSize: "150px" }, 1000)是同时执行的。 //前面说了这么一大堆 其实就是： //#box的第一条和第三条是列队动画 //#pox的第二条和第四条是列队动画 //#box的第一条和#pox的第二条是同步动画 //#box的第三条和#pox的第四条是同步动画 //$(".button").click(function () { // $("#box").animate({ width: "300px" }, 1000); // $("#pox").animate({ height: "200px" }, 1000); // $("#box").animate({ opacity: 0.5 }, 1000); // $("#pox").animate({ fontSize: "150px" }, 1000, function () { alert("列队动画执行完毕") }); //}) //那我们现在的需求是：不管你有几个元素，我都要他们依次实现列队动画效果。(测试了一下，只能用这种回调函数嵌套的方式来实现了) //$(".button").click(function () { // $("#box").animate({ width: "300px" }, 1000, function () { // $("#pox").animate({ height: "200px" }, 1000, function () { // $("#box").animate({ height: "200px" }, 1000, function () { // $("#pox").animate({ fontSize: "150px" }, 1000, function () { alert("列队动画执行完毕") }); // }) // }) // }) //}) // ---------------------------------动画与非动画 进行队列 【queue()】 //我们知道动画可以有列队效果。但是一个普通的css（比如改变背景颜色）如果实现与动画进行列队呢？ //$(".button").click(function () { // $("#box").slideUp(1000).slideDown(1000).css("background", "yellow") //}) //本来我们是想要实现队列动画的，也就是先让#box滑动隐藏，然后再让它滑动显示，最后让它改变颜色。可是我们运行这段呢代码，我们看到第一时间就执行了css("background","yellow")这段代码。 //通过上面的代码我们了解到 css()方法不是动画方法，会和第一个动画同时执行。也就是说非动画不能列队。 //现在问题又来了。我现在想要实现列队动画，也想非动画和动画一起列队怎么办呢？ 其实我们可以使用回调函数实现的。请看下面的代码 //$(".button").click(function () { // $("#box") // .slideUp(1000) // .slideDown(1000, function () { $(this).css("background", "yellow") }) // .hide(3000); //}) //但如果上面这样的话，当列队动画繁多的时候，可读性不但下降，而原本的动画方法不够清晰。所以，我们的想法是每个操作都是自己独立的方法。那么jQuery 提供了一个类似于回调函数的方法：.queue() //$(".button").click(function () { // $("#box") // .slideUp(1000) // .slideDown(1000) // .queue(function () { $(this).css("background", "yellow") }); //}); //现在，我们想继续在.queue()方法后面再增加一个隐藏动画，这时发现居然无法实现。这是.queue()特性导致的。有两种方法可以解决这个问题，jQuery 的.queue()的回调函数可以传递一个参数，这个参数是next 函数，在结尾处调用这个next()方法即可再链式执行列队动画。 //$(".button").click(function () { // $("#box") // .slideUp(1000) // .slideDown(1000) // .queue(function (next) { $(this).css("background", "yellow"); next(); }).hide(1000); //}); ////顺序编程实现队列动画 我们看到使用顺序调用的列队，逐个执行，非常清晰 //$(".button").click(function () { // $("#box").slideUp(1000); // $("#box").slideDown(1000); // $("#box").queue(function (next) { // $(this).css("background", "yellow"); // next(); // }); // $("#box").hide(1000); //}); //-----------------------------动画的清除 【clearQueue()】 //清理动画列队 //假如我想在执行完第二个动画那就就不再执行了。那么只要在第二个动画的回调函数哪里添加一句$(this).clearQueue()就可以停止后面的列队动画了 //$(".button").click(function () { // $("#box").slideUp(1000); // $("#box").slideDown(1000, function () { // $(this).clearQueue(); // }); // $("#box").queue(function (next) { // $(this).css("background", "yellow"); // next(); // }); // $("#box").hide(1000); //}); //那么如果获取列队动画的长度呢？ //function getQueueCount() { // return $("#box").queue("fx").length; //获取当前列队的长度，fx 是默认列队的参数 //} //////用法 //$(".button").click(function () { // //下面这段代码总共有slideUp，slideDown，queue，hide这四个动画 // $("#box") // .slideUp(1000, function () { alert(getQueueCount()) }) //执行到这一步的时候会打印出：4 它后面还有三个动画，所以下一步的时候会打印出3 // .slideDown(1000, function () { alert(getQueueCount()) }) //执行到这一步的时候会打印出：3 // .queue(function (next) { alert(getQueueCount()); $(this).css("background", "yellow"); next() }) //执行到这一步的时候会打印出：2 // .hide(1000, function () { alert(getQueueCount()) }); //执行到这一步的时候会打印出：1 //}); //---------------------------------动画的停止【stop()】 //很多时候需要停止正在运行中的动画，jQuery 为此提供了一个.stop()方法。它有两个可选参数：.stop(clearQueue, gotoEnd)；clearQueue 传递一个布尔值，代表是否清空未执行完的动画列队，gotoEnd 代表是否直接将正在执行的动画跳转到末状态。 //$(".button").click(function () { // $("#box") // .animate({ left: "1000px" }, 3000) //}) //$(".stop").click(function () { // $("#box").stop(); //将#box这个元素的动画停止掉。没有参数的stop()方法只是单纯的停止动画 //}) // 那下面再来了解下，列队动画的停止 // $(".button").click(function () { // $("#box").animate({ left: "300px" }, 1000) // .animate({ bottom: "300px" }, 1000) // .animate({ width: "300px" }, 1000) // .animate({ height: "300px" }, 1000) //}) // $(".stop").click(function () { 以上是关于Jquery中的事件和动画的主要内容，如果未能解决你的问题，请参考以下文章