jquery学习笔记总结【重要】

   $("input[type='text']").not($("#div3 input[type='text']")).each(
            function () {
                alert($(this).val());
            }
            );

1. $("#select_id").append("<option value='Value'>Text</option>"); //为Select追加一个Option(下拉项)
2. $("#select_id").prepend("<option value='0'>请选择</option>"); //为Select插入一个Option(第一个位置)
3. $("#select_id option:last").remove(); //删除Select中索引值最大Option(最后一个)
4. $("#select_id option[index='0']").remove(); //删除Select中索引值为0的Option(第一个)
5. $("#select_id option[value='3']").remove(); //删除Select中Value='3'的Option
6. $("#select_id option[text='4']").remove(); //删除Select中Text='4'的Option

$('input[name^=Productcode_][value=980002]').val();

$("select[name=Deliverystorage_" + i + "]").find("option:selected").text()

alert( $("input[name='MyCost']:checked").val());

jQuery判断获得的对象是否存在的方法

因为jQuery在获得对象的时候，无论要获得的对象是否存在，都会返回jQuery对象。

所以，以往的 js 判断是否存在在jQuery是行不通的。

假设有如下代码。

var target_obj = jQuery('#target_obj_id');

则，若需要判断id为target_obj_id是否存在的话，可以实现的方法有一下两种：

1、

if (target_obj.length > 0) { //如果大于0 标识 id 为target_obj_id的对象存在，否则不存在

//对象存在的处理逻辑

} else {

//对象不存在的处理逻辑

}

2、

if (target_obj[0]) {

//对象存在的处理逻辑

} else {

//对象不存在的处理逻辑

}

extend扩展类

var BaseClass={

methodA:fuction(){

alert("i am base");

}

$.extend(BaseClass, {
methodExtend: function () {
this.methodA();

}
})

选择带有多个class的元素

$(“[class='good list Card']“)

function btnDisabled() {
            $("#table_footinfo input").each(
              function() {

            $(this).bind('focus', function() { this.blur() });
              }
                   );

            $("#table_headinfo input").each(
              function() {
                  $(this).attr("disabled", "disabled");
              }
                   );
        }

14. 如何使用多个属性来进行过滤

1.        //在使用许多相类似的有着不同类型的input元素时，

2.        //这种基于精确度的方法很有用

3.        var elements = $('#someid input[type=sometype][value=somevalue]').get();

19. 如果自动滚动到页面中的某区域

1.        jQuery.fn.autoscroll = function

(selector) {

2.            $('html,body').animate(

3.                {scrollTop: $(selector).offset().top},

4.                500

5.            };

6.        }

7.        //然后像这样来滚动到你希望去到的class/area上。

8.        $('.area_name').autoscroll();

25.如何使用jQuery来检测右键和左键的鼠标单击两种情况：

1.        $("#someelement").live('click', function

(e) {

2.            if( (!$.browser.msie && e.button == 0) || ($.browser.msie && e.button == 1) ) {

3.                alert("Left Mouse Button Clicked");

4.            } else if(e.button == 2) {

5.                alert("Right Mouse Button Clicked");

6.            }

7.        });

27. 如何在一段时间之后自动隐藏或关闭元素（支持1.4版本）：

1.        //这是1.3.2中我们使用setTimeout来实现的方式

2.        setTimeout(function() {

3.          $('.mydiv').hide('blind', {}, 500)

4.        }, 5000);

5.        //而这是在1.4中可以使用delay()这一功能来实现的方式（这很像是休眠）

6.        $(".mydiv").delay(5000).hide('blind', {}, 500);

29. 如何限制“Text-Area”域中的字符的个数：

1.        jQuery.fn.maxLength = function(max){

2.            this.each(function(){

3.                var type = this.tagName.toLowerCase();

4.                var inputType = this.type? this.type.toLowerCase() : null;

5.                if(type == "input" && inputType == "text" || inputType == "password"){

6.                    //Apply the standard maxLength

7.                    this.maxLength = max;

8.                }

9.                else if(type == "textarea"){

10.                 this.onkeypress = function(e){

11.                     var ob = e || event;

12.                     var keyCode = ob.keyCode;

13.                     var hasSelection = document.selection? document.selection.createRange().text.length > 0 : this.selectionStart != this.selectionEnd;

14.                     return !(this.value.length >= max && (keyCode > 50 || keyCode == 32 || keyCode == 0 || keyCode == 13) && !ob.ctrlKey && !ob.altKey && !hasSelection);

15.                 };

16.                 this.onkeyup = function(){

17.                     if(this.value.length > max){

18.                         this.value = this.value.substring(0,max);

19.                     }

20.                 };

21.             }

22.         });

23.     };

24.     //用法

25.     $('#mytextarea').maxLength(500);

33. 如何把一个元素放在屏幕的中心位置：

1.        jQuery.fn.center = function () {

2.            this.css('position','absolute');

3.            this.css('top', ( $(window).height() - this.height() ) / +$(window).scrollTop() + 'px');

4.            this.css('left', ( $(window).width() - this.width() ) / 2+$(window).scrollLeft() + 'px');

5.            return this;

6.        }

39. 如何强制在新的选项卡中打开链接：

1.        jQuery('a.newTab').live('click', function(){

2.            newwindow=window.open($(this).href);

3.            jQuery(this).target = "_blank";

4.            return false;

5.        });

1.children(“condition”) 获取的是一级子元素。

2.find("condition")获取包含的所有子元素

$("#ticsendnext_table_" + j).find("input[name^='Ticketnum_']").each(
            function() {
                alert($(this).val());
                Ticketnum += parseInt($(this).val(), 10);
            }
            )

2011.12.9/返回重复的数据
function findRepeatData(arr) {
    var equalsstr = new Array();
    var tempstr = new Array();
    for (i = 0; i < arr.length; i++) {
        if ($.inArray(arr[i], tempstr) < 0) {
            tempstr.push(arr[i]);
        }
        else {
            equalsstr.push(arr[i]); //重复的数据
        }
    }
    return $.unique(equalsstr);
}

2011.11.30

读取iframe中的内容

var needNum = $("#ticketdetail_ifr").contents().find("#Sumnum").html();

8.11

jQuery 1.4.4 中文参考手册

数组和对象操作

jQuery.each(object, [callback])

例遍数组，同时使用元素索引和内容。

jQuery 代码:

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

jQuery.extend([deep], target, object1, [objectN])

用一个或多个其他对象来扩展一个对象，返回被扩展的对象

合并 settings 和 options，修改并返回 settings。

jQuery 代码:

var settings = { validate: false, limit: 5, name: "foo" };
var options = { validate: true, name: "bar" };
jQuery.extend(settings, options);

结果:

settings == { validate: true, limit: 5, name: "bar" }

描述:

合并 defaults 和 options, 不修改 defaults。

jQuery 代码:

var empty = {};
var defaults = { validate: false, limit: 5, name: "foo" };
var options = { validate: true, name: "bar" };
var settings = jQuery.extend(empty, defaults, options);

结果:

settings == { validate: true, limit: 5, name: "bar" }
empty == { validate: true, limit: 5, name: "bar" }

jQuery.grep(array, callback, [invert])

使用过滤函数过滤数组元素。

过滤数组中小于 0 的元素。

jQuery 代码:

$.grep( [0,1,2], function(n,i){
  return n > 0;
});

结果:

[1, 2]

描述:

排除数组中大于 0 的元素，使用第三个参数进行排除。

jQuery 代码:

$.grep( [0,1,2], function(n,i){
  return n > 0;
}, true);

结果:

[0]

jQuery.inArray(value, array)

确定第一个参数在数组中的位置，从0开始计数(如果没有找到则返回 -1 )。

查看对应元素的位置

jQuery 代码:

var arr = [ 4, "Pete", 8, "John" ];
jQuery.inArray("John", arr);  //3
jQuery.inArray(4, arr);  //0
jQuery.inArray("David", arr);  //-1

jQuery.makeArray(obj)

HTML 代码:

<div>First</div><div>Second</div><div>Third</div><div>Fourth</div>

jQuery 代码:

var arr = jQuery.makeArray(document.getElementsByTagName("div"));
arr.reverse(); // 使用数组翻转函数

结果:

Fourth
Third
Second
First

jQuery.map(array, callback)

将一个数组中的元素转换到另一个数组中。

将原数组中每个元素加 4 转换为一个新数组。

jQuery 代码:

$.map( [0,1,2], function(n){
  return n + 4;
});

结果:

[4, 5, 6]

描述:

原数组中大于 0 的元素加 1 ，否则删除。

jQuery 代码:

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

结果:

[2, 3]

描述:

原数组中每个元素扩展为一个包含其本身和其值加 1 的数组，并转换为一个新数组。

jQuery 代码:

$.map( [0,1,2], function(n){
  return [ n, n + 1 ];
});

结果:

[0, 1, 1, 2, 2, 3]

jQuery.merge(first, second)

合并两个数组

返回的结果会修改第一个数组的内容——第一个数组的元素后面跟着第二个数组的元素。要去除重复项，请使用$.unique()

并两个数组到第一个数组上。

jQuery 代码:

$.merge( [0,1,2], [2,3,4] )

jQuery.unique(array)

只处理删除DOM元素数组，而不能处理字符串或者数字数组。

jQuery.parseJSON(json)

接受一个JSON字符串，返回解析后的对象。

传入一个畸形的JSON字符串会抛出一个异常。比如下面的都是畸形的JSON字符串：

{test: 1} （ test 没有包围双引号）
{'test': 1} （使用了单引号而不是双引号）

另外，如果你什么都不传入，或者一个空字符串、null或undefined，parseJSON都会返回 null 。

解析一个JSON字符串

jQuery 代码:

var obj = jQuery.parseJSON('{"name":"John"}');
alert( obj.name === "John" );

jQuery.trim(str)

去掉字符串起始和结尾的空格。

7.19 使用jQuery解析JSON数据

在上一篇的Struts2之ajax初析中，我们得到了comments对象的JSON数据，在本篇中，我们将使用jQuery进行数据解析。

我们先以解析上例中的comments对象的JSON数据为例，然后再小结jQuery中解析JSON数据的方法。

上例中得到的JSON数据如下，是一个嵌套JSON：

{"comments":[{"content":"很不错嘛","id":1,"nickname":"纳尼"},{"content":"哟西哟西","id":2,"nickname":"小强"}]}

获取JSON数据，在jQuery中有一个简单的方法 $.getJSON() 可以实现。

下面引用的是官方API对$.getJSON()的说明：

jQuery.getJSON( url, [data,] [success(data, textStatus, jqXHR)] )

urlA string containing the URL to which the request is sent.

dataA map or string that is sent to the server with the request.

success(data, textStatus, jqXHR)A callback function that is executed if the request succeeds.

回调函数中接受三个参数，第一个书返回的数据，第二个是状态，第三个是jQuery的XMLHttpRequest，我们只使用到第一个参数。

$.each()是用来在回调函数中解析JSON数据的方法，下面是官方文档：

jQuery.each( collection, callback(indexInArray, valueOfElement) )

collectionThe object or array to iterate over.

callback(indexInArray, valueOfElement)The function that will be executed on every object.

$.each()方法接受两个参数，第一个是需要遍历的对象集合（JSON对象集合），第二个是用来遍历的方法，这个方法又接受两个参数，第一个是遍历的index，第二个是当前遍历的值。哈哈，有了$.each()方法JSON的解析就迎刃而解咯。(*^__^*) 嘻嘻……

function loadInfo() {
    $.getJSON("loadInfo", function(data) {
        $("#info").html("");//清空info内容
        $.each(data.comments, function(i, item) {
            $("#info").append(
                    "<div>"+ item.id +"</div>"+ 
                    "<div>"+ item.nickname    +"</div>"+
                    "<div>"+ item.content +"</div><hr/>");
        });
        });
}

正如上面，loadinfo是请求的地址，function(data){...}就是在请求成功后的回调函数，data封装了返回的JSON对象，在下面的$.each(data.comments,function(i,item){...})方法中data.comments直接到达JSON数据内包含的JSON数组：

[{"content":"很不错嘛","id":1,"nickname":"纳尼"},{"content":"哟西哟西","id":2,"nickname":"小强"}]

$.each()方法中的function就是对这个数组进行遍历，再通过操作DOM插入到合适的地方的。在遍历的过程中，我们可以很方便的访问当前遍历index(代码中的”i“)和当前遍历的值(代码中的”item“)。

上例的运行结果如下：

如果返回的JSON数据比较复杂，则只需多些$.each()进行遍历即可，嘿嘿。例如如下JSON数据：

{"comments":[{"content":"很不错嘛","id":1,"nickname":"纳尼"},{"content":"哟西哟西","id":2,"nickname":"小强"}],"content":"你是木头人，哈哈。","infomap":{"性别":"男","职业":"程序员","博客":"http:\/\/www.cnblogs.com\/codeplus\/"},"title":"123木头人"}

js如下：

function loadInfo() {
    $.getJSON("loadInfo", function(data) {
        $("#title").append(data.title+"<hr/>");
        $("#content").append(data.content+"<hr/>");
        //jquery解析map数据
        $.each(data.infomap,function(key,value){
            $("#mapinfo").append(key+"----"+value+"<br/><hr/>");
        });
        //解析数组
        $.each(data.comments, function(i, item) {
            $("#info").append(
                    "<div>"+ item.id +"</div>"+ 
                    "<div>"+ item.nickname    +"</div>"+
                    "<div>"+ item.content +"</div><hr/>");
        });
        });
}

值得注意的是，$.each()遍历Map的时候，function()中的参数是key和value，十分方便。

上例的运行效果：

jQuery很强大，so...更多的了解还得参考文档，(ˇˍˇ）想～

6.23

//table表单操作
        function deleteGoodsRow(goodsid) {
            $("#goodid_" + goodsid).parent("td").parent("tr").remove();
        }

        function insertGoodsRow(trhtml) {
            $(trhtml).insertAfter($('#goodslistTable>tbody>tr:last'));
        }

6.16

jquery 控制button的disabled属性

$('#button').attr('disabled',"true");添加disabled属性
$('#button').removeAttr("disabled"); 移除disabled属性

6.3取匹配元素的dom内容

$('').html()内容

//        $("input").each(
        //                function() {
        //                    $(this).attr("disabled", "disabled")
        //                })
        //        $("select").each(
        //                function() {
        //                    $(this).attr("disabled", "disabled")
        //                })
        //        $("textarea").each(
        //                function() {
        //                    $(this).attr("disabled", "disabled")
        //                })

12.20

例：将多个选中的checkbox的值组装成一个字符串

1.7 取文本以string 形式返回

text()

取得所有匹配元素的内容。

结果是由所有匹配元素包含的文本内容组合起来的文本。这个方法对HTML和XML文档都有效。

返回值

String

示例

HTML 代码:

<p><b>Test</b> Paragraph.</p><p>Paraparagraph</p>

jQuery 代码:

$("p").text();

结果:

Test Paragraph.Paraparagraph

12.31

JQuery-Form中的AjaxForm和AjaxSubmit的区别

JQuery中的AjaxForm和AjaxSubmit使用差不多功能也差不多。很容易误解。

AjaxForm
ajaxForm不能提交表单。在document的ready函数中，使用ajaxForm来为AJAX提交表单进行准备。

提交动作必须由submit开始

即必须点击了页面中type=submit的按钮 <input type="submit" value="Submit Comment" >

如果是<input type="button" value="Submit Comment" >是不会触发提交的但是ajaxSubmit 能到达这个功能

ajaxSubmit
马上由AJAX来提交表单。你可以在任何情况下进行该项提交。

12.1

     function setNextInput(i)
                        {

                alert(   $(i).next().val() );

}

11.18找出每个集合中对象的值

$("input[id^='spec_']").each(
function(i)
{
alert( $(this).val());
}

10.29

JQuery取RadioList所选择项的值

alert( $("input[name='MyCost']:checked").val());

首先，Radiolist控件默认Render后最外面是个<table>，好，看代码，传统方式:

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
2
3 transitional.dtd">
4 <html xmlns="http://www.w3.org/1999/xhtml">
5
6 <head>
7 <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
8 <title>test</title>
9 <script type="text/javascript">
10 function test2()
11  {
12   var rbltable = document.getElementById("rl");
13   var rbs= rbltable.getElementsByTagName("INPUT");
14   for(var i = 0;i<rbs.length;i++)
15   {
16     if(rbs[i].checked)
17     {
18        var value=rbs[i].value;
19        alert(value);
20         //Js_open(b

)
21     }
22     else
23     {
24        //Js_open(a

)
25     }
26   }
27 }
28
29 </script>
30 </head>
31
32 <body>
33
34 <form>
35     <span id="dd"></span>
36     <table id="rl">
37         <tr>
38             <td><label>收</label><input id="rl_1" checked="checked" name="rl$tt" type="radio" value="1" />
39             <label>发</label><input id="rl_2" name="rl$tt" type="radio" value="2" />
40             </td>
41         </tr>
42     </table>
43     <input name="b1" onclick="test2();" type="button" value="确定" />
44 </form>
45
46 </body>
47
48 </html>
49

再看下JQuery，如何实现，非常简单:

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2
3 <html xmlns="http://www.w3.org/1999/xhtml" >
4 <head runat="server">
5     <title>test</title>
6     <script src="js/jquery-1.2.6-intellisense.js" type="text/javascript"></script>
7     <script type="text/javascript">
8         function GetJump() {
9             var $selectedvalue = $("input[name='rl$tt']:checked").val();
10             alert($selectedvalue);
11             if ($selectedvalue == 1) {
12                 window.location = "http://www.g.cn";
13             }
14             else {
15                 window.location = "http://www.baidu.com";
16             }
17         }
18     </script>
19 </head>
20 <body>
21     <form id="form1" runat="server">
22     <table id="rl">
23         <tr>
24             <td><label>谷歌</label><input id="rl_1" checked="checked" name="rl$tt" type="radio" value="1" />
25             <label>百度</label><input id="rl_2" name="rl$tt" type="radio" value="2" />
26             </td>
27         </tr>
28     </table>
29     <input  type="button" id="btn1" value="确定" onclick="GetJump()" />
30     </form>
31 </body>
32 </html>

10.15
今天学习了下jquery的层级（选择器）
共4种
1.ancestor descendant ：在给定的祖先元素下匹配所有的后代元素
2.parent > child ：在给定的父元素下匹配所有的子元素
3.prev + next：匹配所有紧接在 prev 元素后的 next 元素
4.prev ~ siblings：匹配 prev 元素之后的所有 siblings 元素

ancestor descendant
用法: $(”form input”) ;
说明: 在给定的祖先元素下匹配所有后代元素.这个要下面讲的”parent > child”区分开.

parent > child
用法: $(”form > input”) ;
说明: 在给定的父元素下匹配所有子元素.注意:要区分好后代元素与子元素.这里的是XPath用法,前面前面就说过了,jQuery是可以任意使用XPath选择符的.

prev + next
用法: $(”label + input”) ;
说明: 匹配所有紧接在 prev 元素后的 next 元素.需要强调的是:label+其他元素+input这样的是不会被匹配的.

prev ~ siblings
用法: $(”form ~ input”) ;
说明: 匹配 prev 元素之后的所有 siblings 元素.注意:是匹配之后的元素,不包含该元素在内,并且siblings匹配的是和prev同辈的元素,其后辈元素不被匹配.

11.16

jquery寻找元素的父对象

今天遇到一个有意思的问题，jquery有两个函数parent()和parents().通过这两个函数可以找到一个对象的父对象，又称作jquery的选择器。举个例子：

〈body〉
〈div id=“one“〉
〈div id=“two“〉hello〈/div〉
〈div id=“three“〉
〈p〉〈a href=“#“〉tonsh〈/a〉〈/p〉
〈/div〉
〈/div〉

$(”a”).parent()将会得到父对象〈p〉
$(”a”).parents()得到父对象为〈p〉〈div.3〉〈div.1〉
$(”a”).parents().filter(”div”)将得到〈div.3〉〈div.1〉,还可以写成$(”a”).parents(”div”)。

如果想的到〈div.2〉对象可以写成这样：$(”a”).parents(”div:eq(0)”)。

如果需要点击〈a〉链接时弹出〈div.2〉中的内容，就这么办：

var id=$(“a“).parents(“div:eq(1)“).children(“div:eq(0)“).html();
alert(id);

这种类似下标的用法很容易就得到了我们想要的内容，只要没有搞混这些下标的顺序

11.16

jQuery插入,复制、替换和删除节点

4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   <title>jQuery插入,复制、替换和删除节点</title>
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript">
   $(document).ready(function(){
     //几种添加节点的方法
    //$("p").append("<b>你好吗？</b>");//向p元素中追加《b》
    //$("<b>你好吗？</b>").appendTo("p");//将《b》追加到p元素中
    //$("p").prepend("<b>你好吗？</b>");//向p中前置《b》
    //$("<b>你好吗？</b>").prependTo("p");//将《b》前置到p元素中
    //$("p").after("<b>你好吗？</b>");//向p元素后插入《b》
    //$("<b>你好吗？</b>").insertAfter("p");//将《b》插入到p元素后边
    //$("p").before("<b>你好吗？</b>");//在p元素之前添加《b》
    //$("<b>你好吗？</b>").insertBefore("p");//将《b》插入到p元素前面


      //几种删除节点的方法
    //var $li=$("ul li:eq(1)").remove();//删除ul节点中第2个元素节点
    //$("ul").append($li);//把刚删除的元素节点从新添加到ul元素中去
    //$("ul li").remove("li[title!=菠萝]");//将ul元素下title属性不等于"菠萝"的li元素删除
    //$("ul li:eq(1)").empty();//清空ul节点下第2个li元素的内容

    //复制节点
   /* $("ul li").click(function(){
     $(this).clone(true).appendTo("ul");//复制当前点击的节点，并将它追加到《ul》元素中，当添加参数时复制它的事件

    });
    */
    //替换节点
   // $("p").replaceWith("<strong>你最不喜欢的水果是？</Strong>");



   });
</script>
</head>
<body>
   <p>你好！</p>
   你最喜欢的水果是？
   <ul>
    <li title="苹果">苹果</li>
    <li title="橘子">橘子</li>
    <li title="菠萝">菠萝</li>
    </ul>
</body>
</html>