JQUERY实现带左右箭头和数字
- 格式:pdf
- 大小:59.45 KB
- 文档页数:4


jquery使⽤⽅法jQuery是⽬前使⽤最⼴泛的javascript函数库。
据统计,全世界排名前100万的⽹站,有46%使⽤jQuery,远远超过其他库。
微软公司甚⾄把jQuery作为他们的官⽅库。
对于⽹页开发者来说,学会jQuery是必要的。
因为它让你了解业界最通⽤的技术,为将来学习更⾼级的库打下基础,并且确实可以很轻松地做出许多复杂的效果。
⼀、选择⽹页元素jQuery的基本设计和主要⽤法,就是"选择某个⽹页元素,然后对其进⾏某种操作"。
这是它区别于其他函数库的根本特点。
使⽤jQuery的第⼀步,往往就是将⼀个选择表达式,放进构造函数jQuery()(简写为$),然后得到被选中的元素。
选择表达式可以是CSS选择器:1 $(document)//选择整个⽂档对象2 $('#myId')//选择ID为myId的⽹页元素3 $('div.myClass')//选择class为myClass的div元素4 $('input[name=first]')//选择name属性等于first的input元素也可以是jQuery特有的表达式:1 $('a:first')//选择⽹页中第⼀个a元素2 $('tr:odd')//选择表格的奇数⾏3 $('#myForm :input')//选择表单中的input元素4 $('div:visible') //选择可见的div元素5 $('div:gt(2)')//选择所有的div元素,除了前三个6 $('div:animated')//选择当前处于动画状态的div元素⼆、改变结果集如果选中多个元素,jQuery提供过滤器,可以缩⼩结果集:1 $('div').has('p'); //选择包含p元素的div元素2 $('div').not('.myClass'); //选择class不等于myClass的div元素3 $('div').filter('.myClass'); //选择class等于myClass的div元素4 $('div').first(); //选择第1个div元素5 $('div').eq(5); //选择第6个div元素有⼀些时候,我们需要从结果集出发,移动到附近的相关元素,jQuery也提供了在DOM树上的移动⽅法:1 $('div').next('p'); //选择div元素后⾯的第⼀个p元素2 $('div').parent(); //选择div元素的⽗元素3 $('div').closest('form'); //选择离div最近的那个form⽗元素4 $('div').children(); //选择div的所有⼦元素5 $('div').siblings(); //选择div的同级元素三、链式操作选中⽹页元素以后,就可以对它进⾏某种操作。
jQuery帮助⽂档jQuery 库 - 特性基础 jQuery 实例jQuery 是⼀个 JavaScript 函数库。
下⾯的例⼦演⽰了 jQuery 的 hidejQuery 库包含以下特性:实例HTML 元素选取 <html>HTML 元素操作 <head>CSS 操作 <script type="text/javaHTML 事件函数 <script type="text/javascrJavaScript 特效和动画 $(document).ready(functionHTML DOM 遍历和修改 $("button").click(functionAJAX $("p").hide();Utilities });});</script></head><body><h2>This is a heading</h2><p>This is a paragraph.</p<p>This is another paragra<button type="button">Clic</body></html>jQuery 语法jQuery 语法是为 HTML 元素的选取编制,可以对元素执⾏某些操作。
基础语法是:$(selector).action()美元符号定义 jQuery选择符(selector)“查询”和“查找” HTML 元素jQuery action() 执⾏对元素的操作实例$(this).hide() - 隐藏当前元素$("p").hide() - 隐藏所有段落$("p.test").hide() - 隐藏所有 class="test" 的段落$("#test").hide() - 隐藏所有 id="test" 的元素提⽰:jQuery 使⽤的语法是 XPath 与 CSS 选择器语法的组合。
目录1Accordion(可折叠标签) (4)1.1实例 (4)1.2参数 (5)2DateBox(日期框) (5)2.1实例 (5)2.2参数 (8)2.3事件 (8)2.4方法 (8)3ComboBox(组合框) (8)3.1实例 (8)3.2参数 (10)3.3事件 (11)3.4方法 (11)4Dialog(对话框) (11)4.1实例 (11)4.2参数 (13)4.3事件 (14)4.4方法 (14)5Messager(提示框) (14)5.1实例 (14)5.2方法 (17)5.3扩展 (18)6NumberBox(数字框) (18)6.1实例 (18)6.2参数 (19)7ValidateBox(验证框) (19)7.1实例 (19)7.2参数 (21)7.3方法 (21)7.4扩展 (21)8Pagination(分页) (22)8.1实例 (22)8.2参数 (23)8.3事件 (24)9Window(窗口) (24)9.1实例 (24)9.2参数 (27)9.3事件 (27)9.4方法 (27)10Panel(面板) (27)10.1实例 (27)10.2参数 (29)10.3事件 (30)10.4方法 (30)11Tabs(标签) (31)11.1实例 (31)11.2参数 (33)11.3事件 (33)11.4方法 (34)11.5标签面板属性 (34)12Tree(树) (34)12.1实例 (34)12.2参数 (37)12.3事件 (38)12.4方法 (38)13Layout(布局) (39)13.1实例 (39)13.2参数 (40)13.3方法 (40)14Datagrid(数据表) (40)14.1实例 (41)14.2参数 (44)14.3Column参数 (45)14.4事件 (46)14.5方法 (47)1Accordion(可折叠标签)1.1实例1.1.1代码<html><head><meta http-equiv="Content-Type"content="text/html; charset=UTF-8"><title>jQuery EasyUI</title><link rel="stylesheet"type="text/css"href="../themes/default/easyui.css"><link rel="stylesheet"type="text/css"href="../themes/icon.css"><script type="text/javascript"src="../jquery-1.4.2.min.js"></script><script type="text/javascript"src="../jquery.easyui.min.js"></script><script type="text/javascript">$( function() {$('#aa').accordion( {width : 400,height : 200,fit : false});});</script></head><body><div id="aa"border="true"><div title="Title1"icon="icon-save" style="overflow: auto; padding: 10px;"> <h3style="color: #0099FF;">Accordion for jQuery</h3><p>Accordion is a part of easyui framework for jQuery. It lets you define your accordion component on web page more easily.</p></div><div title="Title2"icon="icon-reload"selected="true"style="padding: 10px;">content2</div><div title="Title3">content3</div></div></body></html>1.1.2效果图1.1.3 扩展实例html代码中<div id="aa"border="true">此行也可写成<div id="aa" class="easyui-accordion" style="width:300px;height:200px;" fit="false" border="false">,并且将js代码全部去掉,效果图是一样的。
jquery中animate的用法jquery中的animate()方法可以用来执行动画效果。
该方法可以接受多个参数,包括属性和值,以及一个可选的回调函数。
当animate()方法被调用时,指定的元素会开始执行动画效果。
animate()方法的基本语法如下:$(selector).animate({property1:value1,property2:value2,...}, speed, easing, function(){//回调函数});其中,selector是要执行动画效果的元素的选择器;property:value是要改变的CSS属性及其对应的值;speed表示动画的速度,可以是一个数字,也可以是“slow”、“fast”或“normal”,表示三种不同的速度;easing表示动画的缓动效果;function是可选的回调函数,用于在动画结束时执行一些操作。
除了基本的属性和值外,animate()方法还支持一些特殊的属性和值,如“toggle”、“swing”等。
例如,以下代码可以实现一个让元素从左向右移动的动画效果: $('#element').animate({left: '500px'}, 1000);这里的selector是#element,即id为element的元素;属性为left,表示元素的左边距;值为“500px”,表示元素从左边距为0移动到左边距为500px的位置;速度为1000ms,即1秒钟;没有指定缓动效果和回调函数。
总之,animate()方法是jquery中常用的执行动画效果的方法,可以通过指定不同的属性、值、速度和缓动效果来实现各种不同的动画效果。