jQuery特殊属性操作
val方法
val方法用于设置和获取表单元素的值，例如input、textarea的值
//设置值 $("#name").val(“张三”); //获取值 $("#name").val();
案例：京东搜索.html
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>搜索框</title> </head> <body> <input type="button" value="搜索" id="btn"> <input type="text" value="内容，你一点我我就没了" id="txt"> <script src="jquery-1.12.4.js"></script> <script> $(function () { $("#txt").focus(function () { //如果是默认值，清空内容 if($(this).val() === "内容，你一点我我就没了"){ $(this).val(""); } }); $("#txt").blur(function () { if($(this).val() === ""){ $(this).val("内容，你一点我我就没了"); } }); }); </script> </body> </html>
html方法与text方法
html方法相当于innerHTML text方法相当于innerText
//设置内容 $(“div”).html(“<span>这是一段内容</span>”); //获取内容 $(“div”).html() //设置内容 $(“div”).text(“<span>这是一段内容</span>”); //获取内容 $(“div”).text()
区别：html方法会识别html标签，text方法会那内容直接当成字符串，并不会识别html标签。
width方法与height方法
设置或者获取高度
//带参数表示设置高度 $(“img”).height(200); //不带参数获取高度 $(“img”).height();
获取网页的可视区宽高
//获取可视区宽度 $(window).width(); //获取可视区高度 $(window).height();
scrollTop与scrollLeft
设置或者获取垂直滚动条的位置
//获取页面被卷曲的高度 $(window).scrollTop(); //获取页面被卷曲的宽度 $(window).scrollLeft();
案例：仿腾讯固定菜单栏案例
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> * { margin: 0; padding: 0 } img { vertical-align: top; } .main { margin: 10px auto 0; width: 1000px; } .fixed { position: fixed; top: 0; left: 0; } </style> <script src="../jquery-1.12.4.js"></script> <script> $(function () { $(window).scroll(function () { //判断卷去的高度超过topPart的高度 //1. 让navBar有固定定位 //2. 让mainPart有一个marginTop if($(window).scrollTop() >= $(".top").height() ){ $(".nav").addClass("fixed"); $(".main").css("marginTop", $(".nav").height() + 10); }else { $(".nav").removeClass("fixed"); $(".main").css("marginTop", 10); } }); }); </script> </head> <body> <div class="top" id="topPart"> <img src="images/top.png" alt=""/> </div> <div class="nav" id="navBar"> <img src="images/nav.png" alt=""/> </div> <div class="main" id="mainPart"> <img src="images/main.png" alt=""/> </div> </body> </html>
案例：小火箭返航案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body { height: 8000px; } a { color: #FFF; } .actGotop { position: fixed; bottom: 50px; right: 50px; width: 150px; height: 195px; display: none; z-index: 100; } .actGotop a, .actGotop a:link { width: 150px; height: 195px; display: inline-block; background: url(images/gotop.png) no-repeat; outline: none; } .actGotop a:hover { width: 150px; height: 195px; background: url(images/gotop.gif) no-repeat; outline: none; } </style> </head> <body> <!-- 返回顶部小火箭 --> <div class="actGotop"><a href="javascript:;" title="Top"></a></div> <script src="jquery-1.12.4.js"></script> <script> $(function () { //当页面超出去1000px的时候，让小火箭显示出来,如果小于1000，就让小火箭隐藏 $(window).scroll(function () { if($(window).scrollTop() >= 1000 ){ $(".actGotop").stop().fadeIn(1000); }else { $(".actGotop").stop().fadeOut(1000); } }); function getScroll(){ return { left:window.pageYOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0, top:window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0 } } //在外面注册 $(".actGotop").click(function () { $("html,body").stop().animate({scrollTop:0},3000); scrollTop为0 $(window).scrollTop(0); }) }); </script> </body> </html>
offset方法与position方法
offset方法获取元素距离document的位置，position方法获取的是元素距离有定位的父元素的位置。
//获取元素距离document的位置,返回值为对象：{left:100, top:100} $(selector).offset(); //获取相对于其最近的有定位的父元素的位置。 $(selector).position();
