1.使用CSS中的伪类选择符来实现当文本框获取焦点后颜色有变化,失去焦点后恢复为原来的样式。
假设 form表单里,仅有input和textarea标签。则css样式为:
input:focus,textarea:focus{ border:1px solid #0094ff; background:#ffd800; }
2.使用jquery实现checkbox全选、全不选、反选功能
Html代码如下:
<form> 你爱好的运动是?<br /> <input type="checkbox" name="items" value="足球" />足球 <input type="checkbox" name="items" value="篮球" />篮球 <input type="checkbox" name="items" value="羽毛球" />羽毛球 <input type="checkbox" name="items" value="乒乓球" />乒乓球<br /> <input type="button" id="CheckedAll" value="全选" /> <input type="button" id="CheckedNo" value="全不选" /> <input type="button" id="CheckedRev" value="反选" /> <input type="button" id="send" value="提交" /> </form>
Jquery代码如下:
$(function(){ //全选 $("#CheckedAll").click(function () { $('[name=items]:checkbox').attr('checked', true); }) //全不选 $("#CheckedNo").click(function () { $('[name=items]:checkbox').attr('checked',false); }) //反选 $("#CheckedRev").click(function () { $('[name=items]:checkbox').each(function () { $(this).attr("checked",!$(this).attr("checked")) }) })
//输出 $("#send").click(function () { var str = "您选中的值是:\r\n"; $('[name=items]:checkbox:checked').each(function () { str+=$(this).val()+"\r\n"; }) alert(str); })
})
2.使用css选择器来定位对象并实现所需
html代码如下:
<div class="hhTitle01">
<ul>
<li class="cur" lang="/h_News/NewsList.aspx?ID=92">业内新闻</li>
<li lang="/h_News/NewsList.aspx?ID=93">通知公告</li>
</ul>
<span><a href="/h_News/NewsList.aspx?ID=92">更多>></a></span>
</div>
jquery来实现 选择哪个选项卡更多现实哪个选项卡,代码如下:
$(document).ready(function (e) { $(".hhTitle01 ul li").click(function () { var url = $(this).attr("lang"); $(this).parent().next("span").find("a").attr("href", url) }) });
此案例好多网站均能使用。
3.遮罩层:控制img在div的垂直居中水平居中
html代码如下:
<div class="pic_div" id="pic_div"> <div class="pic_style"> <img id="pic_img" src="images/ceng.png"> </div> </div> <div class="shade_div" id="shade_div"></div>
javascript代码如下:
<script type="text/javascript"> $(function () { $("img").click(function () { $("#shade_div").fadeIn(500); $("#pic_div").fadeIn(900); $("#pic_img").attr("src", $(this).attr("src")); }); $("#pic_div").click(function () { $("#shade_div").fadeOut(900); $("#pic_div").fadeOut(500); }); }) </script>
css样式如下:
.pic_div {
position: fixed;
width: 100%;
height: 100%;
z-index: 9699;
top: 0px;
left: 0px;
display: none;
}
.pic_style {
width: 100%;
height:100%;
position:absolute;
}
.pic_style img
{ width:60%;
height:40%;
position:absolute;
top:25%;
left:20%;
}
.shade_div {
background: #030303;
width: 100%;
height: 100%;
z-index: 2;
position: fixed;
top: 0px;
left: 0px;
filter: alpha(opacity=50);
-moz-opacity: 0.50;
opacity: 0.50;
display: none;
}
以上遮罩层的功能就能实现。具体地图片大小可在样式里根据具体的需求具体更改。
4.js里选择器的实例
var paperCode = $("#papers").siblings().children("dd[className*='active']").attr("id");