### 自学JQuery的代码总结
#### 1. 设置AJAX请求编码格式
在进行AJAX请求时，可能需要处理不同的字符集问题。例如，在某些情况下，需要将默认的UTF-8编码改为GB2312编码。这可以通过设置全局的`ajaxSetup`来实现：
```javascript
$.ajaxSetup({
ajaxSettings: {
contentType: "application/x-www-form-urlencoded;charset=GB2312"
}
});
```
这里的关键在于`contentType`属性，它指定了发送到服务器的数据的编码方式。
#### 2. 解决jQuery与Prototype冲突
在页面中同时使用jQuery和Prototype时，可能会出现命名空间冲突的问题。为了解决这一问题，可以使用`noConflict()`方法将`$`符号释放给Prototype库使用。
```javascript
<script src="prototype.js"></script>
<script src="http://blogbeta.blueidea.com/jquery.js"></script>
<script type="text/javascript">
jQuery.noConflict();
</script>
```
这里的顺序很重要：先加载Prototype，再加载jQuery，并在jQuery之后立即调用`noConflict()`方法，确保`$`符号被释放。
#### 3. 检查元素是否被触发点击事件
可以使用jQuery的数据存储功能检查某个元素是否已经绑定过特定的事件处理程序。
```javascript
var $events = $("#foo").data("events");
if ($events && $events["click"]) {
// 如果存在click事件，则执行相应代码
}
```
这里通过`data("events")`获取了元素上所有的事件绑定信息，然后检查是否存在“click”类型的事件。
#### 4. 使用jQuery更改样式表链接
有时候需要动态改变样式表链接，比如在不同分辨率或设备上切换样式表。
```javascript
$('link[media="screen"]').attr('href', 'alternative.css');
```
这里选择的是所有`media`属性为`screen`的`link`元素，并修改其`href`属性。
#### 5. 选取表单中的特定复选框
在复杂的表单中，可能需要选取特定类名的输入项，例如所有表示“库存”的复选框。
```javascript
var in_stock = $('#shopping_cart_items input.is_in_stock');
```
这里使用了`#shopping_cart_items input.is_in_stock`选择器，选取ID为`shopping_cart_items`下的所有类名为`is_in_stock`的输入元素。
#### 6. 使用toggleClass简化类的添加与删除
当需要根据条件添加或删除一个元素的类时，可以使用`toggleClass`方法简化代码。
```javascript
// 原来的写法
a.hasClass('blueButton') ? a.removeClass('blueButton') : a.addClass('blueButton');
// 简化后的写法
a.toggleClass('blueButton');
```
`toggleClass`会检查元素是否具有指定的类，如果具有则移除，否则添加。
#### 7. 检测IE浏览器
在编写兼容性代码时，经常需要判断当前浏览器是否为IE。
```javascript
if ($.browser.msie) {
// 当前浏览器是IE
}
```
这里使用了`$.browser`对象的`msie`属性来检测。
#### 8. 替换DOM元素
有时需要替换页面上的某个DOM元素。
```javascript
$('#thatdiv').replaceWith('fnuh');
```
`replaceWith`方法用于替换一个元素及其子元素。
#### 9. 检查元素是否为空
在很多场景下，需要判断一个元素是否为空。
```javascript
// 方法一
if (!$('#keks').html()) {
// 元素为空
}
// 方法二
if ($('#keks').is(":empty")) {
// 元素为空
}
```
`html()`方法返回元素的内容，如果为空则返回`false`；而`:empty`伪类选择器则直接判断元素是否为空。
#### 10. 获取元素索引
当点击列表中的某一项时，可能需要获取它的索引位置。
```javascript
$("ul>li").click(function () {
var index = $(this).prevAll().length;
});
```
`prevAll()`方法返回当前元素之前的所有同级元素集合，计算长度即可得到索引。
#### 11. 绑定事件时传递数据
在绑定事件处理函数时，可以传递额外的数据。
```javascript
// 直接绑定
$('#foo').click(function (event) {
alert('User clicked on "foo."');
});
// 绑定时传递数据
$('#foo').bind('click', { test1: "abc", test2: "123" }, function (event) {
alert('User clicked on "foo." ' + event.data.test1 + event.data.test2);
});
```
通过第二个参数传递一个对象，该对象作为`event.data`属性在事件触发时可用。
#### 12. 向HTML元素追加文本
在动态添加内容时，经常会使用`append`方法。
```javascript
$('#lal').append('sometext');
```
该方法会在指定元素的末尾追加内容。
#### 13. 创建HTML元素时使用对象字面量
创建HTML元素时，可以直接使用对象字面量的形式设置属性。
```javascript
var e = $("<a>", {
href: "#",
class: "a-class another-class",
title: ""
});
```
这种方式更加简洁且易于维护。
#### 14. 使用过滤器选取特定输入元素
在处理复杂的表单时，可能需要筛选出特定类型的输入元素。
```javascript
var elements = $('#someid input[type=sometype][value=somevalue]').get();
```
这里使用了多个属性选择器来精确匹配元素。
#### 15. 预加载图片
在网页设计中，预加载图片是一种常见的优化手段。
```javascript
jQuery.preloadImages = function () {
for (var i = 0; i < arguments.length; i++) {
$("<img/>").attr('src', arguments[i]);
}
};
$.preloadImages('image1.gif', '/path/to/image2.png', 'some/image3.jpg');
```
这里定义了一个自定义函数`preloadImages`，通过传入图片路径数组来预加载这些图片。
#### 16. 选取带有特定类名的按钮
选取页面中带有特定类名的按钮元素。
```javascript
$('button.someClass')
```
使用`button.someClass`选择器可以快速选取所有类名为`someClass`的按钮元素。
