为啥html页面里jQuery选择器不起作用
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了为啥html页面里jQuery选择器不起作用相关的知识，希望对你有一定的参考价值。
<html>
<head>
<title>jQueryTest.html</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-1.8.0.js"></script>
<script type="text/javascript">
$(function()
$("p").click(function()
alert("sfsfsalkfjaslk");
$(this).hide();
);
);
$(document).ready(function()
$('p').css('background','#000');
);
$(function()
$('p').css('font-size', '12px');
);
</script>
</head>
<body>
<p>
点击我会消失哦！
</p>
</body>
</html>
1、没有引用jquery文件
2、引用jquery文件路径不正确
3、引用jquery文件版本库不正确
4、选择器之前代码中有bug导致运行停止
5、选择器执行时元素不存在（在页面加载完成前调用） 参考技术A 1、确认jquery文件是否载入，调用地址是否正确。
2、确认选择器是否合法。
3、把获取的语句放在$(window).load=function() ....这里...，或者$(function()...这里...)。原因是如果你在文档的前部就使用$("选择器")，可能应为文档为载入完整的问题导致获取不到。
具体也可以贴上代码看看。 参考技术B 哪里不起作用呢，是$('p').css('font-size', '12px');吗，是的话，应为$('p').css('fontSize', '12px');
在js里-符号要去掉，后面的第一个字母大写 参考技术C 没有引入吧，需要在body结束标签前引入：
<body>
''''''
''''''
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
</body>
这样肯定行啦 参考技术D 我这里试了一下没问题，我用的是jquery-1.4.4.min.js,也许你的引用路径或jQuery库有问题。本回答被提问者采纳
jQuery下一个选择器不起作用，手风琴的语法调整
【中文标题】jQuery下一个选择器不起作用，手风琴的语法调整【英文标题】：jQuery next selector not working, syntax adjustment for accordion 【发布时间】：2013-06-12 16:56:49 【问题描述】：我在每个页面上都有一个手风琴，但只希望打开适用于该页面所在类别的切换容器，其余的关闭。我一直在研究 2 个小时，但无法弄清楚。
这是我写的：
$(document).ready(function ()
$(".toggle-container:not(#commercial:next.toggle_container").hide();
$("#commercial").addClass("active").children().show();
$(".trigger").click(function ()
$(".toggle_container:visible").slideUp('slow');
$(this).toggleClass("active").next().slideToggle("slow");
return false;
);
);
css:
.toggle_container
display: none;
html sn-p:
<div class="accordian">
<h3 id="rack-structures" class="trigger"><a href="#">Rack Structures</a></h3>
<div class="toggle_container">
<div class="block">
<p><a href="HEB-grocery-rack-structure-steel-contractor.html?panel=4"><img src="../images/1projects/mwsteel.jpg" />H-E-B Corporation</a></p>
<p> <strong>Location:</strong> San Antonio TX</p>
<p> Midwest Steel has great experience with specialized rack structure projects. This project was for a very large grocery chain serving the state of Texas.</p>
</div>
</div>
<!-- tab entry -->
<div class="accordian">
<h3 id="commercial" class="trigger"><a href="#">Commercial</a></h3>
<div class="toggle_container">
<div class="block">
<p><a href="commercial-high-rise-structural-steel-contractor.html?panel=5"><img src="../images/1projects/mwsteel.jpg" />Hyatt Corporation World Headquarters<br />
Chicago, IL</a></p>
<p><a href="hotel-casino-structural-steel-contractor.html?panel=5"><img src="../images/1projects/mwsteel.jpg" />MGM Grand Hotel Casino<br />
Detroit, MI</a></p>
<p><a href="convention-center-structural-steel-contractor.html?panel=5"><img src="../images/1projects/mwsteel.jpg" />Cobo Center<br />
Detroit, MI</a></p>
</div>
</div>
</div>
<!-- tab entry -->
<div class="accordian">
<h3 id="airport-aerospace" class="trigger"><a href="#">Airport/Aerospace</a></h3>
<div class="toggle_container">
<div class="block">
<p><a href="airport-terminal-structural-steel-contractor.html?panel=6"><img src="../images/1projects/mwsteel.jpg" />NASA Moblie Launcher<br />
Kennedy Space Center, FL</a></p>
<p><a href="airport-terminal-structural-steel-contractor.html?panel=6"><img src="../images/1projects/mwsteel.jpg" />Detroit Metropolitan Airport North Terminal Expansion<br />
Romulus, MI</a></p>
<p><a href="airport-structural-steel-contractor.html?panel=6"><img src="../images/1projects/mwsteel.jpg" />Wichita Mid-Continent Airport <br />
Wichita, KS</a></p>
</div>
</div>
</div>
【问题讨论】：
【参考方案1】：此行包含错误：
$(".toggle-container:not(#commercial:next.toggle_container").hide();
检查控制台，它就在那里。为此改变它：
$(".toggle-container:not(#commercial + .toggle_container)").hide();
【讨论】：
哎呀，我看到了一个错误，但是上面的代码也不起作用。【参考方案2】：您只是在这一行中缺少一个右括号：
$(".toggle-container:not(#commercial:next.toggle_container").hide();
应该是：
$(".toggle-container:not(#commercial:next.toggle_container)").hide();
jsFiddle
【讨论】：
试试这个link。这是你要找的吗？以上是关于为啥html页面里jQuery选择器不起作用的主要内容，如果未能解决你的问题，请参考以下文章