不要脸和厚脸皮_10个厚脸皮的快速jQuery片段

不要脸和厚脸皮

这是大约10个厚脸皮的jQuery代码段的集合。 我相信您会发现它们很有用，请尽情享受！

快速射击jQuery代码段！

1.使所有图像变为灰度

此快速功能和摘要使用HTML5 canvas和jQuery将页面上的所有图像从彩色变为灰色。

// Grayscale image using HTML5 canvas method
function grayscale(src){
    var canvas = document.createElement('canvas');
    var ctx = canvas.getContext('2d');
    var imgObj = new Image();
    imgObj.src = src;
    canvas.width = imgObj.width;
    canvas.height = imgObj.height; 
    ctx.drawImage(imgObj, 0, 0); 
    var imgPixels = ctx.getImageData(0, 0, canvas.width, canvas.height);
    for(var y = 0; y < imgPixels.height; y++){
        for(var x = 0; x < imgPixels.width; x++){
            var i = (y * 4) * imgPixels.width + x * 4;
            var avg = (imgPixels.data[i] + imgPixels.data[i + 1] + imgPixels.data[i + 2]) / 3;
            imgPixels.data[i] = avg; 
            imgPixels.data[i + 1] = avg; 
            imgPixels.data[i + 2] = avg;
        }
    }
    ctx.putImageData(imgPixels, 0, 0, 0, 0, imgPixels.width, imgPixels.height);
    return canvas.toDataURL();
}

//Make all images on page Greyscale!
$('img').each(function(){
    var el = $(this);
    el.css({"position":"absolute"}).wrap("
  
  

   
   ").clone().addClass('img_grayscale').css({"position":"absolute","z-index":"998","opacity":"0"}).insertBefore(el).queue(function()
    {
        var el = $(this);
        el.parent().css({"width":this.width,"height":this.height});
        el.dequeue();
    });
    this.src = grayscale(this.src);
});
  
  

2.使用对象文字语法创建元素

在DOM元素上设置属性时，这不是平常的做事方式！

$("
  
  
",
{
    id: "test",
    name: "test",
    class: "test-class",
    css: {
        width: "100px",
        height: "100px",
        backgroundColor: "#fff"
    }
});

3.通过浏览器告诉IE6用户升级

告诉IE6 Noobs，只需在您的开头body标签内添加此代码即可升级您的浏览器。 这是他们看到的：

您的浏览器很古老！ 升级到其他浏览器或安装Google Chrome浏览器内嵌框架即可体验该网站。

4.使用jQuery使用bit.ly缩短链接

感谢James Cridland提供的这个简短的网址缩短代码片段。 您需要使用bit.ly api密钥才能使用此密钥，但是请不要担心它是一项完全免费的服务。

function get_short_link($url) 
{
  $bitly_login="yourloginname";
  $bitly_apikey="yourapikey";
  $api_call = file_get_contents("http://api.bit.ly/shorten?version=2.0.1&longUrl=".$url."&login=".$bitly_login."&apiKey=".$bitly_apikey);
  $bitlyinfo=json_decode(utf8_encode($api_call),true);
  if ($bitlyinfo['errorCode']==0) 
  {
      return $bitlyinfo['results'][urldecode($url)]['shortUrl'];
  } 
  else 
  {
      return false;
  }
}

//Usage: get_short_link("http://jquery4u.com");

5.快速格式化货币

这个厚脸皮的小片段以简单的方式解决了复杂的演出货币问题，这在跨浏览器中也适用！

function formatCurrency(num) {
    num = isNaN(num) || num === '' || num === null ? 0.00 : num;
    return parseFloat(num).toFixed(2);
}

6.快速缓存图像

此代码段将图像缓存在浏览器中，然后将其删除，因此当将其加载到DOM中时，它不会显示那些难看的丢失的图像带有小红叉。 多么厚脸皮！

//cache the user img
$('img').hide().appendTo('body').one('load', function() {
   console.log('Image: '+$(this).attr('src')+' is cached...');
   $(this).remove();
});

7.视频对象的Z索引修复

如果您对视频元素的z索引有疑问，可以添加wmode参数。 使用这个厚脸皮的小片段来解决z-index问题！ 您可以使用“透明”代替“不透明”，但是后者的渲染强度较低。

 //specific object
$('#videocontainerid object').prepend('  ');

//all objects
$('object').prepend('  '); 

8.获取元素的最后一个类

此代码段获取DOM元素的最后一个类，因此，如果您的DOM元素具有class =“ class1，class2，class3”，它将返回“ class3”。 凉？

var lastElClass = $(element).attr("class").split("").slice(-1);

9.使用JavaScript删除浏览器Cookies

这些功能/代码段集合可帮助您使用JavaScript删除所有浏览器cookie！ 是的，使用JavaScript是多么厚脸皮！

//浏览器cookie在此处存储在JavaScript中：
javascript：document.cookie

//删除Cookie的功能（更改有效期）
函数delCookie（名称）
{
document.cookie =名称+'=; expires =星期四，2001年8月2日20:47:11 UTC； 路径= /'
}

//获取每个cookie名称的键的函数
函数getCookieKeys（）
{
//分开的键/值对
var cookies = document.cookie.split（“;”），
索引，键= []；
for（i = 0; i <cookies.length; i ++）{cookieEntry = cookies [i] .split（“ =”）; //分割字符串的第一部分包含键... keys.push（cookieEntry [0]）; }返回键； } var cookieKeys = getCookieKeys（）; //删除所有cookie，用于（i = 0; i <cookieKeys.length; i ++）{delCookie（cookieKeys [i]）; } //检查它们是否消失了！ javascript：document.cookie [/ js]

10.建议一个！ 厚脸皮？

免费学习PHP！

全面介绍PHP和MySQL，从而实现服务器端编程的飞跃。

原价$ 11.95 您的完全免费

免费获得这本书

翻译自: https://www.sitepoint.com/10-cheeky-jquery-snippets/

不要脸和厚脸皮