<!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>jQuery练习题
原文地址：https://www.cnblogs.com/CaseyWei/p/9404594.html