目的
相信大家都知道jq是js的一個類庫,是為了方便我們開發前端，但是筆者在剛開始學習js和jq時經常將兩者的語法記混和混用，所以整理下兩者實現相同功能之前的語法區別。
聲明變量
javascript聲明變量
語法 var + 變量名 =值；或者 let + 標量名=值；ES6新增了let命令，用於聲明變量。其用法類似於var(全局變量)，但是所聲明的變量只在let命令所在的代碼塊內有效。例如：for循環的計數器就很適合使用let命令。
var name = Kingfan; //var 表示全局變量
var list = [1,2,3,4] //聲明一個數組
for(let i=0;i<list.lenght;i++) // i只在for循環的時候在用到，所以沒必要聲明一個全局變量，所以用let聲明
{
console.log(list[i])
}
Jquery聲明變量
jq並沒有對聲明變量進行封裝，與js聲明標量的方法完全一致。
查找標簽
查找標簽的本質就是選擇器和篩選器，在jq中對原生js的語法進行了很多優化和簡寫，所有有明顯的不同但也相似，所以小心記混！！！，另外js對象只能用js的語法和方法，同理jq對象也是！。
js查找標簽
document.getElementById //根據ID獲取一個標簽
document.getElementsByClassName //根據class屬性獲取
document.getElementsByTagName //根據標簽名獲取標簽合集
//上面得到一個對象或者多個對象的集合
//根據js對象可以調用下面方法進行間接查找
對象.parentElement // 父節點標簽元素
對象.children //所有子標簽
對象.firstElementChild //第一個子標簽元素
對象.lastElementChild //最后一個子標簽元素
對象.nextElementSibling //下一個兄弟標簽元素
對象.previousElementSibling //上一個兄弟標簽元素
Jquery查找標簽（獲得jq對象）
$("#id") //根據id查找
$("tagName") //根據標簽查找
$(".className") //根據類名查找
$("div.c1") // 找到有c1 class類的div標簽
$("#id, .className, tagName") //組合查找
$("x y"); // x的所有后代y（子子孫孫）
$("x > y"); // x的所有兒子y（兒子）
$("x + y") // 找到所有緊挨在x后面的y
$("x ~ y") // x之后所有的兄弟y
//基本篩選器
:first // 第一個
:last // 最后一個
:eq(index)// 索引等於index的那個元素
:even // 匹配所有索引值為偶數的元素，從 0 開始計數
:odd // 匹配所有索引值為奇數的元素，從 0 開始計數
:gt(index)// 匹配所有大於給定索引值的元素
:lt(index)// 匹配所有小於給定索引值的元素
:not(元素選擇器)// 移除所有滿足not條件的標簽
:has(元素選擇器)// 選取所有包含一個或多個標簽在其內的標簽(指的是從后代元素找)
//例子
$("div:has(h1)")// 找到所有后代中有h1標簽的div標簽
$("div:has(.c1)")// 找到所有后代中有c1樣式類的div標簽
$("li:not(.c1)")// 找到所有不包含c1樣式類的li標簽
$("li:not(:has(a))")// 找到所有后代中不含a標簽的li標簽
//屬性選擇器
[attribute]
[attribute=value]// 屬性等於
[attribute!=value]// 屬性不等於
// 示例
<input type="text">
<input type="password">
<input type="checkbox">
$("input[type='checkbox']");// 取到checkbox類型的input標簽
$("input[type!='text']");// 取到類型不是text的input標簽
//表單篩選器：
:text
:password
:file
:radio
:checkbox
:submit
:reset
:button
//例子：
$(":checkbox") // 找到所有的checkbox
例子：
找到可用的input標簽
<form>
<input name="email" disabled="disabled" />
<input name="id" />
</form>
$("input:enabled") // 找到可用的input標簽
找到被選中的option：
<select id="s1">
<option value="beijing">北京市</option>
<option value="shanghai">上海市</option>
<option selected value="guangzhou">廣州市</option>
<option value="shenzhen">深圳市</option>
</select>
$(":selected") // 找到所有被選中的option
jq篩選器
下一個元素：
$("#id").next()
$("#id").nextAll()
$("#id").nextUntil("#i2")
上一個元素：
$("#id").prev()
$("#id").prevAll()
$("#id").prevUntil("#i2")
父親元素：
$("#id").parent()
$("#id").parents() // 查找當前元素的所有的父輩元素
$("#id").parentsUntil() // 查找當前元素的所有的父輩元素，直到遇到匹配的那個元素為止。
兒子和兄弟元素：
$("#id").children();// 兒子們
$("#id").siblings();// 兄弟們
查找
搜索所有與指定表達式匹配的元素。這個函數是找出正在處理的元素的后代元素的好方法。
$("div").find("p")
等價於$("div p")
篩選
篩選出與指定表達式匹配的元素集合。這個方法用於縮小匹配的范圍。用逗號分隔多個表達式。
$("div").filter(".c1") // 從結果集中過濾出有c1樣式類的
等價於 $("div.c1")
補充：
.first() // 獲取匹配的第一個元素
.last() // 獲取匹配的最后一個元素
.not() // 從匹配元素的集合中刪除與指定表達式匹配的元素
.has() // 保留包含特定后代的元素，去掉那些不含有指定后代的元素。
.eq() // 索引值等於指定值的元素
標簽操作
jq
//樣式類
addClass();// 添加指定的CSS類名。
removeClass();// 移除指定的CSS類名。
hasClass();// 判斷樣式存不存在
toggleClass();// 切換CSS類名，如果有就移除，如果沒有就添加。
//示例：開關燈和模態框
//CSS
css("color","red")//DOM操作：tag.style.color="red"
//示例：
$("p").css("color", "red"); //將所有p標簽的字體設置為紅色
js
class的操作
className 獲取所有樣式類名(字符串)
classList.remove(cls) 刪除指定類
classList.add(cls) 添加類
classList.contains(cls) 存在返回true，否則返回false
classList.toggle(cls) 存在就刪除，否則添加
指定CSS操作
obj.style.backgroundColor="red"
JS操作CSS屬性的規律：
1.對於沒有中橫線的CSS屬性一般直接使用style.屬性名即可。如：
obj.style.margin
obj.style.width
obj.style.left
obj.style.position
2.對含有中橫線的CSS屬性，將中橫線后面的第一個字母換成大寫即可。如：
obj.style.marginTop
obj.style.borderLeftWidth
obj.style.zIndex
obj.style.fontFamily