JS與JQuery異同
①.根據(jù)ID取元素
JS:取到的是一個(gè)DOM對(duì)象。
例：var div = document.getElementByID("one");
JQUERY:取到的是一個(gè)JQUERY對(duì)象。
例：var div = $("#one");——括號(hào)里面是根據(jù)某個(gè)東西來(lái)找衰抑，相當(dāng)于一個(gè)選擇辫秧，如果我們要根據(jù)ID來(lái)找轰豆，在樣式表里的ID是用#來(lái)表示的赴叹，所以在這里我們直接帶入井號(hào)不翩，整句的意思就是根據(jù)ID為one的來(lái)查找兵扬。
②.根據(jù)class取元素，在數(shù)組里面如果要取DOM對(duì)象使用索引的方式口蝠，如果要取JQUERY對(duì)象使用eq()
JS:取到的是一個(gè)數(shù)組
例：var div = document.ElementsByClassName("test");
JQUERY:
例：var div = $(".test");
③.根據(jù)name取元素
JS：返回的是一個(gè)數(shù)組
例：var bd = document.getElementsByName(uid);
JQUERY：的方式是用 方括號(hào)器钟，屬性=一個(gè)值，不限制非要根據(jù)name來(lái)取值妙蔗，JQUERY是根據(jù)屬性來(lái)取元素
例：$("[name='uid']");
④.根據(jù)標(biāo)簽名取元素
JS：返回的也是一個(gè)數(shù)組
例：var div = document.getElementsByTagName("div");
JQUERY：和樣式表里面給所有div加樣式的方法一樣傲霸，在雙引號(hào)內(nèi)直接寫(xiě)標(biāo)簽名
例：$("div");
附：JQUERY的其他取值方式
組合選取：var div = $("div span");——有很多組合方式
- 操作內(nèi)容
①.非表單元素（如果是文本就用text方法眉反，如果是html代碼就用html方法）
例：
? div.text();——無(wú)參數(shù)的情況下是取值
div.text("aaaa");——有參數(shù)的情況下是賦值
div.html();——無(wú)參數(shù)的情況下是取值
div.html("aaaa");——有參數(shù)的情況下是賦值
②.表單元素
JS：div.value;——取值昙啄；div.value = xxx;——賦值
JUQERY：div.val();——無(wú)參數(shù)是取值，有參數(shù)是賦值寸五。
- 操作屬性
JS里面用來(lái)操作屬性的方法是
div.setAttribute("","");——設(shè)置屬性梳凛、修改屬性
div.removeAttribute("");——移除屬性，引號(hào)里面寫(xiě)一個(gè)屬性名
div.getAttribute();——獲取屬性
JQUERY里面用來(lái)操作屬性的方法
添加屬性：div.attr("test","aa");——給這個(gè)attr方法加入?yún)?shù)梳杏，屬性名叫做test韧拒，屬性的值是aa
移除屬性：div.removeAttr("test");——移除test這條屬性
獲取屬性：div.attr("test");——在attr方法里面直接寫(xiě)入一個(gè)屬性的名就可以了
- 操作樣式
JS里面操作樣式的關(guān)鍵字是style
例：div.style.backgroundColor = "red";——把這個(gè)div的背景色設(shè)置成為了紅色
幾個(gè)常見(jiàn)的屬性：
| CSS屬性 | JavaScript屬性 |
|---|---|
| background-image | style.backgroundImage |
| color | style.color |
| display | style.display |
| font-family | style.fontFamily |
| height | style.height |
| width | style.width |
JQUERY里面操作樣式的關(guān)鍵字是css
例：div.css("background-color","yellow");——把這個(gè)div的背景色變?yōu)辄S色，在這里CSS里面所有的樣式和css樣式表里面的樣式是一模一樣的沒(méi)有任何變化
JS操作樣式的方法只能獲取內(nèi)聯(lián)樣式十性，不能取內(nèi)嵌的和外部的Ｅ岩纭！＞⑹省？簟！
JQUERY操作樣式的方法可以是內(nèi)聯(lián)的也可以是內(nèi)嵌的
- jQuery的好處
- 兼容性好
- 可以寫(xiě)多個(gè)入口函數(shù)
- 代碼簡(jiǎn)潔（具有隱式迭代機(jī)制）-- 每當(dāng)我們調(diào)用選擇器方法查找dom里的元素時(shí)减响，其實(shí)就是把找到的dom元素存入一個(gè)JQ對(duì)象里的dom數(shù)組中靖诗，然后再把這個(gè)JQ對(duì)象返回
- 容錯(cuò)率較高，前面的代碼出了問(wèn)題支示，后面的代碼不受影響
DOM : 文檔對(duì)象模型
注意： 不是一個(gè)具體對(duì)象
很多對(duì)象組成的集合
提供很多的屬性和方法操作網(wǎng)頁(yè)（標(biāo)簽 刊橘、 屬性 、內(nèi)容）
document對(duì)象是DOM中最頂層對(duì)象
BOM : 瀏覽器對(duì)象模型
操作瀏覽器
BOM是由哪些對(duì)象組成颂鸿？
-
window:BOM中最頂層對(duì)象
screen：屏幕對(duì)象
location： 地址欄對(duì)象
history：歷史記錄對(duì)象
navigator： 導(dǎo)航對(duì)象
document： 文檔對(duì)象
frames:框架集
window 對(duì)象
訪(fǎng)問(wèn)屬性： 對(duì)象.屬性名
訪(fǎng)問(wèn)方法： 對(duì)象.方法名()
jquery入口函數(shù)寫(xiě)法：
1促绵、第一種：
$(document).ready(function(){ });
2、第二種(最簡(jiǎn)潔的寫(xiě)法嘴纺，推薦)：
$(function(){
});
3败晴、第三種：
jQuery(document).ready(function(){
});
4、第四種：
jQuery(function(){
});
