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");
