第二十一节（Jquery文档属性和插件）
浏览数：22 /
时间：2015年06月09日
1：添加css样式 <script type="text/javascript" src="jquery-1.11.1.min.js"></script> </head> <body> <div id="box"></div> <script type="text/javascript"> $(function(){ //css() offset() width() height() innerWidth innerHeight //outerHeight outerWidth //scrollTop scrollHeight /* //javascript追加样式 var boxDom = document.getElementById("box"); boxDom.style.border = "1px solid red"; boxDom.style.width = "200px"; boxDom.style.height = "200px"; boxDom.style.background = "green"; */ //jquery var $divBox = $("#box"); //$divBox.width(200).height(200); //$divBox.css("border","1px solid red").css("width",200) //.css("height",200).css("background","green"); /* //最容易理解的方式 $divBox.css("border","1px solid red"); $divBox.css("width",200); $divBox.css("height",200); $divBox.css("background","green"); //连写方法 $divBox.css("border","1px solid red").css("width",200) .css("height",200).css("background","green");*/ $divBox.css({ "border":"1px solid red", "width":200, "height":200, "background":"green" }); //$divBox.attr("username","ming").attr("age",20); $divBox.attr({ "username":"KID", "age":20, "email":"[email protected]" }); $divBox.removeAttr("username age");//删除属性 }); </script> </body>
2：获取盒子高度 <script type="text/javascript" src="jquery-1.11.1.min.js"></script> <style type="text/css"> #box{height:89px;width:450px;border:1px solid red;padding:1px;margin:1px;background:red;} </style> </head> <body> <div> <div id="box"> </div> </div> <script type="text/javascript"> $(function(){ //width() height() innerWidth innerHeight //outerHeight outerWidth var boxDom = document.getElementById("box"); //alert("盒子的高度和宽度是:"+parseInt(boxDom.offsetWidth)+"-==="+parseInt(boxDom.offsetHeight));//parseInt是转换成数字 //jquery var $boxDom = $("#box"); var border = $boxDom.css("borderColor"); alert(border); alert("盒子的高度height和宽度width是:"+$boxDom.width()+"-==="+$boxDom.height()); alert("盒子的高度innerHeight和宽度innerWidth是:"+$boxDom.innerWidth()+"-==="+$boxDom.innerHeight()); //不算border 但是算padding //都算border padding //如果设置里面设置为true 算border padding margin }); </script> </body>
3：用offset获取第一个元素的位置
此例题为百度补全功能： <script type="text/javascript" src="jquery-1.11.1.min.js"></script> <style type="text/css"> #box{height:209px;width:240px;border:1px solid #bbb;padding:1px;margin:1px;background:#f9f9f9;overflow:auto;display:none;position:absolute;} #box div{float:left;text-align:left;height:35px;line-height:35px;border-bottom:1px dotted #999;width:100%;} #box div:hover{background:#333;color:#fff;} </style> </head> <body style="text-align:center;"> <div style="margin:50px auto;"> <input type="text" id="email" /> </div> <div id="box"> <div>11111</div> <div>22222</div> <div>33333</div> <div>44444</div> <div>55555</div> <div>66666</div> </div> <script type="text/javascript"> $(function(){ $("#email").focus(function(){ //offset()获取一个元素所在的位置 var offset = $(this).offset(); var left = offset.left; var top = offset.top+$(this).height()+6; var $input = $(this); $("#box").show().css({"left":left,"top":top}); $("#box").find("div").on("click",function(){ var text = $(this).text(); $input.val(text);//给元素赋值 //$("#box").hide("slow"); //$("#box").fadeOut("slow"); $("#box").slideUp(300);//折叠效果 }); }); }); </script> </body>
4：获取滚动条的高度 可实现时间滚动轴： <script type="text/javascript" src="jquery-1.11.1.min.js"></script> <style type="text/css"> #box{height:289px;width:450px;border:1px solid red;padding:1px;margin:1px;background:red;overflow:auto;} </style> </head> <body> 1.2.测试时 好多同学说邮箱收不到。可能邮箱发送功能有些问题。 赞(0) 1.在注册账号时，点击获取邮箱验证码后，刷新页面，这时会将验证码显示在输入框中。此方法不需要 邮箱正真收到 验证码。只要提示已发送。就可刷新出验证码。 2.测试时 好多同学说邮箱收不到。可能邮箱发送功能有些问题。1.在注册账号时，点击获取邮箱验证码后，刷新页面，这时会将验证码显示在输入框中。此方法不需要 邮箱正真收到 验证码。只要提示已发送。就可刷新出验证码。 2.测试时 好多同学说邮箱收不到。可能邮箱发送功能有些问题。 赞(0) 1.在注册账号时，点击获取邮箱验证码后，刷新页面，这时会将验证码显示在输入框中。此方法不需要 邮箱正真收到 验证码。只要提示已发送。就可刷新出验证码。 2.测试时 好多同学说邮箱收不到。可能邮箱发送功能有些问题。 <div id="box"> 1.在注册账号时，点击获取邮箱验证码后，刷新页面，这时会将验证码显示在输入框中。此方法不需要 邮箱正真收到 验证码。只要提示已发送。就可刷新出验证码。 2.测试时 好多同学说邮箱收不到。可能邮箱发送功能有些问题。 赞(0) 1.在注册账号时，点击获取邮箱验证码后，刷新页面，这时会将验证码显示在输入框中。此方法不需要 邮箱正真收到 验证码。只要提示已发送。就可刷新出验证码。 2.测试时 好多同学说邮箱收不到。可能邮箱发送功能有些问题。 赞(0)1.在注册账号时，点击获取邮箱验证码后，刷新页面，这时会将验证码显示在输入框中。此方法不需要 邮箱正真收到 验证码。只要提示已发送。就可刷新出验证码。 2.测试时 好多同学说邮箱收不到。可能邮箱发送功能有些问题。 赞(0) </div> <input type="button" value="获取滚动条距离顶部的高度" onclick="tm_scroll()"> <script type="text/javascript"> $(function(){ //scrollTop() //offset() }); function tm_scroll(){ var $box = $("#box"); var scrollTop = $box.scrollTop(); alert("距离滚动条顶部的高度是:"+scrollTop) var boxDom = $box.get(0); var scrollHeight = boxDom.scrollHeight; alert("滚动条的高度是:"+scrollHeight); //获取浏览器的滚动条 scrollTop和scrollHeight var bscrollTop = $(window).scrollTop(); alert("浏览器滚动条距离顶部的scrollTop高度是:"+bscrollTop+"=="+getScrollTop()); alert("浏览器滚动条距离顶部的scrollHeight高度是:"+getScrollHeight()); } //获取浏览器的滚动条的高度 function getScrollHeight() { return Math.max(document.body.scrollHeight, document.documentElement.scrollHeight); } //获取浏览器的顶部高度 function getScrollTop() { var scrollTop = 0; if (document.documentElement && document.documentElement.scrollTop) { scrollTop = document.documentElement.scrollTop; } else if (document.body) { scrollTop = document.body.scrollTop; } return scrollTop; } </script> </body>
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
