Javascript 链接外部样式表与脚本src加载jquery冲突?
嗨,我正在用jquery做一个简单的扩展滑块 滑块会以某种方式扩展到整个宽度 ,然后收缩到我指定的所需宽度 (如果多次重新加载页面,它有时会出现) 切换装载顺序后,问题似乎消失了 jquery和我的外部样式表之间的和 但我不知道为什么,我想知道是否有人知道 下面是导致问题的代码 html:Javascript 链接外部样式表与脚本src加载jquery冲突?,javascript,jquery,hyperlink,conflict,Javascript,Jquery,Hyperlink,Conflict,嗨,我正在用jquery做一个简单的扩展滑块 滑块会以某种方式扩展到整个宽度 ,然后收缩到我指定的所需宽度 (如果多次重新加载页面,它有时会出现) 切换装载顺序后,问题似乎消失了 jquery和我的外部样式表之间的和 但我不知道为什么,我想知道是否有人知道 下面是导致问题的代码 html: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xh
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="jquery-1.6.1.min.js"></script>
<link type="text/css" href="screen.css" rel="stylesheet" media="screen" />
<script>
$(document).ready(function(){
$("#slider").animate({width:'100px'},1300);
});
</script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>TEST</title>
</head>
<body>
<div id="slider">
</div>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link type="text/css" href="screen.css" rel="stylesheet" media="screen" />
<script type="text/javascript" src="jquery-1.6.1.min.js"></script>
<script>
$(document).ready(function(){
$("#slider").animate({width:'100px'},1300);
});
</script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>TEST</title>
</head>
<body>
<div id="slider">
</div>
</body>
</html>
#slider{
width:10px;
height:20px;
background:#09C;
}
在切换和的顺序之后
不断扩大的问题消失了:
html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="jquery-1.6.1.min.js"></script>
<link type="text/css" href="screen.css" rel="stylesheet" media="screen" />
<script>
$(document).ready(function(){
$("#slider").animate({width:'100px'},1300);
});
</script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>TEST</title>
</head>
<body>
<div id="slider">
</div>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link type="text/css" href="screen.css" rel="stylesheet" media="screen" />
<script type="text/javascript" src="jquery-1.6.1.min.js"></script>
<script>
$(document).ready(function(){
$("#slider").animate({width:'100px'},1300);
});
</script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>TEST</title>
</head>
<body>
<div id="slider">
</div>
</body>
</html>
#slider{
width:10px;
height:20px;
background:#09C;
}
因为脚本应该总是在静态资产之后加载 大多数浏览器从上到下逐行渲染,因此在一行上所做的更改可以在下一行上再次更改 如果先加载脚本,则样式将更改脚本