1. 首页
  2. 代码片断库
  3. jQuery
全部数据
text
javascript
php
markdown
sh
java
python
html
csharp
css
sql
c_cpp
PHP
ruby
xml
scss
json
swift
JavaScript
typescript
vbscript
powershell
CSS
apache_conf
ActionScript 3
r
ini
HTML
golang

jQuery 价格插件（巴西货币）

$("#example2").priceFormat({ 
    prefix: 'R$ ', 
    centsSeparator: ',', 
    thousandsSeparator: '.' 
});

jQuery Wordpress模板URL

<?php bloginfo('template_url'); ?>/

jQuery 查找所选元素索引

//jQuery only
var selected = $('ul#mylist li').index( $('.selected',$('ul#mylist')) );

//Dirty Javascript / jQuery way
var selected = 0;
// Iterate through item in the list. If we find the selected item, return false to break out of the loop
$(‘ul#mylist li’).each(function(index){
    if ($(this).hasClass(‘selected’)){
        selected = index;
        return false;

    }
});

jQuery jQuery事件命名空间

//Bind Event One
$("a").bind("click.nameOne", function(){
	console.log("Event One Fire!");
	return false;
});

//Bind Event Two
$("a").bind("click.nameTwo", function(){
	console.log("Event Two Fire!");
	return false;
});

//Unbind all nameTwo events
$("a.utwo").click(function(){
	$("a").unbind(".nameTwo");
});
//Unbind all nameOne events
$("a.uone").click(function(){
	$("a").unbind(".nameOne");
});

jQuery jQuery.attrToClass

jQuery.fn.attrToClass = function(e) {
	$(this).each(
		function(intIndex){
		    $(this).addClass($(this).attr(e));
	});
};
 
$(document).ready(function(){
        // designate the tag and the attribute to be extracted
	$("input").attrToClass("type");
});

jQuery jQuery事件堆栈绑定器

(function($) {
	$.fn.bindIntoStack = function(namespace, func, pos) {
		var evt = namespace.split('.').shift();

		return this
			.each(function() {
				var $this = $(this);

				$this.bind(namespace, func);

				var newOrder = new Array();

				$.each($this.data('events')[evt], function(k) {
					newOrder.push(k);
				});

				if (newOrder.length > pos + 1) {
					newOrder.splice(pos, 0, newOrder.pop());

					var evts = new Object();

					$.each(newOrder, function(k) {
						evts[this] = $this.data('events')[evt][this];
					});

					$this.data('events')[evt] = evts;
				}
			});
	};
})(jQuery);

(function($) {
	$.fn.reverseStack = function(namespace, func, pos) {
		var evt = namespace.split('.').shift();

		return this
			.each(function() {
				var $this = $(this);

				$this.bind(namespace, func);

				var revOrder = new Array();

				$.each($this.data('events')[evt], function(k) {
					revOrder.unshift(k);
				});

				if (revOrder.length > pos + 1) {
					var evts = new Object();

					$.each(revOrder, function(k) {
						evts[this] = $this.data('events')[evt][this];
					});

					$this.data('events')[evt] = evts;
				}
			});
	};
})(jQuery);

jQuery jQuery的非碰撞$函数

(function($) {
    // Within this block, $ is a reference to jQuery
    // Neat, huh?
})(jQuery);

jQuery JQuery图像交换

$("#myImage").attr("src", "path/to/newImage.jpg");

jQuery 在jQuery中处理ID的特殊字符

// incorrect
$('#my.id.name').val();

// correct
$('#my\\.id\\.name').val();

jQuery 面板silder con jquery

<html lang="en">
<head>
	<title>Panel slider</title>
	<script type="text/javascript" src="jquery.js"></script>
	<style type="text/css">
		#panel {
			position: absolute;
			bottom: -100px;
			left: 10px;
			width: 645px;
			height: 355px;
		}
		#left_slide {    
			width: 300px;    
			position: absolute;    
			left: 0;    
			top: 80px;    
			z-index: 1;
		}
		#center_slide {    
			width: 478px;    
			position: absolute;    
			left: 84px;    
			top: 0;    
			z-index: 2;
		}
		#right_slide {    
			width: 300px;    
			position: absolute;    
			left: 345px;    
			top: 80px;    
			z-index: 1;
		}	
	</style>
</head>
<body>

<div id="panel">
	<img src="http://valendesigns.com/wp-content/themes/valen/images/panel/left_slide.png" id="left_slide" alt="" />
    <img src="http://valendesigns.com/wp-content/themes/valen/images/panel/center_slide.png" id="center_slide" alt="" />
    <img src="http://valendesigns.com/wp-content/themes/valen/images/panel/right_slide.png" id="right_slide" alt="" /> 
</div>

<script type="text/javascript">
/* <![CDATA[ */
// Panel Slider
$.fn.imageSlide = function(options) {    
  var images = this.find('img').get(),
    container = this,
    settings = $.extend({
        speed: 400,
        styles : [{},{},{}]
    }, options),
    animating = false;  
  function slide(direction) {      
    animating = true;
    var left = direction.toLowerCase() === 'left';
    
    $(images).each(function(i){
        $(images[i]).animate(settings.styles[left ? (i == 0 ? 2 : i - 1) : (i == 2 ? 0 : i + 1)], settings.speed);
    });    
    setTimeout(function(){
        $(images[0]).css({zIndex: left ? 1 : 2});
        $(images[1]).css({zIndex: 1});
        $(images[2]).css({zIndex: left ? 2 : 1});
    }, settings.speed / 2);    
    setTimeout(function(){
        var old = images;
        images = [];
        images[0] = old[left ? 1 : 2];
        images[1] = old[left ? 2 : 0];
        images[2] = old[left ? 0 : 1];
        animating = false;
    }, settings.speed);
      
  } 
  $(container).click(function(e){
      if(animating) {return;}
      if(e.target === images[0]) {slide('right')}
      else {slide('left')}
  })
  return this;
};

$('#panel img').css('cursor','pointer');
$('#panel').imageSlide({
    // Higher = slower
    speed: 400,
    // Set each image's dimensions here:
    styles : [
        {width: 300,top: 80,left: 0},
        {width: 478,left: 84,top: 0},
        {width: 300,top: 80,left: 345}
    ]
})
/* ]]> */
</script>

</body>
</html>