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 XHTML 1.0严格有效target =“blank”属性

$("a[@rel~='external']").click( function() {
    window.open( $(this).attr('href') );
    return false;
});

jQuery 我的jquery插件模板

(function($) {
	$.fn.extend({
		yAutocomplete: function(options /* object */) {
			return this.each(function() {
				var settings = jQuery.extend({
					/* extending options object with defaults */
				}, options);
				var self = $(this);
		/* here comes the logic */
			});
		}});
})(jQuery);

jQuery jQuery搜索文本替换

var searchBox = $("#edit-search-theme-form-1");
var searchBoxDefault = "Enter keywords";
searchBox.attr("value", searchBoxDefault);
	
searchBox.focus(function(){  
  if(jQuery.trim($(this).attr("value")) == searchBoxDefault) $(this).attr("value", "");  
});  

searchBox.blur(function(){  
  if(jQuery.trim($(this).attr("value")) == "") $(this).attr("value", searchBoxDefault);  
})

jQuery 选中是否选中复选框，选中取消选中

if($('#chkId:checked').val() != null)
{
 // checked
}

//or

if($('#chkId:checked').length != 0)
{
 // checked
}

//or

$('input[name=foo]').is(':checked')
$('input[name=foo]').attr('checked')

// check uncheck
$('input[name=foo]').attr('checked', true);

jQuery 正确地确定元素的索引。

$("ul > li").click(function () {
    var index = $(this).prevAll().length;
});

jQuery jQuery突出显示导航菜单v.01脚本

$(document).ready(function(){

// Highlight Tab v.01 by Jake Rutter
// Website: http://www.onerutter.com
// Feel free to use and adapt, please just give credit where credit is due.
// ----------- highlight tab function -----------
    var path = location.pathname;   
    var mediaString = location.search;
    var mediaPath = path + mediaString;
    var home = "/";
    $("a[href='" + [ path ] + "']").parents("li").each(function() { 
        $(this).addClass("active");
    });
    
    $("a[href='" + [ mediaPath ] + "']").parents("li").each(function() {    
        $(this).addClass("active");
    });   
    
});

jQuery 测试jQuery中是否存在元素

if ($("#id").length) {
  //it does!
}

jQuery 级联选择框

<html>
<head>
<title></title>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
	<script type="text/javascript" defer="defer">
		function cascadeSelect(parent, child){
				var childOptions = child.find('option:not(.static)');
					child.data('options',childOptions);
	
				parent.change(function(){
					childOptions.remove();
					child
						.append(child.data('options').filter('.sub_' + this.value))
						.change();
				})
	
				childOptions.not('.static, .sub_' + parent.val()).remove();

		}
		
		$(function(){
			cascadeForm = $('.cascadeTest');
			orgSelect = cascadeForm.find('.orgSelect');
			terrSelect = cascadeForm.find('.terrSelect');
			locSelect = cascadeForm.find('.locSelect');
			
			cascadeSelect(orgSelect, terrSelect);
			cascadeSelect(terrSelect, locSelect);
		});
	</script>
</head>
<body>
	<form action="#" class="cascadeTest">
		<table>
			<tr>
				<th>Organization:</th>
				<td>
					<select name="orgSelect" class="orgSelect">
						<option value="0">Select an Organization</option>
						<option value="1">Organization 1</option>
						<option value="2">Organization 2</option>
						<option value="3">Organization 3</option>
					</select>
				</td>
			</tr>
			<tr>
				<th>Territory:</th>
				<td>
					<select name="terrSelect" class="terrSelect">
						<option value="0" class="static">- All Territories -</option>
						<option value="1" class="sub_1">Organization 1 - Territory 1</option>
						<option value="2" class="sub_1">Organization 1 - Territory 2</option>
						<option value="3" class="sub_2">Organization 2 - Territory 1</option>
						<option value="4" class="sub_2">Organization 2 - Territory 2</option>
						<option value="5" class="sub_3">Organization 3 - Territory 1</option>
						<option value="6" class="sub_3">Organization 3 - Territory 2</option>
						<option value="7" class="sub_3">Organization 3 - Territory 3</option>
					</select>
				</td>
			</tr>
			<tr>
				<th>Location:</th>
				<td>
					<select name="locSelect" class="locSelect">
						<option value="0" class="static">- All Locations -</option>
						<option value="1" class="sub_1">Organization 1 - Territory 1 - Location 1</option>
						<option value="1" class="sub_1">Organization 1 - Territory 1 - Location 2</option>
						<option value="2" class="sub_2">Organization 1 - Territory 2 - Location 1</option>
						<option value="2" class="sub_2">Organization 1 - Territory 2 - Location 2</option>
						<option value="3" class="sub_3">Organization 2 - Territory 1 - Location 1</option>
						<option value="3" class="sub_3">Organization 2 - Territory 1 - Location 2</option>
						<option value="4" class="sub_4">Organization 2 - Territory 2 - Location 1</option>
						<option value="5" class="sub_5">Organization 3 - Territory 1 - Location 1</option>
						<option value="6" class="sub_6">Organization 3 - Territory 2 - Location 1</option>
						<option value="7" class="sub_7">Organization 3 - Territory 3 - Location 1</option>
					</select>
				</td>
			</tr>
		</table>
	</form>
</body>
</html>

jQuery 使用jQuery和ajax方法缓存文件

(function($){
	$(window).load(function(){
		//Wait for the page to load, the cache the files you want
		$.ajax({url:'javascript.js', dataType:'text'});
		$.ajax({url:'image.jpg', dataType:'text'});
		$.ajax({url:'flash.swf', dataType:'text'});
		$.ajax({url:'style.css', dataType:'text'});
	});
})(jQuery);

jQuery 如果选择了选项，则显示隐藏文本字段

//If div option "Selected Text" is selected, display test.
$("#div").change(function() {
  if (($("option:selected", $(this)).attr("value")=="Selected Text")) {
	$("#div2:hidden").show();
	$('#div2').addClass('inputclass pageRequired');
  } else {
	$('#div2').removeClass('inputclass pageRequired');
	$('#div2').removeClass('warning');
	$("#div2:visible").hide();
  }                  
});