寫個 jQuery選擇器的簡單實現和筆記

2021-10-05 21:59:57 字數 1247 閱讀 3794

# 引入jquery工具庫

- cdn:

# 文件查詢

- 中文:

- 英文:

## 引入jquery

```js

//必須放在所有引入檔案的上面,防止變數衝突

## domcontentloaded 和 onload

```js

//等待所有資訊載入完畢,執行下面的函式

window.onload = function());

$(document).ready(function(){});

## $()傳參

```js

## jquery庫,原理解析

```js

//jquery庫是乙個封閉作用域

//實現乙個簡單的jquery庫 可以選擇id和class

(function ()  else if (selector.indexof("#") != -1)  else 

//為jquery的原型新增init屬性,所有例項可以使用該屬性

jquery.prototype.init = function (selector) else if (selector.indexof("#") != -1)

if (dom.length === undefined) else }};

//為jquery的原型新增css屬性,所有例項可以使用該屬性

jquery.prototype.css = function (config)

}return this; //鏈式呼叫的精髓

};//上面的jquery建構函式是new 乙個jquery.prototype.init物件,

物件上沒有jquery.prototype上的css()方法

//所以新增下面一句,讓jquery.prototype.init物件可以呼叫jquery.prototype上的css()方法

jquery.prototype.init.prototype = jquery.prototype;

//讓外部可以通過$()或者jquery()呼叫

window.$ = window.jquery = jquery;

}());呼叫myjquery.js:

23

width: '100px',

height: '100px',

background: 'red'

});$(".demo").css();

Jquery 選擇器 簡單的選擇器

1.3簡單的偽類選擇器 你們好你們好 你們好你們好 你們好你們好 1.3.1特定位置選擇器 主要包括 first last,eq index 3中位置 p first css color blue 匹配第乙個p標籤 p eq 3 css background yellow 匹配第4個p標籤 p la...

jQuery選擇器簡單應用

用js寫一些例如全選 反選等功能的時候,會感覺 相當的多,而如果用jquery選擇器的話就會相當的簡潔了 需要注意的是 button eq 0 click function button eq 1 click function button eq 2 click function 在ie8經過測試上...

jQuery 簡單選擇器

id id選擇器 div 元素選擇器 classname 類選擇器 classname,classname1,id1 組合選擇器 li first 第乙個li li last 最後乙個li li even 挑選下標為偶數的li li odd 挑選下標為奇數的li li eq 4 下標等於 4 的li...