JQuery基礎及css和屬性操作 其他函數
阿新 • • 發佈：2018-05-06
一次 選擇 bsp json對象 所有 恢復 jquer 式表 outer
JQuery語法
使用JQuery必須先導入jquery-X.X.X.js文件 jQuery中的選擇器 $("選擇器名稱").函數名(); 註意 $ 是jQuery的縮寫,也就是說,選擇器可以使用jQuery(":input") jQuery 文檔就緒函數$(document).ready(function(){ //jQuery代碼 console.log($(":input:disabled")), });
簡寫文檔就緒函數 $(function(){})
jQuery 與window.onload的區別
window.onload必須等待網頁資源全部加載完成後,才能執行 文檔就緒函數 只需等到網頁DOM結構加載完成後,即可執行 window.onload在一個頁面中只加載一次 文檔就緒函數在一個頁面中可以有n個jQuery對象和js對象
jQuery對象和js對象的相互轉換
jQuery對象轉js對象 使用.get(index)或[index]選中度就是JS對象$("div")[0].onclick(function(){});
$("div").get(0).onclick(function
js對象轉jQuery對象 使用$包裹JS對象
var div=document.getElementsByTagName("div"); $(div).click(function(){});
解決jquery多庫沖突問題
頁面中如果同時引入多個JS框架可能導致$沖突 解決方法 使用jQuery.noConflict();使jQuery放棄在全局使用$ 使用jQuery關鍵字替代$ 或者使用一個自執行函數!function($){ //在自執行函數中,可以使用&替代jQuery //除自執行函數外的其他區域,禁止jQuery使用$ }(jQuery);
css和屬性操作
設置節點屬性$("#div1").attr("class","cls")
傳入對象以鍵值對的形式同時設置多對屬性
$("#div1").attr({
"class" :$("#div1").attr("class")+" cls1"
"name":"name1"
"style":"font-size:20px;color:red;"
})
通過回調函數返回值，修改css的樣式。
$("button:eq(0)").click(function(){
var id = setInterval(function(){
$("#div1").css({
"width":function(index,value){
var v = parseFloat(value) + 1;
if(v>600){
clearInterval(id);
}
return v+"px";
}
});
},10);
});
取到節點屬性
console.log($("#div1").attr("id"));
刪除節點屬性
$("#div1").removeAttr("class")
attr與prop一樣，都可以對節點進行讀取和設置
attr與prop的區別
在讀取屬性名=屬性值的屬性時，attr將返回屬性值和undefined prop將返回true或false 也就是說，attr要取到的屬性，必須是在標簽上已經寫明的屬性，否則返回undefinedconsole.log($("input:eq(0)").attr("disabled"))
console.log($("input:eq(0)").prop("disabled"))
在原有class的基礎上新增class名 如果沒有class屬性，將自動添加
$("#div1").addClass("cls")
刪除指定的class名稱，其他沒刪除的class名依然保留 如果刪空將只留下class屬性
$("#div1").removeClass("cls")
切換class 如果有指定class就刪除 如果沒有就新增
$("button:eq(0)").click(function(){
$("#div1").toggle("div1")
})
.html取到或設置節點中的HTML代碼 .text取到或設置節點中的文本 .val取到或設置節點中的value值
console.log($("#div1").html("<p>555</p>").html())
console.log($("#div1").text("<p>555</p>").text())
console.log($("input").val("<p>6666</p>").val())
.css給節點添加css樣式 屬於行級樣式表權限
$("#div1").css("color","#008000")
同時給多個節點添加多對css樣式
$("#div1").css(function(){
"color":"#008000"
"font-size":"20px"
})
取到或設置節點的寬高
$("#div1").width("400px")
$("#div1").height(400)
取到節點的寬度+padding 不包含border和margin
$("#div1").innerHeight()
$("#div1").ininnerWidth()
不傳參數 表示寬高+padding +border 傳入true 表示寬高+padding +border+margin
console.log($("#div1").outerHeight())
console.log($("#div1").outerWidth(true))
返回一個節點相對於瀏覽器左上角的偏移量，返回一個對象{top：20px left：20px}
console.log($("#div1").offset())
返回一個節點相對於父容器的偏移量 註意 ①使用此方法 要求父元素必須是定位元素 如果父容器不是定位元素，則依然是相對於瀏覽器左上角進行測量 ②使用此方法 測量偏移時，將不考慮margin 而會將margin視為當前容器的一部分
console.log($("#div1").position())
scrollTOp設置或取到指定節點的豎直滾動條的位置
$("#div1").scrollTOp()
水平 滾動條的位置
$("#div1").scrollLeft()
each用於遍歷jQuery中的對象數在回調函數中使用returnfalse相當於breakreturntrue相當於continue
$("#ul li").each(function(index,value){
console.log(index)
console.log($(value).text())
在回調函數中 this指向當前調用函數的節點對象 this是一個JS對象，如果要使用JQ對象，需使用$(this)
console.log(this) $(this).text($(value).text()+"qqq") })
.size() .length 返回所查詢數組的個數
console.log($("#ul li").size())
console.log($("#ul li").length)
.get()將jQuery對象，轉為JS對象 傳入index表示取出第幾個，並轉為JS對象 不傳參數，便是將jQuery中的所有對象，轉為JS對象
console.log($("#ul li").get())
$.each（arr、obj，function(）{}） 對傳入的數組或對象進行遍歷，可以是jQuery對象數組，也可以是JS中的數組和對象
$.each($("li"),function(index,value){
console.log(index)
console.log(value) })
數組映射
var arr=[1,2,3,4] var newarr=$.map(arr,function(index,value){ return value+5; }) console.log(newarr)
檢測一個值是否在數組中，返回下標，沒有返回-1 第三個參數表示查找的起始下標
var arr=[1,2,3,4] var is=$.Array(2,arr,3) console.log(arr.indexOf(2,3)) console.log(is)
將選中的jQuery DOM集合 恢復成數組，數組的每一個對象都是JS對象
console.log($("#ul li").toArray())
合並兩個數組
var arr=$.merge( [0,1,2], [2,3,4] ) console.log(arr)
$.parseJSON()將一個JSON字符串轉換成JSON對象
var str=‘{"":"","":"","":"","":"","":"","":""}‘ console.log(str) console.log($.parseJSON(str)) });
檢測一個節點是否包含另一個節點
console.log($.contains($("#ul")[0],$("#li")[0]))
console.log($.contains($("#li")[0],$("#ul")[0]))
JQuery基礎及css和屬性操作 其他函數