JQuery实战第四讲：标签页效果

合集下载

jQuery前端开发实战教程

《jQuery前端开发实战教程》试卷得分单选题（每题2分，共计30分）1．页面中存在可见元素div，代码“if( $("div").show().is(:animated) ){ $("div").hide(1000); }”的执行效果是（）A、元素以动画效果隐藏B、元素没有任何变化C、元素无动画效果隐藏D、元素先以动画效果隐藏，再无动画形式显示2．关于代码“$.fn.test = function() { };”，下列说法错误的是（）A、test方法可以被jQuery对象调用B、test方法被jQuery对象调用时，this指向调用该方法的jQuery对象C、在test方法中可以书写代码“return this”来实现链式编程D、$.fn是jQuery原型对象jQuery.prototype的简写3．jQuery Mobile选择菜单中，当选择菜单中含有多个类别时，可添加（）元素，让jQuery Mobile根据此元素中label属性的文本创建含有分割项的选项。

A、labelB、optgroupC、selectD、option4．在使用tree组件时，dnd属性和lines属性设置为true分别代表（）含义。

A、显示横线条显示竖线条B、显示竖线条显示横线条C、表示可拖动表示可拖拽D、表示可拖动表示显示竖线条5．下列哪种方法不可以让元素设置为不可见（）A、fadeInB、fadeOutC、fadeToD、hide总分题型单选题多选题填空题简答题题分得分6．在jQuery Mobile列表视图中，可以将任意大小的图片自动缩放到（）像素，展示到列表中。

A、60B、70C、80D、907．跟jQuery相继诞生的JavaScript库还有很多，不包括（）A、PrototypeB、ExtJSC、YUID、node.js8．下面选项中this的使用说法正确的是（）A、this指向当前元素B、this可以用来绑定事件C、this可以获取到所有元素D、this是一种方法9．使用animate方法实现与代码$("div").fadeIn(600)相同效果的代码写法是（）A、$("div").animate({"opacity":"1"})B、$("div").animate({"opacity":"1"},"fast")C、$("div").animate({"opacity":"1"},600)D、$("div").animate({"opacity":"1"},"normal")10．从EasyUI网站下载到的“jquery-easyui-1.5.4.2.zip”压缩包解压，保存到“chapter08\ easyui-1.5.4.2”目录中下面说法错误的是（）A、locale目录是国际化资源文件包B、plugins是插件包目录C、jsrc是源码包目录D、demo和demo-mobile目录都是样例，没有区别11．在jQuery事件中，当调整浏览器窗口时触发的事件是（）事件。

jquery用法

jquery用法jQuery是一种广泛应用于网页开发的JavaScript库，它极大地简化了HTML 文档遍历、事件处理、动画设计等常见的客户端脚本操作。

下面是jQuery的一些常见用法:1.选择器: jQuery提供了许多选择器来获取HTML元素，如元素选择器、id选择器、class选择器、属性选择器、伪类选择器、层次选择器等。

以下是一些常见的选择器：•('#element')：选择具有特定ID的元素•('.class')：选择具有特定类的元素•('input[type=“text”]')：选择特定类型的表单元素•('div:first')：选择第一个div•('ul li').eq(2)：选择ul下的第二个li元素2.事件处理: jQuery使得添加和处理事件变得容易。

以下是一些常见的事件处理函数：•click()：单击元素时触发•dblclick()：双击元素时触发•mouseenter()：鼠标移入元素时触发•mouseleave()：鼠标移出元素时触发•keydown()：按下键盘上的键时触发3.属性: jQuery提供了完善的属性操作，可以改变和获取元素的属性，例如：•attr(): 获取或设置元素的属性值•removeAttr(): 删除元素的属性值•prop(): 获取或设置元素的属性值，与attr()不同之处在于property值不会随着属性值的改变而改变4.动画效果: jQuery内置了一些动画效果，可以使网页更加动态。

以下是一些常见的动画效果：•fadeIn()：淡入元素，即从不可见到可见•fadeOut()：淡出元素，即从可见到不可见•slideDown()：向下展开元素•slideUp()：向上收缩元素•animate()：通过改变元素的CSS属性来创建自定义的动画效果5. AJAX: jQuery内置了AJAX的方法，可以在不刷新网页的情况下从服务器获取数据。

jQuery的属性,事件及操作

jQuery的属性,事件及操作1.属性操作1.1 基本属性操作$("img").attr("src") 返回⽂档中所有图像的src属性值$("img").attr("src","test.jpg") 设置⽂档中所有图像的src属性值$("img").removeAttr("src") 将⽂档中图像的src属性删除$("input[type='checkbox']").prop("checked",true) 选中复选框$("input[type='checkbox']").prop("checked",false) 取消复选框$("img").removeProp("src") 删除img的src属性值attr与prop的区别:attr可以找到⾃定义的属性,prop只能找到固有的属性例⼦:<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><script src="../jquery-3.2.1.js"></script></head><body><button class="select_all">全选</button><button class="reverse">反选</button><button class="cancel">取消</button><hr><table border="1"><tr><td><input type="checkbox"></td><td>111</td><td>222</td><td>333</td></tr><tr><td><input type="checkbox"></td><td>111</td><td>222</td><td>333</td></tr><tr><td><input type="checkbox"></td><td>111</td><td>222</td><td>333</td></tr><tr><td><input type="checkbox"></td><td>111</td><td>222</td><td>333</td></tr></table><script>//为"select_all"类绑定点击事件$(".select_all").click(function(){$(":checkbox").prop("checked",true);//选中所有的"checkbox"标签});//为"cancel"类绑定点击事件$(".cancel").click(function(){$(":checkbox").prop("checked",false);//取消选中的"checkbox"标签});//为"reverse"类绑定点击事件$(".reverse").click(function(){//循环每⼀个"checkbox"标签$(":checkbox").each(function(){$(this).prop("checked",!$(this).prop("checked"));//把所有的"checkbox"标签的属性取反})});</script></body></html>1.2 class属性操作$("p").addClass("test") 为p元素加上"text"类$("p").removeClass("test") 从p元素中删除"test"类$("p").toggleClass("test") 如果存在就删除,否则就添加"test"类$("p").hasClass("test") 判断有没有"test",返回⼀个布尔值1.3 标签⽂本text/HTML的属性$("p").html() 返回p标签的html内容$("p").html("hello world") 设置p标签的html内容$("p").text() 返回p标签的text内容$("p").text("test") 设置p标签的text内容$("input").val() 获取⽂本框中的值$("input").val("test") 设置⽂本框中的内容2.CSS操作2.1 样式$("p").css("color") 访问查看p元素的color属性$("p").css("color","red") 设置p元素的color属性的"red"$("p").css({"color":"red","bakcground-color":"yellow"}) 设置p元素的color为"red",background属性为"yellow"(设置多个属性要⽤{}字典形式) 2.2 位置$("p").offset() 元素在当前窗⼝的相对偏移,object{top:100,left:100}$("p").offset().top 元素相对窗⼝顶部的偏移$("p").offset().left 元素相对窗⼝左侧的偏移$("p").position() 元素相对⽗元素的偏移,对可见元素有效,object{top:100,left:100}例⼦:<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><script src="../jquery-3.2.1.js"></script><style type="text/css">*{margin:0;padding:0;}</style></head><body><div class="div1" style="width:200px;height:200px;background-color:darkblue"></div><script>var val_x=0;//初始化标签到浏览器左边框的距离var val_y=0;//初始化标签到浏览器上边框的距离//定义当⿏标悬浮在标签上⾯的时候,⿏标的样式为移动$(".div1").mouseover(function(){$(this).css("cursor","move")});//为盒⼦绑定⿏标左键按下事件$(".div1").mousedown(function(e){val_x=e.clientX;//定义标签的初始x坐标val_y=e.clientY;//定义标签的初始y坐标var $box_x=$(".div1").offset().left;//获取盒⼦相对窗⼝左侧的偏移var $box_y=$(".div1").offset().top;//获取盒⼦相对窗⼝顶侧的偏移//定义⿏标移动的操作$(document).mousemove(function(e){var move_x=e.clientX;//获取⿏标的偏移量var move_y=e.clientY;//移动窗⼝到指定的偏移量$(".div1").offset({left:$box_x+move_x-val_x,top:$box_y+move_y-val_y})});//绑定⿏标左键松开事件$(document).mouseup(function(){$(document).off();//关闭事件})});</script></body></html>这样可以使div盒⼦跟随⿏标的移动⽽移动$(window).scrollTop() 获取窗⼝滚动条的⾼度$(window).scrollLeft() 获取窗⼝滚动条的宽度$(window).scrollTop("100") 获取窗⼝滚动条的⾼度为100例⼦:<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><script src="../jquery-3.2.1.js"></script></head><body><div class="box"></div><div id="returnTop">to top</div><script>//定义窗⼝的滚动条$(window).scroll(function(){console.log($(window).scrollTop());//打印滚动条的位置//当滚动条的位置⼤于200的时候if($(window).scrollTop()>200){$("#returnTop").show();//显⽰滚动条}else{$("#returnTop").hide();//隐藏滚动条}//为返回顶部按钮绑定点击事件$("#returnTop").click(function(){$(window).scrollTop(0);//使窗⼝返回顶部})})</script></body></html>2.3 尺⼨$("p").height() 获取p元素的⾼度$("p").width() 获取p元素的宽度$("p:first").innerHeight() 获取p元素的第⼀个元素的内部区域的⾼度(不包括边框) $("p:first").innerWidth() 获取p元素的第⼀个元素的内部区域宽度(不包括边框)$("p:first").outerHeight() 获取p元素的第⼀个元素的外部区域的⾼度(默认包括边框) $("p:first").outerWidth() 获取p元素的第⼀个元素的外部区域的宽度(默认包括边框) $("p:first").outerHeight(true) 为true时包括边框例⼦:<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><script src="../0814/jquery-3.2.1.js"></script><style>.box{width:200px;height:100px;padding:50px;border:10px solid red;background-color:pink;margin:20px;}</style></head><body><div class="box">DIV</div><script>console.log($(".box").height());//获取盒⼦的⾼度console.log($(".box").width());//获取盒⼦的宽度console.log($(".box").innerHeight());//获取盒⼦的内部区域的⾼度(包括填充)console.log($(".box").innerWidth());//获取盒⼦的内部区域的宽度(包括填充)console.log($(".box").outerHeight());//获取盒⼦的外部区域的⾼度(包括边框)console.log($(".box").outerWidth());//获取盒⼦的外部区域的宽度(包括边框)console.log($(".box").outerHeight(true));//获取盒⼦的外部区域的⾼度(⽰包括边距) console.log($(".box").outerWidth(true));//获取盒⼦的外部区域的宽度(不包括边距) </script></body></html>显⽰如下:打印结果如下:3. ⽂档处理3.1 内部插⼊$("p").append("<p>p1</p>") 在p标签后⾯追加标签"<p>p1</p>" $("p").appendTo("<p>p1</p>") 把p标签追加到标签"<p>p1</p>"后⾯$("p").prepend("<p>p1</p>") 在p标签前⾯追加标签"<p>p1</p>" $("p").prependTo("<p>p1</p>") 把p标签追加到标签"<p>p1</p>"前⾯3.2 外部插⼊$("p").after("<p>p1</p>") 在p标签的同级标签后⾯插⼊标签"<p>p1</p>" $("p").before("<p>p1</p>") 在p标签的同级标签前⾯插⼊标签"<p>p1</p>" $("p").insertAfter("<p>p1</p>") 把p标签插⼊到标签"<p>p1</p>"后⾯$("p").insertBefore("<p>p1</p>") 把p标签插⼊到标签"<p>p1</p>"前⾯3.3 替换$("p").replaceWith("<img src='a.jpg'>") 把p标签替换成图⽚$(".div1").replaceAll("p") 把div类替换成⽂档中所有的p标签例⼦⼀:<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><script src="../jquery-3.2.1.js"></script></head><body><p>p1</p><p>p2</p><p>p3</p><p>p4</p><div class="div1">div5</div><div class="div1">div6</div><div class="div1">div7</div><script>$(".div1").replaceWith("<p>p1</p>");//把p标签替换成p标签</script></body></html>显⽰如下:例⼦⼆:<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><script src="../jquery-3.2.1.js"></script></head><body><p>p1</p><p>p2</p><p>p3</p><p>p4</p><div class="div1">div5</div><div class="div1">div6</div><div class="div1">div7</div><script>$(".div1").replaceAll("p");//把div类替换成⽂档中所有的p标签</script></body></html>显⽰如下:3.4 删除$("p").empty() 删除所有的p标签中的所有的⼦标签$("p").remove([expr]) 删除所有的p标签以及p标签中的⼦标签3.5 复制$("p").clone() 克隆p标签$("p").clone(true) 布尔值指定事件处理函数是否会被复制3.6 循环使⽤jQuery实现的集合循环⽅式⼀:$.each(Array,function(){function_suite})⽅式⼆:$(element).each(function(){function_suite})例⼦:使⽤each循环进⾏判断代码⼀:<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><script src="../jquery-3.2.1.js"></script></head><body><script>li=[11,22,33,44,55,66,77];$.each(li,function(i,v){if(v==33){return;}console.log(v);});</script></body></html>打印如下:代码⼆:<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><script src="../jquery-3.2.1.js"></script></head><body><script>li=[11,22,33,44,55,66,77];//定义循环,i为列表的索引,v为列表索引对应的值$.each(li,function(i,v){//当循环中的值为33时if (v==33){return false;}console.log(v);});</body></html>打印如下:结论:each的参数function内如果出现return,结束当次循环,类似于continueeach的参数function内如果出现return false,结束的是整个each循环,类似break4. 事件4.1 事件$("p").click() 单击事件$("p").dbclick() 双击事件$("p").mouseover() 当⿏标指针位于元素上⽅时触发事件$("p").mousemove() 当⿏标指针在指定的元素中移动时触发事件$("p").mouseout() 当⿏标指针从元素上移开时触发事件$("input[type='text']").focus() 元素获得焦点时,触发focus事件$("input[type='text']").blur() 元素失去焦点时,触发blur事件$("input[type='text']").change() 当元素的值发⽣改变时触发事件$("button").mousedown() 当按下⿏标时触发事件$("button").mouseup() 元素上放开⿏标按键时触发事件$(window).keydown() 当键盘或按钮被按下时触发事件$(window).keypress() 当键盘或按钮被按下时触发事件,每输⼊⼀个字符都触发⼀次事件$(window).scroll() 当⽤户滚动窗⼝的滚动条时触发事件$(window).resize() 当调整浏览器窗⼝的⼤⼩时触发事件$(window).unload() ⽤户离开页⾯时,触发事件$("input").keyup() 当按钮被松开时触发事件$("input").select() 当input元素中的⽂本被选择时触发事件$("form").submit() 当提交表单时触发事件4.2 绑定⽅式$(标签).事件(函数内容)4.3 事件委托通过其上级(可以是多层上级)事件委托,当点击这个标签时才会绑定事件在页⾯不刷新的情况下添加⼀⾏数据,⾏数据有操作按钮,点击并⽆效果,就可以通过事件委托来解决委托⽅式:$("ul").on("click","li",function(){function_suite})例⼦:<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><script src="jquery-3.2.1.js"></script></head><body><div id="box"><div class="item">111</div><div class="item">222</div><div class="item">333</div><div class="item">444</div><div class="item">555</div><div class="item">666</div></div><button>ADD</button><script>//为"button"按钮添加点击事件$("button").click(function(){$("#box").append("<div class='item'>777</div>");//在div标签后⾯添加⼀⾏//为"box"下的"item"类添加点击事件$("#box").on("click",".item",function(){console.log($(".item").text());//打印"item"类的⽂本})</script></body></html>4.4 event object所有的事件函数都可以传⼊event参数⽅便处理事件⽅式:$("p").click(function(event){function_suite})(event_object)的属性⽅法event.pageX 事件发⽣时,⿏标距离⽹页左上⾓的⽔平距离event.pageY 事件发⽣时,⿏标距离⽹页左上⾓的垂直距离event.type 事件的类型event.which 按下了哪⼀个键event.data 在事件对象在绑定数据,然后传⼊事件处理函数event.target 事件针对的⽹页元素event.preventDefault() 阻⽌事件的默认⾏为(⽐如点击链接,会⾃动打开新页⾯)event.stopPropagation() 停⽌事件向上层元素冒泡4.5 动画效果基点$("p").show() 显⽰隐藏的匹配元素$("p");show("slow") 参数表⽰速度,("slow","normal","fast"),也可以设置为毫秒$("p").hide() 隐藏显⽰的元素$("p").toggle() 切换显⽰/隐藏例⼦:<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><script src="../0814/jquery-3.2.1.js"></script></head><body><img src="a.jpg">;//定义⼀张图⽚<hr><button class="hide_element">hide</button>;//定义隐藏按钮<button class="show_element">show</button>;//定义显⽰按钮<button class="toggle_element">toggle</button>;//定义切换按钮<script>//定义隐藏的点击事件$(".hide_element").click(function(){$("img").hide()});//定义显⽰的点击事件$(".show_element").click(function(){$("img").show()});//定义切换按钮的点击事件$(".toggle_element").click(function(){$("img").toggle()});</script></body></html>⽤浏览器打开的效果如下:可以看到,图⽚是显⽰的,点击"hide"按钮,图⽚就被隐藏起来,然后再点击"show"按钮,图⽚就⼜会被显⽰出来了.另外,当图⽚显⽰的时候,点击"toggle"按钮,图⽚就会隐藏,⽽当图⽚是隐藏的时候,点击"toggle"按钮,图⽚⼜会显⽰出来.4.6 滑动操作$("p").slideDown("1000") ⽤1000毫秒的时间将段落滑下$("p").slideUp("1000") ⽤1000毫秒的时间将段落滑上$("p").slideToggle("1000") ⽤1000毫秒的时间将段落滑上,滑下例⼦:<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><script src="../0814/jquery-3.2.1.js"></script></head><body><img src="a.jpg" style="width:500px;height:300px"><hr><button class="slide_up">slide_up</button><button class="slide_down">slide_down</button><button class="toggle">toggle</button><script>//对"slide_up"类绑定点击事件$(".slide_up").click(function(){$("img").slideUp(1000);//⽤1000毫秒的时间将段落收起});//对"slide_down"类绑定点击事件$(".slide_down").click(function(){$("img").slideDown(1000);//⽤1000毫秒的时间将段落滑下});//对"toggle"类绑定点击事件$(".toggle").click(function(){$("img").slideToggle(1000);//⽤1000毫秒的时间将段落滑下或者收起 });</script></body></html>4.7 淡⼊淡出$("p").fadeIn("1000") ⽤1000毫秒时间将段落淡⼊$("p").fadeOut("1000") ⽤1000毫秒时间将段落淡出$("p").fadeToggle("1000") ⽤1000毫秒时间将段落淡⼊,淡出$("p").fadeTo("slow",0.6) ⽤慢速度将段落的透明度调整到0.6例⼦:<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><script src="../jquery-3.2.1.js"></script></head><body><img src="a.jpg" style="width:500px;height:300px"><hr><button class="fade_in">fadeIn</button><button class="fade_out">fadeOut</button><button class="fade_toggle">fadeToggle</button><button class="fade_to">fadeTo</button><script>//对"fade_in"类绑定点击事件$(".fade_in").click(function(){$("img").fadeIn(1000);//⽤1000毫秒时间将段落淡⼊});//对"fade_out"类绑定点击事件$(".fade_out").click(function(){$("img").fadeOut(1000);//⽤1000毫秒时间将段落淡出});//对"fade_toggle"类绑定点击事件$(".fade_toggle").click(function(){$("img").fadeToggle(1000);//⽤1000毫秒时间将段落淡⼊或淡出});//对"fade_to"类绑定点击事件$(".fade_to").click(function(){$("img").fadeTo("slow",0.6);//⽤慢速度将图⽚的透明度调整到0.6 });</script></body></html>4.8 页⾯载⼊页⾯载⼊,也就是当页⾯载⼊成功后⽴即运⾏的函数事件$(document).ready(function(){function_suite})也可以简写为:$(function(){function_suite})。

jQuery学习笔记

第一章一、$(document).ready(function(){//do something});和window.onload的区别1.前者同一页面可以使用多次，后者出现多次只有最后一次能正确显示2.前者在DOM模型加载完成后就开始执行，后台在所有元素（包括图片）加载完成后执行3.前者可以简化为$(function(){//do something});后者没有简写形式。

二、jQuery比较常使用的是链式操作，比如一个书目导航条：$(function(){$(“ul”).click(function(){$(this).addClass(“current”).children(“li”).slideDown().end().sublings().removeClass(“current”).children(“li”).slideUp();})})对于同一元素不超过3个操作的，一般写同一行，如果操作过多，可以将类似的操纵写成一行，便于阅读。

三、jQuery对象和DOM对象的转换1.jQuery转化为DOM对象Var $variable = $(“tr”); //jQuery objectVar variable = $variable[0]; //DOM objectThe transpartent method.DomObject = jQueryObject[index] or = jQueryObject.get(index).2.DOM Object To jQuery ObjectVar variable = getElementsByTagName(“tr”); //DOM objectVar $variable = $(variable) // jQuery object;The transpartent method.jQueryObject = $(DomObject)四、jQuery开发工具1.Dreamweaver 可以安装插件提示jQuery 插件名称：jQuery_API.mxp2.Aptana 功能非常强大的、开源、专注javascript和Ajax开发IDE;3.Visual Studio 2008。

前端设计中的标签页设计技巧和最佳实践

前端设计中的标签页设计技巧和最佳实践在现代网页设计中，标签页（Tab）被广泛应用于展示不同内容或功能的界面元素。

它们能够提供清晰简洁的导航和结构，为用户提供直观的操作体验。

本文将介绍一些前端设计中的标签页设计技巧和最佳实践，帮助开发者创建出功能强大且易用的标签页。

一、标签页的基本概念和作用标签页是一种界面元素，通常以水平排列的方式展示在页面的顶部或侧边。

每个标签代表着不同的内容或功能，用户可以通过点击标签来切换显示的内容区域。

标签页的作用是为用户提供简洁的导航和布局结构，使用户能够快速访问和切换不同的页面或功能。

二、标签页的设计原则1. 易于识别和导航：标签应该以清晰的标题来描述所对应的内容或功能，使用户能够轻松找到并切换到他们感兴趣的页面。

2. 一致性和可预测性：标签的样式和行为应该保持一致，并且符合用户的预期。

用户应该能够准确地预测点击标签会发生什么，并且产生一致的结果。

3. 简洁和有序：尽量避免使用过多的标签，保持界面整洁有序。

在有限的空间中，只展示最重要和相关的标签，并通过隐藏或下拉菜单等方式处理额外的标签。

4. 可访问性和响应式：标签应该易于被键盘和鼠标访问，并且适应不同屏幕大小和设备类型。

三、标签页的设计技巧1. 样式：标签应该具有显著的样式以突出与其他页面的区分。

可以使用标签颜色、背景、边框、阴影等方式来增加标签的可识别性。

2. 标签位置：标签可以放置在页面顶部、侧边或底部。

选择标签位置时要考虑页面布局、内容层级和用户习惯等因素。

3. 标签尺寸：标签的尺寸应该适中，既能容纳标签的标题，又不会占据过多的空间。

可以根据内容长度来动态调整标签的宽度，避免内容溢出或过多空白。

4. 标签顺序：标签的顺序可以按照内容的重要性、使用频率或逻辑关系进行排列。

默认情况下，应该将最常用或默认页面放置在前面，使用户能够快速找到和切换到常用页面。

5. 激活态样式：为了帮助用户准确地识别当前显示的页面，可以为激活状态的标签应用特殊的样式，如高亮、下划线、背景色等。

菜鸟教程jquery语法

菜鸟教程jquery语法jQuery是一种高效、简洁又方便的JavaScript库，它简化了HTML文档的操作、事件处理、动画设计以及AJAX交互等操作，为前端开发者提供了非常方便的编程工具。

本篇文章将为大家简单介绍jQuery的语法和用法，包括选择器、事件、动画和AJAX交互等常用功能。

1. jQuery选择器选择器是jQuery的核心功能之一，它允许我们通过CSS样式来获取文档中的HTML元素。

以下是一些常见选择器：- 元素选择器$('p')：获取所有的p元素$('#header')：获取id为header的元素$('.nav')：获取class为nav的元素jQuery中的事件和原生JavaScript的事件类似，但是它的处理方式更为方便和高效。

以下是一些常用的事件处理方法：- click()：点击事件$('button').click(function(){//执行操作});- hover()：鼠标悬停事件jQuery提供了一些强大的动画效果，比如淡入淡出、滑动等。

以下是一些常用的动画效果：- fadeIn()：淡入效果$('div').fadeIn();- slideUp()：上滑效果4. jQuery AJAX交互jQuery AJAX可以实现页面的异步交互，比如发送请求、接收数据等。

以下是一些常用的AJAX方法：- $.ajax()：发送和接收请求的函数$.ajax({type: 'post',url: 'test.php',data: {'name': '小明','age': 18},success: function(data){console.log(data);}});总结本文对jQuery的语法和用法进行了简单介绍，包括选择器、事件、动画和AJAX交互等常用功能。

jquery-easyui_tab右键关闭功能

jquery-easyui_tab右键关闭功能效果：图一：关闭当前页图二：右键可以弹出更多的关闭功能实现<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Tabs - jQuery EasyUI Demo</title><link rel="stylesheet" type="text/css" href="../themes/default/easyui.css"><link rel="stylesheet" type="text/css" href="../themes/icon.css"><link rel="stylesheet" type="text/css" href="demo.css"><script type="text/javascript" src="../jquery-1.7.2.min.js"></script><script type="text/javascript" src="../jquery.easyui.min.js"></script></head><body><div id="tab_menu" style="width:500px;height:250px;"><div title="tab1" closable="false" style="overflow:auto;padding:20px;">tab1 is default, do not allow colse !</div><div title="tab2" closable="true" style="overflow:auto;padding:20px;">tab2</div><div title="tab3" closable="true" style="overflow:auto;padding:20px;">tab3</div><div title="tab4" closable="true" style="overflow:auto;padding:20px;">tab4</div><div title="tab5" closable="true" style="overflow:auto;padding:20px;">tab5</div><div title="tab6" closable="true" style="overflow:auto;padding:20px;">tab6</div></div><div id="tab_rightmenu" class="easyui-menu" style="width:150px;"><div name="tab_menu-tabcloseall">关闭全部标签</div><div name="tab_menu-tabcloseother">关闭其他标签</div><div class="menu-sep"></div><div name="tab_menu-tabcloseright">关闭右侧标签</div><div name="tab_menu-tabcloseleft">关闭左侧标签</div></div><script type="text/javascript"></script></body></html>。

Jquery特效大全

1.导航类 (5)(1)Horizontal accordion: jQuery (5)(2)jQuery-Horizontal Accordion (5)(3)jQuery plugin: Accordion (5)(4)Accordion Menu script (6)(5)模仿ext的tab选项卡 (6)(6) (8)（7）De-Constructing Accordion and Hover Effects with jQuery (8)（8）导航到页内指定位置 (9)（10） Sexy Drop Down Menu w/ jQuery & CSS (9)（11） A Different Top Navigation (10)（12）Sliding Jquery Menu Tutorial (10)（13）Animated Drop Down Menu with jQuery (10)14. jQuery UI错误！未找到索引项。

Potato Menu (10)15. Make a Mega Drop-Down Menu with jQuery (11)（16）Superfish v1.4.8 – jQuery menu plugin by Joel Birch (11)（17）jQuery (mb)Menu 2.7 (11)（18） jQuery File Tree (12)19.jQuery & CSS Example – Dropdown Menu (12)20. Reinventing a Drop Down with CSS and jQuery (12)21. Simple jQuery Dropdowns (13)22. Styling Drop Down Boxes with jQuery (13)23. jQuery iPod-style Drilldown Menu (13)24. jQuery Menu: Dropdown, iPod Drilldown, and Flyout styles with ARIA Support and ThemeRoller Ready (14)25. mcDropdown jQuery Plug-in v1.2.07 (14)26. jQuery Drop Line Tabs (14)27. Cut & Paste jQuery Mega Menu (15)28. jdMenu Hierarchical Menu Plugin (15)2.消息提示类 (15)（1）Facebox (15)（2）SimpleModal (16)（3）jTip (16)（4）BetterTip (17)（5）clueTip (17)（6）jQuery lightBox plugin (17)（7）jQuery Impromptu (18)（8）jQuery.UI Messenger"Outlook like message notification Widget (18)（9）FancyBox (18)（10）Coda Popup Bubbles (19)（11）jGrowl (19)（12）jqWindowsEngine (20)（13）jQuery Alert Dialogs (20)（14）BeautyTips (21)（15）Facebook/Xiaonei 风格模态框 (21)3.图片展示类 (22)(1)imgAreaSelect (22)(3)Easy News (23)(4)jQZoom (24)(5)jCarousel Lite (24)(6)jCarousel (25)(7)Spacegallery-Jquery (25)(8)jQuery Slider Gallery (25)(9)jQuery Cycle Plugin (26)(10)Zoomimage (26)(11)prettyPhoto (27)(12)ThickBox (28)(13)Galleria (28)(14)jQuery Flash Plugin (29)(15)jQuery.SerialScroll (29)(16)InnerFade (30)(17)NyroModal (30)(18)CrossSlide (31)(19)Magnify (31)(20)Img Notes (32)(21)FancyZoom (32)(22)Jcrop (33)(23)Galleriffic (33)(24)Image Upload and Auto Crop (34)(25)prettyGallery (34)(26)jQuery.popeye (34)(27)s3Slider (35)(28)Pirobox (36)(29)Simple Controls Gallery (36)(30)Agile Carousel (36)(31)jQuery Plugin-Page Peel (37)(32)Easy Slider (37)(33)imgPreview (38)(34)Jquery Fade In.Fade Out (38)(35)Captify (38)(36)jParallax (39)(37)jQuery---运用图片预加载技术打造幻灯片 (40)(38)jQuery pageSlide (40)(39)Creating a Slick Auto-Playing Featured Content Slider (41)(40)Portfolio Layout Idea Using jQuery (41)(41)jQuery---图片先模糊后清楚 (42)(42)使用jQuery实现网页报纸 (42)(43)jQuery购物网站产品展示. (42)(44)Gallerific (43)(45)ZoomImage (44)(46)EasySlider (44)(47)The Slider from Barack Obama’s website (45)(48)CodaSlider (45)(50)Beautiful Slider 热点图书： (46)(51)LoopedSlider (46)(52)SpaceGallery (47)(53)jQuery Popeye (47)(54)Noobslide 热点图书： (48)(55)Accessible News Slider 热点图书： (48)(56)SmoothGallery 热点图书： (48)(57)jQuery Multimedia Portfolio (49)(58)s3Slider (49)(59)fxMarquee (49)(60)商品放大镜效果 (50)(61)PageSlide (51)64.不错的图片分类展示或者文字展示效果 (53)67.利用z-index做的图片展示效果 (54)4.自动填充类 (54)（1）AutoComplete-JQuery (54)（2）Facebook like Autocomplete (55)（3）jQuery Autocomplete Mod (55)（4）jqac (55)（5）jQuery Tag Suggestion (55)（6）Autocomplete-jQuery ajax (55)（7）jQuery.Suggest (56)（8）Autocomplete- jQuery plugin (56)（9）jQuery plugin: Autocomplete (56)（10）jSuggest (56)（11）jQuery Live Ajax Search Plug-in (57)（12）ddcombobox (57)5.分页类 (59)（1）jQuery Pagination (59)（2）pager jQuery plug-in (59)（3）JQuery Pager (60)6.编辑器类 (60)（1）jwysiwyg (60)（2）Damn Small Rich Text Editor (60)(3)xhEditor (61)7.表格类 (61)(1)Flexigrid (61)(2)Ingrid (61)(3)jQuery Grid (62)(4)tableHover (62)(5)JQuery.Resizer (63)(6)tablesorter (63)(7)csv2table (63)(8)tableFormSynch (64)8.色彩选择器类 (64)(1) Farbtastic (64)9.数据验证类 (66)1. jQuery plugin: Validation (66)2. Masked Input Plugin (66)3 jVal (67)10.报表类 (67)1 (67)2. Flot (67)3. jQchart (68)4 jquery.sparkline (68)5. jQuery Google Charts (演示地址) (69)6. jqPlot (演示地址) (69)11.上传类 (69)1. jqUploader (69)2. jQuery Multiple File Upload Plugin (69)3. jQuery: Ajax file upload (69)12.日期时间类 (70)1. jQuery UI Datepicker (70)2. Date Picker (70)3. Date Range Picker (70)13.圆角效果类 (71)1. jQuery Corner (71)2. JQuery Curvy Corners (71)3. jQuery Corner (72)4. jQuery Corners (72)14.评价类 (73)（1）Creating a Dynamic Poll with jQuery and PHP (73)（3） jQuery Ajax Rater Plugin (74)4. Star Rating widget (74)5. jQuery Star Rating Plugin (74)6. Ajax Poll (74)7.jQuery 投票调查组件 (75)15.虚拟键盘类 (76)1 (76)2.jQuery 虚拟键盘 (77)3.Virtual keyboard 虚拟键盘 (77)16.Form元件扩展 (77)（1）bobox (77)（2）jquery button:对按钮的扩展 (78)(3)ContextMenu (78)（4） (78)（5）在链接旁边加一个小图标效果 (79)6 jNice (79)7. jQuery calculate (79)8. jQuery select box (79)9. prettyCheckboxes (80)12. mcDropdown jQuery Plug-in (81)13. Create A Slider From A Select Box (81)14. TextArea Resizer (81)15. jQuery MultiSelect (82)16. Editable(jQuery Editable Plugin) (82)17. NicejForm (82)18. jScrollPane (83)19.利用jQuery制作类似skype的按钮效果. (83)20.jCheckbox: (83)（21）jQuery asmSelect 感谢博览群书友情提供 (84)17.游戏类 (84)1.连连看 (84)18.代码高亮类 (84)1. beautyOfCode (演示地址) (84)2. Chili (演示地址) (84)3. Highlight plugin (演示地址) (85)1.导航类(1)Horizontal accordion: jQuery基于jQuery开发，非常简单的水平方向折叠控件。

Jquery的全解析

JQuery的全解析1. addClass(class)HTML的代码：<p>Hello</p>JQuery的代码：$(“p”).addClass(“select”) 结果<p class=”select”>Hello</p>实例向第一个P元素添加一个类：$(“button”).click(function(){$(“p:first”).addClass(“intro”);})2. attr()方法一、attr(name):取得第一个匹配元素的属性值。

通过这个方法可以方便地从第一个匹配元素中获取一个属性的值。

如果元素没有相应属性，则返回undefined 。

其中name为string.HTML文本：<img src=”a.jpg”/>我们可以用attr获得img元素的src属性,具体用法如下:$(function(){Var imgSrc=$(“img”).attr(“src”);alert(“imgSrc”);})二、attr(key,value):为所有匹配的元素设置一个属性值。

key为string属性名,value 为object属性值.HTML文本：<img />Jquery：$(function(){$(“img”).attr(…src‟,‟a.jpg‟); //文件中显示：<img src=”a.jpg”/>})三．attr(properties):这是一种在所有匹配元素中批量设置很多属性的最佳方式。

注意，如果你要设置对象的class属性，你必须使用’className’ 作为属性名。

或者你可以直接使用.addClass( class ) 和 .removeClass( class ). HTML文本：<img/>Jquery: $(function(){$(“img”).attr({src:“a.jpg”，title: “aaa”，className: “filter”});})removeAttr的用法:$(function(){$(“img”).removeAttr(“title”);})3：hasClass(class)方法：检查第一个P元素是否含有intro类$(function(){$(“button”).click(function(){alert($(“p:first”).hasClass(“intro”));})})4：HTML()的用法$(”元素名称”).html(); 获得该元素内的内容（元素，文本等）$(”元素名称”).html(”<b>new stuff</b>”); 给某元素设置内容5：removeClass()的用法$(“元素名称”).removeClass(“class”)给某元素删除指定的样式$(“button”).click(function(){If($(this).hasClass(“select”)){$(this).removeClass(“select”);}else{$(this).addClass(“select”);}Return false;})6：Text()的用法：$(“元素名称”).text().获取该元素的文本。

JQuery核心用法

JQuery快速入门快速入门
讲座内容
1、jQuery是什么、是什么 2、jQuery核心函数、核心函数 3、jQuery对象访问、对象访问 4、jQuery选择器使用、选择器使用 5、 jQuery属性的使用、属性的使用 6、jQuery筛选、筛选
官方解释：官方解释： jQuery是一个以前未曾有过的是一个以前未曾有过的JavaScript库。是一个以前未曾有过的库他快速、简洁，能够很轻易地处理HTML文档、控制事件、给页面添文档、他快速、简洁，能够很轻易地处理文档控制事件、加动画和Ajax效果。效果。加动画和效果 jQuery是为了改变是为了改变JavaScript的编写方式而设计的。的编写方式而设计的。是为了改变的编写方式而设计的他适合所有人：设计师、开发人员、极客、商业应用... 他适合所有人：设计师、开发人员、极客、商业应用体积小：压缩版），精简版），体积小：26.5KB（1.2.1压缩版），（压缩版），45.3KB（1.2.1精简版），（精简版 78.6KB（1.2.1完整版）...20.7KB（1.1.2压缩版），完整版）压缩版），（完整版（压缩版），57.9KB（1.1.2 （完整版）完整版）兼容性：支持CSS 1-3和基本的和基本的XPath 兼容性：支持和基本的跨浏览器：跨浏览器：IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+（向后兼容）（向后兼容）
对象，函数。如果你想得到 jQuery对象，可以使用 $(this) 函数。对象 jQuery 代码代码: $("img").each(function(){ $(this).toggleClass("example"); });

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

特别说明
此资料来自豆丁网(http://www.docin.com/)
您现在所看到的文档是使用下载器所生成的文档
此文档的原件位于

感谢您的支持
抱米花
http://blog.sina.com.cn/lotusbaob

http://www.docin.com/p-48313051.html