當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

jq学习总结之方法

發布時間：2025/3/21 编程问答 16 豆豆

生活随笔收集整理的這篇文章主要介紹了 jq学习总结之方法小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

三、方法 1、length 2、index()3、get()　reverse()4、not()5、filter()6、find()7、each()8、addBack()9、attr()10、toggleClass()
11、append()12、after()/before()13、on()14、one()15、hover()16、text()/html()17、animate()18、hide()show()19、prop()等顯示隱藏???

1.獲取元素個數length

$("img").size();?

size()方法1.8以后版本已廢棄，改用length ? ? ?

--》??

2、index()

div{border:1px solid #003a75;background:#fcff9f;margin:5px; padding:5px;text-align:center;height:20px; width:20px;float:left; } <div>0</div><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div> <script>$(function(){$("div").click(function(){var idx = $("div").index(this);$("span").html(idx.toString());})}) </script>　

3.get()　reverse()

div {border:1px solid green;color:aquamarine;margin:5px;padding:5px;height:20px;width:20px;float:left;} <div style="background:#FFFFFF">1</div><div style="background:#CCCCCC">2</div><div style="background:#999999">3</div><div style="background:#666666">4</div><div style="background:#333333">5</div><div style="background:#000000">6</div><script>function disp(divs) {for (var i = 0; i < divs.length;i++){$(document.body).append($("<div style='background:"+divs[i].style.background+";'>"+divs[i].innerHTML+"</div>"));}}$(function () {var aDiv = $("div").get(); //轉化為div對象數組disp(aDiv.reverse()); //反序，傳給處理函數})</script>

4、not()方法

div{background:#fcff9f;margin:5px; padding:5px;height:40px; width:40px;float:left; } .green{ background:#66FF66; } .gray{ background:#CCCCCC; } #blueone{ background:#5555FF; } .myClass{border:2px solid #000000; } <body><div></div><div id="blueone"></div><div></div><div class="green"></div><div class="green"></div><div class="gray"></div><div></div> $(function(){$("div").not(".green, #blueone").addClass("myClass"); }); </body>

$("li[title]").not("[title*=isaac]") ? ? ? ? ? ? ?//所有設置了title 屬性的li標記，但不包括title值中任意匹配字符串isaac的。

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?注意：not()方法所接受的參數不包含特定的元素，只能是通用的表達式。

5、過濾 ? ?filter()方法

div{margin:5px; padding:5px;height:40px; width:40px;float:left; } .myClass1{background:#fcff9f; } .myClass2{border:2px solid #000000; } <body><div></div><div class="middle"></div><div class="middle"></div><div class="middle"></div><div class="middle"></div><div></div> <script> $(function(){$("div").addClass("myClass1").filter("[class*=middle]").addClass("myClass2"); }); </script> </body>　　

$("li").filter("[title*=isaac]") 等同 $("li[title*=isaac]") ? ? ? //注意：filter中的參數，不能直接是等于匹配，只能是前匹配^= 后匹配&=，任意匹配*=

div{margin:5px; padding:5px;height:40px; width:40px;float:left; } .myClass1{background:#fcff9f; } .myClass2{border:2px solid #000000; } <div id="first"></div><div id="second"></div><div id="third"></div><div id="fourth"></div><div id="fifth"></div> $(function(){$("div").addClass("myClass1").filter(function(index){return index == 1 || $(this).attr("id") == "fourth";}).addClass("myClass2"); });

　6、find()

.myClass{background:#ffde00; } <body><p><span>Hello</span>, how are you?</p> <script> $(function(){$("p").find("span").addClass("myClass"); }); </script> </body>

　7、each()　遍歷

img{
border:1px solid #003863;
}

8、andSelf()已廢棄改為addBack()　　把之前的元素集添加到當前集合中

.myBackground{background:#ffde00; } .myBorder{border:2px solid #0000FF; } p{margin:8px; padding:4px;font-size:12px; } <div><p>第一段</p><p>第二段</p> <script> $(function(){$("div").find("p").addClass("myBackground").andSelf().addClass("myBorder"); }); </script> </div>

　9、attr()設置或返回被選元素的屬性和值

<div>第0項 <span></span></div><div>第1項 <span></span></div><div>第2項 <span></span></div>$(function(){$("div").attr("id",function(){return "div-id"+index;}).each(function(){$(this).find("span").html("(id='"+this.id+"')");}) })

　更換背景圖

$("img").click(function () {var i = $(this).attr("src");$("body").css("background-image", "url(" + i + ")");})

10、toggleClass() ? ? ?//對添加和移除類進行切換

? ??

<p>高亮？</p> $(function(){$("p").click(function(){$(this).toggleClass("highlight");})})
也可用on方法
$("p").on("click",function(){
$(this).toggleClass("highlight");
})

11、append() ? ? ? //在被選元素的結尾插入指定的內容

<p>從前有一只大<em title="Dinosaur">恐龍</em>...</p> <p>在樹林里面<em>跑啊跑</em>...</p> $(function(){$("p").eq(1).append("<b>直接添加</b>") })

12、after() //在被選元素后插入指定內容 ?before() ?//在被選元素前插入指定的內容

<a>要被添加的鏈接1</a> <a>要被添加的鏈接2</a> <p>從前有一只大恐龍</p> <p>在樹林里面跑啊跑</p> $(function(){$("p:eq(0)").after($("a:eq(1)")); })

13、bind()向元素添加事件處理程序目前用on()　　 //想被選元素添加一個或多個事件處理程序，以及當事件發生時運行的函數

? on() 方法是 bind()、live() 和 delegate() 方法的新的替代品

　語法：$(selector).on(有效事件,childSelector,data,事件發生時運行的函數　

　? ?hahaha--->

.intro{color:red;} <p>hahaha</p> $(function(){$("p").on("mouseover mouseout",function(){$("p").toggleClass("intro")}) })

　點擊 ------》 ? ??

<p>點擊</p> <div></div> $(function(){$("p").on("click",function(){$("div").append("<p>點擊事件</p>")}) })

14.one() ? ? ? ? ? ? ? ? ? ? ? //被選元素添加一個或多個事件處理程序，并規定當事件發生時運行的函數，每個元素只能運行一次事件處理程序函數

語法：$(seletor).one(event,data,function)

div{border:1px solid #000;background:#fffd77;height:50px;width:50px;padding:8px;margin:5px;text-align:center;float:left; } $(function(){for(var i=0;i<10;i++){$("body").append($("<div>Click<br>Me!</div>"));var iCounter=1;$("div").one("click",function(){$(this).css({backaground:"red",color:"#fff"}).html(iCounter++);})} })

15.hover()　　//當鼠標指針懸停在被選元素上時要運行的兩個函數。方法觸發 mouseenter和 mouseleave事件。

----->　

<img src="12.jpg"> $(function(){$("img").hover(function(){$(this).css("opacity",".5")},function(){$(this).css("opacity","1.0")}); })

16、text()　　//設置或返回被選元素的文本內容

<button>設置所有p元素的文本內容</button>
<p>這是一個段落。</p>

$(document).ready(function(){$("button").click(function(){$("p").text("Hello <b>world!</b>");}); });

<button>修改所有P元素的內容</button> <p>這是一個段落。</p> $(function(){$("button").click(function(){$("p").html("Hello<b>world!</b>");}) })

17、animate() ? //執行 CSS 屬性集的自定義動畫　　

?語法：(selector).animate({styles},speed,easing,callback)

easing：默認swing 開頭/結尾慢，中間快；liner 勻速?　

$("#d1").animate({ "top": "400px", "left": "400px" }, 1000, function () {$("#d1").animate({ "top": "0px", "left": "800px" }, 1000);});

18、顯示隱藏 hide\show伸縮式 ,slideUp/slideDown上下式,fadeOut/fadeIn漸變式

$("#d1").hide();$("#d1")show()

hide(1000);show(1000);

hide(1000,function(){alert("haha")});

19、prop()方法設置或返回被選元素的屬性和值

$("#xy").click(function () {if (this.checked) {$("[class=xy]").prop("checked", true);} else {$("[class=xy]").prop("checked",false);}})

轉載于:https://www.cnblogs.com/colorful-paopao1/p/8335121.html

總結

以上是生活随笔為你收集整理的jq学习总结之方法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

方法
JQ

上一篇： bat批处理删除指定N天前的文件
下一篇：两个Long类型真的不能直接用或比较么？