乔枫智库 » jquery参考

jquery购物车实例

admin — Thu, 22 Nov 2012 13:24:03 +0000

这个教程的目的是说明如何使用easyui框架容易的创建网页。首先，你需要包含一些js和css文件：

easyui预定义了一些图标css，这些css类可以显示图片背景（16×16）。使用这些类之前，需要包含：

Jquery的$命名冲突：

admin — Thu, 22 Nov 2012 06:18:54 +0000

在Jquery中，$是JQuery的别名，所有使用$的地方也都可以使用JQuery来替换，如$(‘#msg’)等同于JQuery(‘#msg’)的写法。然而，当我们引入多个js库后，在另外一个js库中也定义了$符号的话，那么我们在使用$符号时就发生了冲突。下面以引入两个库文件jquery.js和prototype.js为例来进行说明。
第一种情况：jquery.js在prototype.js之后进行引入,如：

这种使用语句块的方法非常有用，在我们自己写jquery插件时,应该都使用这种写法，因为我们不知道具体工作过程中是如何顺序引入各种js库的,而这种语句块的写法却能屏蔽冲突。

jquery的合成事件toggle

admin — Wed, 21 Nov 2012 03:30:01 +0000

“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>
http://www.w3.org/1999/xhtml“>

jquery的合成事件toggle

什么是jQuery？

jquery的hover合成事件

admin — Wed, 21 Nov 2012 03:29:12 +0000

“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>
http://www.w3.org/1999/xhtml“>

jquery的合成事件

什么是jQuery？

jquery的toggle的常用切换实例

admin — Wed, 21 Nov 2012 03:28:45 +0000

“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>
http://www.w3.org/1999/xhtml“>

jquery的toggle的常用切换

$(function(){
$(“.haschildren”).click(function(){
  $(this).addClass(“highlight”).children(“li”).slideToggle().parent().toggleClass(“highlight2″);

  });

});

If you click on me, I will disappear.

1.1-jQuery简介

1.2-加入jQuery

1.3-编写jQuery代码

1.4-jQuery对象和DOM对象

1.5-解决jQuery和其它库的冲突

1.6-小结

2.1-什么是选择器

2.2-jQuery选择器的优势

2.3-jQuery选择器

2.4-选择器中带特殊符号的处理

2.5-javascript中的一些对比操作势

2.6-做一个图片展示效果

2.7-小结

3.1-介绍DOM操作的重要性

3.2-jQuery的DOM操作

3.3-打造一个图片馆

3.4-小结

jquery的text()与html()方法实例

admin — Wed, 21 Nov 2012 03:27:59 +0000

“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>
http://www.w3.org/1999/xhtml“>

无标题文档

你最喜欢的水果是？

苹果

橘子

菠萝

jquery与DOM混合处理实例

admin — Wed, 21 Nov 2012 03:27:22 +0000

“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>
http://www.w3.org/1999/xhtml“>

jquery与DOM混合处理

你最喜欢的水果是？

苹果

橘子

菠萝

jquery参考

admin — Wed, 21 Nov 2012 03:26:39 +0000

在jQurey库中，$就是jQuery的一个简写形式，例如$(“#foo”)和jQuery(“#foo”)是等价的，$.ajax和jQuery.ajax是等价的。

$(document).ready(function(){});等价于$(function(){}); 也就类似于传统javascript中的window.onload方法。（P8）

DOM(Document Object Model,文档对象模型)，每一份DOM都可以表示成一棵树。

jQurey对象就是通过jQuery包装DOM对象后产生的对象。

$(“#foo”).html();等同于 document.getElementById(“foo”).innerHTML;

如果获取的对象是jQuery对象，那么在变量前面加上$,例如：
var $variable = jQuery 对象；
如果获取的是DOM对象，则定义如下：
var variable = DOM对象；

jQuery对象转换成DOM对象
jQuery提供了两种方法将一个jQuery对象转换成DOM对象，即[index]和get(index)。
(1)jQuery对象是一个数组对象，可以通过[index]的方法得到相应的DOM对象。
var $cr = $(“#cr”); //jQuery对象
var cr = $cr[0];     //DOM对象
alert(cr.checked)    //检测这个checkbox是否被选中了
(2)另一种方法是jQuery本身提供的，通过get(index)方法得到相应的DOM对象。
var $cr = $(“#cr”); //jQuery对象
var cr = $cr.get(0); //DOM对象
alert(cr.checked)

DOM对象转成jQuery对象
对于一个DOM对象，只需要用$()把DOM对象包装起来，就可以获得一个jQuery对象了。方式为$(DOM对象)。
var cr = document.getElementById(“cr”); //DOM对象
var $cr = $(cr); //jQuery对象
转换后，可以任意使用jQuery中的方法。

当把jQuery和其他JavaScript库一起使用时，不会引起冲突。

jQuery的行为规则都必须在获取到元素后才能生效。

$(“#id”)用来代替document.getElementById()函数
$(“tagName”)用来代替document.getElementByTagName()函数

样式设置：
将所有段落字体设为红色：
$(“p”).css(“color”,”red”);
将所有段落的字体颜色设为红色并且背景为蓝色：
$(“p”).css({color:”#ff0011″,background:”blue”});
如果属性名包含”-“的话，必须使用引号：
$(“p”).css({“margin-left”:”10px”,”background-color”:”blue”});
=============jquery 选择器==========
jQuery的行为规则都必须在获取到元素后才能生效。
在网页中，每个id名称只能使用一次，class允许重复使用。

改变所有的元素和id为two的元素的背景色：
$(“span,#two”).css(“background”,”#bbffaa”);

$(“body div”) 选取里的所有的

元素。

$(“body > div”) 选取里的所有子的

元素。

$(“.one + div”) 选取class为one的下一个

元素。

$(“#two~div”) 选取id为two的元素后面的所有

兄弟元素。

$(‘div:hidden’).show(3000); 显示隐藏的

元素。

show(speed,[callback])以优雅的动画显示所有匹配的元素，并在显示完成后可选地触发一个回调函数。
speed：三种预定速度之一的字符串（“show”，“normal”，or“fast”）或表示动画时长的毫秒数值（如：1000） callback（可选）在动画完成时执行的函数，每个元素执行一次。
如:

$(“p”).show(“show”) 或$(“p”).show(3000);//将隐藏的段落用将近3秒的时间显示出来。
或 $(p).show(3000,function(){
$(this).text(“Animation Done……”);
});//将隐藏的段落用将近3秒的时间显示出来…..并在之后执行一个反馈….

在可见性选择器中，需要注意选择器 :hidden，他不仅包括样式属性display为“none”的元素，也包括文本隐藏域（）和visibility：hidden之类的元素。

基本过滤选择器：
$(“div:first”) 选取所有

元素中第一个

元素。
$(“div:last”) 选取所有

元素中最后一个

元素。
$(“input:not(.myClass)”) 选取class不是myClass的元素。
$(“input:even”) 选取索引是偶数的元素。
$(“input:odd”) 选取索引是奇数的元素。
$(“input:eq(1)”) 选取索引等于1的元素。
$(“input:gt(1)”) 选取索引大于1的元素（注：大于1，而不包括1）
$(“input:lt(1)”) 选取索引小于1的元素（注：小于1，而不包括1）
$(“:header”) 选取网页中所有的

,

…..
$(“div:animated”) 选取正在执行动画的
元素。

内容过滤选择器：
$(“div:contains(‘我’)”) 选取含有文本“我”的
元素。
$(“div:empty”) 选取不包含子元素（包括文本元素）的
空元素。如

$(“div:has(p)”) 选取含有
元素的
元素。
$(“div:parent”) 选取拥有子元素（包括文本元素）的
元素。

可见性过滤选择器：
$(“:hidden”) 选取所有不可见的元素。包括,
和
等元素。如果只想选取元素，可以是有$(“input:hidden”);
$(“div:visible”) 选取所有可见的
元素。

属性过滤选择器：
$(“div[id]”) 选取拥有属性id的元素。
$(“div[title=test]”) 选取属性title为“test”的
元素。
$(“div[title!=test]”) 选取属性title不等于“test”的
元素（注意：没有属性title的
元素也会被选取）。
$(“div[title^=test]”) 选取属性title以“test”开始的
元素。
$(“div[title$=test]”) 选取属性title以“test”结束的
元素。
$(“div[title*=test]”) 选取属性title含有“test”的
元素。
$(“div[id][title$=’test’]”) 选取拥有属性id，并且属性title以“test”结束的
元素。

子元素过滤选择器：
:nth-child :eq(index)只匹配一个元素，而:nth-child将为每一个父元素匹配子元素，并且:nth-child(index)的index是从1开始的，而:eq(index)是从0算起的。
:first-child :first只返回单个元素，而:first-child选择符将为每个父元素匹配第一个子元素。例如$(“ul li:first-child”); 选取每个
中第一个
元素。
:last-child 同样，:last只返回单个元素，而:last-child选择符将为每一个父元素匹配最后一个子元素。
:only-child 如果某个元素是它父元素中唯一的子元素，那么将会被匹配。如果父元素中含有其他元素，则不会被匹配。 $(“ul li:only-child”)在
中选取是唯一子元素的
元素。

:nth-child(even)能选取每个父元素下的索引值是偶数的元素。
:nth-child(odd)能选取每个父元素下的索引值是奇数的元素。
:nth-child(2)能选取每个父元素下的索引值等于2的元素。
:nth-child(3n)能选取每个父元素下的索引值是3的倍数的元素，（n从0开始）。
:nth-child(3n+1)能选取每个父元素下的索引值是(3n+1)的倍数的元素，（n从0开始）。

表单对象属性过滤选择器：
:enabled 选取所有可用元素 $(“#form1 :enabled”) 选取id为“form1”的表单内的所有可用元素。
:disabled 选取所有不可用元素 $(“#form2 :disabled”) 选取id为“form2”的表单内的所有不可用元素。
:checked 选取所有被选中的元素（单选框，复选框） $(“input:checked”) 选取所有被选中的元素。
:selected 选取所有被选中的选项元素（下拉列表） $(“select :selected”) 选取所有被选中的选项元素。

例如：$(“#form1 input:enabled”).val(“这里”)；改变表单内可用元素的值。
 $(“#form1 input:disabled”).val(“这里”)；改变表单内不可用元素的值。
 $(“input:checked”).length; 获取多选框选中的个数。
 $(“select:selected”).text(); 获取下拉框选中的内容。？

表单选择器：
:input 选取所有的、、<select>和<button>元素。 :text 选取所有的单行文本框。 :password 选取所有的密码框。 :radio 选取所有的单选框。 :checkbox 选取所有的多选框。 :submit 选取所有的提交按钮。 :image 选取所有的图像按钮。 :reset 选取所有的重置按钮。 :button 选取所有的按钮。 :file 选取所有的上传域。 :hidden 选取所有不可见元素。 使一个特定的表格（id为tb）隔行变色： $(“#tb tbody tr:even”).css(“background-color”,”#888″); <div id=”id#b”>bb</div> <div id=”id[1]”></div> 正确的写法如下：(使用转义符转义) $(‘#id\\#b’); $(‘#id\\[1\\]’); —————-attr()方法获取和设置元素属性————— attr(key,fn): 为所有匹配的元素设置一个计算的属性值。不提供值，而是提供一个函数，由这个函数计算的值作为属性值。 如：把src属性的值设置为title属性的值。 $(“img”).attr(“title”,function(){return this.src}); 结果: attr(key,value): 为所有匹配的元素设置一个属性值。 如： 为所有图像设置src属性。 $(“img”).attr(“src”,”test.jpg”); 结果：[,] attr(name): 取得第一个匹配元素的属性值。通过这个方法可以方便地从第一个匹配元素中获取一个属性的值。如果元素没有相应属性，则返回undefined。 如：返回文档中第一个图像的src属性值。 $(“img”).attr(“src”); 结果：test.jpg attr(properties): 将一个：”名/值“形式的对象设置为所有匹配元素的属性。 这是一种在所有匹配元素中批量设置很多属性的最佳方式。注意，如果你要设置对象的class属性，你必须使用‘className’作为属性名。或者你可以直接使用.addClass(class)和.removeClass(class). 如：为所有图像设置src和alt属性。 $(“img”).attr({src:”test.jpg”,alt:”Test Image”}); 结果：[] 如果要删除元素的title属性，可以使用下面代码： $(“p”).removeAttr(“title”); —————-end attr——————- ————第三章 jQuery中的DOM操作————— 例：你最喜欢的水果是？ <ul> <li title=’苹果’>苹果</li> <li title=’橘子’>橘子</li> <li title=’菠萝’>菠萝</li> </ul> 要获取<ul>元素里第2个<li>节点，并将它的文本内容“橘子”打印出来。 var $li = $(“ul li:eq(1)”); var li_txt = $li.text(); alert(li_txt); $(“ul li”).remove(“li[title!=菠萝]”); //将<li>元素中属性title不等于”菠萝”的<li>元素删 除。 $(“ul li”).click(function(){ $(this).clone().appendTo(“ul”);//复制当前单击的节点，并将它追加到<ul>元素中 }) 上面的复制节点后，被复制的新元素并不具有任何行为。如果需要新元素也具有复制功能，可以使用jQuery代码： $(this).clone(true).appendTo(“body”);//注意参数true 在clone()方法中传递了一个参数true，它的含义是复制元素的同时复制元素中所绑定的事件。因此该元素的副本也同样具有复制功能。 jQuery中替换某个节点：replaceWith()和replaceAll()。 如果在替换之前，已经为元素绑定事件，替换后原先绑定的事件将会与被替换的元素一起消失，需要在新元素上重新绑定事件。 jQuery中包裹节点：wrap()。 如： $(“strong”).wrap(“”);//用标签把元素包裹起来。 结果： ————-切换样式——-toggle()—— $toggleBtn.toggle(function(){代码3 //显示元素},function(){代码4 //隐藏元素}) toggle()方法此处的作用是交替执行代码3和代码4两个函数，如果元素原来是显示的，则隐藏它；如果元素原来是隐藏的，则显示它。此时，toggle()方法主要是控制行为上的重复切换。 toggleClass()方法控制样式上的重复切换。如果类名存在则删除它，如果类名不存在则添加它。 例如： 对元素进行toggleClass()方法操作。 $(“p”).toggleClass(“another”);//重复切换类名“another” 当单击“切换样式”按钮后，元素的HTML代码由 你最喜欢的水果是？ 变为 你最喜欢的水果是？ 当再次单击“切换样式”按钮后，元素的HTML代码又返回原来的状态： 你最喜欢的水果是？ 当不断单击“切换样式”按钮时，元素的class的值就会在“myClass”和“myClass another”之间重复切换。 ———–判断是否含有某个样式———– hasClass()可以用来判断元素中是否含有某个class，如果有，则返回true，否则返回false。 例如：可以使用下面的代码来判断元素中是否含有“another”的class： $(“p”).hasClass(“another”); —————-设置和获取HTML、文本和值——————– html()方法：（此方法类似于JavaScript中的innerHTML属性） 如： 你最喜欢的水果是？ var p_html = $(“p”).html(); alert(p_html); 结果：你最喜欢的水果是？ 如果需要设置某元素的HTML代码，那么也可以使用该方法，不过需要为它传递一个参数。 如：$(“p”).html(“<a>aaa</a>”); 结果：<a>aaa</a> text()方法：（此方法类似于JavaScript中的innerText属性）可以用来读取或者设置某个元素中的文本内容。 如： 你最喜欢的水果是？ var p_text = $(“p”).text(); alert(p_text); 结果：你最喜欢的水果是？ 如果需要设置文本内容，那么也需要传递一个参数。 $(“p”).text(“你最喜欢的水果是？”) val():此方法类似于JavaScript中的value属性。可以用来设置和获取元素的值。无论元素是文本框，下拉列表还是单选框，它都可以返回元素的值。如果元素为多选，则返回一个包含所有选择的值的数组。 例子： <input type=”text” id=”address” value=”请输入邮箱地址”/> $(function(){ $(“#address”).focus(function(){ var address_val = $(this).val(); if(address_val == “请输入邮箱地址”){ $(this).val(“”); } }); 注意：this指向当前的文本框。 val()方法还有另外一个用处，就是它能使select（下拉列表框），checkbox（多选框）和radio（单选框）相应的选项被选中，在表单操作中会经常用到。 ——–遍历节点———– children()方法用于取得匹配元素的子元素集合。 next()方法用于取得匹配元素后面紧邻的同辈元素。 prev()该方法用于取得匹配元素前面紧邻的同辈元素。 siblings()方法用于取得匹配元素前后所有的同辈元素。 ===========================第4章 jQuery中的事件和动画========================== window.onload方法是在网页中所有的元素（包括元素的所有关联文件）完全加载到浏览器后才执行，即JavaScript此时才可以访问网页中的任何元素。而通过jQuery中的$(document).ready()方法注册的事件处理程序，在DOM完全就绪时就可以被调用。此时，网页的所有元素对jQuery而言都是可以访问的，但是，这并不意味着这些元素关联的文件都已经下载完毕。 需要注意的是，由于在$(document).ready()方法内注册的事件，只要DOM就绪就会被执行，因此可能此时元素的关联文件未下载完。例如与图片有关的HTML下载完毕，并且已经解析为DOM树了，但很有可能图片还未加载完毕，所以例如图片的高度和宽度这样的属性此时不一定有效。要解决这个问题，可以使用jQuery中另一个关于页面加载的方法–load()方法。load()方法会在元素的onload事件中绑定一个处理函数。如果处理函数绑定给window对象，则会在所有内容（包括窗口、框架、对象和图像等）加载完毕后触发，如果处理函数绑定在元素上，则会在元素的内容加载完毕后触发。 事件绑定： bind(type[,data],fn); 判断元素是否显示，可以使用jQuery中的is()方法来完成。 例如：<div id=”panel”> <h5 style=”cursor:hand;”>什么是jQuery？</h5> <div style=”display:none;”>jQuery是继Prototype之后又一个优秀的JavaScript库！</div> </div> $(function(){ $(“#panel h5.head”).bind(“click”,function(){ if($(this).next(“div.content”).is(“:visible”)){ //如果“内容”显示 $(this).next(“div.content”).hide(); }else{ $(this).next(“div.content”).show(); } }) }) ———–合成事件———– jQuery有两个合成事件：hover()方法和toggle()方法。 hover(enter, leave); hover()方法用于模拟光标悬停事件。当光标移动到元素上时，会触发指定的第1个函数(enter);当光标移出这个元素时，会触发指定的第2个函数（leave）。 $(function(){ $(“#panel h5.head”).hover(function(){ $(this).next(“div.content”).show(); },function(){ $(this).next(“div.content”).hide(); }) }) toggle()方法语法结构为： toggle(fn1,fn2,…fnN); toggle()方法用于模拟鼠标连续单击事件。第一次单击元素，触发指定的第1个函数（fn1）；当再次单击同一个元素时，则触发指定的第2个函数（fn2）；如果有更多函数，则依次触发，直到最后一个。随后的每次单击都重复对这几个函数的轮番调用。 停止事件冒泡： $(‘span’).bind(“click”,function(event){ … event.stopPropagation();//停止事件冒泡 }) preventDefault()方法：阻止元素的默认行为。 例如：单击超链接后会跳转，单击“提交”按钮后表单会提交，有时需要阻止元素的默认行为。 ———-jQuery中的动画———— **show()方法和hide()方法 show()方法和hide()方法是jQuery中最基本的动画方法。 注意：hide()方法在将“内容”的display属性值设置为“none”之前，会记住原先的display属性值（“block”或“inline”或其他除了“none”之外的值）。当调用show()方法时，就会根据hide()方法记住的display属性值来显示元素。 show()方法可以指定一个速度参数，例如一个速度关键字“slow”元素将在600毫秒内慢慢地显示出来，“normal”长度为400毫秒，“fast”长度为200毫秒。 show()方法会从上到下增大“内容”的高度，从左到右增大“内容”的宽度，同时增加“内容”的不透明度，直至内容完全显示。 fadeIn()方法和fadeOut()方法 fadeIn()方法和fadeOut()方法只改变元素的不透明度。fadeOut()方法会在指定的一段时间内降低元素的不透明度，直到元素完全消失(“display：none”)。fadeIn()方法则相反。 如果只想改变“内容”的不透明度，而不想改变其高度和宽度，就可以使用fadeOut()方法。 slideUp()方法和slideDown()方法 slideUp()方法和slideDown()方法只会改变元素的高度。如果一个元素的display属性值为“none”，当调用slideDown()方法时，这个元素将由上至下延伸显示。slideUp()方法正好相反，元素将由下到上缩短隐藏。 注意：jQuery中的任何动画效果，都可以指定3种速度参数，即“slow”、“normal”和“fast”（时间长度分别是0.6秒、0.4秒和0.2秒）。当使用速度关键字时要加引号，例如：show(“slow”),如果用数字作为时间参数时就不需要加引号，例如show(1000)。 自定义动画方法animate()******* animate(params, speed, callback); 参数说明： params：一个包含样式属性及值的映射，比如{property1:”value1″,property2:”value2″,….} speed:速度参数，可选。 callback:在动画完成时执行的函数，可选。 为了使元素动起来，要更改元素的“left”样式属性。需要注意的是在使用animate()方法之前，为了能影响该元素的“top”、“left”、“bottom”和“right”样式属性，必须先把元素的position样式设置为“relative”或者“absolute”。 $(function(){ $(“#panel”).click(function(){ $(this).animate({left:”500px”},3000);//使元素在3秒内，向右移动500像素。 }) }) {left:”500px”}，如果在500px之前加上“+=”或者“-=”符号即表示在当前位置累加或者累减。 如果要同时执行多个动画，在元素向右滑动的同时，放大元素的高度和宽度： $(function(){ $(“#panel”).click(function(){ $(this).animate({left:”500px”,height:”200px”,width:”200px”},3000); }) }) 例子： $(function(){ $(“#panel”).css(“opacity”,”0.5″);//设置不透明度 $(“#panel”).click(function(){ $(this).animate({left:”400px”,height:”200px”,opacity:”1″},3000) .animate({top:”200px”,width:”200px”},3000) .fadeOut(“slow”); }) }) 如果想在最后一步切换元素的CSS样式（css(“border”,”5px solid blue”)），而不是隐藏元素。 如果只是按照常规的方式，将fadeOut(“slow”)改为css(“border”,”5px solid blue”)，并不能得到预期效果。预期的效果是在动画的最后一步改变元素的样式，而实际的效果是，刚开始执行动画的时候，css()方法就被执行了。出现这个问题的原因是css()方法并不会加入到动画队列中，而是立即执行。可以使用回调函数（callback）对非动画方法实现排队。只要把css()方法写在最后一个动画的回调函数里即可。如： $(“#panel”).click(function(){ $(this).animate({left:”400px”,height:”200px”,opacity:”1″},3000) .animate({top:”200px”,width:”200px”},3000,function(){$(this).css(“border”,”5px solid blue”);}) }) callback回调函数适用于jQuery所有的动画效果方法，例如slideDown()方法的回调函数： $(“#element”).slideDown(“normal”,function(){}) 停止元素的动画stop([clearQueue][,gotoEnd]); $(“#panel”).hover(function(){ $(this).stop(true).animate({height:”150″},200).animate({width:”300″},300)},function(){ $(this).stop(true).animate({height:”22″},200).animate({width:”60″},300)} } }) 在使用animate()方法的时候，要避免动画积累而导致的动画与用户的行为不一致。当用户快速在某个元素上执行animate()动画时，就会出现动画积累。解决方法是判断元素是否正处于动画状态，如果元素不处于动画状态，才为元素添加新的动画，否则不添加。 if(!$(element).is(“:animated”)){ //判断元素是否正处于动画状态 //如果当前没有进行动画，则添加新动画 } jQuery中3个专门用于交互的动画方法： toggle(speed,[callback]); slideToggle(speed,[callback]); fadeTo(speed,opacity,[callback]); & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & 实例： <div id=”pannel”> <h5>什么是jQuery？</h5> <div> jQuery是继Prototype之后又一个优秀的JavaScript库，它是一个由JohnResig创建于2006年1月的开源项目。jQuery凭借简洁的语法和跨平台的兼容性，极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax。它独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式。 </div> </div> & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & toggle()方法可以切换元素的可见状态。如果元素是可见的，则切换为隐藏的；如果元素是隐藏的，则切换为可见的。 $(“#panel h5.head”).click(function(){ $(this).next(“div.content”).toggle(); }) 相当于以下jQuery代码： $(“#panel h5.head”).toggle(function(){ $(this).next(“div.content”).hide(); },function(){ $(this).next(“div.content”).show(); }) sildToggle()方法通过高度变化来切换匹配元素的可见性。这个动画效果只调用元素的高度。 $(“#panel h5.head”).click(function(){ $(this).next(“div.content”).slideToggle(); }）； 当单击“标题”连接后，“内容”会在可见和隐藏两种状态之间切换，不过是通过改变元素的高度来实现的。 相当于以下jQuery代码： $(“#panel h5.head”).toggle(function(){ $(this).next(“div.content”).slideUp(); },function(){ $(this).next(“div.content”).slideDown(); }) fadeTo()方法可以把元素的不透明度以渐进方式调整到指定的值。这个动画只调整元素的不透明度，即匹配的元素的高度和宽度不会发生 变化。 ———–动画队列———- (1)一组元素上的动画效果 当在一个animate()方法中应用多个属性时，动画是同时发生的。 当以链式的写法应用动画方法时，动画是按照顺序发生的。 （2）多组元素上的动画效果 默认情况下，动画都是同时发生的。 当以回调的形式应用动画方式时，动画是按照回调顺序发生的。 另外，在动画方法中，要注意其他非动画方法会插队，例如css()方法要使非动画方法也按照顺序执行，需要把这些方法写在动画方法的回调函数中。 =====================jQuery对表单、表格的操作及更多应用================ 示例： 获取和失去焦点改变样式： <body> <form action=”#” method=”POST” id=”regForm”> <fieldset> <legend>个人基本信息</legend> <div> <label for=”username”>名称：</label> <input id=”username” type=”text”> </div> <div> <label for=”pass”>密码：</label> <input id=”pass” type=”password”> </div> <div> <label for=”msg”>详细信息：</label> <textarea id=”msg”>





样式控制：

each(callback):
以每一个匹配的元素作为上下文来执行一个函数。
意味着，每次执行传递进来的函数时，函数中的this关键字都指向一个不同的DOM元素（每次都是一个不同的匹配元素）。而且，在每次执行函数时元素集合中所处位置的数字值作为参数（从零开始的整形）。返回‘false’将停止循环（就像在普通的循环中使用‘break’）。返回‘true’跳至下一个循环（就像在普通的循环中使用‘continue’）。

==================jQuery与Ajax的应用======================
Ajax优点：
（1）不需要插件支持
（2）优秀的用户体验
（3）提高Web程序的性能
与传统模式相比，Ajax模式在性能上的最大区别就在于传输数据的方式，在传统模式中，数据提交是通过表单（Form）来实现的，而数据获取是靠全页面刷新来重新获取整页的内容。而Ajax模式只是通过XMLHttpRequest对象向服务器端提交希望提交的数据，即按需发送。
（4）减轻服务器和宽带的负担
Ajax的工作原理相当于在用户和服务器之间加了一个中间层，使用户操作与服务器响应异步化。它在客户端创建Ajax引擎，把传统方式下的一些服务器负担的工作转移到客户端，便于客户端资源来处理，减轻服务器和带宽的负担。
———-Ajax的XMLHttpRequest对象———-
Ajax的核心是XMLHttpRequest对象，它是Ajax实现的关键–发送异步请求、接收响应及执行回调都是通过它来完成的。
jQuery对Ajax操作进行了封装，在jQuery中$.ajax()方法属于最底层的方法，第2层是load()、$.get()和$.post()方法，第3层是$.getScript()和$.getJSON()方法。第2层地方法使用频率很高。

load(url[, data] [, callback]) 方法是jQuery中最为简单和常用的Ajax方法，能载入远程HTML代码并插入DOM中。
参数名称 类型 说明
url String 请求HTML页面的URL地址
data（可选） Object 发送至服务器的key/value数据
callback（可选） Function 请求完成时的回调函数，无论请求成功或失败

load()方法通常用来从Web服务器上获取静态的数据文件，如果需要传递一些参数给服务器中的页面，那么可以使用$.get()或者$.post()方法。
$.get(url[, data] [, callback] [, type]);
参数名称 类型 说明
url String 请求的HTML页地URL地址
data（可选） Object 发送至服务器的key/value数据会作为QueryString附加到请求URL中
callback（可选） Function 载入成功时回调函数（只有当Response的返回状态是success才调用 该方法）自动将请求结果和状态传递给该方法
type（可选） String 服务器端返回内容的格式,包括xml、html、script、json、text和_default

$.get()的回调函数只有两个参数：
function(data, textStatus){
 //data: 返回的内容，可以是XML文档、JSON文件、HTML片段等等
 //textStatus: 请求状态：success、error、notmodified、timeout4种
}

jquery的is用法实例

admin — Wed, 21 Nov 2012 03:25:31 +0000

“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>
http://www.w3.org/1999/xhtml“>

jquery的is用法

什么是jQuery？

jquery的each用法实例

admin — Wed, 21 Nov 2012 03:25:01 +0000

$(document).ready(function(){
var arr = [1,2,3,4,5,6,7,8,9,10,11,12];
var div_z = “”; //定义一个空变量
$.each(arr, function(key, val) {
     $(“#aaa”+val).toggle(function(){
  $(this).siblings(“#bbb”+val).show();
},function(){
$(this).siblings(“#bbb”+val).hide();
  })


div_z += val;
})//each

})

[navlist:name]

{aspcms:1navlist type=[navlist:sortid]}
– [1navlist:name]
{/aspcms:1navlist}

{/aspcms:navlist}–>