Seven Two Blog

一些简单的代码简化 下面是一个简单示例，它说明了 jQuery 对代码的影响。要执行一些真正简单和常见的任务，比方说为页面的某一区域中的每个链接附加一个单击（click）事件，您可以使用纯 JavaScript 代码和 DOM 脚本来实现，如 清单 1 所示。 清单 1. 没有使用 jQuery 的 DOM 脚本                 var external_links = document.getElementById(‘external_links’); var links = external_links.getElementsByTagName(‘a’); for (var i=0;i < links.length;i++) {     var link = links.item(i);     link.onclick = function() {         return confirm(‘You are going to visit: ‘ + this.href);     }; [...]

用jquery解析JSON数据的方法 用jquery解析JSON数据的方法,作为jquery异步请求的传输对象，jquery请求后返回的结果是json对象,这里考虑的都是服务器返回JSON形式的字符串的形式，对于利用JSONObject等插件封装的JSON对象，与此亦是大同小异，这里不再做说明。 这里首先给出JSON字符串集，字符串集如下： 代码如下: var data=” <br />{ <br />root: <br />[ <br />{name:'1',value:'0'}, <br />{name:'6101',value:'北京市'}, <br />{name:'6102',value:'天津市'}, <br />{name:'6103',value:'上海市'}, <br />{name:'6104',value:'重庆市'}, <br />{name:'6105',value:'渭南市'}, <br />{name:'6106',value:'延安市'}, <br />{name:'6107',value:'汉中市'}, <br />{name:'6108',value:'榆林市'}, <br />{name:'6109',value:'安康市'}, <br />{name:'6110',value:'商洛市'} <br />] <br />}”; 这里以jquery异步获取的数据类型——json对象和字符串为依据，分别介绍两种方式获取到的结果处理方式。 1.对于服务器返回的JSON字符串，如果jquery异步请求没做类型说明，或者以字符串方式接受，那么需要做一次对象化处理，方式不是太麻烦，就是将该字符串放于eval()中执行一次。这种方式也适合以普通javascipt方式获取json对象，以下举例说明： var dataObj=eval(“(“+data+”)”);//转换为json对象 alert(dataObj.root.length);//输出root的子对象数量 $.each(dataObj.root,fucntion(idx,item){ if(idx==0){ return true; } //输出每个root子对象的名称和值 alert(“name:”+item.name+”,value:”+item.value); }) 注：对于一般的js生成json对象，只需要将$.each()方法替换为for语句即可，其他不变。 2.对于服务器返回的JSON字符串，如果jquery异步请求将type（一般为这个配置属性）设为“json”，或者利用$.getJSON()方法获得服务器返回，那么就不需要eval（）方法了，因为这时候得到的结果已经是json对象了，只需直接调用该对象即可，这里以$.getJSON方法为例说明数据处理方法： $.getJSON(“http://www.phpzixue.cn/”,{param:”gaoyusi”},function(data){ //此处返回的data已经是json对象 [...]

jquery中的选择器是css3和XPath的结合,jQuery提取这两种查询语言最好的部分，结合后创造出了最终的jquery表达式查询语言。如果你CSS非常熟悉的话那么你学起来就很容易了。 基本选择器： $(“#myELement”) 选择id值等于myElement的元素，id值不能重复在文档中只能有一个id值是myElement所以得到的是唯一的元素 $(“div”) 选择所有的div标签元素，返回div元素数组 $(“.myClass”) 选择使用myClass类的css的所有元素 $(“*”) 选择文档中的所有的元素 可以运用多种的选择方式进行联合选择：例如$(“#myELement,div,.myclass”) 层叠选择器： $(“form input”) 选择所有的form元素中的input元素 $(“#main > *”) 选择id值为main的所有的子元素 $(“label + input”) 选择所有的label元素的下一个input元素节点 经测试选择器返回的是label标签后面直接跟一个input标签的所有input标签元素 $(“#prev ~ div”) 同胞选择器 该选择器返回的为id为prev的标签元素的所有的属于同一个父元素的div标签 基本过滤选择器： $(“tr:first”) 选择所有tr元素的第一个 $(“tr:last”) 选择所有tr元素的最后一个 $(“input:not(:checked) + span”) 过滤掉：checked的选择器的所有的input元素 $(“tr:even”) 选择所有的tr元素的第0，2，4… …个元素（注意：因为所选择的多个元素时为数组，所以序号是从0开始） $(“tr:odd”) 选择所有的tr元素的第1，3，5… …个元素 $(“td:eq(2)”) 选择所有的td元素中序号为2的那个td元素 $(“td:gt(4)”) 选择td元素中序号大于4的所有td元素 $(“td:ll(4)”) 选择td元素中序号小于4的所有的td元素 $(“:header”) $(“div:animated”) 内容过滤选择器： $(“div:contains(‘John’)”) 选择所有div中含有John文本的元素 [...]

基本的鼠标互动： 拖拽(drag and dropping)、排序(sorting)、选择(selecting)、缩放(resizing) 各种互动效果： 手风琴式的折叠菜单(accordions)、日历(date pickers)、对话框(dialogs)、滑动条(sliders)、表格排序(table sorters)、页签(tabs)、放大镜效果(magnifier)、阴影效果(shadow) 第一部分：鼠标交互: 1.1 Draggables:拖拽: 所需文件： ui.mouse.js ui.draggable.js ui.draggable.ext.js 用法：文件载入后，可以拖拽class = “block”的层 $(document).ready(function(){ $(“.block”).draggable(); }); draggable(options)可以跟很多选项 选项说明：http://docs.jquery.com/UI/Draggables/draggable#options 选项实例：http://dev.jquery.com/view/trunk/plugins/ui/tests/draggable.html 1.2 Droppables: 所需要文件，drag drop ui.mouse.js ui.draggable.js ui.draggable.ext.js ui.droppable.js ui.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(“<br>Dropped!”); } }); }); 选项说明：http://docs.jquery.com/UI/Droppables/droppable#options 选项实例：http://dev.jquery.com/view/trunk/plugins/ui/tests/droppable.html 1.3　Sortables　排序: [...]

jQuery是什么？ jQuery是一个简洁快速的JavaScript库，它能让你在你的网页上简单的操作文档、处理事件、运行动画效果或者添加Ajax交互。 jQuery的设计会改变你写JavaScript代码的方式。 jQuery适合于设计师、开发者以及那些还好者，同样适合用于商业开发，可以说jQuery适合任何JavaScript应用的地方，可用于不用的应用程序。