1
2
3
4
5
6
7
8
9
10
11
12
13
| //改变css的diplay属性
$('#box').css('display':'none');
//隐藏与显示方法
$('#box').hide();
$('#box').show();
//自动判读显示与隐藏切换
$('#box').toggle();
//淡入淡出
$('#box').fadeIn(2000);
$('#box').fadeIn(1000,'linear');
|
1
2
3
4
5
6
7
| //四个参数分别是结束时的属性,运动事件,运动方式,回调函数
$('#box').animate({'width':'300px','height':'400px'},3000,'linear',function(){
alert('finish');
})
//清除元素当前运动(可以解决运动叠加问题)
$('#box').stop();
|
1
2
3
4
5
6
7
8
| //获得元素属性
var re = $('#box').attr('name');
//改变与添加元素属性
$('#box').attr('class','fruit');
//删除元素属性
$('#box').removeAttr('name');
|
1
2
3
4
5
6
7
8
| //获得元素属性(返回值true或false)
var re = $('#box :checkbox').prop('checked');
//改变与添加元素属性
$('#box :checkbox').prop('checked',true);
//删除元素属性
$('#box :checkbox').removeProp('checked');
|
1
2
| var pwd = $('#box input[type=password]').val();
$('#box input[type=text]').val('name');
|
1
2
3
4
5
| //添加class属性
$('#box').addClass('fruit');
//删除class属性
$('#box').removeClass('fruit');
|
1
2
3
4
5
| //获得css样式
$('#box').css('height');
//设置css样式
$('#box').css('width','200px');
|
1
2
3
4
5
| //获得元素距离页面顶部的实际位置
$('#box').offSet().top
//获得定位元素的left值
$('#box').position().left
|
1
2
3
4
5
6
7
8
| //获得内容宽度
$('#box').width();
//获得内容和内边距宽度
$('#box').innerWidth();
//获得总宽度(内容+内边距+边框)
$('#box').outerWidth();
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
| //追加新元素
$('#box').append('<p>新来的</p>'');
$('#box').prepend('<p>新来的</p>'');
//将#title插到2好p标签之后
$('#box p').eq(2).after($('#title'));
//包裹
$('#box p').wrap('<u class="hahha"></u>')
$('#box p').wrapAll('<u class="hahha"></u>')
//替换
$('#box p').eq(3).replaceWith('<h1>hello</h1>');
//清空元素
$('#box').empty();
//删除元素
$('#box').remove();
//复制元素(true会复制全部子节点，默认false)
var obj = $('#box').clone();
|
1
2
3
4
5
| $('#box p').click(function(){
//$this表示当前时间源,index()方法获得序号
var index = $this.index();
alert(index);
})
|
1
2
3
4
5
6
7
8
9
10
11
12
| //on可以绑定一个或多个事件
$('#box').on('click mouseenter',function(){
alert('great');
})
//给子元素绑定事件
$('#box').on('click','p',function(){
alert('success');
})
//解除绑定事件
$('#box').off('click');
|
1
2
3
4
5
6
| function func(){
alert('success');
}
$('#box').click(function(){
$('#box').append('<p onclick="func()">new tag</p>');
})
|
1
2
3
4
5
6
| //hover方法同时设置移入移出执行的方法
$("#box").hover(function(){//移入时执行
$(this).css({'background':'red'});
},function(){//移出时执行
$(this).css({'background':'blue'});
})
|
1
2
3
4
| //用法和on类似不过只触发一次
$('#box').one('click mouseenter',function(){
alert('success');
})
|
1
2
| //触发表单提交事件
$('form').trigger('submit');
|
1
2
3
4
| //鼠标相对于文档左侧距离
$('#box').click(function(e){
var left = e.pageX;
})
|
1
2
3
4
5
| //jquery抓取得对象转换成原生
$('#box')[0]
//原生对象转换成jquery对象
$(document.getElementById('#box'))
|
