- $("#select1").change( function() {
- var id = $("#select1").val();
- if(id == 1){
- $.get('index.php', null, function(data){
- $("span").empty();
- $("span").append("<select><option>济南</opton><option>青岛 </opton><option>临沂</opton></select>");
- });
- }else{
- $.get('index.php', null, function(data){
- $("span").empty();
- $("span").append("<select><option>郑州</opton><option>安阳 </opton><option>洛阳</opton></select>");
- });
- }
- });
逻辑思路: 根据需要设置联动菜单的元素值被改变的情况,通过ajax方法传空值给自身页面,追加相应的元素,在这里是二级菜单。这里用到了jquery两个方法:change方法和empty方法。
change方法在选定标签值改变时,会被触发执行。empty方法则是将标签中html内容清空。
3.链接样式和链接内容的显示隐藏
- $(function(){
- $("li").each(function(index){
- $(this).mouseover(function(){
- id = setTimeout(function(){
- $("li.tab").removeClass('tab');
- $(this).addClass("tab");
- $("div.show").removeClass('show');
- $("#tab1 div:eq("+index+")").addClass('show');
- },300);
- }).mouseout(function(){
- clearTimeout(id);
- });
- });
- });
逻辑思路: 这里首先用到$()在其中书写函数,这里详细介绍了jquery构造函数的适用范围。通过遍历每个导航链接,当鼠标移上对应元素,首先移除所有默认选项样式,在悬浮元素加上默认选中样式。并移除当前显示样式,设置默认选项对应内容样式为显示状态。
这里的亮点在于使用了一个显示默认样式的缓动效果,用户体验更细致。
4.“显示更多(more)”功能的实现
- $(function(){
- var $hideObj = $('ul li:gt(5):not(:last)');
- $hideObj.hide();
- $('.showmore span').click(function(){
- if(!$hideObj.is(":visible")){
- $hideObj.show();
- $('.showmore span').css("background","url(./images/up.bmp) no-repeat 0 -10");
- }else{
- $hideObj.hide();
- $('.showmore span').css("background","url(./images/down.bmp) no-repeat 0 0")
- ;
- }
- });
- });
逻辑思路: 这里首先动用了选择器除去最后一个元素所有大于5的li元素选中。通过用户点击事件,判断是否显示或者隐藏,并联动修改被点击的图标。
亮点在选择器的掌控恰到好处,用jquery最基本的就要用熟选择器,这样会快速高效操作dom节点。这样也就不难理解CSS3为什么首要改革的就是选择器了,简化操作流程、正则化及语义化css选择器,使得前端工程师读和写代码更便捷。
5.文本域“剩余字数”
- $(document).ready(function(){
- var tarea = $("#init");
- tarea.focus(function(){
- $("#numtj").fadeIn(200);
- }).blur(function(){
- $("#numtj").fadeOut("slow");
- })
-
- $("#init").keyup(function() {
- var text=$("#init").val();
- var counter=text.length;
- $("#numtj var").text(110-counter);
- });
- });
逻辑思路:
逻辑非常简单,获得焦点剩余字数显示,失去焦点剩余字数消失。键盘按起计算还剩字数。
这里的亮点在于使用了fadeIn和fadeOut方法实现渐入渐出更加自然,体验更好。focus和blur事件也是针对有输入内容的元素常需处理的事件。keyup事件则与用户输入内容,实时交互有关系。
6.鼠标移动到图片放大
- var ShowImage = function() {
- xOffset = 10;
- yOffset = 30;
- $("#imglist").find("img").hover(function(e) {
- $("<img id='imgshow' src='" + this.src + "' />").appendTo("body");
- $("#imgshow")
- .css("top", (e.pageY - xOffset) + "px")
- .css("left", (e.pageX + yOffset) + "px")
- .fadeIn("fast");
- },function() {
- $("#imgshow").remove();
- });
- $("#imglist").find("img").mousemove(function(e) {
- $("#imgshow").css("top",(e.pageY-xOffset) + "px")
- .css("left", (e.pageX + yOffset) + "px");
- });
- };
逻辑思路: 这段代码的逻辑非常具有普遍性,e代表鼠标事件,鼠标属性pageX和pageY代表鼠标的坐标位置。整体的思路即是通过鼠标触发悬浮事件,显示或者移除与鼠标位置有一个偏移的图片,并通过设置mousemove事件来实时移动放大图位置。
看了以上几个例子我们会发现,事件和选择器是整体交互效果核心。所以这里有必要再精通、再精通。
7.图片轮播
- var t = 0;
- var n = 0;
- var count;
- $(document).ready(function(){
- count=$("#bannerList a").length;
- $("#bannerList a:not(:first-child)").hide();
- $("#banner li").click(function(){
- var i = $(this).text() - 1;
- n = i;
- if (i >= count){
- return;
- }
- var $a = $("#bannerList a").filter(":visible").fadeOut(500);
- $a.parent().children().eq(i).fadeIn(1000);
-
- $(this).toggleClass("show");
- $(this).siblings().removeAttr("class");
- });
-
- t = setInterval("showTime()", 3000);
- $("#banner").hover(function(){
- clearInterval(t)},function(){
- t = setInterval("showTime()", 3000);
- });
- })
-
- function showTime()
- {
- if(n>=(count-1)){
- n=0;
- }else{
- n=++n;
- }
- $("#banner li").eq(n).trigger('click');
- }
逻辑思路: 这段图片轮播的代码,大体可以分为三个模块:初始化模块、单击事件模块、鼠标悬浮模块、自动触发模块。初始化模块意在初始化开始轮播图片序数,单击时间模块意在确定单击事件执行被单击对象显示其他对象隐藏操作,鼠标悬浮模块意在清除或者恢复自动触发模块,以便执行单击操作,自动触发模块用于模拟单击事件。
这段代码混乱之处在于设置的i和n都为全局变量,在函数和执行语句中游走。trigger这个事件竟然模拟了单击事件,鼠标悬浮hover用的恰到好处,不会造成与click事件的冲突。
8.选择城市插件
- jQuery.fn.selectCity = function(targetObj){
- var _self = this;
- var targetObj = $(targetObj);
- this.click(function(){
- var _top=$(this).offset().top + $(this).outerHeight(true);
- var _left=$(this).offset().left;
- targetObj.bgiframe();
- targetObj.show().css({"position":"absolute","top":_top+"px" ,"left":_left+"px"});
- });
- targetObj.find("#selectItemClose").click(function(){
- targetObj.hide();
- });
- targetObj.find("#selectSub :checkbox").click(function(){
- targetObj.find(":checkbox").attr("checked",false);
- $(this).attr("checked",true);
- _self.val($(this).val());
- targetObj.hide();
- });
- $(document).click(function(event){
- if(event.target.id!=_self.selector.substring(1)){
- targetObj.hide();
- }
- });
- targetObj.click(function(e){
- e.stopPropagation();
- });
- return this;
- }
逻辑思路: 页面单击对象时,则设置需要显示的对象到被单击对象的下方。并设置关闭按钮。将所有多选框设置未被选中,以选中特定栏。当鼠标单击页面时,需要显示的对象消失。
这里比较新颖的是当鼠标不点击显示区域和单击对象时的处理,才采用了一个target.id的判断达到效果。
9.分页插件
- var page_all = $('.page');
- var user_nav = $('#page_nation');
- function createActionLinks(){
- user_nav.append('<a href="javascript:void(0)" id="prev">上一页</a>');
- for(var i=0;i<$('.page').length;i++){
- user_nav.append('<a href="javascript:void(0)" class="numlink">'+(i+1)+'</a>');
- }
- user_nav.append('<a href="javascript:void(0)" id="next">下一页</a>');
- }
- function changeAction(page,preBtn,nextBtn){
- $('.page:eq('+page+')').css('display','block');
- $('.numlink:eq('+page+')').addClass('current');
- var pageSize = parseInt($('.page').length - 1);
- if(page == 0){
- preBtn.hide();
- nextBtn.show();
- }else if(page==pageSize){
- preBtn.show();
- nextBtn.hide();
- }else{
- preBtn.show();
- nextBtn.show();
- }
- }
- function hideObj(){
- page_all.css('display','none');
- $('.numlink').removeClass('current');
- }
- $(document).ready(function(){
- $('.page:eq(0)').css('display','block');
- createActionLinks();
- $('.numlink:eq(0)').addClass('current');
- var nextBtn = $('#next');
- var preBtn = $('#prev');
- var linkAction = $('.numlink');
- preBtn.hide();
- var page = parseInt($('.numlink').index($('.current')));
-
-
-
-
- nextBtn.click(function(){
- hideObj();
- changeAction(page+1,preBtn,nextBtn);
- page = parseInt($('.numlink').index($('.current')));
- });
- preBtn.click(function(){
- hideObj();
- changeAction(page-1,preBtn,nextBtn);
- page = parseInt($('.numlink').index($('.current')));
- })
- linkAction.click(function(){
- var that = $(this);
- hideObj();
- var index = that.index() - 1;
- changeAction(index,preBtn,nextBtn);
- page = parseInt($('.numlink').index($('.current')));
- })
- })
逻辑思路: 分页属于老生长谈了,这里的实现主要从分页按钮生成模块、切换页面模块、隐藏模块、并通过ready后,初始化设置初始状态,对相应按钮加上交互操作即click事件,并调用切换页面模块实现点击切换。类似MVC架构。
10.自定义插件注意要点
- (function($){
- $.fn.changeTab = function(options){
- var defaults = {
- FontSize:"50px",
- Color:'red',
- FontWeight:'bold'
- }
- var options = $.extend(defaults,options);
- this.each(function(){
- var lis = $(this);
- lis.hover(function(){
- $(this).css({ "fontSize": options.FontSize, "color": options.Color ,"fontWeight":options.FontWeight});
- },function(){
- $(this).css({ "fontSize": '', "color": '',"fontWeight":''});
- })
- })
- }
- })(jQuery)
-
- $(function(){
- var options={
- FontSize:'16px',
- Color:'blue',
- FontWeight:'bold'
- }
- $('li').changeTab(options);
-
- })
逻辑思路: 1.插件需要附件到jquery.fn上。
2.插件内返回jquery对象便于链式操作。
3.设定默认参数,并通过传参调用extend对象对参数更新。
以上总结均为项目中常见特效的情形,可以看出来事件和选择器是需要掌握扎实的,一些编程技巧也要学会。其次这篇文章可以作为一个程序库,供使用时查看。
- $("#select1").change( function() {
- var id = $("#select1").val();
- if(id == 1){
- $.get('index.php', null, function(data){
- $("span").empty();
- $("span").append("<select><option>济南</opton><option>青岛 </opton><option>临沂</opton></select>");
- });
- }else{
- $.get('index.php', null, function(data){
- $("span").empty();
- $("span").append("<select><option>郑州</opton><option>安阳 </opton><option>洛阳</opton></select>");
- });
- }
- });
逻辑思路: 根据需要设置联动菜单的元素值被改变的情况,通过ajax方法传空值给自身页面,追加相应的元素,在这里是二级菜单。这里用到了jquery两个方法:change方法和empty方法。
change方法在选定标签值改变时,会被触发执行。empty方法则是将标签中html内容清空。
3.链接样式和链接内容的显示隐藏
- $(function(){
- $("li").each(function(index){
- $(this).mouseover(function(){
- id = setTimeout(function(){
- $("li.tab").removeClass('tab');
- $(this).addClass("tab");
- $("div.show").removeClass('show');
- $("#tab1 div:eq("+index+")").addClass('show');
- },300);
- }).mouseout(function(){
- clearTimeout(id);
- });
- });
- });
逻辑思路: 这里首先用到$()在其中书写函数,这里详细介绍了jquery构造函数的适用范围。通过遍历每个导航链接,当鼠标移上对应元素,首先移除所有默认选项样式,在悬浮元素加上默认选中样式。并移除当前显示样式,设置默认选项对应内容样式为显示状态。
这里的亮点在于使用了一个显示默认样式的缓动效果,用户体验更细致。
4.“显示更多(more)”功能的实现
- $(function(){
- var $hideObj = $('ul li:gt(5):not(:last)');
- $hideObj.hide();
- $('.showmore span').click(function(){
- if(!$hideObj.is(":visible")){
- $hideObj.show();
- $('.showmore span').css("background","url(./images/up.bmp) no-repeat 0 -10");
- }else{
- $hideObj.hide();
- $('.showmore span').css("background","url(./images/down.bmp) no-repeat 0 0")
- ;
- }
- });
- });
逻辑思路: 这里首先动用了选择器除去最后一个元素所有大于5的li元素选中。通过用户点击事件,判断是否显示或者隐藏,并联动修改被点击的图标。
亮点在选择器的掌控恰到好处,用jquery最基本的就要用熟选择器,这样会快速高效操作dom节点。这样也就不难理解CSS3为什么首要改革的就是选择器了,简化操作流程、正则化及语义化css选择器,使得前端工程师读和写代码更便捷。
5.文本域“剩余字数”
- $(document).ready(function(){
- var tarea = $("#init");
- tarea.focus(function(){
- $("#numtj").fadeIn(200);
- }).blur(function(){
- $("#numtj").fadeOut("slow");
- })
-
- $("#init").keyup(function() {
- var text=$("#init").val();
- var counter=text.length;
- $("#numtj var").text(110-counter);
- });
- });
逻辑思路:
逻辑非常简单,获得焦点剩余字数显示,失去焦点剩余字数消失。键盘按起计算还剩字数。
这里的亮点在于使用了fadeIn和fadeOut方法实现渐入渐出更加自然,体验更好。focus和blur事件也是针对有输入内容的元素常需处理的事件。keyup事件则与用户输入内容,实时交互有关系。
6.鼠标移动到图片放大
- var ShowImage = function() {
- xOffset = 10;
- yOffset = 30;
- $("#imglist").find("img").hover(function(e) {
- $("<img id='imgshow' src='" + this.src + "' />").appendTo("body");
- $("#imgshow")
- .css("top", (e.pageY - xOffset) + "px")
- .css("left", (e.pageX + yOffset) + "px")
- .fadeIn("fast");
- },function() {
- $("#imgshow").remove();
- });
- $("#imglist").find("img").mousemove(function(e) {
- $("#imgshow").css("top",(e.pageY-xOffset) + "px")
- .css("left", (e.pageX + yOffset) + "px");
- });
- };
逻辑思路: 这段代码的逻辑非常具有普遍性,e代表鼠标事件,鼠标属性pageX和pageY代表鼠标的坐标位置。整体的思路即是通过鼠标触发悬浮事件,显示或者移除与鼠标位置有一个偏移的图片,并通过设置mousemove事件来实时移动放大图位置。
看了以上几个例子我们会发现,事件和选择器是整体交互效果核心。所以这里有必要再精通、再精通。
7.图片轮播
- var t = 0;
- var n = 0;
- var count;
- $(document).ready(function(){
- count=$("#bannerList a").length;
- $("#bannerList a:not(:first-child)").hide();
- $("#banner li").click(function(){
- var i = $(this).text() - 1;
- n = i;
- if (i >= count){
- return;
- }
- var $a = $("#bannerList a").filter(":visible").fadeOut(500);
- $a.parent().children().eq(i).fadeIn(1000);
-
- $(this).toggleClass("show");
- $(this).siblings().removeAttr("class");
- });
-
- t = setInterval("showTime()", 3000);
- $("#banner").hover(function(){
- clearInterval(t)},function(){
- t = setInterval("showTime()", 3000);
- });
- })
-
- function showTime()
- {
- if(n>=(count-1)){
- n=0;
- }else{
- n=++n;
- }
- $("#banner li").eq(n).trigger('click');
- }
逻辑思路: 这段图片轮播的代码,大体可以分为三个模块:初始化模块、单击事件模块、鼠标悬浮模块、自动触发模块。初始化模块意在初始化开始轮播图片序数,单击时间模块意在确定单击事件执行被单击对象显示其他对象隐藏操作,鼠标悬浮模块意在清除或者恢复自动触发模块,以便执行单击操作,自动触发模块用于模拟单击事件。
这段代码混乱之处在于设置的i和n都为全局变量,在函数和执行语句中游走。trigger这个事件竟然模拟了单击事件,鼠标悬浮hover用的恰到好处,不会造成与click事件的冲突。
8.选择城市插件
- jQuery.fn.selectCity = function(targetObj){
- var _self = this;
- var targetObj = $(targetObj);
- this.click(function(){
- var _top=$(this).offset().top + $(this).outerHeight(true);
- var _left=$(this).offset().left;
- targetObj.bgiframe();
- targetObj.show().css({"position":"absolute","top":_top+"px" ,"left":_left+"px"});
- });
- targetObj.find("#selectItemClose").click(function(){
- targetObj.hide();
- });
- targetObj.find("#selectSub :checkbox").click(function(){
- targetObj.find(":checkbox").attr("checked",false);
- $(this).attr("checked",true);
- _self.val($(this).val());
- targetObj.hide();
- });
- $(document).click(function(event){
- if(event.target.id!=_self.selector.substring(1)){
- targetObj.hide();
- }
- });
- targetObj.click(function(e){
- e.stopPropagation();
- });
- return this;
- }
逻辑思路: 页面单击对象时,则设置需要显示的对象到被单击对象的下方。并设置关闭按钮。将所有多选框设置未被选中,以选中特定栏。当鼠标单击页面时,需要显示的对象消失。
这里比较新颖的是当鼠标不点击显示区域和单击对象时的处理,才采用了一个target.id的判断达到效果。
9.分页插件
- var page_all = $('.page');
- var user_nav = $('#page_nation');
- function createActionLinks(){
- user_nav.append('<a href="javascript:void(0)" id="prev">上一页</a>');
- for(var i=0;i<$('.page').length;i++){
- user_nav.append('<a href="javascript:void(0)" class="numlink">'+(i+1)+'</a>');
- }
- user_nav.append('<a href="javascript:void(0)" id="next">下一页</a>');
- }
- function changeAction(page,preBtn,nextBtn){
- $('.page:eq('+page+')').css('display','block');
- $('.numlink:eq('+page+')').addClass('current');
- var pageSize = parseInt($('.page').length - 1);
- if(page == 0){
- preBtn.hide();
- nextBtn.show();
- }else if(page==pageSize){
- preBtn.show();
- nextBtn.hide();
- }else{
- preBtn.show();
- nextBtn.show();
- }
- }
- function hideObj(){
- page_all.css('display','none');
- $('.numlink').removeClass('current');
- }
- $(document).ready(function(){
- $('.page:eq(0)').css('display','block');
- createActionLinks();
- $('.numlink:eq(0)').addClass('current');
- var nextBtn = $('#next');
- var preBtn = $('#prev');
- var linkAction = $('.numlink');
- preBtn.hide();
- var page = parseInt($('.numlink').index($('.current')));
-
-
-
-
- nextBtn.click(function(){
- hideObj();
- changeAction(page+1,preBtn,nextBtn);
- page = parseInt($('.numlink').index($('.current')));
- });
- preBtn.click(function(){
- hideObj();
- changeAction(page-1,preBtn,nextBtn);
- page = parseInt($('.numlink').index($('.current')));
- })
- linkAction.click(function(){
- var that = $(this);
- hideObj();
- var index = that.index() - 1;
- changeAction(index,preBtn,nextBtn);
- page = parseInt($('.numlink').index($('.current')));
- })
- })
逻辑思路: 分页属于老生长谈了,这里的实现主要从分页按钮生成模块、切换页面模块、隐藏模块、并通过ready后,初始化设置初始状态,对相应按钮加上交互操作即click事件,并调用切换页面模块实现点击切换。类似MVC架构。
10.自定义插件注意要点
- (function($){
- $.fn.changeTab = function(options){
- var defaults = {
- FontSize:"50px",
- Color:'red',
- FontWeight:'bold'
- }
- var options = $.extend(defaults,options);
- this.each(function(){
- var lis = $(this);
- lis.hover(function(){
- $(this).css({ "fontSize": options.FontSize, "color": options.Color ,"fontWeight":options.FontWeight});
- },function(){
- $(this).css({ "fontSize": '', "color": '',"fontWeight":''});
- })
- })
- }
- })(jQuery)
-
- $(function(){
- var options={
- FontSize:'16px',
- Color:'blue',
- FontWeight:'bold'
- }
- $('li').changeTab(options);
-
- })
逻辑思路: 1.插件需要附件到jquery.fn上。
2.插件内返回jquery对象便于链式操作。
3.设定默认参数,并通过传参调用extend对象对参数更新。
以上总结均为项目中常见特效的情形,可以看出来事件和选择器是需要掌握扎实的,一些编程技巧也要学会。其次这篇文章可以作为一个程序库,供使用时查看。