1.jQuery安装 可以通过多种方法在网页中添加 jQuery。 您可以使用以下方法________________________________________ 下载 jQuery 有两个版本的 jQuery 可供下载：1.jQuery安装 可以通过多种方法在网页中添加 jQuery。 您可以使用以下方法________________________________________ 下载 jQuery 有两个版本的 jQuery 可供下载： Production version --用于实际的网站中，已经倍精简和压缩。 Development version --用于测试和开发，未被压缩 以上两个版本都可以从 jquery.com 中下载。 jQuery 库是一个 JavaScript 文件，您可以使用 HTML 的 <script> 标签引用它： <head> <script src="jquery-1.10.2.min.js"></script> </head> 提示： 将下载的文件放在网页的同一目录下，就可以使用jQuery。 您是否很疑惑为什么我们没有在标签script中使用 type="text/javascript" ？ 在 HTML5 中，不必那样做了。JavaScript 是 HTML5 以及所有现代浏览器中的默认脚本语言！ 2.jquery语法 jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作。 基础语法： $(selector).action() • 美元符号定义 jQuery • 选择符（selector）"查询"和"查找" HTML 元素 • jQuery 的 action() 执行对元素的操作 实例: $(this).hide() - 隐藏当前元素 $("p").hide() - 隐藏所有 <p> 元素 $("p.test").hide() - 隐藏所有 class="test" 的 <p> 元素 $("#test").hide() - 隐藏所有 id="test" 的元素 • 你对 CSS 选择器熟悉吗？ jQuery 使用的语法是 XPath 与 CSS 选择器语法的组合。在本教程接下来的章节，您将学习到更多有关选择器的语法。 文档就绪事件 您也许已经注意到在我们的实例中的所有 jQuery 函数位于一个 document ready 函数中： $(document).ready(function(){ // 开始写 jQuery 代码... }); 这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码。 如果在文档没有完全加载之前就运行函数，操作可能失败。下面是两个具体的例子： • 试图隐藏一个不存在的元素 • 获得未完全加载的图像的大小 提示：简洁写法（与以上写法效果相同）: $(function(){ // 开始写 jQuery 代码... }); 以上两种方式你可以选择你喜欢的方式实现文档就绪后执行 jQuery 方法。 3.jquery选择器 jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。 jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"（或选择）HTML 元素。 它基于已经存在的 CSS 选择器，除此之外，它还有一些自定义的选择器。 jQuery 中所有选择器都以美元符号开头：$()。 元素选择器 jQuery 元素选择器基于元素名选取元素。 在页面中选取所有 <p> 元素: $("p") 实例 用户点击按钮后，所有 <p> 元素都隐藏： 实例 $(document).ready(function(){ $("button").click(function(){ $("p").hide(); }); }); #id 选择器 jQuery #id 选择器通过 HTML 元素的 id 属性选取指定的元素。 页面中元素的 id 应该是唯一的，所以您要在页面中选取唯一的元素需要通过 #id 选择器。 通过 id 选取元素语法如下： $("#test") 实例 当用户点击按钮后，有 id="test" 属性的元素将被隐藏： 实例 $(document).ready(function(){ $("button").click(function(){ $("#test").hide(); }); }); .class 选择器 jQuery 类选择器可以通过指定的 class 查找元素。 语法如下： $(".test") 实例 用户点击按钮后所有带有 class="test" 属性的元素都隐藏： 实例 $(document).ready(function(){ $("button").click(function(){ $(".test").hide(); }); }); 更多实例 语法 描述 $("*") 选取所有元素 $(this) 选取当前 HTML 元素 $("p.intro") 选取 class 为 intro 的 <p> 元素 $("p:first") 选取第一个 <p> 元素 $("ul li:first") 选取第一个 <ul> 元素的第一个 <li> 元素 $("ul li:first-child") 选取每个 <ul> 元素的第一个 <li> 元素 $("[href]") 选取带有 href 属性的元素 $("a[target='_blank']") 选取所有 target 属性值等于 "_blank" 的 <a> 元素 $("a[target!='_blank']") 选取所有 target 属性值不等于 "_blank" 的 <a> 元素 $(":button") 选取所有 type="button" 的 <input> 元素 和 <button> 元素 $("tr:even") 选取偶数位置的 <tr> 元素 $("tr:odd") 选取奇数位置的 <tr> 元素 独立文件中使用 jQuery 函数 如果您的网站包含许多页面，并且您希望您的 jQuery 函数易于维护，那么请把您的 jQuery 函数放到独立的 .js 文件中。 当我们在教程中演示 jQuery 时，会将函数直接添加到 <head> 部分中。不过，把它们放到一个单独的文件中会更好，就像这样（通过 src 属性来引用文件）： 实例 <head> <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"> </script> <script src="my_jquery_functions.js"></script> </head> 4.jquery常用事件 常见 DOM 事件： 鼠标事件 键盘事件 表单事件 文档/窗口事件 click keypress submit load dblclick keydown change resize mouseenter keyup focus scroll mouseleave blur unload hover() hover()方法用于模拟光标悬停事件。 当鼠标移动到元素上时，会触发指定的第一个函数(mouseenter);当鼠标移出这个元素时，会触发指定的第二个函数(mouseleave)。 实例 $("#p1").hover( function(){ alert("你进入了 p1!"); }, function(){ alert("拜拜! 现在你离开了 p1!"); } ); focus() 当元素获得焦点时，发生 focus 事件。 当通过鼠标点击选中元素或通过 tab 键定位到元素时，该元素就会获得焦点。 focus() 方法触发 focus 事件，或规定当发生 focus 事件时运行的函数： 实例 $("input").focus( function(){ $(this).css("background-color","#cccccc"); } ); blur() 当元素失去焦点时，发生 blur 事件。 blur() 方法触发 blur 事件，或规定当发生 blur 事件时运行的函数： 实例 $("input").blur( function(){ $(this).css("background-color","#ffffff"); } ); click() click() 方法是当按钮点击事件被触发时会调用一个函数。 该函数在用户点击 HTML 元素时执行。 在下面的实例中，当点击事件在某个 <p> 元素上触发时，隐藏当前的 <p> 元素： 实例 $("p").click(function(){ $(this).hide(); }); dblclick() 当双击元素时，会发生 dblclick 事件。 dblclick() 方法触发 dblclick 事件，或规定当发生 dblclick 事件时运行的函数： 实例 $("p").dblclick(function(){ $(this).hide(); }); mouseenter() 当鼠标指针进入元素时，会发生 mouseenter 事件。 mouseenter() 方法触发 mouseenter 事件，或规定当发生 mouseenter 事件时运行的函数： 实例 $("#p1").mouseenter(function(){ alert('您的鼠标移到了 id="p1" 的元素上!'); }); mouseleave() 当鼠标指针离开元素时，会发生 mouseleave 事件。 mouseleave() 方法触发 mouseleave 事件，或规定当发生 mouseleave 事件时运行的函数： 实例 $("#p1").mouseleave(function(){ alert("再见，您的鼠标离开了该段落。"); }); mousedown() 当按下鼠标按键时，会发生 mousedown 事件。 mousedown() 方法触发 mousedown 事件，或规定当发生 mousedown 事件时运行的函数： 实例 $("#p1").mousedown(function(){ alert("鼠标在该段落上按下！"); }); mouseup() 当松开鼠标按钮时，会发生 mouseup 事件。 mouseup() 方法触发 mouseup 事件，或规定当发生 mouseup 事件时运行的函数： 实例 $("#p1").mouseup(function(){ alert("鼠标在段落上松开。"); }); 5.jqueryAjax jQuery load() 方法 jQuery load() 方法是简单但强大的 AJAX 方法。 load() 方法从服务器加载数据，并把返回的数据放入被选元素中。 语法: $(selector).load(URL,[param],[callback]); Url:请求加载的文件路径 param:请求参数 Callback:是loda()方法加载完毕后执行的函数的名称（注意先执行该函数后再在页面展示load()加载的数据） 这是示例文件（"a.txt"）的内容： <h2>jQuery AJAX 是个非常棒的功能！</h2> <p id="p1">这是段落的一些文本。</p> 下面的例子会把文件 "a.txt" 的内容加载到指定的 <div> 元素中： 注意a.txt和该jsp在同一工程路径下的url写法 $.get()方法 $.get() 方法通过 HTTP GET 请求从服务器上请求数据。 语法： $.get(URL,callback); Url:请求加载的文件路径 callback是一个回调函数,get请求结束后执行该函数 Get请求的参数直接跟在URL后面所以没有请求参数 下面的例子使用 $.get() 方法从服务器上的一个文件中取回数据： <head>... <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.js"></script> <script type="text/javascript"> $(function(){ $("button").click(function(){ $.get("${pageContext.request.contextPath}/jquery1.action",function(data){ alert(data); }); }); }); </script> </head> <body> <div id="d1"> <h1>这是用jquery进行ajax异步交互的demo1</h1> </div> <button>读取交互数据</button> </body> $.post()方法 $.post() 方法通过 HTTP POST 请求从服务器上请求数据。 语法: $.post(URL,param,callback); Url:请求加载的文件路径 Param：请求参数 callback是一个回调函数,post请求结束后执行该函数 下面的例子使用 $.post() 连同请求一起发送数据： 6.表格选中当前行的checkbox该行变色 $(function() { $(".checkbox").bind("click", function() { if ($(this).is(":checked")) { $(this).attr("checked", true); $(this).parent().parent().css("background-color", "gray"); } else { $(this).attr("checked", false); $(this).parent().parent().css("background-color", "white"); } }); }); 7.jquery日历模版 7.1html代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 0 Transitional//EN" "http://www.worg/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.worg/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>日历</title> <script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript" src="jquery.calendar.js"></script> <style type="text/css"> *{margin:0;padding:0;font-family:微软雅黑} input{margin-top:20px;margin-left:20px;border:1px solid #AFAFAF; line-height:25px;font-size:14pt;width:300px;height:40px; border-color:#535353} </style> </head> <body> <input type="text" readonly="readonly" class="startTime"/> <input type="text" readonly="readonly" class="endTime" /> <input type="text" readonly="readonly" class="testTime" /> </body> <script type="text/javascript"> //默认皮肤 $(".startTime").showCalendar(); //自定义深蓝皮肤 $(".endTime").showCalendar({ className:'endDate_', bgColor:"#3399CC", //日历背景色 bgColor:"#3399CC", topColor:"#3399CC", //日历上标色 topColor:"#3399CC" weekBgColor:"#3399CC", //星期栏颜色 weekBgColor:"#3399CC" weekFontColor:"#FFFFFF", //星期文字颜色 weekFontColor:"#FFFFFF" innerBorder:"0", // innerBorder:"0" ymFontColor:'#FFFFFF', //日历上标栏文字颜色 ymFontColor:'#FFFFFF' ymBgColor:'#33AADD', //日历上标栏button颜色（大） ymHoverBgColor:'#00CCCC', // 鼠标靠近日期时文字的背景色 ymHoverBgColor:'#00CCCC' arrowColor:"#FFFFFF", //日历上标栏button颜色（小） arrowColor:"#FFFFFF" noThisMonthFontColor:'#BFBFBF', //日历当中无关日期的文字颜色 noThisMonthFontColor:'#BFBFBF' thisMonthFontColor:'#FFFFFF', //日历当中日期的文字颜色 thisMonthFontColor:'#FFFFFF' thisMonthBgColor:'#3399CC', //日历当中日期的文字背景颜色 thisMonthBgColor:'#3399CC' dateHoverFontColor:'#FFFFFF', //鼠标靠近日期时当前文字颜色 dateHoverFontColor:'#FFFFFF' dateHoverBgColor:'gray', //鼠标靠近日期时当前文字背景颜色 dateHoverBgColor:'#00CCCC' btnBorder:'0', //日历下方button边框线粗细 btnBorder:'0' btnBgColor:'#3399CC', //日历下方button背景色 btnBgColor:'#3399CC' btnFontColor:'#FFFFFF', //日历下方button文字颜色 btnFontColor:'#FFFFFF' btnHoverBgColor:'gray', //鼠标靠近日历下方button背景色 btnHoverBgColor:'#00CCCC' btnHoverFontColor:'#FFFFFF' //鼠标靠近日历下方button文字颜色 btnHoverFontColor:'#FFFFFF' }); //自定义大红皮肤 $(".testTime").showCalendar({ className:'testDate_', innerBorder:"0", topColor:"#FF0000", ymFontColor:'#FFFFFF', ymBgColor:'#FF0000', ymHoverBgColor:'#FF9900', arrowColor:"#FFFFFF", weekBgColor:"#FFFFFF", weekFontColor:'#000000', noThisMonthFontColor:'#AFAFAF', thisMonthFontColor:'#000000', dateHoverFontColor:'#FFFFFF', dateHoverBgColor:'#FF7700', btnBorder:'0', btnBgColor:'#FF0000', btnFontColor:'#FFFFFF', btnHoverBgColor:'#FF7700', btnHoverFontColor:'#FFFFFF' }); </script> </html> 7.2 js代码 /** * jquery日历插件jqyery.calendar.js * @author:xuzengqiang * @since :2015-2-4 15:31:39 **/ (function($){ jQuery.fn.extend({ showCalendar:function(options){ var defaultOptions = { //class名称 className:'strongCalendar', //日历格式'yyyy-MM-dd'('yyyy-MM-dd','yyyy年MM月dd日') format:'yyyy-MM-dd', //高度,默认220px height:220, //宽度:默认与文本框宽度相同 width:$(this).innerWidth(), //日历框离文本框高度 marginTop:1, //浮层z-index zIndex:99, //间隙距离,默认为5px spaceWidth:8, //字体大小,默认9pt fontSize:10, //日历背景色 bgColor:'#FFFFFF', //默认浅灰色 borderColor:"#AFAFAF", //顶部背景颜色,默认为淡灰色 topColor:'#FFFFFF', //当前年月字体颜色 ymFontColor:'#535353', //年月份操作背景色 ymBgColor:'#FFFFFF', //年月份移上背景色 ymHoverBgColor:'#EFEFEF', //箭头颜色 arrowColor:'#535353', //里层边框 innerBorder:'1px solid #AFAFAF', //表格边框 tableBorder:'0px solid #AFAFAF', //星期背景颜色 weekBgColor:'#EFEFEF', //星期字体颜色 weekFontColor:'#535353', //上个月和下个月日期的字体颜色 noThisMonthFontColor:'#CFCFCF', //这个月的日期字体颜色 thisMonthFontColor:'#535353', //这个的日期背景颜色 thisMonthBgColor:'#FFFFFF', //日期移上时字体颜色 dateHoverFontColor:'#3399CC', //日期移上时字体颜色 dateHoverBgColor:'#EFEFEF', //button边框 btnBorder:'1px solid #AFAFAF', //button背景色 btnBgColor:'#FFFFFF', //button字体颜色 btnFontColor:'#535353', //button鼠标移上颜色 btnHoverBgColor:'#EFEFEF', //button鼠标移上字体颜色 btnHoverFontColor:'#3399CC' }; var settings = jQuery.extend(defaultOptions,options || {}), $body = $("body"), date = new Date(), currentYear = date.getFullYear(), currentMonth = date.getMonth(), monthDay = [], //行高 lineHeight = parseInt(settings.height-4*settings.spaceWidth)/9, $calendar, //触发事件对象 $target = $(this), current ; //对于小于10的数字前+0 Number.prototype.addZero = function(){ return this<10?"0"+this:this; }; var Calendar = { //星期列表 weeks : ['日','一','二','三','四','五','六'], //每月的天数 months : [31,0,31,30,31,30,31,31,30,31,30,31], //初始化日历 loadCalendar:function(){ $body.append("<div class="+settings.className+"></div>"); $calendar = $("."+settings.className); //新增核心html $calendar.append(Calendar.innerHTML()); //样式加载 Calendar.styleLoader(); //核心日历加载 Calendar.loaderDate(currentYear,currentMonth); //事件绑定 Calendar.dateEvent(); }, //日历核心HTML innerHTML:function(){ var htmlContent = {}; htmlContent = "<div class='cal_head'>"+ <!--头部div层start--> "<div class='year_oper oper_date'>"+ "<div class='year_sub operb'><b class='arrow aLeft'/></div>"+ "<div class='year_add operb'><b class='arrow aRight'/></div>"+ "<span class='current_year'></span>"+ <!--位置互换下,考虑到span后面float:right会换行--> "</div>"+ "<div class='month_oper oper_date'>"+ "<div class='month_sub operb'><b class='arrow aLeft'/></div>"+ "<div class='month_add operb'><b class='arrow aRight'/></div>"+ "<span class='current_month'></span>"+ "</div>"+ "</div>"+ <!--头部div层end--> "<div class='cal_center'><table cellspacing='0'></table></div>"+ "<div class='cal_bottom'>"+ <!--底部div层start--> "<button class='clear_date'>清空</button>"+ "<button class='today_date'>今天</button>"+ "<button class='confirm_date'>确定</button>"+ "</div>";<!--底部div层end--> return htmlContent; }, //日历样式加载 styleLoader:function(){ $calendar = $("."+settings.className); //总弹出层样式设置 $calendar.css({"border-width":"1px", "border-color":settings.borderColor, "background-color":settings.bgColor, "border-style":"solid", "height":settings.height, "width":settings.width, "z-index":settings.zIndex, "font-size":settings.fontSize+"pt" }); Calendar.setLocation(); //日历顶部样式设置 var $calHead=$calendar.find(".cal_head"), $operDate=$calendar.find(".oper_date"), $arrow=$calHead.find(".arrow"), $center=$calendar.find(".cal_center"), $ctable=$center.find("table"), //箭头大小 arrowWidth = 6, $calBottom = $calendar.find(".cal_bottom"); $calHead.css({"height":lineHeight+2*settings.spaceWidth, "background-color":settings.topColor }); $operDate.css({"margin-top":settings.spaceWidth, "margin-left":settings.spaceWidth, "float":"left", "border":settings.innerBorder, "text-align":"center" }); //设置operDate包含边框的实际宽度 $operDate.outerWidth(($calHead.width()-3*settings.spaceWidth)/2); $operDate.outerHeight(lineHeight); $operDate.find(".operb") .css({"width":"20px", "background":settings.ymBgColor, "height":$operDate.innerHeight(), "cursor":"pointer" }); $operDate.find(".year_sub,.month_sub") .css({"float":"left","border-right":settings.innerBorder}); $operDate.find(".year_add,.month_add") .css({"float":"right","border-left":settings.innerBorder}); $operDate.find("span") .css({"color":settings.ymFontColor, "line-height":$operDate.height()+"px" }); //设置箭头样式 $operDate.find(".aLeft") .arrow({"direction":"left", "width":arrowWidth, "height":arrowWidth*2, "color":settings.arrowColor }); $operDate.find(".aRight") .arrow({"direction":"right", "width":arrowWidth, "height":arrowWidth*2, "color":settings.arrowColor }); $arrow.css({ "margin":"0 auto", "margin-top":parseInt($operDate.innerHeight())/2-arrowWidth }); //加载中间表格样式 $center.css({ "border":settings.innerBorder, "margin-left":settings.spaceWidth, "overflow":'hidden' }); //加载中间表格实际宽度 $center.outerWidth($calendar.width()-2*settings.spaceWidth); $center.height(lineHeight*7); $ctable.find("td").css({"text-align":"center"}); $calBottom.css({"margin-right":settings.spaceWidth}); $calBottom.find("button") .css({"border":settings.btnBorder, "background":settings.btnBgColor, "color":settings.btnFontColor, "margin-top":settings.spaceWidth, "margin-left":settings.spaceWidth, "float":"right","width":"20%" }); $calBottom.find("button").outerHeight(lineHeight); //去除button链接的虚线框 $("."+settings.className+" button").focus(function(){this.blur()}); $operDate.find(".operb").hover(function(){ $(this).css("background",settings.ymHoverBgColor); },function(){ $(this).css("background",settings.ymBgColor); }); $calBottom.find("button").hover(function(){ $(this).css({"background":settings.btnHoverBgColor,"color":settings.btnHoverFontColor}); },function(){ $(this).css({"background":settings.btnBgColor,"color":settings.btnFontColor}); }); }, //事件绑定 dateEvent:function(){ var $calendar = $("."+settings.className); $calendar.find(".year_add").click(function(){Calendar.yearAdd();}); $calendar.find(".year_sub").click(function(){Calendar.yearSub();}); $calendar.find(".month_add").click(function(){Calendar.monthAdd();}); $calendar.find(".month_sub").click(function(){Calendar.monthSub();}); $calendar.find(".confirm_date").click(function(){Calendar.confirm();}); $calendar.find(".today_date").click(function(){Calendar.getToday();}); $calendar.find(".clear_date").click(function(){Calendar.clear();}); }, //当前日期:年份和月份 date:function(){ var $calendar = $("."+settings.className); return { year:parseInt($calendar.find(".current_year").html()), month:parseInt($calendar.find(".current_month").html()) }; }, //年份自增 yearAdd:function(){ Calendar.loaderDate(Calendar.date().year+1,Calendar.date().month-1); }, //年份自减 yearSub:function(){ Calendar.loaderDate(Calendar.date().year-1,Calendar.date().month-1); }, //月份自增 monthAdd:function(){ var year = Calendar.date().year, month = Calendar.date().month; if(month==12) { month=1; year=year+1; } else { month=month+1; } Calendar.loaderDate(year,month-1); }, //月份自减 monthSub:function(){ var year = Calendar.date().year, month = Calendar.date().month; if(month==1) { month=12; year=year-1; } else { month=month-1; } Calendar.loaderDate(year,month-1); }, //日期选择 dateChoose:function($object){ var year = Calendar.date().year, month = Calendar.date().month; //上一个月 if($object.hasClass("pre_month_day")) { if(month == 1) { year = year-1; month = 12; } else { month = (month-1).addZero(); } //当前月 } else if($object.hasClass("this_month_day")) { month = month.addZero(); //下一个月 } else { if(month == 12) { month = "01"; year = year + 1; } else { month = (month+1).addZero(); } } current.val(year+"-"+month+"-"+$object.text()); }, //确定事件 confirm:function(){ Calendar.destory(); }, //是否是闰年 isLeapYear:function(year){ if((year%4==0 && year0!=0) || (year@0==0)) { return true; } return false; }, //指定年份二月的天数 februaryDays:function(year){ if(typeof year !== "undefined" && parseInt(year) === year) { return Calendar.isLeapYear(year) ? 29:28; } return false; }, getWeek:function(num){ return Calendar.weeks[num]; }, //获取指定月份[0,11]的天数 getMonthDay:function(year,month){ if(month === 1){ return Calendar.februaryDays(year); } month=(month===-1)?11:month; return Calendar.months[month]; }, //今天 getToday:function(){ var date = new Date(), year = date.getFullYear(), month = (date.getMonth()+1).addZero(), day = date.getDate().addZero(); current.val(year+"-"+month+"-"+day); Calendar.destory(); }, //清空 clear:function(){ current.val(""); Calendar.destory(); }, //设置日历位置 setLocation:function(){ $calendar = $("."+settings.className); var left = current.offset().left, top = current.offset().top + current.innerHeight() + settings.marginTop; $calendar.css({"position":"absolute","left":left,"top":top}); }, //关闭日历 destory:function(){ $("."+settings.className).empty().remove(); }, //初始化日历主体内容 loaderDate:function(year,month){ //初始化日期为当前年当前月的1号,获取1号对应的星期 var oneWeek=new Date(year,month,1).getDay(), $calendar = $("."+settings.className), $calTable = $calendar.find("table"), //这个月天数 thisMonthDay = Calendar.getMonthDay(year,month), //获取上一个的天数 preMonthDay; //清空日期列表 $calTable.html(""); $calendar.find(".current_year").text(year+"年"); $calendar.find(".current_month").text((month+1)+"月"); if(oneWeek == 0) oneWeek = 7; if(i==0) { preMonthDay = Calendar.getMonthDay(year-1,11); } else { preMonthDay = Calendar.getMonthDay(year,month-1); } var start = 1, end = 1; for(var i=0;i<7;i++) { var dayHTML = ""; if(i==0) { $calTable.append("<tr class='week_head'><tr>"); } for(var j=1;j<=7;j++) { //设置星期列表 if(i==0) { $calTable.find(".week_head").append("<td>"+Calendar.getWeek(j-1)+"</td>"); } else { if((i-1)*7+j<=oneWeek) { //从第二行开始设置值 dayHTML+="<td class='pre_month_day'>"+(preMonthDay-oneWeek+j)+"</td>"; } else if((i-1)*7+j<=thisMonthDay+oneWeek ){ var result=(start++).addZero(); dayHTML+="<td class='this_month_day'>"+result+"</td>"; } else { var result=(end++).addZero(); dayHTML +="<td class='next_month_day'>"+result+"</td>"; } } } if(i>0){ $calTable.append("<tr>"+dayHTML+"</tr>"); } } Calendar.tableStyle(); }, //表格样式初始化 tableStyle:function(){ //表格中单元格的宽度 var $center = $calendar.find(".cal_center"), $calTable = $calendar.find("table"), tdWidth = parseFloat($center.width())/7; $calTable.find("td").css({"width":tdWidth,"text-align":"center", "color":"#AFAFAF", "background":settings.thisMonthBgColor,"cursor":"pointer", "color":settings.thisMonthFontColor, "border-top":settings.tableBorder, "border-right":settings.tableBorder}); $calTable.find(".week_head td") .css({"background":settings.weekBgColor, "cursor":"auto","border":"0", "color":settings.weekFontColor }); $calTable.find(".pre_month_day,.next_month_day") .css({"color":settings.noThisMonthFontColor,"background":"transparent"}); //去除最右侧表格的右边框 $calTable.find("td:nth-child(7n)").css({"border-right":0}); $calTable.find("td").outerHeight(lineHeight); $calTable.find("tr[class!=week_head] td").hover(function(){ $(this).css({"background":settings.dateHoverBgColor, "color":settings.dateHoverFontColor }); },function(){ $(this).css({"background":settings.thisMonthBgColor}); if($(this).hasClass("this_month_day")) { $(this).css({"color":settings.thisMonthFontColor}); } else { $(this).css({"color":settings.noThisMonthFontColor}); } }).click(function(){Calendar.dateChoose($(this));}); } }; return this.each(function(){ $target.click(function(){ //触发对象,请写在点击事件中,不然会做为全局变量! current = $(this); //如果没有生成日历元素 if($("."+settings.className).length == 0) { Calendar.loadCalendar(); } }); //事件触发对象 $(document).click(function(event){ var $calendar = $("."+settings.className) if(!$target.triggerTarget(event) && !$calendar.triggerTarget(event)) { Calendar.destory(); } }); }); }, /** *描述:生成指定箭头样式 **/ arrow:function(options){ var defaultOptions = { color:'#AFAFAF', height:20, width:20, //方向:默认向上'top',供选择['up','bottom','left','right'] direction:'top' }; var settings = jQuery.extend(defaultOptions,options||{}), current = $(this); function loadStyle(){ current.css({"display":"block","width":"0","height":"0"}); if(settings.direction === "top" || settings.direction === "down") { current.css({ "border-left-width":settings.width/2, "border-right-width":settings.width/2, "border-left-style":"solid", "border-right-style":"solid", "border-left-color":"transparent", "border-right-color":"transparent" }); if(settings.direction === "top") { current.css({ "border-bottom-width":settings.height, "border-bottom-style":"solid", "border-bottom-color":settings.color }); } else { current.css({ "border-top-width":settings.height, "border-top-style":"solid", "border-top-color":settings.color }); } } else if(settings.direction === "left" || settings.direction === "right") { current.css({ "border-top-width":settings.height/2, "border-bottom-width":settings.height/2, "border-top-style":"solid", "border-bottom-style":"solid", "border-top-color":"transparent", "border-bottom-color":"transparent" }); if(settings.direction === "left") { current.css({ "border-right-width":settings.width, "border-right-style":"solid", "border-right-color":settings.color }); } else { current.css({ "border-left-width":settings.width, "border-left-style":"solid", "border-left-color":settings.color }); } } } return this.each(function(){ loadStyle(); }); }, //触发事件是否是对象本身 triggerTarget:function(event){ //如果触发的是事件本身或者对象内的元素 return $(this).is(event.target) || $(this).has(event.target).length > 0; }, //皮肤 skin:function(){ } }); })(jQuery); Production version --用于实际的网站中，已经倍精简和压缩。 Development version --用于测试和开发，未被压缩 以上两个版本都可以从 jquery.com 中下载。 jQuery 库是一个 JavaScript 文件，您可以使用 HTML 的 <script> 标签引用它： <head> <script src="jquery-1.10.2.min.js"></script> </head> 提示： 将下载的文件放在网页的同一目录下，就可以使用jQuery。 您是否很疑惑为什么我们没有在标签script中使用 type="text/javascript" ？
在 HTML5 中，不必那样做了。JavaScript 是 HTML5 以及所有现代浏览器中的默认脚本语言！ 2.jquery语法 jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作。 基础语法： $(selector).action() • 美元符号定义 jQuery • 选择符（selector）"查询"和"查找" HTML 元素 • jQuery 的 action() 执行对元素的操作 实例: $(this).hide() - 隐藏当前元素 $("p").hide() - 隐藏所有 <p> 元素 $("p.test").hide() - 隐藏所有 class="test" 的 <p> 元素 $("#test").hide() - 隐藏所有 id="test" 的元素 • 你对 CSS 选择器熟悉吗？
jQuery 使用的语法是 XPath 与 CSS 选择器语法的组合。在本教程接下来的章节，您将学习到更多有关选择器的语法。 文档就绪事件 您也许已经注意到在我们的实例中的所有 jQuery 函数位于一个 document ready 函数中： $(document).ready(function(){ // 开始写 jQuery 代码... }); 这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码。 如果在文档没有完全加载之前就运行函数，操作可能失败。下面是两个具体的例子： • 试图隐藏一个不存在的元素 • 获得未完全加载的图像的大小 提示：简洁写法（与以上写法效果相同）: $(function(){ // 开始写 jQuery 代码... }); 以上两种方式你可以选择你喜欢的方式实现文档就绪后执行 jQuery 方法。 3.jquery选择器 jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。 jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"（或选择）HTML 元素。 它基于已经存在的 CSS 选择器，除此之外，它还有一些自定义的选择器。 jQuery 中所有选择器都以美元符号开头：$()。 元素选择器 jQuery 元素选择器基于元素名选取元素。 在页面中选取所有 <p> 元素: $("p") 实例 用户点击按钮后，所有 <p> 元素都隐藏： 实例 $(document).ready(function(){ $("button").click(function(){ $("p").hide(); }); }); #id 选择器 jQuery #id 选择器通过 HTML 元素的 id 属性选取指定的元素。 页面中元素的 id 应该是唯一的，所以您要在页面中选取唯一的元素需要通过 #id 选择器。 通过 id 选取元素语法如下： $("#test") 实例 当用户点击按钮后，有 id="test" 属性的元素将被隐藏： 实例 $(document).ready(function(){ $("button").click(function(){ $("#test").hide(); }); }); .class 选择器 jQuery 类选择器可以通过指定的 class 查找元素。 语法如下： $(".test") 实例 用户点击按钮后所有带有 class="test" 属性的元素都隐藏： 实例 $(document).ready(function(){ $("button").click(function(){ $(".test").hide(); }); });
更多实例 语法 描述 $("*") 选取所有元素 $(this) 选取当前 HTML 元素 $("p.intro") 选取 class 为 intro 的 <p> 元素 $("p:first") 选取第一个 <p> 元素 $("ul li:first") 选取第一个 <ul> 元素的第一个 <li> 元素 $("ul li:first-child") 选取每个 <ul> 元素的第一个 <li> 元素 $("[href]") 选取带有 href 属性的元素 $("a[target='_blank']") 选取所有 target 属性值等于 "_blank" 的 <a> 元素 $("a[target!='_blank']") 选取所有 target 属性值不等于 "_blank" 的 <a> 元素 $(":button") 选取所有 type="button" 的 <input> 元素 和 <button> 元素 $("tr:even") 选取偶数位置的 <tr> 元素 $("tr:odd") 选取奇数位置的 <tr> 元素 独立文件中使用 jQuery 函数 如果您的网站包含许多页面，并且您希望您的 jQuery 函数易于维护，那么请把您的 jQuery 函数放到独立的 .js 文件中。 当我们在教程中演示 jQuery 时，会将函数直接添加到 <head> 部分中。不过，把它们放到一个单独的文件中会更好，就像这样（通过 src 属性来引用文件）： 实例 <head> <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"> </script> <script src="my_jquery_functions.js"></script> </head> 4.jquery常用事件 常见 DOM 事件： 鼠标事件 键盘事件 表单事件 文档/窗口事件 click keypress submit load dblclick keydown change resize mouseenter keyup focus scroll mouseleave blur unload hover() hover()方法用于模拟光标悬停事件。 当鼠标移动到元素上时，会触发指定的第一个函数(mouseenter);当鼠标移出这个元素时，会触发指定的第二个函数(mouseleave)。 实例 $("#p1").hover( function(){ alert("你进入了 p1!"); }, function(){ alert("拜拜! 现在你离开了 p1!"); } ); focus() 当元素获得焦点时，发生 focus 事件。 当通过鼠标点击选中元素或通过 tab 键定位到元素时，该元素就会获得焦点。 focus() 方法触发 focus 事件，或规定当发生 focus 事件时运行的函数： 实例 $("input").focus( function(){ $(this).css("background-color","#cccccc"); } ); blur() 当元素失去焦点时，发生 blur 事件。 blur() 方法触发 blur 事件，或规定当发生 blur 事件时运行的函数： 实例 $("input").blur( function(){ $(this).css("background-color","#ffffff"); } );
click() click() 方法是当按钮点击事件被触发时会调用一个函数。 该函数在用户点击 HTML 元素时执行。 在下面的实例中，当点击事件在某个 <p> 元素上触发时，隐藏当前的 <p> 元素： 实例 $("p").click(function(){ $(this).hide(); }); dblclick() 当双击元素时，会发生 dblclick 事件。 dblclick() 方法触发 dblclick 事件，或规定当发生 dblclick 事件时运行的函数： 实例 $("p").dblclick(function(){ $(this).hide(); }); mouseenter() 当鼠标指针进入元素时，会发生 mouseenter 事件。 mouseenter() 方法触发 mouseenter 事件，或规定当发生 mouseenter 事件时运行的函数： 实例 $("#p1").mouseenter(function(){ alert('您的鼠标移到了 id="p1" 的元素上!'); }); mouseleave() 当鼠标指针离开元素时，会发生 mouseleave 事件。 mouseleave() 方法触发 mouseleave 事件，或规定当发生 mouseleave 事件时运行的函数： 实例 $("#p1").mouseleave(function(){ alert("再见，您的鼠标离开了该段落。"); }); mousedown() 当按下鼠标按键时，会发生 mousedown 事件。 mousedown() 方法触发 mousedown 事件，或规定当发生 mousedown 事件时运行的函数： 实例 $("#p1").mousedown(function(){ alert("鼠标在该段落上按下！"); }); mouseup() 当松开鼠标按钮时，会发生 mouseup 事件。 mouseup() 方法触发 mouseup 事件，或规定当发生 mouseup 事件时运行的函数： 实例 $("#p1").mouseup(function(){ alert("鼠标在段落上松开。"); }); 5.jqueryAjax jQuery load() 方法 jQuery load() 方法是简单但强大的 AJAX 方法。 load() 方法从服务器加载数据，并把返回的数据放入被选元素中。 语法: $(selector).load(URL,[param],[callback]); Url:请求加载的文件路径 param:请求参数 Callback:是loda()方法加载完毕后执行的函数的名称（注意先执行该函数后再在页面展示load()加载的数据） 这是示例文件（"a.txt"）的内容： <h2>jQuery AJAX 是个非常棒的功能！</h2> <p id="p1">这是段落的一些文本。</p> 下面的例子会把文件 "a.txt" 的内容加载到指定的 <div> 元素中： 注意a.txt和该jsp在同一工程路径下的url写法 $.get()方法 $.get() 方法通过 HTTP GET 请求从服务器上请求数据。 语法： $.get(URL,callback); Url:请求加载的文件路径 callback是一个回调函数,get请求结束后执行该函数 Get请求的参数直接跟在URL后面所以没有请求参数 下面的例子使用 $.get() 方法从服务器上的一个文件中取回数据： <head>... <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.js"></script> <script type="text/javascript"> $(function(){ $("button").click(function(){ $.get("${pageContext.request.contextPath}/jquery1.action",function(data){ alert(data); }); }); }); </script> </head> <body> <div id="d1"> <h1>这是用jquery进行ajax异步交互的demo1</h1> </div> <button>读取交互数据</button> </body> $.post()方法 $.post() 方法通过 HTTP POST 请求从服务器上请求数据。 语法: $.post(URL,param,callback); Url:请求加载的文件路径 Param：请求参数 callback是一个回调函数,post请求结束后执行该函数
