04-突破

发表于 | 分类于 |

元素的尺寸

width() height() ★★★★★
innerWidth() innerHeight() ★★★★★
outerWidth() outerHeight() ★★★★★
参数的作用
与原生JS的区别 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
alert( $('#div1').width() );   //width
	
alert( $('#div1').innerWidth() );  //width + padding 
	
alert( $('#div1').outerWidth() );  //width + padding + border
	
alert( $('#div1').outerWidth(true) );  //width + padding + border + margin
	
$('#div1').width(200);

$('#div1').innerWidth(200);   //width : 200 - padding
	
$('#div1').outerWidth(200);     //width : 200 - padding - border
	
$('#div1').outerWidth(200,true);   //width : 200 - padding - border - margin

隐藏元素的尺寸

alert( $('#div1').get(0).offsetWidth );   //原生JS是获取不到隐藏元素的尺寸

alert( $('#div1').width() );  //JQ是可以获取隐藏元素的尺寸

JQ实战小技巧

  • 可视区的尺寸
  • 页面的尺寸
1
2
3
alert( $(window).height() );     //可视区的高
	
alert(  $(document).height()  );  //页面的高

滚动距离

  • scrollTop() ★★★★★
  • scrollLeft() ★
1
2
3
4
//alert( $(document).scrollTop() );   //滚动距离
		
//$(document).scrollTop()  == $(document).height() - $(window).height()  
//滚动到最底端

##　元素距离

==alert( $(‘#div1’).offset().top ); //offset()的距离值都是相对于整个页面的==

position() ★★★
left top
==不认magin值==

1
2
3
4
5
alert(ev.pageY);   
//鼠标的坐标 : 相对于整个页面的
		
alert( ev.clientY );  
//鼠标的坐标 : 相对于可视区的

绑定

1
2
3
4
5
6
7
8
9
$('ul').delegate('li','click',function(ev){
	$(this).css('background','red');
		
	//$(ev.delegateTarget).css('background','red'); 
	//ev.delegateTarget==ul
		
	$(ev.delegateTarget).undelegate();
		
});

triger

主动触发

1
2
3
4
5
6
7
8
$('#input2').keydown(function(ev){
	if( ev.which == 13 ){
		$('#input1').trigger('click');
		
		//$('#input1').click();
		
	}
});

1
2
3
4
5
6
7
8
9
	$('div').on('click.def',function(){
	alert(1);
});

$('div').on('click.abc',function(){
	alert(2);
});

$('div').trigger('click.abc');

$(this).off(‘.drag’);
可以忽略命名空间

工具方法

  • $.type() ★★★★★
    • 比原生typeof更强大
  • $.isFunction() ★★★
  • $. isNumeric() ★★★
  • $. isArray() ★★★
  • $. isWindow() ★★★
  • $. isEmptyObject() //{}返回ture ★★★
  • $. isPlainObject() //对象自变量 {}也返回ture ★★★

$.extend() ★★★★★

对象继承操作
深拷贝操作//默认是浅拷贝的 , true代表深考虑

1
2
3
4
5
6
7
8
9
10
11
12
13
var a = {
    name : "hello"
};

var b = {};

$.extend( true,b , a , {age:20} );//默认是浅拷贝的  , true代表深考虑

console.log(b);

b.name = 'hi';

alert( a.name );

$.proxy()

1
2
3
4
5
6
7
8
9
10
11
12
function show(n1,n2){
	alert(n1);
	alert(n2);
	alert(this);
}

//show();  
//show.call( document );

//$.proxy( show , document ,3)(4);

//$(document).on('click', $.proxy(show,window,3,4) );