Jquery复习总结
1.选择器:
$(".class")
$("#id")
$("div")
$("a p")
$(div:first).css("border","2px solid red")
2.过滤器:
$('div').find('.child').css('border','2px solid #999');
$('#child1').parent().css('border','2px solid #666'); //父级元素
$('#child1').parents().css('border','2px solid #333'); //先任元素
$('.child').filter('.not-gay').css('background','red');
3.操作样式
$('.a').css({
'color':'red',
'background':'black',
'border':'15px solid gray'
})
$('.a').addClass('black')
.removeClass('b');
$('.a').hasClass('c') //true false
$('.a').hide();
$('.a').show();
$('.a').fadeOut(500);
$('.a').fadeIn(1000);
$('.a').slideDown(1000);
4.操作dom
var Sol = $('#a').text();
var La = $('#a').html();
text和html区别:
text: A B
html:<p>A</p><p>B</p>
$('#a').append('<div>Append</div>');
$('#a').prepend('<div>Append</div>');
注意append(),prepend()与after()、before()的区别:
append(),prepend()是添加到元素的内部,after(),before()是添加到元素的外面,前面后面。
$('#a span').remove();
--找到a后面的span 然后删除
5.事件
$('#card').on('click',function(){
if($('#card').is(':visible'))
$('#card').hide();
else
$('#card').show();
});
$('#card').on('mouseenter',function(){
$('#card').addClass('active');
})
6.操作元素属性
$('#a').attr('href','http://a.com');
$('#a').prop('asdf','http://a.com')
这样理解:
attr是显性的 prop是隐形的
console.dir(document.getElementById('a'));
因为HTML所能承载的信息太少了,必须让浏览器把它解析成一个DOM对象,这个DOM对象中隐形的存了很多状态。这些状态实现了完成复杂任务的基础。
$('#a').removeAttr('asdf')
7.表单及输入
<input id='nickname' type='text'>
var nickName = $('#nickname').val()
$('#nickname').val('Yo.');
$('#nickname').focus(); $('#nickname').select(); $('#nickname').blur(); $('#nickname').focus(function(){ Console.log('Yo.'); } $('#nickname').blur(function(){ Console.log('Yo2'); }) $('#login-trigger').on('click',function(){ $('#login').submit(); }); 8. Ajax-load方法 var trigger = $('#trigger'); var card = $('#card'); var loaded = undefined; trigger.on('click',function(){ if(card.is(':visible')){ card.slideUp(); }else{ if(!loaded) { card.load('card.html')l } loaded = true; card.slideDown(); } }) 9.Ajax及其快捷方法 $.ajax('http://api.github.com/users/xxxxx').done( function(data){ console.log("data",data); })快捷方法:
$.ajax({
url:'/signup',
method:'post',
data:{
username:'whh',
pasword:'asdf',
},
success: function(data){
console.log('成功');
},
error: function(){
console.log('失败');
}
})
$.post('url',{
username:'...',
pasword:'...'
})
$.get('url');
$.getJson('url')
$.getScript('url')
//不可告人的需求需要被满足$.get("url",data,"function(){}");
$.post("url",data,"function(){}");
$.ajax({
type: 'POST',
url: url,
data: data,
success: success,
dataType: dataType
});
最新文章
- js问题杂记
- SQLite关系型数据库
- php常见问题
- 【ZeroMQ】消息模式
- BingMap的GeocodeService进行地理位置正向和反向检索--后台实现
- 一起写2048(160行python代码)
- openstack私有云布署实践【9.2 Glance镜像管理(办公网环境)】
- TCP/IP协议头部结构体(网摘小结)(转)
- Unity 发布的 WenGL 使用SendMessage传递多个参数
- 纳税服务系统【用户模块之使用POI导入excel、导出excel】
- python smtp邮件
- DotNetty 实现 Modbus TCP 系列 (二) ModbusFunction 类图及继承举例
- [CF1039D]You Are Given a Tree
- [ 随手记 1 ] C/C++宏,普通函数,内联函数
- Mysql 6.0安装过程(截图放不上去)
- WinForm企业级框架实战项目演练
- Sprint report
- Our supersheet
- A Basic Example of Threads Synchronization in Python, python中的线程同步示例
- Java SimpleDateFormat用法