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