<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>