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>