JQuery常用知識點

2021-09-26 21:44:06 字數 2714 閱讀 5271

jquery知識點:

jquery定義:jquery 就是乙個簡單高效的 js 庫

jq 封裝的 是 js dom 的 部分

不需要考慮相容問題

帶 min : 壓縮版本 刪除了注釋 換行 提高網頁載入效率 上線使用

不帶 min : 無壓縮

1.多庫共存

在多個js庫應用於同乙個專案中時, $ 符 會存在衝突的情況 為了防止這種現在發生,

var jq = jquery.noconflict(); // 此時 jq 就代替了 $ 以後所有的jquery操作 都用 jq

2. jq 和 原生 的 轉換

// 原生 dom 物件

var oall = document.getelementbyid("all");

console.log(oall);

// jq物件

var the = $("#all");

var $theall = $("#all");

console.log(the);

console.log($theall);

// 原生 --> jq

console.log($(oall));

// jq --> 原生

console.log($theall[0]);

3. jquery選擇器

// 1. id

var $thestars = $("#boys");

console.log($thestars);

// 2. 標籤

// $("li").html("張藝興");

// 3. 選擇類名是 boya 的 li 標籤 吳pw

// $("li.boya").html("wu pw")

// 4.通用

$("*").css("color", "rosybrown");

// 5.群組

$("ul,div").css("fontsize", "30px");

// 6.後代

$("#boys2 li").html("2222");

// 7.子代

$(".bb>p").css("color", "red");

// 8.兄弟選擇器

// $("#b2+li").css("color", "red");

// $("#b2~li").css("color", "yellow");

// 9. 屬性選擇器

// $("li[class=boya]").html("鹿 np");

// 10. 偽類選擇器

$("tr:first").html("111");

$("tr:last").html("999");

// 偶數 索引值 0 2 4 第乙個 三個 五個

$("table tr:even").css("background-color","red");

// 取索引值 第三個為黃色

$("#boys li:odd").css("background-color", "yellow");

4. 設定屬性

// 1. 操作屬性節點 attr

alt:'沒有了'

// 2. 刪除屬性 removeattr

$("#g2").removeattr("class");

// 3. prop 用於 checked disabled 等需要返回 boolean 型別的屬性

$("input").click(function(){

var str = $(this).attr("checked");

console.log(str); // checked

var str2 = $(this).prop("checked");

console.log(str2); // true

// 新增類名

$("#all").addclass("div1");

// 刪除類名

$("#all").removeclass("div1");

// toggle

$("#all").click(function(){

$("all").toggleclass("div1");

// 檢視某個元素是否含有這個class

console.log($("#all").hasclass("div1"));

// 2. 把鄧超填到每個 li 的尾部

prepend <==> prependto 在a前面新增b <===> 把b新增到a前面

// // 3. prepend 向頭部新增

// $("#g1").prepend("高圓圓")

// // 4. prependto

// $("範bb").prependto($("li"))

6. wrap 和 unwrap 的區別 :

wrap : $(".gg").wrap("hahahhahah

") 用div 把 gg 包裹起來

unewrap: $(".gg").unwrap(); 刪除 包裹他的父節點

7. 點 replacewith() 替換節點

點 replaceall () 替代所有

點 empty() 清空 相當於 innerhtml = "";

點 remove()

jquery常用知識點

1.原生的js 如果編寫多個入口函式,後面編寫的會覆蓋前面編寫的。2.jquery 中如果編寫多個入口函式,後面的不會覆蓋前面的。靜態方法 靜態方法通過類名呼叫 例項方法 例項方法通過例項呼叫 function fn fn.prototype.name lina var fn new fn cons...

jquery 常用知識點總結

一 jquery中對小數進行取整 四捨五入的方法 1.丟棄小數部分,保留整數部分 parseint 5 2 2 2.四捨五入.math.round 5 2 3 3.向下取整 math.floor 5 2 2 math 物件的方法 二 jquery中replace用法 jquery 的replace函...

Jquery知識點彙總

1 jquery物件轉換成dom物件 a.var cr cr jquery物件 var cr cr 0 dom物件 alert cr.checked 檢測checkbox是否被選中了 b.var cr cr jquery物件 var cr cr.get 0 dom物件 alert cr.checke...