【Dongle】【Web】JQuery总结

        JQuery是继prototype之后又一个优秀的Javascript库。它是轻量级的js库 ，它兼容CSS3，还兼容各种浏览器（IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+），jQuery2.0及后续版本将不再支持IE6/7/8浏览器。jQuery使用户能更方便地处理HTML（标准通用标记语言下的一个应用）、events、实现动画效果，并且方便地为网站提供AJAX交互。jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。jQuery能够使用户的html页面保持代码和html内容分离，也就是说，不用再在html里面插入一堆js来调用命令了，只需要定义id即可。

       jQuery是免费、开源的，使用MIT许可协议。jQuery的语法设计可以使开发更加便捷，例如操作文档对象、选择DOM元素、制作动画效果、事件处理、使用Ajax以及其他功能。除此以外，jQuery提供API让开发者编写插件。其模块化的使用方式使开发者可以很轻松的开发出功能强大的静态或动态网页。

      jQuery，顾名思义，也就是JavaScript和查询（Query），即是辅助JavaScript开发的库。

特点

1. 动态特效
2. AJAX
3. 通过插件来扩展
4. 方便的工具 - 例如浏览器版本判断
5. 渐进增强
6. 链式调用
7. 多浏览器支持，支持Internet Explorer6.0+、Opera9.0+、Firefox2+、Safari2.0+、Chrome1.0+（在2.0.0中取消了对Internet Explorer6,7,8的支持）

内容

一、核心

       $是jquery类的一个别名,$()构造一个jquery对象,jQuery 的核心功能都是通过这个函数实现的。 jQuery中的一切都基于这个函数，或者说都是在以某种方式使用这个函数。

 1、 ${表达式}：根据这个表达式来查找所有匹配的元素。
      eg:$("div>p"); 查找所有p元素，且这些p元素都是div的子元素.
         $("input:radio",document.forms[0]); 查找文档第一个表单中，所有的单选按钮。
         $("div",xml.responseXML);在一个由ajax返回的xml文档中，查找所有的div元素。
 2、$(html标记字符串) :根据提供的html字符串，创建jquery对象包装的dom元素。
       eg: $("<div><p>Hello</p></div>").appendTo("body");
          创建一个 <input> 元素必须同时设定 type 属性
          $("<input type='text'>")
3、$(dom元素):将一个或多个dom元素转换为jquery对象。
     eg: $(document.body).css( "background", "black" ); 设置页面背景色

4、$(document).ready(function(){})==$(function(){})；在页面加载完成后自动执行的代码。

二、jquery对象访问

       eq返回的是jquery对象，只能使用jquery方法，get返回的是dom元素对象，只能使用dom方法.

   1、$(dom元素).each(function(){}):以每一个匹配的元素作为上下文来执行一个函数
   2、$(dom元素).size()==$(dom元素).length;对象中元素的个数。eg:<img src="test1.jpg"/> <img src="test2.jpg"/>,jquery代码：$("img").size(); 返回2
   3、context：返回传给jQuery()的原始的DOM节点内容，即jQuery()的第二个参数。如果没有指定，那么context指向当前的文档(document)。
  4、$(dom元素).get()：取得所有匹配的dom元素的集合。如果你想要直接操作 DOM 对象而不是 jQuery 对象，这个函数非常有用。
   5、$(dom元素).get(index)：取得其中一个匹配的元素.

   6、$(dom元素).index():搜索与参数表示的对象匹配的元素，并返回相应元素的索引值。

三、插件机制

1、jQuery.fn.extend(object);扩展 jQuery 元素集来提供新的方法,针对某一个dom元素。
      eg:jQuery.fn.extend({
          check: function() { return this.each(function() { this.checked = true; });},
          uncheck: function() { return this.each(function() { this.checked = false; });}
          });
      调用：
         $("input[type=checkbox]").check();
         $("input[type=radio]").uncheck();
2、$.extend(object);用来在jQuery命名空间上增加新函数,针对所有dom元素。
     $.extend({
       min:function(a,b){return a<b?a:b;},
       max:function(a,b){return a>b?a;b;}
     });

    调用：$.max(10,20);

四、选择器

基本

   1、$("#id"): 根据给定的ID匹配一个元素。
   2、$("dom元素名")：根据给定的元素名匹配所有元素
   3、$(".Class类名"): 根据给定的类匹配元素。
   4、$("*") ：匹配所有元素。
   5、$("dom元素.class类名")：选择所有class属性为指定类名的dom元素。
   6、$(".stripe tr"): 获取class属性为stripe的table元素下的所有行

层级

   1、$("ancestor descendant"):在给定的祖先元素下匹配所有的后代元素
   2、$("parent > child"):在给定的父元素下匹配所有的子元素
   3、$("prev + next"):匹配所有紧接在 prev 元素后的 next 元素
   4、$("prev ~ siblings"):匹配 prev 元素之后的所有 siblings(同级) 元素

简单

1、$("tr:first") 匹配找到的第一个元素
2、$("tr:last") 匹配找到的最后一个元素
3、$("input:not(:checked)") 去除所有与给定选择器匹配的元素
4、$("tr:even") 匹配所有索引值为偶数的元素，从 0 开始计数
5、$("tr:odd") 匹配所有索引值为奇数的元素，从 0 开始计数
6、$("tr:eq(1)") 匹配一个给定索引值的元素
7、$("tr:gt(0)") 匹配所有大于给定索引值的元素
8、$("tr:lt(2)") 匹配所有小于给定索引值的元素

内容

1、$("div:contains('John')") 匹配包含给定文本的元素
2、$("div:has(p)") 匹配所有包含 p 元素的 div 元素
3、$("td:empty") 查找所有不包含子元素或者文本的空元素

可见性

1、$("tr:visible") 查找所有可见的 tr 元素
2、$("tr:hidden") 匹配所有的不可见元素，input 元素的 type 属性为 "hidden" 的话也会被匹配到

属性

1、$("div[id]") 查找所有含有 id 属性的 div 元素
2、$("input[name='newsletter']") 查找所有 name 属性是 newsletter 的 input 元素
3、$("input[name!='newsletter']") 查找所有 name 属性不是 newsletter 的 input 元素
4、$("input[name^='news']") 查找所有 name 以 'news' 开始的 input 元素
5、$("input[name$='letter']") 查找所有 name 以 'letter' 结尾的 input 元素
6、$("input[name*='man']") 查找所有 name 包含 'man' 的 input 元素
7、$("input[id][name$='man']") 找到所有含有 id 属性，并且它的 name 属性是以 man 结尾的

子元素

1、nth-child(even)/:nth-child(odd)/:nth-child(3n)/:nth-child(2)/:nth-child(3n+1)/:nth-child(3n+2) 匹配其父元素下的第N个子或奇偶元素
2、$("ul li:first-child") 在每个 ul 中查找第一个 li
3、$("ul li:last-child")   在每个 ul 中查找最后一个 li
4、$("ul li:only-child")   在 ul 中查找是唯一子元素的 li

表单

1、$(":input") 查找所有的input元素
2、$("text")    匹配所有的单行文本框
3、$(":password") 匹配所有密码框
4、$("radio")   匹配所有单选按钮
5、$("checkbox") 匹配所有复选框
6、$("submit")   匹配所有提交按钮
7、$("image")    匹配所有图像域
8、$("button")   匹配所有按钮
9、$("file")     匹配所有文件域
10、$("hidden") 匹配所有不可见元素，或者type为hidden的元素

表单对象属性

1、$("input:checked") 匹配所有选中的被选中元素(复选框、单选框等，不包括select中的option)
2、$("input:enabled") 匹配所有可用元素
3、$("input:disabled") 匹配所有不可用元素
4、$("select option:selected") 匹配所有选中的option元素

五、属性操作

操作属性

    1、$("img").attr("src"); 返回文档中第一个图像的src属性值。
    2、$("img").attr("src","test.jpg"); 为所有匹配的元素设置一个属性值
    3、$("img").attr("title", function() { return this.src }); 为所有匹配的元素设置一个计算的属性值
    4、$("img").removeAttr("src"); 从每一个匹配的元素中删除一个属性
    5、$("img").attr({ src: "test.jpg", alt: "Test Image" }); 将一个“名/值”形式的对象设置为所有匹配元素的属性。

操作CSS

    1、$("p").addClass("selected"); 为每个匹配的元素添加指定的类名
    2、$("p").removeClass("selected"); 从所有匹配的元素中删除全部或者指定的类。一个或多个要删除的CSS类名，请用空格分开
$("p").removeClass();删除匹配元素的所有类
    3、$("p").toggleClass("selected"); 如果存在（不存在）就删除（添加）一个类
    4、 var count = 0;
       $("p").click(function(){
      $(this).toggleClass("highlight", count++ % 3 == 0);
}); 每点击三下加上一次 'selected' 类

HTML代码

   1、$("div").html(); 取得第一个匹配元素的html内容
   2、$("div").html("<p>Hello Again</p>"); 设置每一个匹配元素的html内容

文本

1、$("p").text(); 取得所有匹配元素的内容
2、$("p").text("<b>Some</b> new text."); 设置所有匹配元素的文本内容

值

1、 $("#single").val() 获得第一个匹配元素的当前值。
2、$("input").val("hello world!"); 设置每一个匹配元素的值

六、筛选

过滤

   1、$("p").eq(1) 获取第N个元素，这个元素的位置是从0算起
   2、 if ( $(this).hasClass("protected") ) 检查当前的元素是否含有某个特定的类，如果有，则返回true。
   3、$("p").filter(".selected") 筛选出与指定表达式匹配的元素集合
   4、is(expr) 用一个表达式来检查当前选择的元素集合，如果其中至少有一个元素符合这个给定的表达式就返回true。
   5、$("p").not( $("#selected")[0] ) 删除与指定表达式匹配的元素

查找

   1、$("div").children();取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合。
   2、$("p").find("span");搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。
   3、$("p").next();取得一个包含匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合
   4、$("p").prev();取得一个包含匹配的元素集合中每一个元素紧邻的前一个同辈元素的元素集合。
   5、$("div").parent;取得一个包含着所有匹配元素的唯一父元素的元素集合。
   6、$("span").parents;找到每个span元素的所有祖先元素
   7、$("div").siblings();取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合

七、文档处理

 内部插入

   1、$("p").append("<b>Hello</b>"); 向每个匹配的元素内部尾部追加内容
   2、$("p").prepend("<b>Hello</b>"); 向每个匹配的元素内部前部追加内容
   3、$("p").appendTo("#foo"); 把所有段落追加到ID值为foo的元素中。

外部插入

   1、$("p").after("<b>Hello</b>"); 在每个匹配的元素之后插入内容
   2、$("p").before("<b>Hello</b>"); 在每个匹配的元素之前插入内容

包裹

   1、$("p").wrap("<div class='wrap'></div>"); 把所有匹配的元素用其他元素的结构化标记包裹起来。

替换

     1、$("p").replaceWith("<b>Paragraph. </b>"); 将所有匹配的元素替换成指定的HTML或DOM元素。

删除

   1、$("p").empty(); 删除匹配的元素集合中所有的子节点。
   2、$("p").remove(); 从DOM中删除所有匹配的元素

八、CSS操作

  CSS

    1、$("p").css("color"); 取得第一个段落的color样式属性的值
    2、$("p").css({ color: "#ff0011", background: "blue" }); 把一个“名/值对”对象设置为所有匹配元素的样式属性。
    3、$("p").css("color","red"); 在所有匹配的元素中，设置一个样式属性的值

  位置

    1、var offset = p.offset();获取匹配元素在当前视口的相对偏移，返回的对象包含两个整形属性：top 和 left。此方法只对可见元素有效。
    2、var position = p.position();获取匹配元素相对父元素的偏移

  尺寸

    1、$("p").height(); 取得第一个匹配元素当前计算的高度值（px）。
    2、$("p").height(20); 为每个匹配的元素设置CSS高度(hidth)属性的值
    3、$("p").width(); 取得第一个匹配元素当前计算的宽度值（px）。$(window).width(); 获取当前窗口的宽

    4、$("p").width(20); 为每个匹配的元素设置CSS宽度(width)属性的值

九、效果

  基本

    1、$("p").show() 显示隐藏的匹配元素
    2、$("p").hide() 隐藏显示的元素
    3、$("p").show("slow"); 以优雅的动画显示所有匹配的元素，并在显示完成后可选地触发一个回调函数。

      speed (String,Number) : 三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如：1000)

callback (Function) : (Optional) 在动画完成时执行的函数，每个元素执行一次。

   用迅速的动画将隐藏的段落显示出来，历时200毫秒。并在之后执行反馈！

   <p style="display: none">Hello</p>

   jQuery 代码:

   $("p").show("fast",function(){

   $(this).text("Animation Done!");

   });

   4、$("p").hide("slow"); 以优雅的动画隐藏所有匹配的元素，并在显示完成后可选地触发一个回调函数。
   5、$("p").toggle() 切换元素的可见状态
   6、$("p").toggle("slow"); 以优雅的动画切换所有匹配的元素，并在显示完成后可选地触发一个回调函数

淡入淡出

1、$("p").fadeIn("slow"); 通过不透明度的变化来实现所有匹配元素的淡入效果，并在动画完成后可选地触发一个回调函数
2、$("p").fadeOut("slow"); 通过不透明度的变化来实现所有匹配元素的淡出效果，并在动画完成后可选地触发一个回调函数。
3、$("p").fadeTo("slow", 0.66);$("p").fadeTo("slow", 0.66); 把所有匹配元素的不透明度以渐进方式调整到指定的不透明度，并在动画完成后可选地触发一个回调函数

自定义

   1、$("#block").animate({
    width: "90%",
    height: "100%",
    fontSize: "20em",
    borderWidth: 10
201}, 1000 );用于创建自定义动画的函数。

十、事件

   事件处理

   1、$("p").bind("click", function(){ alert( $(this).text() );}); 为每一个匹配元素的特定事件（像click）绑定一个事件处理器函数
   2、$("p").one("click",function(){alert(${this}.text());}) 当所有段落被第一次点击的时候，显示所有其文本
   3、trigger(type,[data])在每一个匹配的元素上触发某类事件

事件委派

$("p").live("click", function(){$(this).after("<p>Another paragraph!</p>");});。给所有当前以及将来会匹配的元素绑定一个事件处理函数（比如click事件）。也能绑定自定义事件。与bind()不同的是，live()一次只能绑定一个事件

事件切换

一个模仿悬停事件（鼠标移动到一个对象上面及移出这个对象）的方法

   $("td").hover(

function () {

    $(this).addClass("hover");

},

function () {

    $(this).removeClass("hover");

}

);鼠标悬停的表格加上特定的类

 

4、每次点击后依次调用函数

$("td").toggle(

function () {

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

},

function () {

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

}

);

5、事件:
   1、$("p").blur(); 触发每一个匹配元素的blur事件
   2、$("p").blur( function () { alert("Hello World!"); } ); 在每一个匹配元素的blur事件中绑定一个处理函数
   3、change()；change事件会在元素失去焦点的时候触发，也会当其值在获得焦点后改变时触
   4、change(fn);在每一个匹配元素的change事件中绑定一个处理函数。
   5、$("p").click(); 触发每一个匹配元素的click事件
   6、$("p").click(function(){});在每一个匹配元素的click事件中绑定一个处理函数
   7、dblclick()；dblclick事件会在元素的同一点双击时触发。
   8、$("p").dblclick( function () { alert("Hello World!"); }); 在每一个匹配元素的dblclick事件中绑定一个处理函数。
   9、$(document).ready(function(){ $("#login").focus();}); 触发每一个匹配元素的focus事件。
   10、$("input[type=text]").focus(function(){this.blur();}); 在每一个匹配元素的focus事件中绑定一个处理函数。
   11、keydown()；keydown事件会在键盘按下时触发。
   12、keydown(fn)；在每一个匹配元素的keydown事件中绑定一个处理函数。
   13、keypress()；触发每一个匹配元素的keypress事件
   14、keypress(fn)；在每一个匹配元素的keypress事件中绑定一个处理函数。
   15、keyup()；触发每一个匹配元素的keyup事件
   16、keyup(fn)；在每一个匹配元素的keyup事件中绑定一个处理函数。
   17、mousedown();
   18、mouseup();
   19、mousemove();
   20、mouseover();
   21、mouseout();
   22、$("form:first").submit();提交本页的第一个表单。
   23、$("form").submit(function(){return false;});阻止页面提交。

十一、ajax

      ajax请求

       1、通有方式：$.ajax(prop);prop是一个hash表，它可以传递的key/value有以下几种:
         (String)type：数据传递方式(get或post)。
         ((String)url：数据请求页面的url
         ((String)data：传递数据的参数字符串，只适合post方式
         ((String)dataType：期待数据返回的数据格式(例如 "xml", "html", "script",或 "json")
         ((Boolean)ifModified： 当最后一次请求的相应有变化是才成功返回，默认值是false
         ((Number)timeout:设置时间延迟请求的时间。可以参考$.ajaxTimeout
         ((Boolean)global：是否为当前请求触发ajax全局事件，默认为true
         ((Function)error：当请求失败时触发的函数。
         ((Function)success：当请求成功时触发函数
         ((Function)complete：当请求完成后出发函数
     
      2、$.get(url, params, callback) 用get方式向远程页面传递参数，请求完成后处理函数，除了url外，其它参数任意选择！
         eg:$.get(   "ajax.asp",
            { name: "young", age: "25" },
            function(data){ alert("Data Loaded: " + data); }
          )
      3、$.getJSON(url, params, callback) 用get方式向远程json对象传递参数，请求完成后处理函数callback
      4、$.post(url, params, callback) 用post方式向远程页面传递参数，请求完成后处理函数callback

十二、工具类

数组和对象操作

     1、$.each(obj,callback); 通用例遍方法，可用于例遍对象和数组。回调函数拥有两个参数：第一个为对象的成员或数组的索引，第二个为对应变量或内容。
       $.each( [0,1,2], function(i, n){alert( "Item #" + i + ": " + n );});
     2、jQuery.grep(array,callback,[invert])；使用过滤函数过滤数组元素，此函数至少传递两个参数：待过滤数组和过滤函数
     3、$.map(array,callback);将一个数组中的元素转换到另一个数组中
     4、$.inArray(value,array);确定第一个参数在数组中的位置(如果没有找到则返回 -1 ),从0开始。
     5、$.merge( [0,1,2], [2,3,4] ) ；合并两个数组。返回的结果会修改第一个数组的内容——第一个数组的元素后面跟着第二个数组的元素，不去掉重复项。
     6、$.unique(array);删除数组中重复元素
     7、$.trim(" hello, how are you? "); 去掉字符串起始和结尾的空格
     8、$.isArray(obj);测试对象是否为数组。
     9、$.isFunction(obj); 测试对象是否为函数
   URL:
   1、$.param(obj);将表单元素数组或者对象序列化。是.serialize()的核心方法。
     eg:var params = { width:1680, height:1050 }; var str = jQuery.param(params);
   2、$("form").serialize() ；序列表单内容为字符串，用于 Ajax 请求

十三、jquery操作单选框

   if($("input[type='radio']:checked")){
     var tt=$("input[name='chk']:checked").val();
}

十四、jquery操作复选框

    var chkArr="";
$(".cc:checked").each(function(){
       chkArr+=$(this).val()+"|";
});
1

十五、jquery实现复选框全选

   var checked=$("#allchk").attr("checked");
$(".ww").each(function(){
   if($(this).attr("checked")!=checked){$(this).click();}
});