jQuery—常用操作

一、jquery各版本变化

1.3：增加live()，为当前和将来增加的元素绑定事件

1.4：增加delegate()、undelegate()，替代live()，可以遍历绑定

1.6：2个破坏性变更：data()返回值以驼峰形式展示，用attr()和prop()区分attribute和properties状态获取，attr()取不到动态改变的值了

1.6.1：调整attr()，兼容1.6以前的做法

1.7：增加on()、off()，替代bind()、delegate()、live()、unbind()、undelegate()和die()，更好的支持ie 6/7/8的html5

2.x：不再支持ie 6/7/8，内核调整

3.x：移除load()、unload()和error()

二、表单操作

1、复选框

全选

$('[name=items]:checkbox').prop('checked', true);

全不选

$('[name=items]:checkbox').prop('checked', false);

反选

$('[name=items]:checkbox').each(function() {
	this.checked = !this.checked;
});

判断某项是否选中

$('[name=items][value=233]:checkbox').prop('checked')

获取所有选中的，用逗号分隔

$('[name=items]:checkbox:checked').map(function() {return $(this).val()}).get().join(',')

设置选中

var map = '2,4';
if(map != '') {
	$.each(map.split(','), function(i, v) {
		$('[name=items][value=' + v + ']:checkbox').prop('checked', true);
	});
}

状态改变事件

$('[name=items]:checkbox').on('change', function() {
	$('[name=items]:checkbox:checked').map(function() {return $(this).val()}).get().join(',');
});

2、单选框

全不选

$('[name=items]:radio').prop('checked', false);

判断某项是否选中

$('[name=items][value=233]:radio').prop('checked')

获取选中的

$('[name=items]:radio:checked').val()

设置选中

$('[name=items][value=' + 233 + ']:radio').prop('checked', true);

状态改变事件

$('[name=items]:radio').on('change', function() {
	$(this).val();
});

3、下拉框

获取选中

$('select').val()

获取选中text

$('select').find('option:selected').text();

设置选中

$('select').val(233);

设置text选中

$('select').find('option[text=xxx]').prop('selected', true);

选中第一个

$('select').prop('selectedIndex', 0);

状态改变事件

$('select').on('change', function() {
	$(this).find(':selected').val();
});

三、ajax操作

1、$.load()

$('#abc').load(url, [data], [callback]); //无论成功失败都会执行回调函数
$('#abc').load('def.html', {aaa: $('#aaa').val(), bbb: 'bbb'}, function(responseText, textStatus, XMLHttpRequest) {
	//responseText: 请求返回的内容
	//textStatus: 请求状态，success、error、notmodified、timeout
	//XMLHttpRequest: XMLHttpRequest对象
});
无参数是get方式，有参数是post方式

2、$.get()

$('#abc').get(url, [data], [callback], [type]); //当Response的返回状态是success才执行回调函数
$('#abc').get('def.do', {aaa: $('#aaa').val(), bbb: 'bbb'}, function(data, textStatus) {
	//data: 返回的内容，xml、json、html
	//textStatus: 请求状态，success、error、notmodified、timeout
}, 'json');
url长度不要大于2kb
get的数据更容易被用户查看到

3、$.post()

$('#abc').post(url, [data], [callback], [type]); //当Response的返回状态是success才执行回调函数
$('#abc').post('def.do', {aaa: $('#aaa').val(), bbb: 'bbb'}, function(data, textStatus) {
	//data: 返回的内容，xml、json、html
	//textStatus: 请求状态，success、error、notmodified、timeout
}, 'json');

4、$.getJSON()

$('#abc').getJSON(url, [data], [callback]); //当Response的返回状态是success才执行回调函数
$('#abc').getJSON('def.do', {aaa: $('#aaa').val(), bbb: 'bbb'}, function(data, textStatus) {
	//data: 返回的内容，xml、json、html
	//textStatus: 请求状态，success、error、notmodified、timeout
});
getJSON还支持JSONP形式的调用

5、$.ajax()

$.ajax({
	url: 'def.do',
	type: 'POST',
	async: true,
	data: {
		aaa: 'aaa', bbb: 233
	},
	timeout: 5000,
	dataType: 'json',
	beforeSend: function(XMLHttpRequest){
		//XMLHttpRequest: XMLHttpRequest对象
	},
	success:function(data, textStatus){
		//data: 返回的内容，xml、json、html
		//textStatus: 请求状态，success、error、notmodified、timeout
	},
	error:function(XMLHttpRequest, textStatus, errorThrown){
		//XMLHttpRequest: XMLHttpRequest对象
		//textStatus: 错误信息
		//errorThrown: 捕获的错误对象（可选）
	},
	complete:function(XMLHttpRequest, textStatus){
		//XMLHttpRequest: XMLHttpRequest对象
		//textStatus: 请求状态，success、error、notmodified、timeout
	}
})

6、序列化元素

var data = $('#form').serialize(); //将表单元素序列化为字符串
var fields = $('#form').serializeArray(); //将表单元素序列化为JSON数据

四、常用例子

1、状态改变

text输入监听

$('input[type=text]').on('input propertychange', function() {
	$(this).val();
});

获得焦点

$('input[type=text]').on('focus', function() {
	$(this).val();
});

失去焦点

$('input[type=text]').on('blur', function() {
	$(this).val();
});

禁用控件

$('input[type=text]').prop('disabled', true);

2、窗口、框架赋值

子窗口调用父窗口函数、对象

window.opener.fun();
window.opener.value;
window.opener.$("#abc").html();
$("#abc", window.opener.document).html()

子框架调用父框架函数、对象

window.parent.fun();
window.parent.value;
window.parent.$("#abc").html();
$('#abc', window.parent.document).html();

父框架调用子框架函数、对象

$("#iframe")[0].contentWindow().fun()
$("#iframe").contents().find("#abc").html();

3、jquery、js对象互相转换

var $abc = $('#abc');
var abc = $abc[0];
var $abc = $(abc);

4、响应js的超链接

<a href="javascript:void(0);">666</a>

5、js批量替换

abc.replace(/\233/g, "666");

6、js大小写

$('#abc').val().toUpperCase();
$('#abc').val().toLowerCase();

7、js引入

<script type="text/javascript" src="url"></script>
<script type="text/javascript"></script>

8、json转换

var obj = JSON.parse(str);
var str = JSON.stringify(obj);

9、延迟加载

setTimeout(function (){
	test();
}, 2000);
或
setTimeout('test()',2000);
function test() {
	alert("233");
}

10、动态调用函数

if(typeof test === 'function'){
        eval('test()');
}

11、是否显示

$("#div").is(":hidden");
$("#div").is(":visible");