jq的siblings对a标签不起效

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<link href="reset.css" rel="stylesheet" type="text/css" />
<style type="text/css">
#d1{ width:100%; height:850px; background:#069;overflow:hidden;}
#d2{ width:100%; height:850px; background:#933;overflow:hidden;}
#d3{ width:100%; height:850px; background:#060;overflow:hidden;}
#d4{ position:fixed; top:50%; right:0;}
#d4 a{ display:block; width:100px; height:100px;}
#d4 .hover{ background:#063;}
</style>
<body>
<div id="d4">
    <ul>
        <li><a href="javascript:void(0);">1</a></li>
        <li class="hover"><a href="javascript:void(0);">2</a></li>
        <li><a href="javascript:void(0);">3</a></li>
    </ul>
</div>
<div id="d1"></div>
<div id="d2"></div>
<div id="d3"></div>
<script src="jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(function(){
            $("#d4 a").click(function(){$(this).addClass("hover").siblings().removeClass()})//这样无效       $("#d4 li").click(function(){$(this).addClass("hover").siblings().removeClass()})//这样有效
        })
</script>
</body>

</html>

不知道为什么不起作用还是我写法有问题,先记录下

jq的siblings对a标签不起效

时间: 2024-10-02 10:51:29

jq的siblings对a标签不起效的相关文章

jq动态增加的button标签click回调失效的问题,即$(&quot;button.class&quot;).click(function)

对于新增加的页面元素,改变了页面结构,如果是使用老办法$("button.class").click(function)去监听新的button标签事件,会失效. 笔者的应用是文字的显示和隐藏之间的切换,给出我的代码: 解决办法: $(document).on("click",".showPwd",function () { // alert("show now:" + ); $(this).parent().html( $(t

JQ和Js获取span标签的内容

html: 1 <span id="content">'我是span标签的内容'</span> javascript获取: 1 var content = document.getElementById("content").innerText; 2 var content = document.getElementById("content").innerHTML; jquery获取: 1 var cont=$(&quo

JQ基本选择器

JQ选择器采用CSS和Xpath选择器语法规范,满足用户在DOM中快速匹配元素或元素集合. 1.JQ支持CSS1.CSS2.CSS3.不同版本的所有选择器,而早期的很多浏览器并没有完全支持CSS3版本的选择器. 2.JQ支持不同的主流浏览器,因此使用JQ选择文档的时候就不用考虑浏览器的兼容问题了. JQ基本选择器包含的有: 1.id选择器(#id). 2.类型选择器(element). 3.类选择器(.class). 4.通配选择器(*). 5.分组选择器(selector1.selector2

jq相关操作

1事件: <div class="ele">123</div> box.onclick = function(ev){ ev:系统传入的事件对象 ele.innerText; } 鼠标事件=>clientX,clientY 键盘事件=>ctrlkey,keyCode 鼠标事件: onmouse enter|move|down|up|leave onclick|dblclick oncontextmenu 键盘事件:onkeydown|up 定时器:

javaWeb核心技术第五篇之jQuery

- 概述 - jQuery是一个优秀的javascript框架(js类库),兼容css3和各大浏览器,提供dom,events,animate,ajax等简易的操作.并且jQuery有非常丰富的插件,大多数功能都有相应的插件解决方案.jQuery的宗旨是write less, do more. (写的更少,做的更多) - jQuery入门 - jQuery和html整合 - 下载 - 下载地址:www.jquery.com - 使用script的src属性即可 "eg:<script sr

前端基础之jquery

初识jquery jQuery由美国人John Resig创建,至今已吸引了来自世界各地的众多 javascript高手加入其team. jQuery是继prototype之后又一个优秀的Javascript框架.其宗旨是——WRITE LESS,DO MORE! 它是轻量级的js库(压缩后只有21k) ,这是其它的js库所不及的,它兼容CSS3,还兼容各种浏览器. jQuery是一个快速的,简洁的javaScript库,使用户能更方便地处理HTMLdocuments.events.实现动画效果

jquery 练习笔记

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 .body{ 8 color: #0e90d2; 9 height: 2000px; 10 } 11 12 .selected{ 13 color: red; 14 } 15

HTML基础(jQuery)

jQuery是一个兼容多浏览器的JavaScript库,提供一些可直接调用的方法,这些方法就是对JavaScript进行了封装. 这些方法主要分为两大类:查找和操作 介绍几个目前了解的(文章中的元素和标签是一个意思): 查找: 1.选择器:用来查找页面元素 2.筛选:用来对查找到的元素进行过滤或进行关系查找(找亲戚) 操作: 3.属性:获取或添加元素的属性 4.CSS:修改元素的样式和属性 具体使用方式用例子来说明: 1.选择器 例子说明:由于此例只是为了说明各种查找方法的使用,所以看代码即可,

夺命雷公狗jquery---46查找操作

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="js/jquery.js"></script> <script> $(function(){ $('#btnok').bind('click',function(){ //1.选取页面中的第3个di