zoukankan      html  css  js  c++  java
  • jQuery訪问属性,绝对定位

    一. jQuery訪问属性

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>jQuery attr demo</title>
    </head>
    <body>
    	<input id="check" type="checkbox" checked="checked">
    	<label for="check">复选框</label>
    	<p></p>
    </body>
    <script type="text/javascript" src="jquery-2.1.1.min.js"></script>
    <script type="text/javascript">
    	$(function(){
    		$("input").change(function(){
    			var $input = $(this);
    			$("p").html(".attr('checked') = <b>" + $input.attr('checked') + "</b><br>"
    				 	  + ".prop('checked') = <b>" + $input.prop('checked') + "</b><br>"
    				  	  + ".is(':checked') = <b>" + $input.is(':checked') );
    		}).change();
    	})
    </script>
    <style>
    b {color: red;}
    </style>
    </html>

    二. jQuery绝对定位

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>jQuery absolute fix demo</title>
    </head>
    <body>
    	<div>盒子1</div>
    	<div style="float:left">盒子2</div>
    	<div style="float:left">盒子3</div>
    </body>
    <script type="text/javascript" src="jquery-2.1.1.min.js"></script>
    <script type="text/javascript" >
    	$(function(){
        	var o1 = $("div").eq(0).offset();					//获取第一个div元素的偏移信息
        	$("div").eq(0).html( "left: " + o1.left + "<br />top: " + o1.top ); 	//显示信息
        	var o2 = $("div").eq(1).offset();					//获取第二个div元素的偏移信息
        	$("div").eq(1).html( "left: " + o2.left + "<br />top: " + o2.top ); 	//显示信息
        	var o3 = $("div").eq(2).offset();					//获取第三个div元素的偏移信息
        	$("div").eq(2).html( "left: " + o3.left + "<br />top: " + o3.top ); 	//显示信息
    	})
    </script>
    
    <style type="text/css">
    	body { padding:0; margin:0; }/*清除页边距*/
    	div {height:60px; 200px; border:solid 10px red; }/*统一div元素的显示样式*/ 
    </style>
    </html>





  • 相关阅读:
    2018级软件秋季总结
    对我影响最大的三位老师
    自我介绍
    Js中的一个日期处理格式化函数
    SQL update语句加减乘除运算
    用css让一个容器水平垂直
    position:absolute 的深入探讨
    java正则表达式
    Session
    使用Cookie进行会话管理
  • 原文地址:https://www.cnblogs.com/blfshiye/p/5273337.html
Copyright © 2011-2022 走看看