<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
#div1{ color:blue; background:blue; width:100px;}
</style>
<script src="jquery-2.0.3.js"></script>
<script>
一些变量
function vendorPropName(){}
function isHidden(){}
function getStyles(){}
function showHide(){}
jQuery.fn.extend({
css
show
hide
toggle
});
jQuery.extend({
cssHooks
cssNumber
cssProps
style
css
});
curCSS = function(){};
function setPositiveNumber(){}
function augmentWidthOrHeight(){}
function getWidthOrHeight(){}
function css_defaultDisplay(){}
function actualDisplay(){}
一些cssHooks
$(function(){
console.log($('#div1').get(0).style.color);//原生方法，只能得到行内样式，不能得到外部css文件中的样式，
console.log( window.getComputedStyle( $('#div1').get(0), null).color);//得到外部文件的样式，获取最终样式，行内样式和外部样式冲突时返回行内样式，
console.log(window.getComputedStyle( $('#div1').get(0) , null ).background);//不能获取复合样式background,要写background-color,
console.log($('#div1').get(0).style.background);//可以得到复合样式
console.log( $('#div1').css('color') );
$('#div1').css('color','yellow');
console.log( $('#div1').css('color') );
//$('#div1').css('color','yellow')--->jQuery.style()--->style
//$('#div1').css('color')--->jQuery.css()--->curCSS = function(){}--->getComputedStyle
console.log($('#div1').css(['color','backgroundColor','width']));
$('#div1').css({width:200,height:200});
$('#div1').css('width',function(){
return 500;
});
----------------------------------------------------------------
$('#div1').width()/height()/innerWidth()/innerHeight()/outerWidth()/outerHeight()
$('#div1').css('background-color');
$('#div1').css('float');
getComputedStyle(oDiv,null).backgroundColor
getComputedStyle(oDiv,null).backgroundColor
style.cssFloat
//class -> className
//$('#div1').css('tranfroms');
$('#div1').css('width'); '123px'
$('#div1').width(); 123
});
</script>
</head>
<body>
<div id="div1" style="MozTranfroms">aaaaaaaaaaaa</div>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
#div1{ width:100px;}
</style>
<script src="jquery-2.0.3.js"></script>
<script>
$(function(){
alert(window.getComputedStyle( $('#div1').get(0) , null )['filter']);
alert(window.getComputedStyle( $('#div1').get(0) , null ).getPropertyValue('filter'));
var $span = $('<span>');//动态创建一个元素
$span.css('width','100px');
$span.css('width');
console.log($('#div1').css('margin-left'));
$('#div1').css('width','+=100');
});
</script>
</head>
<body>
<div id="div1">aaaaaaaaaaaa</div>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
#div1{ display:none;}
</style>
<script src="jquery-2.0.3.js"></script>
<script>
$(function(){//检测dom节点加载完，有可能iframe里面的页面还没有加载完
$('#div1').hide();// display -> none
$('#div1').show();// display -> block
$('#div1').toggle();
$('#div1').toggle(false);// 只会 hide()
$('#div1').toggle(true);// 只会 show()
$('#div1').hide();// -> jQuery.css() -> getComputedStyle().display table -> data
$('#div1').show();// -> elem.nodeName -> 'div' -> createElement('div'); -> jQuery.css()
});
$(window).load(function(){//iframe里面的页面加载完了
//get(0)转原生
var div = $('iframe').get(0).contentWindow.document.getElementById('div1');
console.log(window.getComputedStyle(div,null).display);
$(div).show();
$('iframe').show();
});
</script>
</head>
<body>
<!--<div id="div1">aaaaaaaaaaaa</div>-->
<iframe src="53jq.html" style="display:none"></iframe>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
#div1{ display:none}
</style>
</head>
<body>
<div id="div1">aaaaaaaaaaa</div>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
#div1{ width:100px; height:100px; background:red; padding:10px; border:1px blue solid; margin:5px;}
</style>
<script src="jquery-2.0.3.js"></script>
<script>
$(function(){
console.log( $('#div1').css('opacity') );//1，不写是1
$('#div1').width()/height()/innerWidth()/innerHeight()/outerWidth()/outerHeight()
-------------------------------------------------------------------
//$('#div1').width() -> $('#div1').css('width')
console.log($('#div1').width()); //100 width
console.log($('#div1').innerWidth()); //120 width + padding
console.log($('#div1').outerWidth()); //122 width + padding + border
console.log($('#div1').outerWidth(true)); //132 width + padding + border + margin
$('#div1').width(200); //width = 200
$('#div1').innerWidth(200); //width = 200 - padding
$('#div1').outerWidth(200); //width = 200 - padding - border
$('#div1').outerWidth(200,true); //width = 200 - padding - border - margin
console.log($('#div1').get(0).offsetWidth); //隐藏获取是0
console.log( $('#div1').width() ); //jquery隐藏也可以获取100
//$('#div1').width() , innerWidth() , outerWidth()
//$.css() 获取
//$.style() 设置
//content/padding/border/margin
//cssHooks.get()
//cssHooks.set()
function setPositiveNumber(){}
function augmentWidthOrHeight(){}
function getWidthOrHeight(){}
$(window).height()//可视区的高
$(document).height()//整个页面的高度
$('div:visible')
$('div').animate({ margin : '10px 20px 30px 40px' });
marginLeft -> 40
marginRight -> 20
marginTop -> 10
marginBottom -> 30
});
</script>
</head>
<body>
<div id="div1" style="display:table-column">aaaaaaaaaaa</div>
</body>
</html>
