jQuery基础–jQuery特殊属性操作
- 2019 年 10 月 10 日
- 笔记
1、index()
会返回当前元素在所有兄弟元素里面的索引。
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <ul> <li><a href="#">我是链接</a></li> <li><a href="#">我是链接</a></li> <li><a href="#">我是链接</a></li> <li><a href="#">我是链接</a></li> <li><a href="#">我是链接</a></li> <li><a href="#">我是链接</a></li> <li><a href="#">我是链接</a></li> <li><a href="#">我是链接</a></li> <li><a href="#">我是链接</a></li> </ul> <script src="jquery-1.12.4.js"></script> <script> $(function () { //index()会返回当前元素在所有兄弟元素里面的索引。 $("li").click(function () { console.log($(this).index()); }); }); </script> </body> </html>
2、
1.1. val方法
val方法用于设置和获取表单元素的值，例如input、textarea的值
//设置值 $("#name").val(“张三”); //获取值 $("#name").val();
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>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 () { //console.log($("#btn").val()); //$("#btn").val("哈哈"); //console.log($("#btn").attr("value")); //$("#txt").val("123"); $("#txt").focus(function () { //如果是默认值，清空内容 if($(this).val() === "洋酒"){ $(this).val(""); } }); $("#txt").blur(function () { if($(this).val() === ""){ $(this).val("洋酒"); } }); }); </script> </body> </html>
1.2. html方法与text方法
html方法相当于innerHTML text方法相当于innerText
//设置内容 $(“div”).html(“<span>这是一段内容</span>”); //获取内容 $(“div”).html() //设置内容 $(“div”).text(“<span>这是一段内容</span>”); //获取内容 $(“div”).text()
区别：html方法会识别html标签，text方法会那内容直接当成字符串，并不会识别html标签。
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div><h3>我是标题</h3></div> <script src="jquery-1.12.4.js"></script> <script> $(function () { //html:innerHTML text:innerText //console.log($("div").html());//<h3>我是标题</h3> //console.log($("div").text());//我是标题 //$("div").html("<p>我是文本</p>"); $("div").text("<p>我是文本</p>"); }); </script> </body> </html>
1.3. width方法与height方法
设置或者获取高度
//带参数表示设置高度 $(“img”).height(200); //不带参数获取高度 $(“img”).height();
获取网页的可视区宽高
//获取可视区宽度 $(window).width(); //获取可视区高度 $(window).height();
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div { width: 200px; height: 200px; background-color: red; padding: 10px; border: 10px solid #000; margin: 10px; } </style> </head> <body> <div></div> <script src="jquery-1.12.4.js"></script> <script> $(function () { //获取div的宽度 //console.log($("div").css("width")); //$("div").css("width", "400px"); //直接获取到的是数字 //就是获取的width的值 console.log($("div").width());//width //console.log($("div").innerWidth());//padding+width //console.log($("div").outerWidth());//padding+width+border //console.log($("div").outerWidth(true));//padding+width+border+margin //$("div").width(400); //需要获取页面可视区的宽度和高度 // $(window).resize(function () { // console.log($(window).width()); // console.log($(window).height()); // }); }); </script> </body> </html>
1.4. scrollTop与scrollLeft
设置或者获取垂直滚动条的位置
//获取页面被卷曲的高度 $(window).scrollTop(); //获取页面被卷曲的宽度 $(window).scrollLeft();
【案例：仿腾讯固定菜单栏案例】 【案例：小火箭返航案例】
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body { height: 4000px; width: 4000px; } </style> </head> <body> <script src="jquery-1.12.4.js"></script> <script> $(function () { $(window).scroll(function () { console.log($(window).scrollTop()); console.log($(window).scrollLeft()); }); }); </script> </body> </html>
<!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>
1.5. offset方法与position方法
offset方法获取元素距离document的位置，position方法获取的是元素距离有定位的父元素的位置。
//获取元素距离document的位置,返回值为对象：{left:100, top:100} $(selector).offset(); //获取相对于其最近的有定位的父元素的位置。 $(selector).position();
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Title</title> <style> * { margin: 0; padding: 0; } .father { width: 400px; height: 400px; background-color: pink; position: relative; margin: 100px; } .son { width: 200px; height: 200px; background-color: red; position: absolute; top: 100px; left: 100px; } </style> </head> <body> <div class="father"> <div class="son"></div> </div> <script src="jquery-1.12.4.js"></script> <script> $(function () { //获取元素的相对于document的位置 console.log($(".son").offset()); //获取元素相对于有定位的父元素的位置 console.log($(".son").position()); }); </script> </body> </html>
empty()
触发事件click()
trigger()
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <input type="button" value="触发" id="btn"> <p>我是一个p元素</p> <script src="jquery-1.12.4.js"></script> <script> $(function () { $("p").on("click", function () { alert("呵呵"); }) //toggle：切换 trigger：触发 $("#btn").on("click",function () { //触发p元素的点击事件 //$("p").click(); //$("p").trigger("click"); }); }); </script> </body> </html>
delay(2000)
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div { width: 400px; height: 60px; background-color: pink; text-align: center; line-height: 60px; font-size: 30px; margin: 100px auto; display: none; } </style> </head> <body> <div>这个一个提示消息</div> <script src="jquery-1.12.4.js"></script> <script> $(function () { $("div").fadeIn(1000).delay(2000).fadeOut(1000); }); </script> </body> </html>
链式编程
//设置性操作：可以链式编程 //获取性操作，不能链式，因为获取性操作，数值，字符串， //返回值是不是一个jq对象。 console.log($("div").width(200).height(200).css("backgroundColor", "pink").width());
案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>五角星评分案例</title> <style> * { padding: 0; margin: 0; } .comment { font-size: 40px; color: #ff16cf; } .comment li { float: left; } ul { list-style: none; } </style> <script src="jquery-1.12.4.js"></script> <script> $(function () { //1. 给li注册鼠标经过事件，让自己和前面所有的兄弟都变成实心 var wjx_k = "☆"; var wjx_s = "★"; $(".comment>li").on("mouseenter", function () { $(this).text(wjx_s).prevAll().text(wjx_s); $(this).nextAll().text(wjx_k); }); //2. 给ul注册鼠标离开时间，让所有的li都变成空心 $(".comment").on("mouseleave", function () { $(this).children().text(wjx_k); //再做一件事件，找到current，让current和current前面的变成实心就行。 $("li.current").text(wjx_s).prevAll().text(wjx_s); }); //3. 给li注册点击事件 $(".comment>li").on("click", function () { $(this).addClass("current").siblings().removeClass("current"); }); }); </script> </head> <body> <ul class="comment"> <li>☆</li> <li>☆</li> <li>☆</li> <li>☆</li> <li>☆</li> </ul> </body> </html>
each（）用法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>复制</title> <style> ul { list-style: none; } li { float: left; width: 200px; height: 200px; background: pink; text-align: center; line-height: 200px; margin: 0 20px 20px 0; } </style> <script src="jquery-1.12.4.js"></script> <script> $(function () { // for(var i = 0; i < $("li").length; i++) { // $("li").eq(i).css("opacity", (i+1)/10); // } //each方法 $("li").each(function (index, element) { $(element).css("opacity", (index+1)/10); }) }); </script> </head> <body> <ul id="ulList"> <li>什么都看不见</li> <li>什么都看不见</li> <li>什么都看不见</li> <li>什么都看不见</li> <li>什么都看不见</li> <li>什么都看不见</li> <li>什么都看不见</li> <li>什么都看不见</li> <li>什么都看不见</li> <li>什么都看不见</li> </ul> </body> </html>
$冲突解决
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="itcast.js"></script> <script src="jquery-1.12.4.js"></script> <script> console.log($); //jQuery释放$的控制权 var mm = $.noConflict(); jQuery(function () { }); </script> </head> <body> </body> </html>
