标签：包含 3.1 scrollto 出现 table 的区别 over 特性 标题样式
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>jq获取鼠标的位置</title>
<style>
div{
width: 500px;
height: 500px;
background-color: #585858;
margin: 0;
padding: 0;
}
</style>
<script type="text/javascript" src="../../js/jquery-3.1.1.min.js"></script>
</head>
<body>
<div id="d">
</div>
</body>
<script type="text/javascript">
$(‘#d‘).mousemove(function(f){
/* var xx = f.originalEvent.x|| f.originalEvent.layerX||0;
var yy = f.originalEvent.y|| f.originalEvent.layerY||0;*/
var xx = f.pageX;
var yy = f.pageY;
$(this).text(xx+‘,‘+yy);
})
/*根据出现的“originalEvent”一词可猜测题主的本意是比较jquery下
e.pageX和e.originalEvent.x的区别（因为originalEvent是jq在对构造一个jq版e对象后引用的原始e对象）。
根据jq源码，jq版e对象下的pageX和原生的pageX是一致的，但是增加了对旧版本IE的实现部分。
于是题目可蜕化为原生e.pageX与e.x的区别，以及jq为IE8-浏览器实现的e.pageX与原生e.x的区别。
考虑jq的跨平台特性，我们在不清楚具体情况的时候，直接通过其补丁的实现方式来猜测属性的定义。
根据jq对无原生pageX的浏览器的补丁实现
event.pageX = original.clientX + ( doc && doc.scrollLeft || body && body.scrollLeft || 0 )
- ( doc && doc.clientLeft || body && body.clientLeft || 0 );
到这里我们已经基本清楚pageX的涵义，是包含了滚动条的计算的。
实际上，e.pageX在各（支持的）浏览器下的表现都是一致的，都是表达点击位置相对于整个文档的位置，用题主的话说就是“计算了滚动条”。
兼容性来说，e.pageX除了在IE系列中低于IE9的版本中是不支持的，IE9+和其它主流浏览器全部一致支持。
可是e.x的情况很复杂……
首先，fx不支持e.x。这没啥好说的。
其次，除IE外的其它主流浏览器，opera、chrome（以及其它同内核的浏览器），都支持e.x属性,
其值为“相对可视区域的坐标”——没错，对它们来说，e.x == e.clientX。用题主的话说就是“没有计算滚动条”。
再来看看e.x属性的发明者IE。IE全系列支持e.x
被点击对象所在的坐标系（即最近一个指定position: relative的tag的左上角的border外边界为原点）的坐标位置。
如果自身及上层均没有指定position: relative属性，则蜕变为相对于“相对可视区域的坐标”。
题外话，通过F12发现，IE一旦涉及滚动条后计算居然不是整像素数，而是会出现误差小数的！*/
</script>
</html>
<!--<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>javascript获得鼠标位置</title>
</head>
<body>
<script>
function mouseMove(ev)
{
Ev= ev || window.event;
var mousePos = mouseCoords(ev);
document.getElementById("xxx").value = mousePos.x;
document.getElementById("yyy").value = mousePos.y;
}
function mouseCoords(ev)
{
if(ev.pageX || ev.pageY){
return {x:ev.pageX, y:ev.pageY};
}
return{
x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
y:ev.clientY + document.body.scrollTop - document.body.clientTop
};
}
document.onmousemove = mouseMove;
</script>
鼠标X轴:
<input id=xxx type=text>
鼠标Y轴:
<input id=yyy type=text>
</body> -->
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>遍历数组【2，4，6，8】，为每个元素加1</title>
</head>
<body>
</body>
<script type="text/javascript">
var a=‘2468‘;
var reg=/[0-9]/g;//为什么用/^[0-9]&/g不可以输出数组
b=a.match(reg);
for(var i=0;i< b.length;i++){
alert(parseInt(b[i])+1);
}
</script>
</html>
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../../js/jquery-3.1.1.min.js"></script>
<style>
div{
background-color: #585858;
color: white;
float: left;
margin: 10px 20px 10px;
padding: 45px 10px 20px 10px;
width: 150px;
height: 50px;
text-align: center;
}
.a{
background-color: #ff6600;
}
</style>
</head>
<body>
<div>资讯动态</div>
<div>产品世界</div>
<div>市场营销</div>
</body>
<script>
$(‘div‘).mouseover(function(){
// $(this).css(‘background-color‘,‘#ff6600‘);
$(this).addClass(‘a‘);
}).mouseout(function(){
//$(this).css(‘background-color‘,‘#585858‘);
$(this).removeClass(‘a‘);
})
</script>
</html>
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>单选水果，点击改变图片，显示选择的水果图片</title>
<script type="text/javascript" src="../../js/jquery-3.1.1.min.js"></script>
</head>
<body>
<div>
<img src="../../image/水果.jpg" />
选择你喜欢的水果
<input type="radio" value="pg" name="sg"/>苹果
<input type="radio" value="cz" name="sg"/>橙子
<input type="radio" value="yt" name="sg"/>油桃
<input type="radio" value="mht" name="sg"/>猕猴桃
<input type="radio" value="cm" name="sg"/>草莓
<button>点击查看水果图片</button>
</div>
</body>
<script type="text/javascript">
$(‘button‘).click(function () {//button点击的方法，click
if ($(‘input:radio[value="pg"]:checked‘).val()) {
$(‘img‘).attr(‘src‘,‘../../image/苹果.jpg‘);
}
if ($(‘input:radio[value="cz"]:checked‘).val()) {
$(‘img‘).attr(‘src‘,‘../../image/橙子.jpg‘);
}
if ($(‘input:radio[value="yt"]:checked‘).val()) {
$(‘img‘).attr(‘src‘,‘../../image/油桃.jpg‘);
}
if ($(‘input:radio[value="mht"]:checked‘).val()) {
$(‘img‘).attr(‘src‘,‘../../image/猕猴桃.jpg‘);
}
if ($(‘input:radio[value="cm"]:checked‘).val()) {
$(‘img‘).attr(‘src‘,‘../../image/草莓.jpg‘);
}
})
</script>
</html>
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../../js/jquery-3.1.1.min.js"></script>
<style>
table{
border: 1px solid black;
border-collapse:collapse;
}
td{
border: 1px solid black;
width: 200px;
height: 50px;
}
</style>
</head>
<body>
<table>
<tr>
<td>书名</td>
<td>价格</td>
</tr>
<tr id="tr2">
<td>看得见风景的房间</td>
<td>￥30.00</td>
</tr>
<tr>
<td>60个瞬间</td>
<td>￥60.00</td>
</tr>
</table>
<button id="button1">增加一行</button>
<button id="button2">删除第二行</button>
<button id="button3">修改标题样式</button>
<button id="button4">复制最后一行</button>
</body>
<script type="text/javascript">
var td=$("<tr><td>幸福从天而降</td><td>￥18.50</td></tr>");
$(‘#button1‘).click(function(){
var tdc=td.clone();
$(tdc).insertAfter($(‘#tr2‘));
$(‘#tr2‘).after($(tdc));
})
$(‘#button2‘).click(function(){
var tr2=$(‘table tr:eq(2)‘);//eq(2)表示第三行。
tr2.remove();
})
$(‘#button3‘).click(function(){
$(‘table tr:eq(0)‘).
css({‘color‘:‘red‘,‘font-size‘:‘20px‘,‘font-weight‘:‘bolder‘});
})
$(‘#button4‘).click(function(){
$(‘table tr:last-child‘).clone().appendTo(‘table‘);
})
</script>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../js/jquery-3.1.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
$("#b").click(function(){
var val=$("input:checked").val();
switch(val) {
case ‘a‘:
$("img").attr(‘src‘,‘../img/a.jpg‘);
break;
case ‘b‘:
$("img").attr(‘src‘,‘../img/b.jpg‘);
break;
case ‘c‘:
$("img").attr(‘src‘,‘../img/c.jpg‘);
break;
case ‘d‘:
$("img").attr(‘src‘,‘../img/d.jpg‘);
break;
case ‘e‘:
$("img").attr(‘src‘,‘../img/e.jpg‘);
break;
}
})
})
</script>
</head>
<body>
<img src="../img/b.jpg"/>
<br />
<h1>请选择水果</h1>
<input type="radio" name="fruit" value="a" checked="checked" />香蕉
<input type="radio" name="fruit" value="b" />梨
<input type="radio" name="fruit" value="c" />葡萄
<input type="radio" name="fruit" value="d" />苹果
<input type="radio" name="fruit" value="e" />西瓜
<input type="button" id="b" value="改变图片" />
</body>
</html>标签：包含 3.1 scrollto 出现 table 的区别 over 特性 标题样式
原文地址：https://www.cnblogs.com/CaseyWei/p/9404594.html
