JS技术积累总结

最新推荐文章于 2021-04-23 17:05:01 发布

dreamboycx

最新推荐文章于 2021-04-23 17:05:01 发布

阅读量544

点赞数

分类专栏：前端设计

本文链接：https://blog.csdn.net/dreamboycx/article/details/8501033

版权

前端设计专栏收录该内容

121 篇文章 1 订阅

订阅专栏

onselectstart="return false" οnselect="return false"

注：该代码是禁止用户使用鼠标左键按下选中的

谷歌地图(google maps)开发教程：https://developers.google.com/maps/documentation/javascript/tutorial?hl=zh-CN

禁止checkbox框可选的方法

<input  type=checkbox  οnclick="if(this.checked)this.checked=false">   
 
<input  type=checkbox  name=frm  value=1  οnclick="event.returnValue=false;">  
 
<input  type=checkbox  checked  οnclick="this.checked=!this.checked">  
<input  type=checkbox  checked  οnclick="return  false">  
<span  οnmοuseοver="firstChild.disabled=true"  οnmοuseοut="firstChild.disabled=false"><input  type=checkbox  checked></span>

jquery选择radio与取消radio的方法

JS：

	<script type="text/javascript">
		$(function(){
			var flag = true;
			$("#rad,#rad2").click(function(){
				var status = $(this).attr('checked');
				$(this).attr('checked',flag);
				flag = !flag;
			});
		}); 

	</script>

HTML：

	<input type="radio" name="rad" id="rad" value="1" checked="checked"/>
	<input type="radio" name="rad2" id="rad2" value="2"/>

  $(":input[name=set]").click(function(){
  //$('#select_id')[0].selectedIndex = 2;
  var sel = $('#select_id')[0].selectedIndex;
  var sext = $('#select_id option:selected').text();
  alert(sel);
  alert(sext);
  });
  
  $("#select_id").change(function(){
	  var sel = $('#select_id')[0].selectedIndex;
	  var val = $('#select_id')[0].options[sel].value;
	  alert(val);
	  if(sel==1){
	  	$(":input[name=set]").attr("disabled",true);
	  }else{
	  	$(":input[name=set]").attr("disabled",false);
	  }
  });

注：jquery 操作表单中的下拉菜单

e.pageX;event.clientX,event.clientY,scrollLeft,clientLeft获取鼠标位置

事例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type='text/javascript'>
function mousePosition(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
    }
}
function mouseMove(ev){
    ev = ev || window.event;
    var mousePos = mousePosition(ev);//mousePos现在为一个类
    document.getElementById('txt').value=mousePos.x+":"+mousePos.y
} 
document.onmousemove = mouseMove
</script>
</head>
<body>
<div>
    <input id="txt"/>
</div>
</body>
</html>

注：因为我们要在 MSIE 和其他浏览器下运行，Firefox 和其他浏览器用 event.pageX 和 event.pageY 来表示鼠标相对于文档的位置，如果你有一个 500*500 的窗口并且你的鼠标在绝对中间，那么 pageX 和 pageY 的值都是 250，如果你向下滚动 500，那么 pageY 将变成 750。

MSIE 正好相反，它使用 event.clientX 和 event.clientY 表示鼠标相当于窗口的位置，而不是文档。在同样的例子中，如果你向下滚动500，clientY 依然是 250，因此，我们需要添加 scrollLeft 和 scrollTop 这两个相对于文档的属性。最后，MSIE 中文档并不是从 0，0 开始，而是通常有一个小的边框（通常是 2 象素），边框的大小定义在 document.body.clientLeft 和 clientTop 中，我们也把这些加进去。

事例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>jQuery - Start Animation</title>

    <script type="text/javascript" src="jquery-1.7.2.min.js"></script>

    <script type="text/javascript">
	var mouse_x;
	var mouse_y;
	var client_width;
        $(document).ready(function()
        {

			$("input").click(function(e){
				mouse_x=e.pageX;
				mouse_y=e.pageY+15;
				client_width=document.body.clientWidth;
				//alert(mouse_x);
				
				$("#divTip").css({"top": mouse_y,"left": mouse_x}).show("fast");
			});
			
		
			
        });
    </script>

</head>
<body>
   
        
   
    <input name="myinp" type="text"  /><br /><br /><br /><br /><br />
    <input name="myinp2" type="text"  />
    <div id="divTip" style="
word-wrap: break-word; border:1px #0000FF solid; width:200px; height:100px; position:absolute; top:0; left:0;display:none">滴答滴答滴答滴答滴答滴答答滴答滴答滴答滴答滴答滴答答</div>
</body>
</html>

dreamboycx

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS技术积累总结

onselectstart="return false" onselect="return false"注：该代码是禁止用户使用鼠标左键按下选中的谷歌地图(google maps)开发教程：https://developers.google.com/maps/documentation/javascript/tutorial?hl=zh-CN $(":input[name
复制链接

扫一扫