常用jquery代码片段

最新推荐文章于 2020-07-16 11:09:29 发布

转载最新推荐文章于 2020-07-16 11:09:29 发布 · 1.5k 阅读

Jquery 专栏收录该内容

4 篇文章

订阅专栏

本文提供了一系列实用的jQuery代码片段，包括解析URL参数、表单操作、DOM操作等，适用于前端开发人员提高工作效率。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、获取一串url中的各个参数的值

// 解析url 返回json数组
function readSearch() {
	var search = window.location.search;//此为获取浏览器地址栏url，可根据实际需要改为自己的url
	var s = new Object();
	var searchArray = search.replace("?", "").split("&");
	for ( var i = 0; i < searchArray.length; i++) {
		var paraArray = searchArray[i].split("=");
		var key = paraArray[0];
		var value = paraArray[1];
		s[key] = value;
	}
	return s;
}

二、对表单常用操作

代码片段1: 在表单中禁用“回车键”

大家可能在表单的操作中需要防止用户意外的提交表单，那么下面这段代码肯定非常有帮助：

$("#form").keypress(function(e) {
  if (e.which == 13) {
    return false;
  }
});

代码片段2: 清除所有的表单数据

可能针对不同的表单形式，你需要调用不同类型的清楚方法，不过使用下面这个现成方法，绝对能让你省不少功夫。

function clearForm(form) {
  // iterate over all of the inputs for the form
  // element that was passed in
  $(':input', form).each(function() {
    var type = this.type;
    var tag = this.tagName.toLowerCase(); // normalize case
    // it's ok to reset the value attr of text inputs,
    // password inputs, and textareas
    if (type == 'text' || type == 'password' || tag == 'textarea')
      this.value = "";
    // checkboxes and radios need to have their checked state cleared
    // but should *not* have their 'value' changed
    else if (type == 'checkbox' || type == 'radio')
      this.checked = false;
    // select elements need to have their 'selectedIndex' property set to -1
    // (this works for both single and multiple select elements)
    else if (tag == 'select')
      this.selectedIndex = -1;
  });
};

代码片段3: 将表单中的按钮禁用

下面的代码对于ajax操作非常有用，你可以有效的避免用户多次提交数据，个人也经常使用：

禁用按钮：

$("#somebutton").attr("disabled", true);

启动按钮：

$("#submit-button").removeAttr("disabled");

可能大家往往会使用.attr(‘disabled’,false);，不过这是不正确的调用。

代码片段4: 输入内容后启用递交按钮

这个代码和上面类似，都属于帮助用户控制表单递交按钮。使用这段代码后，递交按钮只有在用户输入指定内容后才可以启动。

$('#username').keyup(function() {
    $('#submit').attr('disabled', !$('#username').val()); 
});

代码片段5: 禁止多次递交表单

多次递交表单对于web应用来说是个比较头疼的问题，下面的代码能够很好的帮助你解决这个问题：

$(document).ready(function() {
  $('form').submit(function() {
    if(typeof jQuery.data(this, "disabledOnSubmit") == 'undefined') {
      jQuery.data(this, "disabledOnSubmit", { submited: true });
      $('input[type=submit], input[type=button]', this).each(function() {
        $(this).attr("disabled", "disabled");
      });
      return true;
    }
    else
    {
      return false;
    }
  });
});

代码片段6: 高亮显示目前聚焦的输入框标示

有时候你需要提示用户目前操作的输入框，你可以使用下面代码高亮显示标示：

$("form :input").focus(function() {
  $("label[for='" + this.id + "']").addClass("labelfocus");
}).blur(function() {
  $("label").removeClass("labelfocus");
});

代码片段7: 动态方式添加表单元素

这个方法可以帮助你动态的添加表单中的元素，比如，input等：

//change event on password1 field to prompt new input
$('#password1').change(function() {
        //dynamically create new input and insert after password1
        $("#password1").append("&lt;input type='text' name='password2' id='password2' /&gt;");
});

代码片段8: 自动将数据导入selectbox中

下面代码能够使用ajax数据自动生成选择框的内容

$(function(){
  $("select#ctlJob").change(function(){
    $.getJSON("/select.php",{id: $(this).val(), ajax: 'true'}, function(j){
      var options = '';
      for (var i = 0; i &lt; j.length; i++) {
        options += '&lt;option value="' + j[i].optionValue + '"&gt;' + j[i].optionDisplay + '&lt;/option&gt;';
      }
      $("select#ctlPerson").html(options);
    })
  })
})

代码片段9: 判断一个复选框是否被选中

代码很简单，如下：

$('#checkBox').attr('checked');

代码片段10: 使用代码来递交表单

代码很简单，如下：

$("#myform").submit();

三、

1. 控制鼠标悬停

$("a").hover(
  function () {
    // code on hover over
  },
  function () {
    // code on away from hover
  }
);

示例

2. 载入的时候防止锚链接

$("a").on("click", function(e){
  e.preventDefault();
});

示例

该方法将通知 Web 浏览器不要执行与事件关联的默认动作（如果存在这样的动作）这通常是用于触发某些类型的动态效果，如一个隐藏的菜单或Ajax调用。通过使用事件对象，我们可以操作数据发回给浏览器的URL。在这种情况下，停止HREF加载任何东西！

3. 滚动到顶部

$("a[href='#top']").click(function() {
  $("html, body").animate({ scrollTop: 0 }, "slow");
  return false;
});

示例

你可能已经看到这个功能的在新的社交网站越来越受欢迎

4. Ajax Template

$.ajax({
  type: 'POST',
  url: 'backend.php',
  data: "q="+myform.serialize(),
  success: function(data){
    // on success use return data here
  },
  error: function(xhr, type, exception) { 
    // if ajax fails display error alert
    alert("ajax error response type "+type);
  }
});

示例

通过Ajax表单数据传递，是jQuery的最常见的用途之一。作为Web开发人员我们肯定记不住已经用过这个方法多少次了，语法非常简单，每次用到的时候都需要这段代码复制过去

5. 动画动作

1 $('p').animate({
2     left: '+=90px',
3     top: '+=150px',
4     opacity: 0.25
5   }, 900, 'linear', function() {
6     // function code on animation complete
7 });

示例

正如我们所看到的动画的方法，这是非常强大的，用于创建您的网页上的动画运动。

6. 切换CSS类

1 $('nav a').toggleClass('selected');

示例

添加或删除css类在html元素当中是一种相当普遍的动作. 这种技术经常运用在菜单切换，或者想用不用的颜色显示出某一行，或者页面的输入元素进行变化。他经常结合addClass()和removeClass()方法来使用你可以把所有的代码放到一个函数调用

7. 切换可见性

$("a.register").on("click", function(e){
  $("#signup").fadeToggle(750, "linear");
});

示例

经常我们打开网址的时候。有的页面会弹出框或通知，需要几秒钟显示，然后隐藏。使用fadeToggle功能，您可以快速隐藏和显示任何DOM对象。

8. 载入外部内容

$("#content").load("somefile.html", function(response, status, xhr) {
  // error handling
  if(status == "error") {
    $("#content").html("An error occured: " + xhr.status + " " + xhr.statusText);
  }
});

示例

不需要使用ajax技术，就能够解析一个外部的html文件中的任何内容，这个新的内容可以加载到DOM在页面中的任何地方。非常的实用

9. 键盘事件

 1 $('input').keydown(function(e) {
 2   // variable e contains keystroke data
 3   // only accessible with .keydown()
 4   if(e.which == 11) {
 5      e.preventDefault();
 6   }
 7 });
 8 
 9 $('input').keyup(function(event) {
10   // run other event codes here                              
11 });

示例

处理用户输入是我们开发当中所遇到的比较头疼的难题。幸运的是jQuery的 keydown和keyup事件侦听是解决用户输入比较完美的解决方案。无论实用哪一张方法，你都要先确认用户将要产生的行为，再决定实用那个方法；

10.等高等宽

1 var maxheight = 0;
2 $("div.col").each(function(){
3   if($(this).height() > maxheight) { maxheight = $(this).height(); }
4 });
5 
6 $("div.col").height(maxheight);

示例

11. 追加新的html

var sometext = "here is more HTML";
$("p#text1").append(sometext); // added after
$("p#text1").prepend(sometext); // added before

示例

使用的append（）方法，我们可以快速地将任何HTML代码直接到DOM中。这跟前面提到的load（）方法是类似的，

12. 设置和获取属性

1 var alink = $("a#user").attr("href"); // 获取链接的属性值
2 $("a#user").attr("href", "http://www.google.com/"); // 重新赋值
3 $("a#user").attr({
4   alt: "the classiest search engine",
5   href: "http://www.google.com/"
6 }); // set more than one attribute to new values

示例

此属性是相对简单的，但是如果处理不好经常会返回stackoverflow，attr（）方法在任何HTML元素和属性的字符串值传递。结果是返回该属性值，所有的HTML属性可通过访问语法，所以是web开发当中必须要记住的

13. 检索内容值

1 $("p").click(function () {
2   var htmlstring = $(this).html(); // 获取html字符串
3   $(this).text(htmlstring); // 覆盖掉原来的html字符串
4 });
5     
6 var value1 = $('input#username').val(); // 获取input的值
7 var value2 = $('input:checkbox:checked').val(); // 获取checkbox的值
8 var value3 = $('input:radio[name=bar]:checked').val(); // 获取button的值

示例

VAL（）属性是用来获取输入字段和表单元素的值

14. 遍历DOM

1 $("div#home").prev("div"); // find the div previous in relation to the current div
2 $("div#home").next("ul"); // find the next ul element after the current div
3 $("div#home").parent(); // returns the parent container element of the current div
4 $("div#home").children("p"); // returns only the paragraphs found inside the current div

原文链接:http://www.qianduan.net/10-awesome-jquery-form-action-code-fragment-not-to-be-missed.html

四、

1.平滑滚动到锚点

这个功能很常见，在网站底部添加一个让访客快速回到页面顶部的功能，下面是实现这个功能的示例代码：

// HTML:
// <h1 id="anchor">Lorem Ipsum</h1>
// <p><a href="#anchor" class="topLink">Back to Top</a></p>
 
$(document).ready(function() {
    $("a.topLink").click(function() {
        $("html, body").animate({
            scrollTop: $($(this).attr("href")).offset().top + "px"
        }, {
            duration: 500,
            easing: "swing"
        });
        return false;
    });
});

2.缩放图片

虽然图片应该在服务器端缩放，不过如果服务器端未做缩放，需要再客户端缩放的时候，可以使用下面这个方便的代码片段：

$(window).bind("load", function() {
    // IMAGE RESIZE
    $('#product_cat_list img').each(function() {
        var maxWidth = 120;
        var maxHeight = 120;
        var ratio = 0;
        var width = $(this).width();
        var height = $(this).height();
     
        if(width > maxWidth){
            ratio = maxWidth / width;
            $(this).css("width", maxWidth);
            $(this).css("height", height * ratio);
            height = height * ratio;
        }
        var width = $(this).width();
        var height = $(this).height();
        if(height > maxHeight){
            ratio = maxHeight / height;
            $(this).css("height", maxHeight);
            $(this).css("width", width * ratio);
            width = width * ratio;
        }
    });
    //$("#contentpage img").show();
    // IMAGE RESIZE
});

3.滚动时自动加载内容

很多网站使用了流行的瀑布图布局，这种类型的网站在页面滚动的时候会自动加载内容。下面这段代码让你能够把这个功能搬到你的网站上。

var loading = false;
$(window).scroll(function(){
    if((($(window).scrollTop()+$(window).height())+250)>=$(document).height()){
        if(loading == false){
            loading = true;
            $('#loadingbar').css("display","block");
            $.get("load.php?start="+$('#loaded_max').val(), function(loaded){
                $('body').append(loaded);
                $('#loaded_max').val(parseInt($('#loaded_max').val())+50);
                $('#loadingbar').css("display","none");
                loading = false;
            });
        }
    }
});
 
$(document).ready(function() {
    $('#loaded_max').val(50);
});

4.检测密码强度

在表单功能中，经常会有检测用户输入的密码强度的功能，下面这个代码片段使用正则表达式来检测密码是否足够安全，当然记得在服务端也进行表单验证。

$('#pass').keyup(function(e) {
     var strongRegex = new RegExp("^(?=.{8,})(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*\W).*$", "g");
     var mediumRegex = new RegExp("^(?=.{7,})(((?=.*[A-Z])(?=.*[a-z]))|((?=.*[A-Z])(?=.*[0-9]))|((?=.*[a-z])(?=.*[0-9]))).*$", "g");
     var enoughRegex = new RegExp("(?=.{6,}).*", "g");
     if (false == enoughRegex.test($(this).val())) {
             $('#passstrength').html('More Characters');
     } else if (strongRegex.test($(this).val())) {
             $('#passstrength').className = 'ok';
             $('#passstrength').html('Strong!');
     } else if (mediumRegex.test($(this).val())) {
             $('#passstrength').className = 'alert';
             $('#passstrength').html('Medium!');
     } else {
             $('#passstrength').className = 'error';
             $('#passstrength').html('Weak!');
     }
     return true;
});

5.均衡元素的高度

使用纯 CSS代码实现均衡元素的高度比较困难，而下面这段 jQuery 代码会根据最高的元素来均衡所有的 Div 元素。

var maxHeight = 0;
 
$("div").each(function(){
   if ($(this).height() > maxHeight) { maxHeight = $(this).height(); }
});
 
$("div").height(maxHeight);

6.修复 IE6 PNG 问题

至今，IE6 在国内仍然占据了大量的份额，因此在 Web 开发中仍然需要考虑 IE6 的兼容问题。比较常用的 IE6 PNG 图片问题，下面这段代码可以方便的修复。

$('.pngfix').each( function() {
   $(this).attr('writing-mode', 'tb-rl');
   $(this).css('background-image', 'none');
   $(this).css( 'filter', 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src="path/to/image.png",sizingMethod="scale")');
});

7.解析 JSON 字符串

使用 jQuery 解析 JSON 数据并不复杂。下面是一个高效解析 JSON 数据并将其追加到您的网页的例子。

function parseJson(){
    //Start by calling the json object, I will be using a
        //file from my own site for the tutorial
    //Then we declare a callback function to process the data
    $.getJSON('hcj.json',getPosts);
  
    //The process function, I am going to get the title,
        //url and excerpt for 5 latest posts
    function getPosts(data){
        //Start a for loop with a limit of 5
        for(var i = 0; i < 5; i++){
            var strPost = '<h2>'
                      + data.posts[i].title
                      + '</h2>'
                      + '<p>'
                      + data.posts[i].excerpt
                      + '</p>'
                      + '<a href="'
                      + data.posts[i].url
                      + '" title="Read '
                      + data.posts[i].title
                      + '">Read ></a>';
            //Append the body with the string
            $('body').append(strPost);
        }
    }
}
  
//Fire off the function in your document ready
$(document).ready(function(){
    parseJson();                  
});

8.隔行换色

这是一个很老的功能了，在大的列表或表格中，隔行颜色可以大大提高内容的可读性。下面的代码可以非常简单实现这个功能。

$('div:odd').css("background-color", "#F4F4F8");
$('div:even').css("background-color", "#EFF1F1");

9.预加载图片

你是否注意到 facebook 相册的图片加载速度特别快？那是因为在你看到这些图片之前已经预加载到你的浏览器缓存中了。下面是实现这个类似功能的代码示例：

var nextimage = "/images/some-image.jpg";
$(document).ready(function(){
    window.setTimeout(function(){
        var img = $("<img>").attr("src", nextimage).load(function(){
            //all done
        });
    }, 100);
});

10.让整个 Div 可点击

这是实现链接的父 Div 也能够点击的简单方法，HTML 示例代码如下：

<div class="myBox">
     blah blah blah.
    <a href="http://google.com">link</a>
</div>

下面的 jQuery 代码让整个 Div 可点击：

$(".myBox").click(function(){
     window.location=$(this).find("a").attr("href");
     return false;
});

原文链接： http://www.cnblogs.com/lhb25/p/10-useful-jquery-code-snippets.html

四、

1.鼠标滑入滑出事件

$('p').hover(function(){
                       alert('mouseenter function is running !');
                      },function(){
                              alert('mouseleaver function is running !');
                           });