Jquery css样式的设计

来源：互联网发布：2018年云计算展会编辑：程序博客网时间：2024/04/30 23:56

<1>

<script src="../../Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>    <script type="text/javascript">        $(function () { border-radius","5px"            $("div").css("background", "Red").css("width", "20").css("height", "35").css("margin", "30px").css("border-radius","5px" )             //border-radius","5px"是圆边        })    </script>

<2>

<html><head>    <title></title>    <script src="jquery-2.1.3.js"></script>    <style type="text/css">        .divClass {        /*border:1px solid red ;*/        border-width:1px;        border-style:solid;        border-color:red;        }    </style></head><body>    <div>中国</div></body></html><script type="text/javascript">    $(function () {        $("div").height(100).width(100).addClass("divClass"); //用jquery来设置div的宽度和高度        //或者也可以下面这种方式来实现        $("div").css("height", 100).css("width", 100).addClass("divClass"); //用css来设置div的宽度和高度        //或者也可以下面这种方式来实现        $("div").css({ "height": "100", "width": "100" }).addClass("divClass"); //在一个css中设置多种样式        //或者也可以下面这种方式来实现        $("div").height(100).width(100).css("border-width", "1px").css("border-style", "solid").css("border-color", "red");        alert($("div").height()); //如果height()括号里没有值，就获取高度，如果有值，就是设置高度        alert($("div").width());  //如果width()括号里没有值，就获取宽度，如果有值，就是设置宽度    })</script>

在现代的浏览器中，他们已经自带了超链接提示，只需要在超链接中加入title属性就可以了。然而这个提示效果的响应速度是非常缓慢的，考虑到良好的人机交互，需要的是当鼠标移动到超链接那一瞬间就提示，这时候就需要移除<a>标签的title提示效果，自己动手做一个类似的功能的提示。代码如下

其实就是一个鼠标跟随的效果

<html><head>    <title></title>    <script src="jquery-2.1.3.js"></script></head><body>    <div>        <a href="http://www.baidu.com" title="百度" >百度</a>        <a href="http://www.sohu.com" title="搜狐">搜狐</a>        <a href="http://www.qq.com" title="腾讯">腾讯</a>        </div></body></html><script type="text/javascript">    $(function () {        $("div > a").mouseenter(function (e) {                        var a_titleRemove = this                        //注意：style=position:absolute;表示绝对定位。这句一定不能，少了这个div就不能跟随鼠标移动了            var addDiv = "<div id=tooltip style=position:absolute;>" + this.title + "</div>" //创建用于“提示”的<div>元素            $("body").append(addDiv); //将它添加到<body>中            $("#tooltip").css({ "top": e.pageY + "px", "left": e.pageX + "px" }).show("fast"); //设置提示div的X坐标和Y坐标，变将它的显示速度设为快        }).mouseleave(function () {            $("#tooltip").remove(); //鼠标离开，移除提示div        })    })</script>

0 0