jq学习总结之方法
11、append()12、after()/before()13、on()14、one()15、hover()16、text()/html()17、animate()18、hide()show()19、prop()等顯示隱藏???
1.獲取元素個數(shù)length
$("img").size();?
size()方法1.8以后版本已廢棄，改用length ? ? ?
--》??
<style type="text/css">div {border:1px solid green;background:yellow;margin:5px;padding:20px;text-align:center;height:20px;width:20px;float:left;}</style> <body>頁面中一共有<span>0</span>個div塊。點擊鼠標添加div。<script>$(function () { document.onclick = function () {var i = $("div").length + 1;$(document.body).append($("<div>" + i + "</div>"))$("span").html(i);}}) </script> </body>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對象數(shù)組disp(aDiv.reverse()); //反序，傳給處理函數(shù)})</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()方法所接受的參數(shù)不包含特定的元素，只能是通用的表達式。
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中的參數(shù)，不能直接是等于匹配，只能是前匹配^= 后匹配&=，任意匹配*=
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;
}
<img src="01.jpg" id="Tsinghua01">
<img src="02.jpg" id="Tsinghua02">
<img src="03.jpg" id="Tsinghua03">
<img src="04.jpg" id="Tsinghua04">
<img src="05.jpg" id="Tsinghua05">
<script language="javascript">
$(function(){
? ? $("img").each(function(index){
? ? ?var i= parseInt(index)+1;
? ? ?this.title = "這是第" + i+ "幅圖，id是：" + this.id;
? ? ? ?});
});
</script>
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() ? ? ? //在被選元素的結尾插入指定的內(nèi)容
<p>從前有一只大<em title="Dinosaur">恐龍</em>...</p> <p>在樹林里面<em>跑啊跑</em>...</p> $(function(){$("p").eq(1).append("<b>直接添加</b>") })12、after() //在被選元素后插入指定內(nèi)容 ?before() ?//在被選元素前插入指定的內(nèi)容
<a>要被添加的鏈接1</a> <a>要被添加的鏈接2</a> <p>從前有一只大恐龍</p> <p>在樹林里面跑啊跑</p> $(function(){$("p:eq(0)").after($("a:eq(1)")); })13、bind()向元素添加事件處理程序目前用on() //想被選元素添加一個或多個事件處理程序，以及當事件發(fā)生時運行的函數(shù)
? on() 方法是 bind()、live() 和 delegate() 方法的新的替代品
語法：$(selector).on(有效事件,childSelector,data,事件發(fā)生時運行的函數(shù)
? ?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() ? ? ? ? ? ? ? ? ? ? ? //被選元素添加一個或多個事件處理程序，并規(guī)定當事件發(fā)生時運行的函數(shù)，每個元素只能運行一次事件處理程序函數(shù)
語法：$(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() //當鼠標指針懸停在被選元素上時要運行的兩個函數(shù)。方法觸發(fā) mouseenter和 mouseleave事件。
----->
<img src="12.jpg"> $(function(){$("img").hover(function(){$(this).css("opacity",".5")},function(){$(this).css("opacity","1.0")}); })16、text() //設置或返回被選元素的文本內(nèi)容
<button>設置所有p元素的文本內(nèi)容</button>
<p>這是一個段落。</p>
<button>修改所有P元素的內(nèi)容</button> <p>這是一個段落。</p> $(function(){$("button").click(function(){$("p").html("Hello<b>world!</b>");}) })
17、animate() ? //執(zhí)行 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
總結
- 上一篇： bat批处理删除指定N天前的文件
- 下一篇： 两个Long类型真的不能直接用或比较么？