锋利的jQuery

按有用程度 按页码先后 最新笔记

• 

  第1页

  xpowery

  简单易学~~~ (更多)

  简单易学~~~ (收起)

  2011-11-18 11:33:11   回应

  收藏

  推荐
• 

  第1页

  cyh3101

  1. Jquery对象和DOM对象的转化 Var $variable = //Jquery对象 Var $variable= //DOM对象 Var $cr = $(“cr”);//Jquery转为DOM对象 Var cr= $cr[0] Var cr= document.getElementById(“#cr”)// DOM转为Jquery对象 Var $cr = $(cr); 解决jQeury和其他库的冲突 jQuery库调用完成以后，调用jQuery.noConflict()函数来将$的控制权移交给其他JavaScript库 $(“#demo”).click()单独写点击不成功，当把函数放在$(docu... (更多)

  1. Jquery对象和DOM对象的转化

  Var $variable = //Jquery对象

  Var $variable= //DOM对象

  Var $cr = $(“cr”);//Jquery转为DOM对象

  Var cr= $cr[0]

  Var cr= document.getElementById(“#cr”)// DOM转为Jquery对象

  Var $cr = $(cr);

  解决jQeury和其他库的冲突

  jQuery库调用完成以后，调用jQuery.noConflict()函数来将$的控制权移交给其他JavaScript库

  $(“#demo”).click()单独写点击不成功，当把函数放在$(document).ready()中，代码执行。

  根据奇偶对table设置不同的颜色

  Var item = document.getElementbyId(“tb”);//获取id为tb的table

  Var tbody = item.getElementsByTagName(“tbody”)[0];//获取table的第一个tbody

  Var trs = tbody.getElementsByTabName(“tr”);//获取tbody下所有tr元素

  For(var i=0;I <trs.length;i++)

  { If(i%2==0)

  { Trs[i].style.backgroundColor = “#ddd”;//设置自己需要的颜色

  } Else

  { //todo

  } }

  Jquery选择器选择多个元素 $(“a,b,c”)，以，隔开 如$(“div,span”)

  Jquery筛选器 $(‘ul li’).filter(“contains(‘aaaa’),contains(‘bbbbbb’)”)利用contains筛选符合要求的集合，可以有多个选择器，利用‘,’隔开。

  给一个按钮添加一组交互事件，而不需要判断

  需要进行判断的事件：

  testBtn.click(function(){

  if($category.is(“:visible”))

  {}

  Else

  {}

  })

  利用交互事件的形式后：

  testBtn.toggle(function(){

  },function(){

  })

  2. jquery 的节点增加

  元素的增加

  可以通过$(“<div>aaaaa</div>”)创建一个元素，返回的是一个jquery对象

  除此之外，还可以移动节点，

  <ul>

  <li>aaaaa</li>

  <li>bbbbb</li>

  <li>ccccc</li>

  <li>ddddd</li>

  <li>eeeee</li>

  <li>fffff</li>

  <li>ggggg</li>

  <li>hhhhh</li>

  <li>iiiii</li>

  </ul>

  Html结构如上，可以通过下面的代码改变li的位置

  var $li_1 = $("ul li:eq(1)");

  var $li_2 = $("ul li:eq(2)");

  $li_2.after($li_1);

  改变以后的结果：

  • aaaaa

  • ccccc

  • bbbbb

  • ddddd

  • eeeee

  • fffff

  • ggggg

  • hhhhh

  • iiiii

  3. 有关jquery的节点删除问题

  有两个函数

  Remove函数和empty函数

  Remove可以删除指定的元素集合

  例如：

  $("ul li:eq(1)").remove();

  此函数执行完成以后，返回删除的节点的索引，以便于以后使用。

  Empty函数是用来清空相应元素的内容。

  通过代码：$("ul li:eq(1)").empty();

  <li>aaaaaaaaaa</li>

  <li>bbbbbbbbbb</li>

  <li>cccccccccc</li>

  <li>dddddddddd</li>

  变为

  <li>aaaaaaaaaa</li>

  <li> </li>

  <li>cccccccccc</li>

  <li>dddddddddd</li>

  4. 克隆元素

  通过clone函数

  通过如下代码：

  $("ul li").click(function () {

  $(this).clone(true).appendTo("ul");

  })

  当单击ul li 的某一项的时候，在ul的末尾追加当前单击的li

  并且通过在clone函数中增加true参数，可以让新追加的元素也有点击追加的功能。

  <ul>

  <li>aaaaaaaa</li>

  <li>bbbbbbbb</li>

  <li>cccccccc</li>

  <li>dddddddd</li>

  </ul>

  5. 替换函数

  Replace函数和replaceAll函数，两者相同，replaceAll函数只是颠倒了replace函数的使用

  $("#demo").replaceWith("<span>bbbbbb</span>");

  $("<span>bbbbbb</span>").replaceAll("#demo");

  6. 包裹函数

  Wrap WrapAll wrapInner

  <ul>

  <li>aaaaa</li>

  <li>bbbbb</li>

  </ul>

  Wrap函数

  $("ul li").wrap("<strong></strong>");把ul中的每一个li用strong包裹起来

  <ul>

  <strong><li>aaaaa</li></strong>

  <strong><li>bbbbb</li></strong>

  </ul>

  wrapAll函数

  $("ul li").wrapAll("<strong></strong>");把ul中的li整体包裹起来

  <ul>

  <strong>

  <li>aaaaa</li>

  <li>bbbbb</li>

  </strong>

  </ul>

  wrapInner

  $("ul li").wrapInner("<strong></strong>");ul中的li每一个都包裹上<strong></strong>(内包裹)

  <ul>

  <li><strong>aaaaa</strong></li>

  <li><strong>bbbbb</strong></li>

  </ul>

  7. 增加改变属性

  var aaa = $("span").attr("class"); //通过传入一个参数，可以得到相应的属性的值。

  $("span").attr("class", "demo1");//通过传入两个参数，可以设置相应的属性的值。

  有时候会不想覆盖原来的class的值，可以使用$("span").addClass("demo2");来增加class

  移除class

  可以通过$("span").removeClass("demo2");来移除class，当然也可以通过在要移除的class中间加空格来移除多个class

  $("span").addClass("demo2 demo3");

  利用toggleClass切换移除增加class

  $("span").toggleClass("demo2");

  判断是否有某一个class存在，

  $("span").has("demo2");//判断是否有demo2的class存在

  总结：类似的方法还有html(),text(),height(),width(),val(),css();

  8. 遍历节点方法

  Children方法//获取所有匹配的子元素，

  Children(“a”)//获取所有匹配的a元素

  Next方法//获取匹配的后面紧跟的同辈元素

  Prev方法//获取匹配的前面的同辈元素

  Sublings方法//获取前后所有的同辈元素

  Closest方法//首先检查当前元素是否匹配，如果匹配直接返回，如果不匹配向上查找知道找到匹配的元素

  9. css-dom操作

  设置css属性

  $(“demo”).css(“color”,”red”);

  也可以同时设置多个属性

  $(“demo”).css({“color”:”red”,”font-size”:”30px”});

  当属性中带有“-”时，可以利用“-”后面字母首字母大写

  $(“demo”).css({“color”:”red”,”fontSize”:”30px”});

  当要设定的属性不加““时，只能用首字母大写的形式

  $(“demo”).css({color:”red”,fontSize:”30px”});

  Offset，position，scrollTop，scrollLeft？

  jQuery事件和动画

  window.onload和$(document).ready方法的区别

  window.onload是当网页中的所有元素（包括元素的所有关联文件）完全加载到浏览器后才执行，即javascript才能访问网页中的任何元素。

  当定义时

  Window.onload = a;

  Window.onload = b;

  当整个网页都就绪时，只执行b函数，因为window.onload函数只能保存对一个函数的引用。

  而$(document).ready是当DOM完全就绪时就可以被调用。

  bind函数,时间绑定

  bind(event,data,fun)

  event表示事件类型，

  data是事件对象传递给事件对象的额外数据对象

  fun是事件触发时，绑定的处理函数。

  合成事件

  hover和toggle事件

  hover(enter,leave)事件：用于模拟鼠标悬停事件，当鼠标移动到元素上时会触发第一个函数，当鼠标离开元素时，会触发第二个函数。

  如下代码：

  $(function () {

  $("#demo h5.head").hover(function () {

  $(this).next("div.detail").show();

  }, function () {

  $(this).next("div.detail").hide();

  })

  })

  Toggle事件

  Toggle(fun1,fun2,fun3)用于模拟鼠标单击事件，当鼠标第一次单击元素时，触发第一个函数，当鼠标单击元素第二次时，触发第二个函数，依次触发，随后的单击对这几个函数循环触发。

  事件冒泡

  假设一个网页的结构如下：

  <body>

  <form id="form1" runat="server">

  <div id="content">

  外ªa层?

  <span>内¨²层?</span>

  外ªa层?

  </div>

  <div id="img">

  </div>

  </form>

  </body>

  Javascript如下：

  $(function () {

  $('span').click(function () {

  $('#img').html($("#img").html() + "<p>内¨²层?</p>");

  })

  $('#content').click(function () {

  $('#img').html($("#img").html() + "<p>外ªa层?</p>");

  })

  $('body').click(function () {

  $('#img').html($("#img").html() + "<p>body</p>");

  })

  })

  当单击内层元素时，会触发外层元素的事件也被触发，像冒泡一样一直往上升。

  如果不想导致外层的元素也执行内层的事件，可以利用

  event.stopPropagation();//停止冒泡函数停止冒泡

  首先为函数添加一个参数，

  $('body').click(function (event) {//event:事件对象

  $('#img').html($("#img").html() + "<p>body</p>");

  然后通过事件对象调用停止冒泡函数

  阻止默认行为，比如单击一些连接，默认行为是跳转到另一个网页，如果不想让点击执行默认的跳转操作，可以通过preventDefault函数

  $('body').click(function (event) {//event:事件对象

  //执行的代码

  event.preventDefault();//此函数阻止默认跳转

  } 当然上面两种都可以通过return false代替

  移除事件

  Unbind函数

  Unbind([type][,data]);//type为要移除的时间类型，data为要移除的函数

  $(“element”).bind(“click”,myfun = function(){

  //代码

  })

  可以通过$(“element”).unbind(“click”,myfun)；来解除绑定事件

  One方法，绑定的事件只执行一次

  $("#img").one("click", function () {

  $(this).html("清?空?");

  })

  Triggle事件：//触发事件，

  triggle（type[,data]）；//type指定要触发的事件的类型

  //data，指定附加的数据

  下面的代码自定义了一个myClick事件，然后利用triggle函数来触发自定义的事件。Triggle时间中带了附加的数据。

  $("#Button1").bind("myClick", function (event, mes1, mes2) {

  $("#demo").append("<p>" + mes1 + mes2 + "</p>")

  });

  $("#Button1").trigger("myClick",["我¨°自Á?定¡§义°?的Ì?","事º?件t"])

  triggerHandler

  $("input#input").triggerHandler("focus");

  当我们想要执行focus事件，浏览器会执行默认的得到焦点操作，要是我们不想浏览器执行默认的操作，可以通过triggleHandler事件来执行focus的同时不执行浏览器的默认操作。

  其他方法

  Bind//可以绑定多个事件

  $(“div”).bind(“mouseover mouseout”,fun)//事件间以空格隔开

  为事件定义命名空间

  $("div.test").bind("click", function () {

  $("body").append("<p>click事º?件t</p>");

  })

  $("div.test").bind("click.plugin", function () {

  $("body").append("<p>click.plugin事º?件t</p>");

  })

  $("#Button1").bind("click", function () {

  $("div.test").trigger("click!");

  return false;

  })

  上面的代码为div.class事件添加了两个单击事件，一个在命名空间plugin中,另一个没有在命名空间中,当通过trigger函数触发click事件时，当为triggle(“click!”)时，为执行不在命名空间中click事件

  Jquery中的动画

  Show和hide函数

  Show([time])//time可以定义为slow，fast，normal，也可以设定时间，用于设定显示的过度时间。

  特点:显示的高度从上向下，宽度从左到右，同时增加透明度。

  Hide（[time]）//与show相反,但会记住要操作元素的display状态

  当调用show时会恢复到原来的状态

  fadeOut和fadeIn函数

  两个函数不会改变现实的高度和宽度，只是改变显示的透明度。

  Slideup和slidedown函数只会改变现实的高度，

  上面的函数有时候不能满足各种需求，可以利用animate自定义动画

  Animate(para,speed,callback)//para包含样式的值，speed速度，//callback动画完成后执行的函数

  组合动画示例：

  $(function () {

  $("#panel").click(function () {

  $(this).animate({ left: "500px" }, 3000)

  .animate({height:"200px"},300);//以链式的形式执行

  });

  })

  利用回调函数

  $("#panel").click(function () {

  $(this).animate({ left: "400px", height: "200px", opacity: "1.0" }, 3000)

  .animate({ top: "200px", width: "200px" }, 3000, function () {//利用回调函数，在动画执行完成后执行改变//css的函数

  $(this).css("border", "5px solid blue");

  });

  });

  Callback函数适合于所有的动画效果函数

  停止动画函数 stop

  Stop([clearQueue][,gotoEnd]);//clearQueue用于是否把当前元素//接下来的未完成的动画队列清空,gotoEnd用于让正在执行的动画//直接到达结束时刻时候的状态。

  $(function () {

  $("#panel").hover(function () {

  $(this).stop()

  .animate({ height: "150px", width: "300px" }, 2000)

  }, function () {

  $(this).stop()

  .animate({ height: "22px", width: "60px" }, 2000)

  });

  })

  判断是否处于动画状态

  If(‘element’).is(“:animation”)；//用来判断是否处于动画状态

  其他动画函数

  Toggle、slideToggle、fadeTo//分别代替show，hide的组合、slideUp，slideDown的组合、fadeIn，fadeOut的组合。

  示例：

  $("#panel").click(function () {

  $(this).toggle();

  });

  当然其他的动画都可以利用animation动画代替

  Parent和parnets元素，parent是取得符合要求的父元素，而parents是取得符合要求的祖先元素。

  Jquery 与Ajax的应用

  jquery load方法

  load(url[,data][,callback])//url为要请求的页面的地址

  //data为发送至服务器的值

  //callback为调用完成以后的回调函数，无论成功失败

  示例：

  $(function () {

  $("#send").click(function () {

  $("#resText").load("test.htm .para,h6");

  });

  });

  通过load函数可以得到test.htm页面的html代码，把它加入到id为resText中，也可以得到相应的test.htm中相应的代码，而不是全部的代码，利用load("test.htm .para,h6");在test.htm后追加条件

  回调函数：

  $("#resText").load("test.htm "，function(responseText,textStatus,XMLHttpRequst){

  //responseText请求返回的内容，

  //textStatus请求状态，success，error，notmodified，timeout

  //XMLHttpRequest XMLHttpRequest对象

  });

  Ajax以xml形式传递

  $(function () {

  $("#send").click(function () {

  $.get("../ashx/jquery_get.ashx", function (data, textStatus) {//data代表了传回来的值，textStatus代表了请求的状态,

  var username = $(data).find("comment").attr("username");

  var content = $(data).find("comment content").text();

  var textHtml = "<div class='comment'><h6>" + username + "</h6><p class='para'>" + content + "</p></div>";

  $("#resText").html(textHtml);

  });

  });

  });

  Ajax与json

  Ajax与post方法与get方法相似，但是也有一些不同，比如传输的方式，传输的数据量的限制，安全性的限制。

  $.GetScript和$.getjson

  有时候初次加载时就去的全部的javascript是没有必要的，可以通过稍后加载的方式加载

  可以通过

  $(document.creatElement(“script”)).append(“src”,”test.js”).appentTo(“head”)；

  $(“<script type=’text/javascript’ src=”test.js”></script>”).appendTo(“head”)；

  也可以通过如下代码：

  $.getScript(“test.js”)；

  $.getjson

  $.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?tags=car&tagmode=any&format=json&jsoncallback=?",

  function (data) {

  $.each(data.items, function (i, item) {//data.items为要操作的对象，i为对象的成员的索引，item为对应//的对象或内容

  $("<img class='para'></img>").attr("src", item.media.m)//通过得到//item下的media元素下的m元素的值

  .appendTo("#resText");

  if (i == 3) {

  return false;

  }

  });

  原始的json数据结构如下:

  ({"link":"http://www.flickr.com/photos/63292151@N04/6311360357/","media": {"m":"http://farm7.static.flickr.com/6041/6311360357_b578b30004_m.jpg"}})

  $.ajax(options)方法：

  各个参数的作用：

  url：发送请求的地址

  type：请求的方式，为get或post 默认为get

  timeout：设置请求超时的时间

  data：发送的数据字符串，如果不是字符串将自动转换成字符串{fool:”bar1”,fool2:”bar2”}转换成&foo1=bar1&fool2=bar2,如果是数组{foo:[“bar1”,”bar2”]}转换成不同值同一个名称

  &fool=bar1&fool=bar2

  dataType:预期服务器返回的数据类型 xml，json，jsonp，html，script，text类型

  beforeSend：发送请求之前的行为

  function(XMLHttpRequest)

  { }

  Complete:发送请求完成以后调用，不管请求有没有成功

  function(XMLHttpRequest，textStatus)

  { }

  Success：发送成功调用

  function(XMLHttpRequest，textStatus)

  { }

  Error：请求失败调用

  function(XMLHttpRequest，textStatus，errorThrown)

  { }

  Global：boolean 默认为true 是否调用全局ajax事件

  序列化元素

  Serialize函数

  对于下面的表单：

  <form id="form1" runat="server">

  <p>评¨¤论?：êo</p>

  <p>姓?名?：êo<input type="text" name="username" id="username" /></p>

  <p>内¨²容¨Y：êo<textarea name="content" id="content" rows="2" cols="20"></textarea></p>

  <p><input type="button" value="提¬¨¢交?" id="submit" /></p>

  <div id="resText"></div>

  </form>

  我们可以通过

  $.get(“url”,{username:$(“#username”).val(),

  Content:$(“#content”).val()},function(){})方法传递标点数据，但是但表单数据比较多的时候，可以利用serialize方法实现

  示例如下

  $("#submit").click(function () {

  $.get("../ashx/serialize.ashx",

  //访问的url

  $("#form1").serialize(), function (data, textStatus) {

  //serialize,对整个form1序列化

  var text = "<div><p>" + $(data).find("username").text()

  + "</p><p>" + $(data).find("content").text() + "</p></div>";

  $("#resText").html(text);

  });

  });

  serializeArray函数

  该方法返回的是将DOM序列化后的JSON格式的数据

  Para函数 对一个数组或对象按照key/value进行序列化

  示例：

  Var obj = {a:1，b:2，c:3};

  Var k = $.para(obj);

  Alert(k)//结果为a=1&b=2&c=3;

  Ajax中的全局事件

  ajaxComplete(callback)//请求完成时执行

  ajaxError(callback)//请求错误时调用

  ajaxSend(callback)//请求发生前调用

  ajaxSuccess(callback)//请求成功时执行

  jquery 插件

  //Todo… (收起)

  2011-11-07 14:31:07   回应

  收藏

  推荐

• 

  第1页

  cyh3101

  1. Jquery对象和DOM对象的转化 Var $variable = //Jquery对象 Var $variable= //DOM对象 Var $cr = $(“cr”);//Jquery转为DOM对象 Var cr= $cr[0] Var cr= document.getElementById(“#cr”)// DOM转为Jquery对象 Var $cr = $(cr); 解决jQeury和其他库的冲突 jQuery库调用完成以后，调用jQuery.noConflict()函数来将$的控制权移交给其他JavaScript库 $(“#demo”).click()单独写点击不成功，当把函数放在$(docu... (更多)

  1. Jquery对象和DOM对象的转化

  Var $variable = //Jquery对象

  Var $variable= //DOM对象

  Var $cr = $(“cr”);//Jquery转为DOM对象

  Var cr= $cr[0]

  Var cr= document.getElementById(“#cr”)// DOM转为Jquery对象

  Var $cr = $(cr);

  解决jQeury和其他库的冲突

  jQuery库调用完成以后，调用jQuery.noConflict()函数来将$的控制权移交给其他JavaScript库

  $(“#demo”).click()单独写点击不成功，当把函数放在$(document).ready()中，代码执行。

  根据奇偶对table设置不同的颜色

  Var item = document.getElementbyId(“tb”);//获取id为tb的table

  Var tbody = item.getElementsByTagName(“tbody”)[0];//获取table的第一个tbody

  Var trs = tbody.getElementsByTabName(“tr”);//获取tbody下所有tr元素

  For(var i=0;I <trs.length;i++)

  { If(i%2==0)

  { Trs[i].style.backgroundColor = “#ddd”;//设置自己需要的颜色

  } Else

  { //todo

  } }

  Jquery选择器选择多个元素 $(“a,b,c”)，以，隔开 如$(“div,span”)

  Jquery筛选器 $(‘ul li’).filter(“contains(‘aaaa’),contains(‘bbbbbb’)”)利用contains筛选符合要求的集合，可以有多个选择器，利用‘,’隔开。

  给一个按钮添加一组交互事件，而不需要判断

  需要进行判断的事件：

  testBtn.click(function(){

  if($category.is(“:visible”))

  {}

  Else

  {}

  })

  利用交互事件的形式后：

  testBtn.toggle(function(){

  },function(){

  })

  2. jquery 的节点增加

  元素的增加

  可以通过$(“<div>aaaaa</div>”)创建一个元素，返回的是一个jquery对象

  除此之外，还可以移动节点，

  <ul>

  <li>aaaaa</li>

  <li>bbbbb</li>

  <li>ccccc</li>

  <li>ddddd</li>

  <li>eeeee</li>

  <li>fffff</li>

  <li>ggggg</li>

  <li>hhhhh</li>

  <li>iiiii</li>

  </ul>

  Html结构如上，可以通过下面的代码改变li的位置

  var $li_1 = $("ul li:eq(1)");

  var $li_2 = $("ul li:eq(2)");

  $li_2.after($li_1);

  改变以后的结果：

  • aaaaa

  • ccccc

  • bbbbb

  • ddddd

  • eeeee

  • fffff

  • ggggg

  • hhhhh

  • iiiii

  3. 有关jquery的节点删除问题

  有两个函数

  Remove函数和empty函数

  Remove可以删除指定的元素集合

  例如：

  $("ul li:eq(1)").remove();

  此函数执行完成以后，返回删除的节点的索引，以便于以后使用。

  Empty函数是用来清空相应元素的内容。

  通过代码：$("ul li:eq(1)").empty();

  <li>aaaaaaaaaa</li>

  <li>bbbbbbbbbb</li>

  <li>cccccccccc</li>

  <li>dddddddddd</li>

  变为

  <li>aaaaaaaaaa</li>

  <li> </li>

  <li>cccccccccc</li>

  <li>dddddddddd</li>

  4. 克隆元素

  通过clone函数

  通过如下代码：

  $("ul li").click(function () {

  $(this).clone(true).appendTo("ul");

  })

  当单击ul li 的某一项的时候，在ul的末尾追加当前单击的li

  并且通过在clone函数中增加true参数，可以让新追加的元素也有点击追加的功能。

  <ul>

  <li>aaaaaaaa</li>

  <li>bbbbbbbb</li>

  <li>cccccccc</li>

  <li>dddddddd</li>

  </ul>

  5. 替换函数

  Replace函数和replaceAll函数，两者相同，replaceAll函数只是颠倒了replace函数的使用

  $("#demo").replaceWith("<span>bbbbbb</span>");

  $("<span>bbbbbb</span>").replaceAll("#demo");

  6. 包裹函数

  Wrap WrapAll wrapInner

  <ul>

  <li>aaaaa</li>

  <li>bbbbb</li>

  </ul>

  Wrap函数

  $("ul li").wrap("<strong></strong>");把ul中的每一个li用strong包裹起来

  <ul>

  <strong><li>aaaaa</li></strong>

  <strong><li>bbbbb</li></strong>

  </ul>

  wrapAll函数

  $("ul li").wrapAll("<strong></strong>");把ul中的li整体包裹起来

  <ul>

  <strong>

  <li>aaaaa</li>

  <li>bbbbb</li>

  </strong>

  </ul>

  wrapInner

  $("ul li").wrapInner("<strong></strong>");ul中的li每一个都包裹上<strong></strong>(内包裹)

  <ul>

  <li><strong>aaaaa</strong></li>

  <li><strong>bbbbb</strong></li>

  </ul>

  7. 增加改变属性

  var aaa = $("span").attr("class"); //通过传入一个参数，可以得到相应的属性的值。

  $("span").attr("class", "demo1");//通过传入两个参数，可以设置相应的属性的值。

  有时候会不想覆盖原来的class的值，可以使用$("span").addClass("demo2");来增加class

  移除class

  可以通过$("span").removeClass("demo2");来移除class，当然也可以通过在要移除的class中间加空格来移除多个class

  $("span").addClass("demo2 demo3");

  利用toggleClass切换移除增加class

  $("span").toggleClass("demo2");

  判断是否有某一个class存在，

  $("span").has("demo2");//判断是否有demo2的class存在

  总结：类似的方法还有html(),text(),height(),width(),val(),css();

  8. 遍历节点方法

  Children方法//获取所有匹配的子元素，

  Children(“a”)//获取所有匹配的a元素

  Next方法//获取匹配的后面紧跟的同辈元素

  Prev方法//获取匹配的前面的同辈元素

  Sublings方法//获取前后所有的同辈元素

  Closest方法//首先检查当前元素是否匹配，如果匹配直接返回，如果不匹配向上查找知道找到匹配的元素

  9. css-dom操作

  设置css属性

  $(“demo”).css(“color”,”red”);

  也可以同时设置多个属性

  $(“demo”).css({“color”:”red”,”font-size”:”30px”});

  当属性中带有“-”时，可以利用“-”后面字母首字母大写

  $(“demo”).css({“color”:”red”,”fontSize”:”30px”});

  当要设定的属性不加““时，只能用首字母大写的形式

  $(“demo”).css({color:”red”,fontSize:”30px”});

  Offset，position，scrollTop，scrollLeft？

  jQuery事件和动画

  window.onload和$(document).ready方法的区别

  window.onload是当网页中的所有元素（包括元素的所有关联文件）完全加载到浏览器后才执行，即javascript才能访问网页中的任何元素。

  当定义时

  Window.onload = a;

  Window.onload = b;

  当整个网页都就绪时，只执行b函数，因为window.onload函数只能保存对一个函数的引用。

  而$(document).ready是当DOM完全就绪时就可以被调用。

  bind函数,时间绑定

  bind(event,data,fun)

  event表示事件类型，

  data是事件对象传递给事件对象的额外数据对象

  fun是事件触发时，绑定的处理函数。

  合成事件

  hover和toggle事件

  hover(enter,leave)事件：用于模拟鼠标悬停事件，当鼠标移动到元素上时会触发第一个函数，当鼠标离开元素时，会触发第二个函数。

  如下代码：

  $(function () {

  $("#demo h5.head").hover(function () {

  $(this).next("div.detail").show();

  }, function () {

  $(this).next("div.detail").hide();

  })

  })

  Toggle事件

  Toggle(fun1,fun2,fun3)用于模拟鼠标单击事件，当鼠标第一次单击元素时，触发第一个函数，当鼠标单击元素第二次时，触发第二个函数，依次触发，随后的单击对这几个函数循环触发。

  事件冒泡

  假设一个网页的结构如下：

  <body>

  <form id="form1" runat="server">

  <div id="content">

  外ªa层?

  <span>内¨²层?</span>

  外ªa层?

  </div>

  <div id="img">

  </div>

  </form>

  </body>

  Javascript如下：

  $(function () {

  $('span').click(function () {

  $('#img').html($("#img").html() + "<p>内¨²层?</p>");

  })

  $('#content').click(function () {

  $('#img').html($("#img").html() + "<p>外ªa层?</p>");

  })

  $('body').click(function () {

  $('#img').html($("#img").html() + "<p>body</p>");

  })

  })

  当单击内层元素时，会触发外层元素的事件也被触发，像冒泡一样一直往上升。

  如果不想导致外层的元素也执行内层的事件，可以利用

  event.stopPropagation();//停止冒泡函数停止冒泡

  首先为函数添加一个参数，

  $('body').click(function (event) {//event:事件对象

  $('#img').html($("#img").html() + "<p>body</p>");

  然后通过事件对象调用停止冒泡函数

  阻止默认行为，比如单击一些连接，默认行为是跳转到另一个网页，如果不想让点击执行默认的跳转操作，可以通过preventDefault函数

  $('body').click(function (event) {//event:事件对象

  //执行的代码

  event.preventDefault();//此函数阻止默认跳转

  } 当然上面两种都可以通过return false代替

  移除事件

  Unbind函数

  Unbind([type][,data]);//type为要移除的时间类型，data为要移除的函数

  $(“element”).bind(“click”,myfun = function(){

  //代码

  })

  可以通过$(“element”).unbind(“click”,myfun)；来解除绑定事件

  One方法，绑定的事件只执行一次

  $("#img").one("click", function () {

  $(this).html("清?空?");

  })

  Triggle事件：//触发事件，

  triggle（type[,data]）；//type指定要触发的事件的类型

  //data，指定附加的数据

  下面的代码自定义了一个myClick事件，然后利用triggle函数来触发自定义的事件。Triggle时间中带了附加的数据。

  $("#Button1").bind("myClick", function (event, mes1, mes2) {

  $("#demo").append("<p>" + mes1 + mes2 + "</p>")

  });

  $("#Button1").trigger("myClick",["我¨°自Á?定¡§义°?的Ì?","事º?件t"])

  triggerHandler

  $("input#input").triggerHandler("focus");

  当我们想要执行focus事件，浏览器会执行默认的得到焦点操作，要是我们不想浏览器执行默认的操作，可以通过triggleHandler事件来执行focus的同时不执行浏览器的默认操作。

  其他方法

  Bind//可以绑定多个事件

  $(“div”).bind(“mouseover mouseout”,fun)//事件间以空格隔开

  为事件定义命名空间

  $("div.test").bind("click", function () {

  $("body").append("<p>click事º?件t</p>");

  })

  $("div.test").bind("click.plugin", function () {

  $("body").append("<p>click.plugin事º?件t</p>");

  })

  $("#Button1").bind("click", function () {

  $("div.test").trigger("click!");

  return false;

  })

  上面的代码为div.class事件添加了两个单击事件，一个在命名空间plugin中,另一个没有在命名空间中,当通过trigger函数触发click事件时，当为triggle(“click!”)时，为执行不在命名空间中click事件

  Jquery中的动画

  Show和hide函数

  Show([time])//time可以定义为slow，fast，normal，也可以设定时间，用于设定显示的过度时间。

  特点:显示的高度从上向下，宽度从左到右，同时增加透明度。

  Hide（[time]）//与show相反,但会记住要操作元素的display状态

  当调用show时会恢复到原来的状态

  fadeOut和fadeIn函数

  两个函数不会改变现实的高度和宽度，只是改变显示的透明度。

  Slideup和slidedown函数只会改变现实的高度，

  上面的函数有时候不能满足各种需求，可以利用animate自定义动画

  Animate(para,speed,callback)//para包含样式的值，speed速度，//callback动画完成后执行的函数

  组合动画示例：

  $(function () {

  $("#panel").click(function () {

  $(this).animate({ left: "500px" }, 3000)

  .animate({height:"200px"},300);//以链式的形式执行

  });

  })

  利用回调函数

  $("#panel").click(function () {

  $(this).animate({ left: "400px", height: "200px", opacity: "1.0" }, 3000)

  .animate({ top: "200px", width: "200px" }, 3000, function () {//利用回调函数，在动画执行完成后执行改变//css的函数

  $(this).css("border", "5px solid blue");

  });

  });

  Callback函数适合于所有的动画效果函数

  停止动画函数 stop

  Stop([clearQueue][,gotoEnd]);//clearQueue用于是否把当前元素//接下来的未完成的动画队列清空,gotoEnd用于让正在执行的动画//直接到达结束时刻时候的状态。

  $(function () {

  $("#panel").hover(function () {

  $(this).stop()

  .animate({ height: "150px", width: "300px" }, 2000)

  }, function () {

  $(this).stop()

  .animate({ height: "22px", width: "60px" }, 2000)

  });

  })

  判断是否处于动画状态

  If(‘element’).is(“:animation”)；//用来判断是否处于动画状态

  其他动画函数

  Toggle、slideToggle、fadeTo//分别代替show，hide的组合、slideUp，slideDown的组合、fadeIn，fadeOut的组合。

  示例：

  $("#panel").click(function () {

  $(this).toggle();

  });

  当然其他的动画都可以利用animation动画代替

  Parent和parnets元素，parent是取得符合要求的父元素，而parents是取得符合要求的祖先元素。

  Jquery 与Ajax的应用

  jquery load方法

  load(url[,data][,callback])//url为要请求的页面的地址

  //data为发送至服务器的值

  //callback为调用完成以后的回调函数，无论成功失败

  示例：

  $(function () {

  $("#send").click(function () {

  $("#resText").load("test.htm .para,h6");

  });

  });

  通过load函数可以得到test.htm页面的html代码，把它加入到id为resText中，也可以得到相应的test.htm中相应的代码，而不是全部的代码，利用load("test.htm .para,h6");在test.htm后追加条件

  回调函数：

  $("#resText").load("test.htm "，function(responseText,textStatus,XMLHttpRequst){

  //responseText请求返回的内容，

  //textStatus请求状态，success，error，notmodified，timeout

  //XMLHttpRequest XMLHttpRequest对象

  });

  Ajax以xml形式传递

  $(function () {

  $("#send").click(function () {

  $.get("../ashx/jquery_get.ashx", function (data, textStatus) {//data代表了传回来的值，textStatus代表了请求的状态,

  var username = $(data).find("comment").attr("username");

  var content = $(data).find("comment content").text();

  var textHtml = "<div class='comment'><h6>" + username + "</h6><p class='para'>" + content + "</p></div>";

  $("#resText").html(textHtml);

  });

  });

  });

  Ajax与json

  Ajax与post方法与get方法相似，但是也有一些不同，比如传输的方式，传输的数据量的限制，安全性的限制。

  $.GetScript和$.getjson

  有时候初次加载时就去的全部的javascript是没有必要的，可以通过稍后加载的方式加载

  可以通过

  $(document.creatElement(“script”)).append(“src”,”test.js”).appentTo(“head”)；

  $(“<script type=’text/javascript’ src=”test.js”></script>”).appendTo(“head”)；

  也可以通过如下代码：

  $.getScript(“test.js”)；

  $.getjson

  $.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?tags=car&tagmode=any&format=json&jsoncallback=?",

  function (data) {

  $.each(data.items, function (i, item) {//data.items为要操作的对象，i为对象的成员的索引，item为对应//的对象或内容

  $("<img class='para'></img>").attr("src", item.media.m)//通过得到//item下的media元素下的m元素的值

  .appendTo("#resText");

  if (i == 3) {

  return false;

  }

  });

  原始的json数据结构如下:

  ({"link":"http://www.flickr.com/photos/63292151@N04/6311360357/","media": {"m":"http://farm7.static.flickr.com/6041/6311360357_b578b30004_m.jpg"}})

  $.ajax(options)方法：

  各个参数的作用：

  url：发送请求的地址

  type：请求的方式，为get或post 默认为get

  timeout：设置请求超时的时间

  data：发送的数据字符串，如果不是字符串将自动转换成字符串{fool:”bar1”,fool2:”bar2”}转换成&foo1=bar1&fool2=bar2,如果是数组{foo:[“bar1”,”bar2”]}转换成不同值同一个名称

  &fool=bar1&fool=bar2

  dataType:预期服务器返回的数据类型 xml，json，jsonp，html，script，text类型

  beforeSend：发送请求之前的行为

  function(XMLHttpRequest)

  { }

  Complete:发送请求完成以后调用，不管请求有没有成功

  function(XMLHttpRequest，textStatus)

  { }

  Success：发送成功调用

  function(XMLHttpRequest，textStatus)

  { }

  Error：请求失败调用

  function(XMLHttpRequest，textStatus，errorThrown)

  { }

  Global：boolean 默认为true 是否调用全局ajax事件

  序列化元素

  Serialize函数

  对于下面的表单：

  <form id="form1" runat="server">

  <p>评¨¤论?：êo</p>

  <p>姓?名?：êo<input type="text" name="username" id="username" /></p>

  <p>内¨²容¨Y：êo<textarea name="content" id="content" rows="2" cols="20"></textarea></p>

  <p><input type="button" value="提¬¨¢交?" id="submit" /></p>

  <div id="resText"></div>

  </form>

  我们可以通过

  $.get(“url”,{username:$(“#username”).val(),

  Content:$(“#content”).val()},function(){})方法传递标点数据，但是但表单数据比较多的时候，可以利用serialize方法实现

  示例如下

  $("#submit").click(function () {

  $.get("../ashx/serialize.ashx",

  //访问的url

  $("#form1").serialize(), function (data, textStatus) {

  //serialize,对整个form1序列化

  var text = "<div><p>" + $(data).find("username").text()

  + "</p><p>" + $(data).find("content").text() + "</p></div>";

  $("#resText").html(text);

  });

  });

  serializeArray函数

  该方法返回的是将DOM序列化后的JSON格式的数据

  Para函数 对一个数组或对象按照key/value进行序列化

  示例：

  Var obj = {a:1，b:2，c:3};

  Var k = $.para(obj);

  Alert(k)//结果为a=1&b=2&c=3;

  Ajax中的全局事件

  ajaxComplete(callback)//请求完成时执行

  ajaxError(callback)//请求错误时调用

  ajaxSend(callback)//请求发生前调用

  ajaxSuccess(callback)//请求成功时执行

  jquery 插件

  //Todo… (收起)

  2011-11-07 14:31:07   回应

  收藏

  推荐
• 

  第1页

  xpowery

  简单易学~~~ (更多)

  简单易学~~~ (收起)

  2011-11-18 11:33:11   回应

  收藏

  推荐

• 

  第1页

  xpowery

  简单易学~~~ (更多)

  简单易学~~~ (收起)

  2011-11-18 11:33:11   回应

  收藏

  推荐
• 

  第1页

  cyh3101

  1. Jquery对象和DOM对象的转化 Var $variable = //Jquery对象 Var $variable= //DOM对象 Var $cr = $(“cr”);//Jquery转为DOM对象 Var cr= $cr[0] Var cr= document.getElementById(“#cr”)// DOM转为Jquery对象 Var $cr = $(cr); 解决jQeury和其他库的冲突 jQuery库调用完成以后，调用jQuery.noConflict()函数来将$的控制权移交给其他JavaScript库 $(“#demo”).click()单独写点击不成功，当把函数放在$(docu... (更多)

  1. Jquery对象和DOM对象的转化

  Var $variable = //Jquery对象

  Var $variable= //DOM对象

  Var $cr = $(“cr”);//Jquery转为DOM对象

  Var cr= $cr[0]

  Var cr= document.getElementById(“#cr”)// DOM转为Jquery对象

  Var $cr = $(cr);

  解决jQeury和其他库的冲突

  jQuery库调用完成以后，调用jQuery.noConflict()函数来将$的控制权移交给其他JavaScript库

  $(“#demo”).click()单独写点击不成功，当把函数放在$(document).ready()中，代码执行。

  根据奇偶对table设置不同的颜色

  Var item = document.getElementbyId(“tb”);//获取id为tb的table

  Var tbody = item.getElementsByTagName(“tbody”)[0];//获取table的第一个tbody

  Var trs = tbody.getElementsByTabName(“tr”);//获取tbody下所有tr元素

  For(var i=0;I <trs.length;i++)

  { If(i%2==0)

  { Trs[i].style.backgroundColor = “#ddd”;//设置自己需要的颜色

  } Else

  { //todo

  } }

  Jquery选择器选择多个元素 $(“a,b,c”)，以，隔开 如$(“div,span”)

  Jquery筛选器 $(‘ul li’).filter(“contains(‘aaaa’),contains(‘bbbbbb’)”)利用contains筛选符合要求的集合，可以有多个选择器，利用‘,’隔开。

  给一个按钮添加一组交互事件，而不需要判断

  需要进行判断的事件：

  testBtn.click(function(){

  if($category.is(“:visible”))

  {}

  Else

  {}

  })

  利用交互事件的形式后：

  testBtn.toggle(function(){

  },function(){

  })

  2. jquery 的节点增加

  元素的增加

  可以通过$(“<div>aaaaa</div>”)创建一个元素，返回的是一个jquery对象

  除此之外，还可以移动节点，

  <ul>

  <li>aaaaa</li>

  <li>bbbbb</li>

  <li>ccccc</li>

  <li>ddddd</li>

  <li>eeeee</li>

  <li>fffff</li>

  <li>ggggg</li>

  <li>hhhhh</li>

  <li>iiiii</li>

  </ul>

  Html结构如上，可以通过下面的代码改变li的位置

  var $li_1 = $("ul li:eq(1)");

  var $li_2 = $("ul li:eq(2)");

  $li_2.after($li_1);

  改变以后的结果：

  • aaaaa

  • ccccc

  • bbbbb

  • ddddd

  • eeeee

  • fffff

  • ggggg

  • hhhhh

  • iiiii

  3. 有关jquery的节点删除问题

  有两个函数

  Remove函数和empty函数

  Remove可以删除指定的元素集合

  例如：

  $("ul li:eq(1)").remove();

  此函数执行完成以后，返回删除的节点的索引，以便于以后使用。

  Empty函数是用来清空相应元素的内容。

  通过代码：$("ul li:eq(1)").empty();

  <li>aaaaaaaaaa</li>

  <li>bbbbbbbbbb</li>

  <li>cccccccccc</li>

  <li>dddddddddd</li>

  变为

  <li>aaaaaaaaaa</li>

  <li> </li>

  <li>cccccccccc</li>

  <li>dddddddddd</li>

  4. 克隆元素

  通过clone函数

  通过如下代码：

  $("ul li").click(function () {

  $(this).clone(true).appendTo("ul");

  })

  当单击ul li 的某一项的时候，在ul的末尾追加当前单击的li

  并且通过在clone函数中增加true参数，可以让新追加的元素也有点击追加的功能。

  <ul>

  <li>aaaaaaaa</li>

  <li>bbbbbbbb</li>

  <li>cccccccc</li>

  <li>dddddddd</li>

  </ul>

  5. 替换函数

  Replace函数和replaceAll函数，两者相同，replaceAll函数只是颠倒了replace函数的使用

  $("#demo").replaceWith("<span>bbbbbb</span>");

  $("<span>bbbbbb</span>").replaceAll("#demo");

  6. 包裹函数

  Wrap WrapAll wrapInner

  <ul>

  <li>aaaaa</li>

  <li>bbbbb</li>

  </ul>

  Wrap函数

  $("ul li").wrap("<strong></strong>");把ul中的每一个li用strong包裹起来

  <ul>

  <strong><li>aaaaa</li></strong>

  <strong><li>bbbbb</li></strong>

  </ul>

  wrapAll函数

  $("ul li").wrapAll("<strong></strong>");把ul中的li整体包裹起来

  <ul>

  <strong>

  <li>aaaaa</li>

  <li>bbbbb</li>

  </strong>

  </ul>

  wrapInner

  $("ul li").wrapInner("<strong></strong>");ul中的li每一个都包裹上<strong></strong>(内包裹)

  <ul>

  <li><strong>aaaaa</strong></li>

  <li><strong>bbbbb</strong></li>

  </ul>

  7. 增加改变属性

  var aaa = $("span").attr("class"); //通过传入一个参数，可以得到相应的属性的值。

  $("span").attr("class", "demo1");//通过传入两个参数，可以设置相应的属性的值。

  有时候会不想覆盖原来的class的值，可以使用$("span").addClass("demo2");来增加class

  移除class

  可以通过$("span").removeClass("demo2");来移除class，当然也可以通过在要移除的class中间加空格来移除多个class

  $("span").addClass("demo2 demo3");

  利用toggleClass切换移除增加class

  $("span").toggleClass("demo2");

  判断是否有某一个class存在，

  $("span").has("demo2");//判断是否有demo2的class存在

  总结：类似的方法还有html(),text(),height(),width(),val(),css();

  8. 遍历节点方法

  Children方法//获取所有匹配的子元素，

  Children(“a”)//获取所有匹配的a元素

  Next方法//获取匹配的后面紧跟的同辈元素

  Prev方法//获取匹配的前面的同辈元素

  Sublings方法//获取前后所有的同辈元素

  Closest方法//首先检查当前元素是否匹配，如果匹配直接返回，如果不匹配向上查找知道找到匹配的元素

  9. css-dom操作

  设置css属性

  $(“demo”).css(“color”,”red”);

  也可以同时设置多个属性

  $(“demo”).css({“color”:”red”,”font-size”:”30px”});

  当属性中带有“-”时，可以利用“-”后面字母首字母大写

  $(“demo”).css({“color”:”red”,”fontSize”:”30px”});

  当要设定的属性不加““时，只能用首字母大写的形式

  $(“demo”).css({color:”red”,fontSize:”30px”});

  Offset，position，scrollTop，scrollLeft？

  jQuery事件和动画

  window.onload和$(document).ready方法的区别

  window.onload是当网页中的所有元素（包括元素的所有关联文件）完全加载到浏览器后才执行，即javascript才能访问网页中的任何元素。

  当定义时

  Window.onload = a;

  Window.onload = b;

  当整个网页都就绪时，只执行b函数，因为window.onload函数只能保存对一个函数的引用。

  而$(document).ready是当DOM完全就绪时就可以被调用。

  bind函数,时间绑定

  bind(event,data,fun)

  event表示事件类型，

  data是事件对象传递给事件对象的额外数据对象

  fun是事件触发时，绑定的处理函数。

  合成事件

  hover和toggle事件

  hover(enter,leave)事件：用于模拟鼠标悬停事件，当鼠标移动到元素上时会触发第一个函数，当鼠标离开元素时，会触发第二个函数。

  如下代码：

  $(function () {

  $("#demo h5.head").hover(function () {

  $(this).next("div.detail").show();

  }, function () {

  $(this).next("div.detail").hide();

  })

  })

  Toggle事件

  Toggle(fun1,fun2,fun3)用于模拟鼠标单击事件，当鼠标第一次单击元素时，触发第一个函数，当鼠标单击元素第二次时，触发第二个函数，依次触发，随后的单击对这几个函数循环触发。

  事件冒泡

  假设一个网页的结构如下：

  <body>

  <form id="form1" runat="server">

  <div id="content">

  外ªa层?

  <span>内¨²层?</span>

  外ªa层?

  </div>

  <div id="img">

  </div>

  </form>

  </body>

  Javascript如下：

  $(function () {

  $('span').click(function () {

  $('#img').html($("#img").html() + "<p>内¨²层?</p>");

  })

  $('#content').click(function () {

  $('#img').html($("#img").html() + "<p>外ªa层?</p>");

  })

  $('body').click(function () {

  $('#img').html($("#img").html() + "<p>body</p>");

  })

  })

  当单击内层元素时，会触发外层元素的事件也被触发，像冒泡一样一直往上升。

  如果不想导致外层的元素也执行内层的事件，可以利用

  event.stopPropagation();//停止冒泡函数停止冒泡

  首先为函数添加一个参数，

  $('body').click(function (event) {//event:事件对象

  $('#img').html($("#img").html() + "<p>body</p>");

  然后通过事件对象调用停止冒泡函数

  阻止默认行为，比如单击一些连接，默认行为是跳转到另一个网页，如果不想让点击执行默认的跳转操作，可以通过preventDefault函数

  $('body').click(function (event) {//event:事件对象

  //执行的代码

  event.preventDefault();//此函数阻止默认跳转

  } 当然上面两种都可以通过return false代替

  移除事件

  Unbind函数

  Unbind([type][,data]);//type为要移除的时间类型，data为要移除的函数

  $(“element”).bind(“click”,myfun = function(){

  //代码

  })

  可以通过$(“element”).unbind(“click”,myfun)；来解除绑定事件

  One方法，绑定的事件只执行一次

  $("#img").one("click", function () {

  $(this).html("清?空?");

  })

  Triggle事件：//触发事件，

  triggle（type[,data]）；//type指定要触发的事件的类型

  //data，指定附加的数据

  下面的代码自定义了一个myClick事件，然后利用triggle函数来触发自定义的事件。Triggle时间中带了附加的数据。

  $("#Button1").bind("myClick", function (event, mes1, mes2) {

  $("#demo").append("<p>" + mes1 + mes2 + "</p>")

  });

  $("#Button1").trigger("myClick",["我¨°自Á?定¡§义°?的Ì?","事º?件t"])

  triggerHandler

  $("input#input").triggerHandler("focus");

  当我们想要执行focus事件，浏览器会执行默认的得到焦点操作，要是我们不想浏览器执行默认的操作，可以通过triggleHandler事件来执行focus的同时不执行浏览器的默认操作。

  其他方法

  Bind//可以绑定多个事件

  $(“div”).bind(“mouseover mouseout”,fun)//事件间以空格隔开

  为事件定义命名空间

  $("div.test").bind("click", function () {

  $("body").append("<p>click事º?件t</p>");

  })

  $("div.test").bind("click.plugin", function () {

  $("body").append("<p>click.plugin事º?件t</p>");

  })

  $("#Button1").bind("click", function () {

  $("div.test").trigger("click!");

  return false;

  })

  上面的代码为div.class事件添加了两个单击事件，一个在命名空间plugin中,另一个没有在命名空间中,当通过trigger函数触发click事件时，当为triggle(“click!”)时，为执行不在命名空间中click事件

  Jquery中的动画

  Show和hide函数

  Show([time])//time可以定义为slow，fast，normal，也可以设定时间，用于设定显示的过度时间。

  特点:显示的高度从上向下，宽度从左到右，同时增加透明度。

  Hide（[time]）//与show相反,但会记住要操作元素的display状态

  当调用show时会恢复到原来的状态

  fadeOut和fadeIn函数

  两个函数不会改变现实的高度和宽度，只是改变显示的透明度。

  Slideup和slidedown函数只会改变现实的高度，

  上面的函数有时候不能满足各种需求，可以利用animate自定义动画

  Animate(para,speed,callback)//para包含样式的值，speed速度，//callback动画完成后执行的函数

  组合动画示例：

  $(function () {

  $("#panel").click(function () {

  $(this).animate({ left: "500px" }, 3000)

  .animate({height:"200px"},300);//以链式的形式执行

  });

  })

  利用回调函数

  $("#panel").click(function () {

  $(this).animate({ left: "400px", height: "200px", opacity: "1.0" }, 3000)

  .animate({ top: "200px", width: "200px" }, 3000, function () {//利用回调函数，在动画执行完成后执行改变//css的函数

  $(this).css("border", "5px solid blue");

  });

  });

  Callback函数适合于所有的动画效果函数

  停止动画函数 stop

  Stop([clearQueue][,gotoEnd]);//clearQueue用于是否把当前元素//接下来的未完成的动画队列清空,gotoEnd用于让正在执行的动画//直接到达结束时刻时候的状态。

  $(function () {

  $("#panel").hover(function () {

  $(this).stop()

  .animate({ height: "150px", width: "300px" }, 2000)

  }, function () {

  $(this).stop()

  .animate({ height: "22px", width: "60px" }, 2000)

  });

  })

  判断是否处于动画状态

  If(‘element’).is(“:animation”)；//用来判断是否处于动画状态

  其他动画函数

  Toggle、slideToggle、fadeTo//分别代替show，hide的组合、slideUp，slideDown的组合、fadeIn，fadeOut的组合。

  示例：

  $("#panel").click(function () {

  $(this).toggle();

  });

  当然其他的动画都可以利用animation动画代替

  Parent和parnets元素，parent是取得符合要求的父元素，而parents是取得符合要求的祖先元素。

  Jquery 与Ajax的应用

  jquery load方法

  load(url[,data][,callback])//url为要请求的页面的地址

  //data为发送至服务器的值

  //callback为调用完成以后的回调函数，无论成功失败

  示例：

  $(function () {

  $("#send").click(function () {

  $("#resText").load("test.htm .para,h6");

  });

  });

  通过load函数可以得到test.htm页面的html代码，把它加入到id为resText中，也可以得到相应的test.htm中相应的代码，而不是全部的代码，利用load("test.htm .para,h6");在test.htm后追加条件

  回调函数：

  $("#resText").load("test.htm "，function(responseText,textStatus,XMLHttpRequst){

  //responseText请求返回的内容，

  //textStatus请求状态，success，error，notmodified，timeout

  //XMLHttpRequest XMLHttpRequest对象

  });

  Ajax以xml形式传递

  $(function () {

  $("#send").click(function () {

  $.get("../ashx/jquery_get.ashx", function (data, textStatus) {//data代表了传回来的值，textStatus代表了请求的状态,

  var username = $(data).find("comment").attr("username");

  var content = $(data).find("comment content").text();

  var textHtml = "<div class='comment'><h6>" + username + "</h6><p class='para'>" + content + "</p></div>";

  $("#resText").html(textHtml);

  });

  });

  });

  Ajax与json

  Ajax与post方法与get方法相似，但是也有一些不同，比如传输的方式，传输的数据量的限制，安全性的限制。

  $.GetScript和$.getjson

  有时候初次加载时就去的全部的javascript是没有必要的，可以通过稍后加载的方式加载

  可以通过

  $(document.creatElement(“script”)).append(“src”,”test.js”).appentTo(“head”)；

  $(“<script type=’text/javascript’ src=”test.js”></script>”).appendTo(“head”)；

  也可以通过如下代码：

  $.getScript(“test.js”)；

  $.getjson

  $.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?tags=car&tagmode=any&format=json&jsoncallback=?",

  function (data) {

  $.each(data.items, function (i, item) {//data.items为要操作的对象，i为对象的成员的索引，item为对应//的对象或内容

  $("<img class='para'></img>").attr("src", item.media.m)//通过得到//item下的media元素下的m元素的值

  .appendTo("#resText");

  if (i == 3) {

  return false;

  }

  });

  原始的json数据结构如下:

  ({"link":"http://www.flickr.com/photos/63292151@N04/6311360357/","media": {"m":"http://farm7.static.flickr.com/6041/6311360357_b578b30004_m.jpg"}})

  $.ajax(options)方法：

  各个参数的作用：

  url：发送请求的地址

  type：请求的方式，为get或post 默认为get

  timeout：设置请求超时的时间

  data：发送的数据字符串，如果不是字符串将自动转换成字符串{fool:”bar1”,fool2:”bar2”}转换成&foo1=bar1&fool2=bar2,如果是数组{foo:[“bar1”,”bar2”]}转换成不同值同一个名称

  &fool=bar1&fool=bar2

  dataType:预期服务器返回的数据类型 xml，json，jsonp，html，script，text类型

  beforeSend：发送请求之前的行为

  function(XMLHttpRequest)

  { }

  Complete:发送请求完成以后调用，不管请求有没有成功

  function(XMLHttpRequest，textStatus)

  { }

  Success：发送成功调用

  function(XMLHttpRequest，textStatus)

  { }

  Error：请求失败调用

  function(XMLHttpRequest，textStatus，errorThrown)

  { }

  Global：boolean 默认为true 是否调用全局ajax事件

  序列化元素

  Serialize函数

  对于下面的表单：

  <form id="form1" runat="server">

  <p>评¨¤论?：êo</p>

  <p>姓?名?：êo<input type="text" name="username" id="username" /></p>

  <p>内¨²容¨Y：êo<textarea name="content" id="content" rows="2" cols="20"></textarea></p>

  <p><input type="button" value="提¬¨¢交?" id="submit" /></p>

  <div id="resText"></div>

  </form>

  我们可以通过

  $.get(“url”,{username:$(“#username”).val(),

  Content:$(“#content”).val()},function(){})方法传递标点数据，但是但表单数据比较多的时候，可以利用serialize方法实现

  示例如下

  $("#submit").click(function () {

  $.get("../ashx/serialize.ashx",

  //访问的url

  $("#form1").serialize(), function (data, textStatus) {

  //serialize,对整个form1序列化

  var text = "<div><p>" + $(data).find("username").text()

  + "</p><p>" + $(data).find("content").text() + "</p></div>";

  $("#resText").html(text);

  });

  });

  serializeArray函数

  该方法返回的是将DOM序列化后的JSON格式的数据

  Para函数 对一个数组或对象按照key/value进行序列化

  示例：

  Var obj = {a:1，b:2，c:3};

  Var k = $.para(obj);

  Alert(k)//结果为a=1&b=2&c=3;

  Ajax中的全局事件

  ajaxComplete(callback)//请求完成时执行

  ajaxError(callback)//请求错误时调用

  ajaxSend(callback)//请求发生前调用

  ajaxSuccess(callback)//请求成功时执行

  jquery 插件

  //Todo… (收起)

  2011-11-07 14:31:07   回应

  收藏

  推荐