Jquery和CSS--点滴精华总结

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 = "您选中的值是:
";
                $('[name=items]:checkbox:checked').each(function () {
                    str+=$(this).val()+"
";
                })
                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;
     100%;
    height: 100%;
    z-index: 9699;
    top: 0px;
    left: 0px;
    display: none;
}
.pic_style {
     100%;
    height:100%;
    position:absolute;
}
.pic_style img
{   60%;
    height:40%;
    position:absolute;
    top:25%;
    left:20%;
    }
.shade_div {
    background: #030303;
     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");