jquery常用操作.docx

jquery常用操作2008-09-17 15:00jquery基本入门第一天：选择器相关1.html()与.text().html()取得第一个匹配元素的html内容。会带有标签，.text()仅是里边的文本.text()取得所有匹配元素的内容。结果是由所有匹配元素包含的文本内容组合起来的文本2.$(a)选择所有的连接$(.a)选择所有class=a的标签$(#a)选择id=a的标签3.$(spanname=a)选择了$(spanlove=a)选择了$(li#a) 选择了$(li.a) 选择了$(li .a) 选择了span被选择了由于可以看出 连在一起是指li并且class=a 中间有空格是指下的class=a的元素,同CSS选择器的道理一样$(divid=form).hide(slow);找到并且这个层隐藏$(divid=form).children().hide(slow)找到span才是被找到并隐藏$(h1:contains(换个写法)找到换个写法$(h1 :contains(换个写法)找到 换个写法由此可以看出，连在一起是找h1中包含换个写法的内容,有空格是找的下一级元素中含中换个写法的内容4.$(ulli:odd) 偶数行$(ulli:even) 奇数行5 var a=$(selectname=class optionselected); var b=$(selectname=class1); b.append(a);从一个下拉列表把内容放到另一个下拉列表里6$(a).parent(p) 只能找到段落一 直接关系$(a).parents(p) 可以找到段落二 所有的父$(p).eq(0)找到第一个p$(p:eq(0)同上$(p:visible) 所有可见的p7$(div:first) 找到第一个div$(div:first-child) div的父元素的第一个元素是div才匹配以上基本上是写了下选择器，更多参考/Selectors第二天:ajax相关首先看下json，当然ajax可以返回xml.html,json等json_encode后的数据格式总结一，对象结果为hash表,就是键:值,键:值这样的形式，为js可以识别的对象二，一维索引数组结果为数组元素一,元素二，为js可以识别的数组三，一维相关数组结果为hash表,为js可以识别的对象四，多维索引数组结果为a,b,c,d这样的形式,为js可以识别的数组五，多维相关数组结果为1:a,2:b,1:c,2:d,外边是js可以识别的数组，中间是hash对于hash的处理方式var json=title:a,name:b,age:c;alert(json.age);对于数组的处理方式var json=a,b,c;alert(json1);之所以总结，是因为我对这些不熟，遇到这样子的我就套上这些OK,现在开始看jquery处理ajax$.ajax()为通用方式其中间必须是一个hash表即，形式为键:值,键:值的形式参数type:请求方式，默认为get，如:type:posturl :ajax请求的url 如:url :ajax.php 也可以是url:ajax.php?id=5这样子id可以通过$_GETid得到data:传递的参数:如:data:name=terry&age=30 具体如何得到数据($_GET,$_POST)取决于上边的type.如:data:name:terry,age:30，此种形式会转成name=terry&age=30dateType:返回数据的方式，默认为html,如果返回json下边有个例子是处理这种类型的返回的数据ifModified:默认为false，如果为true，当数据没有变化时请求不成功error:请求失败是执行的函数timeout:请求的时间，超过此时间，请求失败complete:请求结束后执行的函数,不管请求成功或失败第三天：昨天写了下ajax的通用方法：今天看下其它的方法load(url,data,callback),默认是GET方式:如果load(ajax.php)用GET方式提交数据;如果有任何参数:如load(ajax.php,name=terry);刚用post方式提交数$.get(url,data,callback)用get方式向远程页面传递参数如$.get(ajax.php,name:terry,id:5,function(msg) $(#content).html(msg);)以GET方式得到数据并放到层id为content的层中$.post(url,data,callback)同上，但数据以post方式提交$.getJSON(url,data,callback)以get方式获得json数据，这里重点写下：如果返回的数据为数组如a,b,c处理方式$.each(a,c,c.function(i)alert(this)返依次弹出a,b,c如果返回的数据为hash对象如name:terry,age:25处理方式$.each(msg,function(i) alert(i+=+this);)刚依次弹出name=terry,age=25就是说对于数组，i为0.1.2等，对于hash对象i为键如果返回的数据外边是数组，里边是hash对象name:terry,age:25,name:abc,age:30,刚处理方式function jq() $.getJSON(ajax.php,function(msg) $.each(msg,function(i) $.each(this,function(j) alert(j+this); ); ) )一个处理时的效果function jq()$.get(ajax.php,function(msg) $(#content).html(msg); $(#con).html(处理结束););$(#con).html(处理中.);jQuery的bind函数jQuery学习之bind在jQuery里面，直接用bind函数和unbind函数为某个DOM或者HTML标签等绑定一个操作和移除一个事件就行了。例如为一个button添加一个click。可以这样操作XML/HTML代码1. 这是一个button，现在我们要为他添加一个事件JavaScript代码1. 2. $(#myBtn).bind(click,function() 3. alert(click); 4. ); 5. 这样，我们就为这个button绑定了一个click的事件。bind函数可以有三个参数，当第二个参数不是一个函数，而是一个数据对象时，它将默认做为bind第三个参数（函数）的参数。例如：JavaScript代码1. 2. functionshowAlert(events) 3. alert(events.data.foo); 4. 5. $(#myBtn).bind(click,foo:click,showAlert); 6. 点击时，同样会显示:click这些就是bind的一些基本用法，当然还有一些方法比如在绑定方法的时候，用的是return false;可以让这个方法失效JavaScript代码1. 2. $(#myBtn).bind(click,function() 3. returnfalse; 4. ) 5. 这样，刚才绑定的click又失效了，不过，这种方法往往用在submit提交的时候比较多。还有一些方法可以取消默认行为和阻止事件起泡：preventDefault 和stopPropagation例：JavaScript代码1. 2. $(#myBtn).bind(click,function(event) 3. event.preventDefault();/取消默认的click行为4. ); 5. $(#myBtn).bind(click,function(event) 6. event.stopPropagation();/阻止click事件起泡7. ); 8. 9. jquery radio,checkbox,select操作JavaScript代码1. 获取一组radio被选中项的值 2. varitem = $(inputname=itemschecked).val(); 3. 获取select被选中项的文本 4. varitem = $(selectname=items optionselected).text(); 5. select下拉框的第二个元素为当前选中值 6. $(#select_id)0.selectedIndex = 1; 7. radio单选组的第二个元素为当前选中值 8. $(inputname=items).get(1).checked =true; 9. 10. 获取值： 11. 12. 文本框，文本区域：$(#txt).attr(value)； 13. 多选框checkbox：$(#checkbox_id).attr(value)； 14. 单选组radio： $(inputtype=radiochecked).val(); 15. 下拉框select： $(#sel).val(); 16. 17. 控制表单元素： 18. 文本框，文本区域：$(#txt).attr(value,);/清空内容19. $(#txt).attr(value,11);/填充内容20. 21. 多选框checkbox： $(#chk1).attr(checked,);/不打勾22. $(#chk2).attr(checked,true);/打勾23. if($(#chk1).attr(checked)=undefined)/判断是否已经打勾24. 25. 单选组radio： $(inputtype=radio).attr(checked,2);/设置value=2的项目为当前选中项26. 下拉框select： $(#sel).attr(value,-sel3);/设置value=-sel3的项目为当前选中项27. $(11112222).appendTo(#sel)/添加下拉框的option28. $(#sel).empty()；/清空下拉框/UI所有效果说明：基本的鼠标互动：拖拽(drag and dropping)、排序(sorting)、选择(selecting)、缩放(resizing)各种互动效果：手风琴式的折叠菜单(accordions)、日历(date pickers)、对话框(dialogs)、滑动条(sliders)、表格排序(table sorters)、页签(tabs)放大镜效果(magnifier)、阴影效果(shadow)第一部分：鼠标交互1.1 Draggables:拖拽所需文件：ui.mouse.jsui.draggable.jsui.draggable.ext.js用法：文件载入后，可以拖拽class = block的层$(document).ready(function() $(.block).draggable(););draggable(options)可以跟很多选项选项说明：/UI/Draggables/draggable#options选项实例：/view/trunk/plugins/ui/tests/draggable.html1.2 Droppables所需要文件，drag dropui.mouse.jsui.draggable.jsui.draggable.ext.jsui.droppable.jsui.droppable.ext.js用法：$(document).ready(function() $(.block).draggable(helper: clone);$(.drop).droppable( accept: .block, activeClass: droppable-active, hoverClass: droppable-hover, drop: function(ev, ui) $(this).append(Dropped!); ););选项说明：/UI/Droppables/droppable#options选项实例：/view/trunk/plugins/ui/tests/droppable.html1.3Sortables排序所需要的文件jquery.dimensions.jsui.mouse.jsui.draggable.jsui.droppable.jsui.sortable.js用法：$(document).ready(function() $(#myList).sortable(););dimensions文档/plugins/project/dimensions选项说明：/UI/Sortables/sortable#options选项实例：/view/trunk/plugins/ui/demos/ui.sortable.html1.4 Selectables 选择所需要的文件jquery.dimensions.jsui.mouse.jsui.draggable.jsui.droppable.jsui.selectable.js用法：$(document).ready(function() $(#myList).selectable(););选项说明：/UI/Selectables/selectable#options选项实例：/view/trunk/plugins/ui/tests/selectable.html1.5Resizables改变大小所需要的文件，此例子需要几个css文件jquery.dimensions.jsui.mouse.jsui.resizable.js用法：$(document).ready(function() $(#example).resizable(););CSS文件：/view/trunk/themes/flora/flora.all.css选项说明：/UI/Resizables/resizable#options选项实例：/view/trunk/plugins/ui/demos/ui.resizable.html第二部分：互动效果2.1 Accordion 折叠菜单所需要的文件:ui.accordion.jsjquery.dimensions.js用法：$(document).ready(function() $(#example).accordion(););CSS文件：/view/trunk/themes/flora/flora.all.css选项说明：/UI/Accordion/accordion#options选项实例：/view/trunk/plugins/accordion/?p= dialogs 对话框所需要的文件：jquery.dimensions.jsui.dialog.jsui.resizable.jsui.mouse.jsui.draggable.js用法：$(document).ready(function() $(#example).dialog(););CSS文件：/view/trunk/themes/flora/flora.all.css选项说明：/UI/Dialog/dialog#options选项实例：/view/trunk/plugins/ui/tests/dialog.html2.3 sliders 滑动条所需要的文件jquery.dimensions.jsui.mouse.jsui.slider.js用法：$(document).ready(function() $(#example).slider(););CSS文件：/view/trunk/themes/flora/flora.all.css选项说明：/UI/Slider/slider#options选项实例：/view/trunk/plugins/ui/demos/ui.slider.html2.4 Tablesorter表格排序所需要的文件ui.tablesorter.js用法：$(document).ready(function() $(#example).tablesorter(sortList:0,0,2,1, widgets: zebra););CSS文件：/view/trunk/themes/flora/flora.all.css选项说明：/Plugins/Tablesorter/tablesorter#options选项实例：/docs/#Demo2.5 tabs页签(对IE支持不是很好)所需要的文件ui.tabs.js用法：$(document).ready(function() $(#example ul).tabs(););CSS文件：/view/trunk/themes/flora/flora.all.css选项说明：/UI/Tabs/tabs#initialoptions选项实例：/view/trunk/plugins/ui/tests/tabs.htmltabs ext http:/stilbuero.de/jquery/tabs_3/rotate.html第三部分：效果3.1 Shadow 阴影实例/view/trunk/plugins/ui/demos/ui.shadow.html3.2 Magnifier 放大实例/view/trunk/plugins/ui/demos/ui.magnifier.html写过这样一段jq$(ul li.navbox).hover(function() $(div,$(this).fadeIn(fast); / 先忽略掉div看，$($(this)也是jq对象 ,function() $(div,$(this).fadeOut(fast); );对比看这样写效果是一样的$(ul li.navbox).hover(function() $(div,this).fadeIn(fast); /看上去有点儿别扭吧，先忽略掉div,不就是常见的$(this)jq当前对象 ,function() $(div,this).fadeOut(fast); );总结this是js对象，而这里面都是jq对象，他们是$($(this),和$(this)单独分析下：a = this; /a是JS对象b = $(this); /b是JQ对象$(a) 和 $(b) ,现在加上了$()，所以他们都是JQ对象了js javascript:void(0) 真正含义我想使用过ajax的都常见这样的代码：here但这儿的void(0)究竟是何含义呢？Javascript中void是一个操作符，该操作符指定要计算一个表达式但是不返回值。void 操作符用法格式如下：1. javascript:void (expression)2. javascript:void expressionexpression 是一个要计算的 Javascript 标准的表达式。表达式外侧的圆括号是选的，但是写上去是一个好习惯。 (实现版本 Navigator 3.0 )你以使用 void 操作符指定超级链接。表达式会被计算但是不会当前文档处装入任何内容。下面的代码创建了一个超级链接，当用户以后不会发生任何事。当用户链接时，void(0) 计算为 0，但 Javascript 上没有任何效果。单此处什么也不会发生下面的代码创建了一个超级链接，用户单时会提交表单。单此处提交表单a href=#与 a href=javascript:void(0) 的区别 链接的几种办法#包含了一个位置信息默认的锚是#top 也就是网页的上端而javascript:void(0) 仅仅表示一个死链接这就是为什么有的时候页面很长浏览链接明明是#是跳动到了页首而javascript:void(0) 则不是如此所以调用脚本的时候最好用void(0)或者等链接的几种办法1.window.open(url)2.用自定义函数 function openWin(tag,obj) obj.target=_blank; obj.href = Web/Substation/Substation.aspx?stationno=+tag; obj.click(); 株洲window.location.href=外出网 发酷网 表单元素（控件）不可见，你用visibility还是display？属性大比拼：visibility和display的介绍今天在做一个表单时涉及到这方面，当选中相应的选项后设置相应的几个元素（控件可见或不可见），后来还是用了visibility来实现。我们先来看下visibility对应的几个属性的介绍： 1 visibility:visible 2 /*元素可见，默认值*/ 3 visibility:hidden 4 /*元素不可见，但仍然为其保留相应的空间*/ 5 visibility:collapse 6 /*只对table对象起作用，能移除行或列但不会影响表格的布局。如果这个值用 7 8 在table以外的对象上则表现为hidden。*/ 9 visibility:inherit10 /*继承上级元素的visibility值。*/复制代码1 再来看一下display对应的几个属性的介绍：2 3 display:none4 /*元素不可见，并且不为其保留相应的位置*/5 display:block6 /*表现为一个块级元素（一般情况下独占一行）*/7 display:inline8 /*表现为一个行级元素（一般情况下不独占一行）*/复制代码不好意思，我要华丽丽地加上一条链接，让复制粘贴不注明文章出处的人帮我做个外链，抱歉。 纯野原创博客visibility和display中不可见的区别估计看到这里，你