JQuery操作基本选择器
jQuery 操作 基本 选择器
2023-09-14 09:07:47 时间
<body> <input type="button" id="btn1" value="选择为one的元素"/> <input type="button" id="btn2" value="选择样式为mini的元素"/> <input type="button" id="btn3" value="选择所有的div元素"/> <input type="button" id="btn4" value="选择所有元素"/> <input type="button" id="btn5" value="选择id为two并且样式为mini的元素"/> <hr/> <div id="one"> <div class="mini"> 111 </div> </div> <div id="two"> <div class="mini"> 222 </div> <div class="mini"> 333 </div> </div> <div id="three"> <div class="mini"> 444 </div> <div class="mini"> 555 </div> <div class="mini"> 666 </div> </div> <span id="four"> </span> </body>
style.css
body { font:12px/19px Arial, Helvetica, sans-serif; color:#666;}
form div { margin:5px 0;}
.int label { float:left; width:100px; text-align:right;}
.int input { padding:1px 1px; border:1px solid #ccc;height:16px;}
.sub { padding-left:100px;}
.sub input { margin-right:10px; }
.formtips{width: 200px;margin:2px;padding:2px;}
.onError{
background:#FFE0E9 url(../img/reg3.gif) no-repeat 0 center;
padding-left:25px;
}
.onSuccess{
background:#E9FBEB url(../img/reg4.gif) no-repeat 0 center;
padding-left:25px;
}
.high{
color:red;
}
div,span,p {
width:140px;
height:140px;
margin:5px;
background:#aaa;
border:#000 1px solid;
float:left;
font-size:17px;
font-family:Verdana;
}
div.mini {
width:55px;
height:55px;
background-color: #aaa;
font-size:12px;
}
div.hide {
display:none;
}
table { border:0;border-collapse:collapse;}
td { font:normal 12px/17px Arial;padding:2px;width:100px;}
th { font:bold 12px/17px Arial;text-align:left;padding:4px;border-bottom:1px solid #333;}
.even { background:#FFF38F;} /* 偶数行样式*/
.odd { background:#FFFFEE;} /* 奇数行样式*/
.selected { background:#FF6500;color:#fff;}
js代码
<head> <meta charset="UTF-8"> <title>基本选择器</title> <<link rel="stylesheet" type="text/css" href="../../css/style.css"/> <script src="../../js/jquery-1.8.3.js"></script> <script> $(function(){ $("#btn1").click(function(){ $("#one").css("background-color","pink"); }); $("#btn2").click(function(){ $(".mini").css("background-color","pink"); }) $("#btn3").click(function(){ $("div").css("background-color","pink"); }) $("#btn4").click(function(){ $("*").css("background-color","pink") }) $("#btn5").click(function(){ $("#two,mini").css("background-color","pink") }) }) </script> </head>
相关文章
- jquery ajax步骤,jquery ajax(ajax请求的五个步骤jQuery)
- jQuery EasyUI+ashx实现数据库的CIUD操作
- jQuery Google Charts—-一个封装google chart api的jquery插件详解编程语言
- jQuery图片切换插件jquery.cycle.js详解编程语言
- jquery常用操作整理基础入门篇
- jQuery判断元素上是否绑定了事件
- Jquery常用方法经典总结
- jquery查找新建元素代码
- JQuery中的$.getJSON使用说明
- jquery对表单操作2
- jQuery操作select的实例代码
- jQuery操作inputtype=radio的实现代码
- 关于锚点跳转及jQuery下相关操作与插件
- js/jQuery对象互转(快速操作dom元素)
- JQUERY对单选框(radio)操作的小例子
- JQuery中关于jquery.js与jquery.min.js的比较探讨
- jQuery.attr()和.removeAttr()方法操作元素属性示例
- jquery自定义类似$.ajax()的方法实现代码
- 使用CSS和jQuery模拟select并附提交后取得数据的代码
- Jquery数组操作大全个人总结
- jQuery操作Select的Option上下移动及移除添加等等
- jQuery中获取checkbox选中项等操作及注意事项
- jquery中的过滤操作详细解析
- 解析jQuery的三种bind/One/Live事件绑定使用方法
- jquery操作复选框(checkbox)的12个小技巧总结
- jquery动态更换设置背景图的方法
- jQuery学习笔记之Ajax操作篇(二)-数据传递
- jquery+ajax验证不通过也提交表单问题处理
- 超级简单的jquery操作表格方法
- jquery操作checkbox示例分享
- 用Jquery选择器计算table中的某一列某一行的合计
- jQuery修改class属性和CSS样式整理