BlogJava-秋风的萧瑟又见湖边木叶飞-随笔分类-jQuery

Javascript和Ajax中文乱码吐血版解决方案

梁良 — Wed, 27 Aug 2014 00:22:00 GMT

今天弄了一天的Ajax中文乱码问题，Ajax的乱码问题分为两种：

1. JavaScript输出的中文乱码，

比如：alert("中文乱码测试");

2. 这第二种就是Ajax从服务器端获得的数据出现乱码的问题。（我搜了n个小时试了n中方法才找到答案）

现在将我搜集的比较有效的方法都与大家分享：（我使用的开发环境是Eclipse，相信其他语言和开发环境都差不太多。）

比如

var message = xmlHttp.responseText;
alert("message: "+message);

获得这个message输出就是乱码

解决办法有两种：

（1）在jsp文件里引入js文件时可以这样写：，该方法具有移植性

（2）（该方法可能会导致换一台电脑导入项目后js文件里中文会乱码）. 修改编码。切记要将代码备份一下，改了编码之后中文会变为乱码。

在js文件上右键点击Properties，最好是在菜单栏栏里选择Window-->Perferences(以绝后患)，修改Text file encode 为UTF-8（这里应当与jsp中的编码相同）

同样的将JavaScript source file和JSP的Default encoding设置为UTF-8（这里应当与jsp中的编码相同，这样以后的项目就都是utf-8的编码了，推荐使用这个）

（2）. 注意response.setContentType("text/html;charset=utf-8");和PrintWriter out = response.getWriter();的位置关系，切记要将PrintWriter out = response.getWriter();放在response.setContentType("text/html;charset=utf-8");的后面，否则设置的编码将无效，这也是我弄了n久都搞不定的原因！！！

3. 客户端发给服务器端得中文数据为乱码

解决办法：示例：客户端的javaScript脚本

function verify(){
$.get("AJAXServer?name="+encodeURI(encodeURI($("#userName").val())),null,function callback(data){$("#result").html(data);});
}

注意：encodeURI需要使用两次！

服务器端代码:
          //1.取参数
          String str = request.getParameter("name");
          str = java.net.URIDecode.decode(str,"UTF-8")

梁良 2014-08-27 08:22 发表评论

又一个山寨的 Google 瞬时搜索，好处是它可以加密搜索

梁良 — Sun, 09 Jan 2011 13:55:00 GMT

wmr也山寨了一个Google瞬时搜索。其使用了Google Ajax Search API，将其中的onkeyup加入了action的值，就得到了一个瞬时搜索。其对比之前的那些山寨瞬时搜索的优势在于支持加密传输，不怕发生意外。

梁良 2011-01-09 21:55 发表评论

国产开源XHTML在线编辑器xhEditor v1.1.3正式版发布

梁良 — Fri, 07 Jan 2011 11:04:00 GMT

xhEditor是一个基于jQuery开发的简单迷你并且高效的可视化XHTML编辑器，基于网络访问并且兼容IE 6.0+,Firefox 3.0+,Opera 9.6+,Chrome 1.0+,Safari 3.22+。在众多用户不断的问题回馈和意见反馈下，经过长达1年零3 个月的不断完善后，v1系列的正式版本v1.1.3 Final终于正式对外发布。经过这么久的不断开发修正和完善，v1.1.3 Final的BUG数量相对已经非常少，我们有自信可以给大家交上一份满意的答卷。

我们不是最好的，但是我们会努力做的更好，我们愿意倾听和接受所有用户的心声。最后，大家在使用过程中若发现任何的问题，或者有比较好的创意和想法，可以随时向我们反馈(yanis.wang@gmail.com)，我们会随时倾听大家的意见，xhEditor的发展离不开大家的支持。

查看最新版演示：http://xheditor.com/demo

更多官方在线演示：
   1. 默认模式：http://xheditor.com/demos/demo01.html
   2. 自定义按钮：http://xheditor.com/demos/demo02.html
   3. 皮肤选择：http://xheditor.com/demos/demo03.html
   4. 其它选项：http://xheditor.com/demos/demo04.html
   5. Javascript交互：http://xheditor.com/demos/demo05.html
   6. 非utf-8编码网页调用：http://xheditor.com/demos/demo06.html
   7. UBB可视化编辑：http://xheditor.com/demos/demo07.html
   8. Ajax文件上传：http://xheditor.com/demos/demo08.html
   9. 插件扩展：http://xheditor.com/demos/demo09.html
   10.iframe调用文件上传：http://xheditor.com/demos/demo10.html
   11.异步加载：http://xheditor.com/demos/demo11.html

v1.1.3 Change (2011-1-1)

调整：取消删除线的快捷键：Ctrl+S

修正：IE浏览器下无边框的table没有显示辅助的虚线边框问题的修正
修正：IE浏览器下光标定位在编辑器中，xheditor(false)卸载编辑器会造成当前页面光标被锁死问题的修正
修正：®和©被浏览器强制转为字符问题的修正
修正：从其它网站复制粘贴WORD文档和普通HTML混合的内容时，会导致图片丢失问题的修正
修正：urlType参数开启情况下，mailto:地址被转绝对地址问题的进一步修正
修正：Flash和视频不支持输入百分比数值问题的修正

优化：优化Word自动文档清理功能，进一步提高代码处理效率并且兼容Excel文档粘贴
优化：优化formatXHTML函数，极大提高代码格式化效率

官方下载：

xhEditor v1.1.3 (简体,繁体,English) (zip) [670KB] ( 更新：2011年1月1日 )
MD5: 14F4437E9D3D48D4217D09AFF817B83B
xhEditor v1.1.3 (简体,繁体,English) (tar.gz) [567KB] ( 更新：2011年1月1日 )
MD5: B57FC85A2EFEFA44D8F447B7D8BA6510

顶一下

梁良 2011-01-07 19:04 发表评论

国产开源在线HTML编辑器 xhEditor v1.1.0正式发布

梁良 — Thu, 02 Sep 2010 02:18:00 GMT

xhEditor是一个基于jQuery开发的简单迷你并且高效的轻量可视化XHTML编辑器，基于网络访问并且兼容IE 6.0+,Firefox 3.0+,Opera 9.6+,Chrome 1.0+,Safari 3.22+。此次v1.1.0版主要变化在于提升编辑器用户体验，在修正大量问题的基础上增加了各种提升用户体验的实用功能，例如HTML5功能支持下的直接将文件拖入编辑区域上传功能，就能极大的提高用户操作效率，改善使用体验。

我们不是最好的，但是我们会努力做的更好，我们愿意倾听和接受所有用户的心声。最后，大家在使用过程中若发现任何的问题，或者有比较好的创意和想法，可以随时向我们反馈(yanis.wang@gmail.com)，我们会随时倾听大家的意见，xhEditor的发展离不开大家的支持。

本次v1.1.0版本主要变化如下：
1，可自定义表情根路径(emotPath参数)
2，提供本地图片等资源文件的前后台路径不一致问题的解决方案(urlBase参数)
3，双击链接、图片等直接打开修改界面
4，Word代码粘贴过滤功能由原先的IE only改为跨浏览器兼容
5，强制粘贴为文本功能(forcePasteText参数)
6，将本地电脑直接拖入编辑区域即可上传在当前光标处，此功能需要HTML5上传支持(Firefox,Chrome)

完整更新列表如下：
ver 1.1.0 (2010-9-1)
1. 添加：添加由网友shiny原创设计的皮肤NoStyle
2. 添加：demo07 UBB演示页面添加Google地图插件，也作为不定宽按钮的演示
3. 添加：添加urlType转非相对路径中合并“..”到上一级路径的功能
4. 添加：添加emotPath初始化参数，以将表情指向其它自定义URL路径下，注意路径必需以“/”结尾
5. 添加：添加urlBase初始化参数，用来定义超链接、图片及Flash等文件的相对根路径，同时也是urlType参数的参考根路径
6. 添加：经用户反馈意见，重新添加“预览”功能按钮
7. 添加：添加双击超链接、图片、Flash和多媒体可直接打开相应修改界面的功能，注：某些浏览器双击Flash和多媒体会有问题
8. 添加：打开面板时可按Esc键隐藏当前的面板
9. 添加：初始化参数添加disableContextmenu，用以禁用浏览器在编辑区域的默认右键菜单，设置为true禁用，默认不禁用
10.添加：Word粘贴自动过滤功能由原先的IE only增加为跨浏览器兼容
11.添加：添加强制粘贴为文本功能，初始化参数forcePasteText设置为true开启此功能，默认不强制文本
12.添加：添加Pidgin和IPB两套表情，并在demo05和demo07中添加相应的配置演示
13.添加：初始化参数添加editorRoot，在某些特殊情况下定位编辑器的根路径
14.添加：将本地电脑中的多个文件拖放至编辑器的编辑区即可上传并插入，此功能需要浏览器支持HTML5上传(Firefox,Chrome)

1. 修正：showIframeModal上传模式下onUpload接口无效问题的修正
2. 修正：使用无效按钮名称会导致JS出错问题的修正
3. 修正：IE6,IE7在iframe框架中使用xhEditor会在页面中出现_xhe_cursor问题的修正
4. 修正：IE浏览器在图片、FLASH等控件上按Backspace会导致整个页面后退问题的修正
5. 修正：回车BR模式在IE浏览器下，按下回车只显示一个空格不换行问题的修正
6. 修正：IE浏览器中会造成内存泄漏问题的修正
7. 修正：WebKit内核浏览器回车换行在切换一次源代码后会丢失问题的修正

1. 调整：皮肤框架进行了调整，支持不定宽按钮，需要的用户可自行设计修改
2. 调整：为使按钮配置更直观简便，原按钮分隔符Separator变更为“|”，原按钮换行符BtnBr变更为“/”
3. 调整：原localUrl参数名变更为urlType

查看最新版演示：http://xheditor.com/demo

更多官方在线演示：
   1. 默认模式：http://xheditor.com/demos/demo01.html
   2. 自定义按钮：http://xheditor.com/demos/demo02.html
   3. 皮肤选择：http://xheditor.com/demos/demo03.html
   4. 其它选项：http://xheditor.com/demos/demo04.html
   5. Javascript交互：http://xheditor.com/demos/demo05.html
   6. 非utf-8编码网页调用：http://xheditor.com/demos/demo06.html
   7. UBB可视化编辑：http://xheditor.com/demos/demo07.html
   8. Ajax文件上传：http://xheditor.com/demos/demo08.html
   9. 插件扩展：http://xheditor.com/demos/demo09.html
   10.iframe调用文件上传：http://xheditor.com/demos/demo10.html
   11.异步加载：http://xheditor.com/demos/demo11.html

最新v1.1.0下载地址：
http://xheditor.com/download

梁良 2010-09-02 10:18 发表评论

jQuery调用WebService

梁良 — Thu, 10 Jun 2010 10:02:00 GMT

1、编写4种WebService方法

    [WebService(Namespace = "http://tempuri.org/")]
    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
    [ScriptService]                             //令WebService成功传入Json参数，并以Json形式返回结果
    [GenerateScriptType(typeof(Person))]        //不是必要，但推荐添加(如果Person里面再嵌套另一个复杂类型，则必要声明)
    [ToolboxItem(false)]
    public class WebService1 : System.Web.Services.WebService
    {
        ///
        /// 无任何参数
        ///
        ///
        [WebMethod]
        public string HelloWorld()
        {
            return "Hello World";
        }

        ///
        /// 传入参数
        ///
        ///
        ///
        [WebMethod]
        public string Hello(string name)
        {
            return string.Format("Hello {0}", name);
        }

        ///
        /// 返回泛型列表
        ///
        ///
        ///
        [WebMethod]
        public List<int> CreateArray(int i)
        {
            List<int> list = new List<int>();

            while (i >= 0)
            {
                list.Add(i--);
            }

            return list;
        }

        ///
        /// 返回复杂类型
        ///
        ///
        ///
        ///
        [WebMethod]
        public Person GetPerson(string name, int age)
        {
            return new Person()
            {
                Name = name,
                Age = age
            };
        }
    }

    ///
    /// 复杂类型
    ///
    public class Person
    {
        public string Name { get; set; }

        public int Age { get; set; }
    }

2、编写js调用以上方法

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication1.WebForm1" %>

DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>无标题页title>
    <style type="text/css">
    input
    {
        width:200px;
    }
    <style>

    <script type="text/javascript" src="jquery-1[1].2.6.min.js">script>
    <script type="text/javascript">
    $(function(){

        /*
            1、WebService请求类型都为Post，WebService的Url为“[WebServiceUrl]/[WebMethod]”
            2、contentType声明为Json
            3、data要用Json的字符串格式传入
            4、设置了dataType为json后，result就直接为返回的Json对象。

        */

        //调用无参数方法
        $("#btnHelloWorld").click(function(){
            $.ajax({
                type: "POST",
                contentType:"application/json",
                url:"WebService1.asmx/HelloWorld",
                data:"{}",
                dataType:'json',
                success:function(result){
                    alert(result.d);
                }
            });
        });

        //传入1个参数
        $("#btnHello").click(function(){
            $.ajax({
                type: "POST",
                contentType:"application/json",
                url:"WebService1.asmx/Hello",
                data:"{name:'KiMoGiGi'}",
                dataType:'json',
                success:function(result){
                    alert(result.d);
                }
            });
        });

         //返回泛型列表
        $("#btnArray").click(function(){
            $.ajax({
                type: "POST",
                contentType:"application/json",
                url:"WebService1.asmx/CreateArray",
                data:"{i:10}",
                dataType:'json',
                success:function(result){
                    alert(result.d.join(" | "));
                }
            });
        });

         //返回复杂类型
        $("#btnPerson").click(function(){
            $.ajax({
                type: "POST",
                contentType:"application/json",
                url:"WebService1.asmx/GetPerson",
                data:"{name:'KiMoGiGi',age:26}",
                dataType:'json',
                success:function(result){
                    var person = result.d;
                    var showText = [];
                    for(var p in person){
                        showText.push(p + ":" + person[p]);
                    }
                    alert(showText.join("\r\n"));
                }
            });
        });
    });
    script>
<head>
    <body>
        <form id="form1" runat="server">
            <p>
                <input type="button" id="btnHelloWorld" value="HelloWorld" />
            <p>
            <p>
                <input type="button" id="btnHello" value="Hello" />
            <p>
            <p>
                <input type="button" id="btnArray" value="CreateArray" />
            <p>
            <p>
                <input type="button" id="btnPerson" value="GetPerson" />
            <p>
        <form>
    <body>
<html>

梁良 2010-06-10 18:02 发表评论

豆瓣的jQuery使用技巧

梁良 — Thu, 10 Jun 2010 10:01:00 GMT

摘要: Douban是2.0 社区里面比较成功的一个产品, 里面ajax技术也做得不错, 把它的源码拿来研究了一下, 它在页面上使用了jquery, 我比较喜欢它的一体式的事件处理机制，不用写很多的事件绑定代码，只需要通过一定的命名规则就可以自动给页面元素加上一些功能, 它上面几乎所有的功能都通过这个实现, 配合jquery强大的选择器，代码看起来比较简洁清晰. 下面我们就来看看它... 阅读全文

梁良 2010-06-10 18:01 发表评论

利用jQuery实现更简单的Ajax跨域请求

梁良 — Thu, 10 Jun 2010 10:01:00 GMT

前一阵发过一篇利用ExtJs的ScriptTagProxy实现Ajax跨域请求的文章(http://www.cnblogs.com/yjmyzz/archive/2008/09/14/1290789.html)，这几天看了一下Jquery，发现如果用JQuery中的getScript其实更简单(jquery 1.2.6版本)

这里给出代码，希望对Ajax跨域感到棘手的朋友有所帮助:

代码

<html>

<head>

<title>JQuery学习title>

<script src="jquery-1.2.6.min.js" type="text/javascript">script>

<script type="text/javascript">

$(document).ready(function(){

var oBtnTest = $("#btnTest");

oBtnTest.click(function(){

oBtnTest.disabled = true; 

var oResult = $("#result");

oResult.html("loading").css("color","red");

jQuery.getScript("http://app.cntvs.com/test/js.txt", 

function(){ 

oResult.html("name:" + jimmy.name + "
email:" + jimmy.email).css("color","black"); 

oBtnTest.disabled = false; 

}); 

}); 

}); 

script>

head>

<body>

<button id="btnTest">BtnTestbutton>

<div id="result">div>

body>

html>

远程服务器端js.txt的内容为:
var jimmy = {name:"jimmy.yang",email:jimmy.yang@163.com}

感觉是不是比ExtJs的ScriptTagProxy还要简洁? 个人感觉Jquery简单明了，短小精干，ExtJs功能强大，组件丰富！

梁良 2010-06-10 18:01 发表评论

15个最佳jQuery幻灯插件和教程

梁良 — Thu, 10 Jun 2010 10:00:00 GMT

　在网站前端中使用jQuery库已经变得越来越流行，前端开发人员发布或撰写的相关的插件和教程也与日俱增。

　　幻灯(通常也被称为“内容滑动”、内容切换效果、焦点图等)是在网站或博客的较小区域展示大量内容的很好的方法。动态的自动滑动内容在很多网站上都是很流行的。你是否也对在自己的网站上实现类似的效果感兴趣？那就看一下本文列出的jQuery插件吧！

　　1. jFlow

　　官方网站 | 演示

　　一个漂亮而整洁的图片幻灯，被nettut推荐，如果你想自己做一个图片幻灯效果，就去看看吧。

　　2. 使用jQuery UI实现推荐内容的幻灯展示

　　官方网站

梁良 2010-06-10 18:00 发表评论

jQuery常用技巧

梁良 — Thu, 10 Jun 2010 09:59:00 GMT

1、关于页面元素的引用

通过jquery的$()引用元素包括通过id、class、元素名以及元素的层级关系及dom或者xpath条件等方法，且返回的对象为jquery对象（集合对象），不能直接调用dom定义的方法。

2、jQuery对象与dom对象的转换

只有jquery对象才能使用jquery定义的方法。注意dom对象和jquery对象是有区别的，调用方法时要注意操作的是dom对象还是jquery对象。

普通的dom对象一般可以通过$()转换成jquery对象。

如：$(document.getElementById(”msg”))则为jquery对象，可以使用jquery的方法。

由于jquery对象本身是一个集合。所以如果jquery对象要转换为dom对象则必须取出其中的某一项，一般可通过索引取出。

如：$(”#msg”)[0]，$(”div”).eq(1)[0]，$(”div”).get()[1]，$(”td”)[5]这些都是dom对象，可以使用dom中的方法，但不能再使用Jquery的方法。

以下几种写法都是正确的：

$(”#msg”).html();

$(”#msg”)[0].innerHTML;

$(”#msg”).eq(0)[0].innerHTML;

$(”#msg”).get(0).innerHTML;

3、如何获取jQuery集合的某一项

对于获取的元素集合，获取其中的某一项（通过索引指定）可以使用eq或get(n)方法或者索引号获取，要注意，eq返回的是jquery对象，而get(n)和索引返回的是dom元素对象。对于jquery对象只能使用jquery的方法，而dom对象只能使用dom的方法，如要获取第三个

元素的内容。有如下两种方法：

$(”div”).eq(2).html(); //调用jquery对象的方法

$(”div”).get(2).innerHTML; //调用dom的方法属性

4、同一函数实现set和get

jQuery中的很多方法都是如此，主要包括如下几个：

$(”#msg”).html(); //返回id为msg的元素节点的html内容。

$(”#msg”).html(”<b>new content</b>”);

//将“new content” 作为html串写入id为msg的元素节点内容中,页面显示粗体的new content



$(”#msg”).text(); //返回id为msg的元素节点的文本内容。

$(”#msg”).text(”<b>new content</b>”);

//将“new content” 作为普通文本串写入id为msg的元素节点内容中,页面显示new content



$(”#msg”).height(); //返回id为msg的元素的高度

$(”#msg”).height(”300″); //将id为msg的元素的高度设为300

$(”#msg”).width(); //返回id为msg的元素的宽度

$(”#msg”).width(”300″); //将id为msg的元素的宽度设为300



$(”input”).val(”); //返回表单输入框的value值

$(”input”).val(”test”); //将表单输入框的value值设为test



$(”#msg”).click(); //触发id为msg的元素的单击事件

$(”#msg”).click(fn); //为id为msg的元素单击事件添加函数

同样blur,focus,select,submit事件都可以有着两种调用方法。

5、集合处理功能

对于jquery返回的集合内容无需我们自己循环遍历并对每个对象分别做处理，jquery已经为我们提供的很方便的方法进行集合的处理。

包括两种形式：

$(”p”).each(function(i){this.style.color=['#f00','#0f0','#00f'][ i ]})

//为索引分别为0，1，2的p元素分别设定不同的字体颜色。



$(”tr”).each(function(i){this.style.backgroundColor=['#ccc','#fff'][i%2]})

//实现表格的隔行换色效果



$(”p”).click(function(){alert($(this).html())})

//为每个p元素增加了click事件，单击某个p元素则弹出其内容

6、扩展我们需要的功能

$.extend({

min: function(a, b){return a < b?a:b; },

max: function(a, b){return a > b?a:b; }

}); //为jquery扩展了min,max两个方法

使用扩展的方法（通过“$.方法名”调用）：

alert(”a=10,b=20,max=”+$.max(10,20)+”,min=”+$.min(10,20));

7、支持方法的连写

所谓连写，即可以对一个jquery对象连续调用各种不同的方法。例如：

$(”p”).click(function(){alert($(this).html())})

.mouseover(function(){alert(’mouse over event’)})

.each(function(i){this.style.color=['#f00','#0f0','#00f'][ i ]});

8、操作元素的样式

主要包括以下几种方式：

$(”#msg”).css(”background”); //返回元素的背景颜色

$(”#msg”).css(”background”,”#ccc”) //设定元素背景为灰色

$(”#msg”).height(300); $(”#msg”).width(”200″); //设定宽高

$(”#msg”).css({ color: “red”, background: “blue” });//以名值对的形式设定样式

$(”#msg”).addClass(”select”); //为元素增加名称为select的class

$(”#msg”).removeClass(”select”); //删除元素名称为select的class

$(”#msg”).toggleClass(”select”); //如果存在（不存在）就删除（添加）名称为select的class

9、完善的事件处理功能

jQuery已经为我们提供了各种事件处理方法，我们无需在html元素上直接写事件，而可以直接为通过jquery获取的对象添加事件。

$(”#msg”).click(function(){alert(”good”)}) //为元素添加了单击事件

$(”p”).click(function(i){this.style.color=['#f00','#0f0','#00f'][ i ]})

//为三个不同的p元素单击事件分别设定不同的处理

jQuery中几个自定义的事件：

(1)hover(fn1,fn2)：一个模仿悬停事件（鼠标移动到一个对象上面及移出这个对象）的方法。当鼠标移动到一个匹配的元素上面时，会触发指定的第一个函数。当鼠标移出这个元素时，会触发指定的第二个函数。

//当鼠标放在表格的某行上时将class置为over，离开时置为out。

$(”tr”).hover(function(){

$(this).addClass(”over”);

},

function(){

$(this).addClass(”out”);

});

（2）ready(fn):当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。

$(document).ready(function(){alert(”Load Success”)})

//页面加载完毕提示“Load Success”,相当于onload事件。与$(fn)等价

（3）toggle(evenFn,oddFn): 每次点击时切换要调用的函数。如果点击了一个匹配的元素，则触发指定的第一个函数，当再次点击同一元素时，则触发指定的第二个函数。随后的每次点击都重复对这两个函数的轮番调用。

//每次点击时轮换添加和删除名为selected的class。

$(”p”).toggle(function(){

$(this).addClass(”selected”);

},function(){

$(this).removeClass(”selected”);

});

（4）trigger(eventtype): 在每一个匹配的元素上触发某类事件。
例如：

$(”p”).trigger(”click”); //触发所有p元素的click事件

（5）bind(eventtype,fn)，unbind(eventtype): 事件的绑定与反绑定
从每一个匹配的元素中（添加）删除绑定的事件。例如：

$(”p”).bind(”click”, function(){alert($(this).text());}); //为每个p元素添加单击事件

$(”p”).unbind(); //删除所有p元素上的所有事件

$(”p”).unbind(”click”) //删除所有p元素上的单击事件

10、几个实用特效功能

其中toggle()和slidetoggle()方法提供了状态切换功能。
如toggle()方法包括了hide()和show()方法。
slideToggle()方法包括了slideDown()和slideUp方法。

11、几个有用的jQuery方法

$.browser.浏览器类型：检测浏览器类型。有效参数：safari, opera, msie, mozilla。如检测是否ie：$.browser.isie，是ie浏览器则返回true。

$.each(obj, fn)：通用的迭代函数。可用于近似地迭代对象和数组（代替循环）。如

$.each( [0,1,2], function(i, n){ alert( “Item #” + i + “: ” + n ); });

等价于：

var tempArr=[0,1,2];

for(var i=0;i<tempArr.length;i++){

alert(”Item #”+i+”: “+tempArr[ i ]);

}

也可以处理json数据，如

$.each( { name: “John”, lang: “JS” }, function(i, n){ alert( “Name: ” + i + “, Value: ”

 + n ); });

结果为：

Name:name, Value:John

Name:lang, Value:JS

$.extend(target,prop1,propN)：用一个或多个其他对象来扩展一个对象，返回这个被扩展的对象。这是jquery实现的继承方式。

如：

代码

$.extend(settings, options);

//合并settings和options，并将合并结果返回settings中，相当于options继承setting并将继承结果保存在

setting中。

var settings = $.extend({}, defaults, options);

//合并defaults和options，并将合并结果返回到setting中而不覆盖default内容。

可以有多个参数（合并多项并返回）

$.map(array, fn)：数组映射。把一个数组中的项目(处理转换后)保存到到另一个新数组中，并返回生成的新数组。

如：

var tempArr=$.map( [0,1,2], function(i){ return i + 4; });

tempArr内容为：[4,5,6]

var tempArr=$.map( [0,1,2], function(i){ return i > 0 ? i + 1 : null; });

tempArr内容为：[2,3]

$.merge(arr1,arr2):合并两个数组并删除其中重复的项目。

如：$.merge( [0,1,2], [2,3,4] ) //返回[0,1,2,3,4]

$.trim(str)：删除字符串两端的空白字符。

如：$.trim(”   hello, how are you? “); //返回”hello,how are you? ”

12、解决自定义方法或其他类库与jQuery的冲突

很多时候我们自己定义了$(id)方法来获取一个元素，或者其他的一些js类库如prototype也都定义了$方法，如果同时把这些内容放在一起就会引起变量方法定义冲突，Jquery对此专门提供了方法用于解决此问题。
使用jquery中的jQuery.noConflict();方法即可把变量$的控制权让渡给第一个实现它的那个库或之前自定义的$方法。之后应用Jquery的时候只要将所有的$换成jQuery即可，如原来引用对象方法$(”#msg”)改为jQuery(”#msg”)。
如：

jQuery.noConflict();

// 开始使用jQuery

jQuery(”div p”).hide();

// 使用其他库的 $()

$(”content”).style.display = ‘none’;

梁良 2010-06-10 17:59 发表评论

最佳jQuery教程和实例

梁良 — Thu, 10 Jun 2010 09:58:00 GMT

由Noupe带来的51个最佳jQuery教程和实例, 向大家介绍了jQuery的一些基本概念和使用的相关教程, 帕兰继续为你翻译, 如果你对jQuery感兴趣, 也可以查看帕兰之前翻译的一些文章:

John Resig

John Resig, 这位是 JQuery JavaScript脚本库的创建者, 同时也是Mozilla公司的技术人员.

进一步了解John Resig

How jQuery Works - 这是一基础jquery教程, 教你如何使用 jQuery.
Expandable Sidebar Menu ()- (jQuery 在线视频教程l) 关于jQuery的一个基础概念说明视频. Live Demo is here.

15 Days Of jQuery

15 Days Of jQuery-15天内从零到精通的 jQuery教程.

进一步查看这个教程15 Days Of jQuery

学习jQuery

Learning jQuery

进一步查看 LearningjQuery.com里面的教程

Bassistance

Bassistance- 这个教程向你展示如何通过jQuery创建插件.

进一步查看Bassistance教程

Getting Started with jQuery- 本指南介绍了该jquery库。它一步一步的解释jQuery的细节，包括一个简单的Hello World举例演示，选择和活动的基本知识，Ajax， FX和使用情况以及如何创建插件。

Cody Lindley

Cody Lindley- ThickBox 和 jTip plugins的创建人

Featured Tutorials on Cody Lindley

JQuery To The Rescue- 一个使用jQuery的互动示范教程.

Remy sharp’s Blog

Remy sharp- 在他的博客里面, 有许多关于jQuery的教程和插件,.

PS. 越翻越深奥, 有的看不懂, 无法翻译. 这jQuery的基础还真不好懂. 没精神翻了, 大家自己看看英文吧. 改天有精神再翻译剩下的.

Featured Tutorials on Remy sharp’s Blog

Text box hints-You will see a lot of web sites with search boxes have text alreadypopulated inside of the field and when you select the input text box itdisappears and reappears when it’s not selected. This tutorial willshow you how can add a small amount of jQuery to add this feature toany of your web sites.
Auto-populating Select Boxes using jQuery & AJAX-Allow the user to select a top level category from one select box andto automatically populate the sub-category using jQuery and Ajax.

Featured Tutorials on jQueryForDesigners

Using Ajax to Validate Forms-With this tutorial you will be able to have your first forms that dothe following: 1) Live username checking, 2) Password confirmation andstrength, 3) Checking if an email address is already registered, 4) URLvalidation
Image Cross Fade Transition- How to fade one image in to another?

Web Designer Wall

jQuery Tutorials for Designers-This article contains 10 visual tutorials intended for web designersand newbies on how to apply Javascript effects with jQuery. Effectsinclude: Simple slide panel, Simple disappearing effect, Chain-abletransition effects, Accordion, Animated hover effect, Entire blockclickable, Collapsible panels.

CSS-Tricks

CSS-Tricks is a home forexamples, tutorials, tips, tricks, and news regarding Cascading StyleSheets. Chris Coyer is getting into jQuery lately and postinginteresting jQuery tutorials in his journey to learn jQuery.

Featured Tutorials on CSS-Tricks

Fading Menu - Replacing Content- Chris Coyer shows us a nice menu effect emphasizing the designer’s perspective: “When I do this, make the CSS do this”.
Improved Current Field Highlighting in Forms- How to add some kind of visual feedback on web forms to indicate the currently active (or “focused“) field.
Fade-in Spoiler Revealer- Exploiting some of the “fading in” and “fading out” different page elements functions for a really simple Spoiler Revealer.

Getting started with jQuery

The jSkinny on jQuery- A tutorial on the jQuery javascript library (from a Ruby/Rails perspective).
How to Get Anything You Want- An introduction to jQuery selectors and traversal methods, and their use in navigating the DOM.
It’s all about CSS- If you’ve got a good understand of CSS selectors, then you’re already familiar with how to query the DOM.
jQuery Crash Course-For those who’d like to learn more about jQuery, one of the morepopular libraries, here’s a crash course written with code-savvy webdesigners in mind.
jQuery in 15 minutes- A short introduction to jQuery.
jQuery Basics- This section covers basic usage of jQuery from getting started to finding elements and working with CSS.
Easy JavaScript for Designers-A nice little writeup for the jQuery Java Script Library. Designersneed all of the coding shortcuts they can and jQuery seems to deliver.

jQuery Cheat Sheets

jQuery Cheatsheet-The cheat sheet comes in two flavors: 1) Made for iPhone and iPodTouch, and any other mobile device with internet access. 2) Old-schoolprintable A4 cheat sheet
jQuery 1.2 Cheat Sheet

Building jQuery Plugins

A Plugin Development Pattern- This article is meant to share a useful pattern for plugin authoring.
Developing a jQuery Plugin- Sometimes the most difficult part is just taking the first step!
Building Your First jQuery Plugin- This tutorial will take you step by step through creating your very own truncation plugin.

jQuery Effects and Techniques

JQuery Pop-up Menu Tutorial- Pop-up link menu (mouse over menu)
jQuery For Designers- Examples of writing Unobtrusive JavaScript to add simple behavior to a web page.
AutoCompleter Tutorial - jQuery(Ajax)/PHP/MySQL
SlideViewer- A jQuery image slider built on a single unordered list
LavaLamp for jQuery lovers!- A step by step tutorial to create a LavaLamp menu packaged as a plugin for the amazing jQuery javascript library.
Auto-Complete Field with jQuery - Code Explained- An explanation of the code behind the auto-complete field in this post.
Photo Slider Tutorial- It’s worth noting that you can easily use the photo slider to query a server script to load the images.
Ajax will_paginate, jq-style- Using jQuery, to easily rock some gracefully degrading Ajax pagination.
Rounded Corners- Adding rounded corners to an element, using no extra markup.
Efficient Tag Cloud Algorithm- A post about a tag cloud algorithm , very useful.
AutoCompleter Tutorial-This tutorial because will tell you how and why AutoCompleter works,knowing about this enables you to customise it a lot more.
Creating a fading header- A tutorial explaining how to create the fading header graphic for Bits and Pixels.

Ajax development with jQuery

Easy Ajax with jQuery-Akash Mehta will show us how to simplify the process of adding Ajax tothe application even further with the help of jQuery, a popularJavaScript library.
Simplify Ajax development with jQuery- Discover how easy Ajax and DOM scripting can be
Quick and Dirty AJAX- A walk through tutorial showing some of the basic ways you could use jQuery to add AJAX functionality to your site.
A Quick Code Igniter and JQuery Ajax Tutorial- A step-by-step tutorial will show you how to combine the power of jQuery with Code Igniter(a PHP framework based on the MVC design pattern) to quickly andpainlessly pass a record ID through the javascript and over to theserver, where it will be passed to a mysql database, used to retrievesome data, and sent back to the page for display.

jQuery Fixing common Browser Issues

Fixing IE overflow problem-IE has a different implementation of overflow compared to Firefox orSafari. This is a detailed account of the problem, and it’s fix.
Using jQuery to align column heights- This tutorial will show you how to use the popular jQuery library to match the height of 2 columns in your layout.
Hacking transparent PNG support into IE6 with IE PNG Fix, CSS and jQuery- How to enable transparent PNG support in IE6

梁良 2010-06-10 17:58 发表评论

BlogJava-秋风的萧瑟 又见湖边木叶飞-随笔分类-jQuery

Javascript和Ajax中文乱码吐血版解决方案

又一个山寨的 Google 瞬时搜索，好处是它可以加密搜索

国产开源XHTML在线编辑器xhEditor v1.1.3正式版发布

国产开源在线HTML编辑器 xhEditor v1.1.0正式发布

jQuery调用WebService

豆瓣的jQuery使用技巧

利用jQuery实现更简单的Ajax跨域请求

15个最佳jQuery幻灯插件和教程

1. jFlow

2. 使用jQuery UI实现推荐内容的幻灯展示

jQuery常用技巧

最佳jQuery教程和实例

John Resig

进一步了解John Resig

15 Days Of jQuery

进一步查看这个教程15 Days Of jQuery

学习jQuery

进一步查看 LearningjQuery.com里面的教程

Bassistance

进一步查看Bassistance教程

Cody Lindley

Featured Tutorials on Cody Lindley

Remy sharp’s Blog

Featured Tutorials on Remy sharp’s Blog

Featured Tutorials on jQueryForDesigners

Web Designer Wall

CSS-Tricks

Featured Tutorials on CSS-Tricks

Getting started with jQuery

jQuery Cheat Sheets

Building jQuery Plugins

jQuery Effects and Techniques

Ajax development with jQuery

jQuery Fixing common Browser Issues

BlogJava-秋风的萧瑟又见湖边木叶飞-随笔分类-jQuery

　　1. jFlow

　　2. 使用jQuery UI实现推荐内容的幻灯展示