什么是jQuery？
??????? 就是一個JavaScript函數庫，開源的。
jQuery能做什么
????????JavaScript是做什么的，jQuery就是做什么的，Jquery是對javascript的封裝。
JQuery的特點
????????? 1、???? 寫少做多——Write Less,Do More
????????? 2、???? 很好的解決了不同瀏覽器的兼容問題(css還是有問題的)
????????? 3、???? 對于不同控件具有統一的操作方式
????????? 4、???? 體積小，使用簡單方便
????????? 5、???? 鏈式編程、隱式迭代、插件豐富、開源、免費
????????? 6、???? 讓編寫JavaScript程序更簡單，更強大)
?????????優點：
????????? 1、???? 輕量級
????????? 2、???? 強大的選擇器
????????? 3、???? 出色的DOM操作的封裝
????????? 4、???? 可靠的事件處理機制
????????? 5、???? 完善的Ajax
????????? 6、???? 不污染頂級變量
????????? 7、???? 出色的瀏覽器兼容性
????????? 8、???? 鏈式操作方式
????????? 9、???? 隱式迭代
????????? 10、?? 行為層與結構層的分離
????????? 11、?? 豐富的插件支持
????????? 12、?? 完善的文檔
????????? 13、?? 開源
jQuery中的頂級對象$
?????? $是jQuery的簡寫，可以用jQuery代替$

???????window.onload(fn)和$(document).ready(fn)的區別：

?window.onload(fn)	$(document).ready(fn)
頁面完全加載完畢后才會觸發??	只要Dom元素加載完畢就觸發，提高相應速度
每次注冊新的事件都會將前面的覆蓋掉???	可以多次注冊事件，最終都會執行

??????使用jQuery實現window.onload的效果:$(window).load(fn);
jQuery中提供的兩個循環函數

1 $.map(array,callback(element,index));對于數組array中的每個元素，調用回調函數，返回一個新的數組，原數組不變 2 element:當前循環的數組元素 3 Index:當前下標 4 $.each(array,fn) 5 遍歷數組，return false退出循環 6 使用this表示當前元素的值 7

$.trim(字符串)? 去掉兩端的空格
?jQuery對象和Dom對象的轉換
????????? Dom對象轉換為jQuery對象：$(Dom對象)
????????? jQuery對象轉換為Dom對象：$(Dom對象).get(0);$(Dom對象)[0];
?jQuery選擇器
????????? Id選擇器：$('#id');
????????? 標簽選擇器：$('input');????????? $('*')獲取頁面上的所有元素
????????? 屬性過濾選擇器：$('input[name=gender]')
????????? 類樣式選擇器：$('.cls');
????????? 標簽+類選擇器：$('div.cls');
????????? 多條件選擇器：$('p,div,span.menuitem')//同時選擇p標簽、div標簽和擁有menuitem樣式的span標簽元素
????????? 層次選擇器：$('div li')//div下的所有li元素(所有)
??????????????????????????? ?$('div>li')//div下直接li子元素
??????????????????????????? ?$('.menuitem+div')//樣式為menuitem之后的相鄰的第一個div元素????=?? $('.menuitem').next('div')
?????????????????????????? ? $('.menuitem~div')//樣式為menuitem之后的所有的兄弟div元素???????=?? $('.menuitem').nextAll('div')
????????? 基本過濾選擇器：:first選取第一個元素???? $('div:first')
?????????????????????????????????? ?:last選取最后一個元素???? $('div:last')
?????????????????????????????????? ?:not選取不滿足選擇器條件的元素???? $('input:not(.cls)')
?????????????????????????????????? ?:even選取索引是偶數
????????????????????????????????? ? :odd選取索引是奇數
????????????????????????????????? ? $(':header')選取所有的h1——h6元素
?????????????????????????????????? ?$('div:animated')選取正在執行動畫的<div>元素
????????? 屬性過濾選擇器：$('div[id]')//選取有id屬性的div
????????????????????????????????? ? $('div[title=test]')//title屬性等于test
????????????????????????????????? ? $('div[title!=test]')//title屬性不等于test或沒有title屬性
????????????????????????????????? ? $('input[name^=n]')//name屬性以n開頭
??????????????????????????????????? $('input[name$=n]')//name屬性以n結尾
?????????????????????????????????? ?$('input[name*=n]')//name屬性包括n
????????? 表單對象屬性過濾器：$('#form1:enabled')//選取id為form1的表單內所有啟用的元素
?????????????????????????????????????? ?? $("#form1 :disabled")//選取id為form1的表單內所有禁用的元素
???????????????????????????????????????? ?$("input:checked”)//選取所有選中的元素（Radio、CheckBox）,這個中間不能加空格.
???????????????????????????????????????? $("select :selected")選取所有選中的選項元素
????????? 表單選擇器：$(':input')//選取所有的input、textarea、select、button
???????????????????????? ??? $(':text')//與$('input[type=text]')差不多，但有一定的區別
?????????????????????????? ?$('textarea')//錯誤
????????? 可見性過濾器：:hidden
????????? 內容過濾器：:contains(text)//包含指定文本的元素
?????????????????????????????:empty//不包含元素或者文本的元素
??????????????????????????? ?:has(input)//包含指定元素的元素
??????????????????????????? ?:parent//作為父元素的元素
????????? 子元素過濾器：???? $('ul li:first');//只返回一個li元素
????????????????????????????????? ?? $('ul li:first-child’);//為每個父元素ul都返回一個li
??????????????????????????????????? ?:only-child,匹配當前父元素中只有一個子元素的元素
??????????????????????????????????? ?:nth-child(3n),選取3的倍數的元素
??????????????????????????????????? ?:nth-child(3n+1),滿足3的倍數+1的元素
???????????????????????????????????? .children()方法，只考慮子元素，不考慮后代元素
鏈式編程
????????? 注意：$('div').html('值').val('值')可以
?????????????? ??? ?$('div').html().val('值')不可以
??????????????????? 括號中沒有值的時候是獲取值，獲取值返回的是獲取的字符串而不是對象，所以不能鏈式編程
????????? end()方法可以恢復鏈被破壞前的情況
????????? toggleClass('cls')切換樣式的顯示
????????? hasClass('cls')判斷是否應用了某樣式
????????? $('p:eq(0)')代表的是第一個元素
????????? $('p:lt(2)')前兩個,索引為2之前的
????????? $('p:gt(2)')表示的是后兩個
獲得兄弟元素的幾個方法
????????? next();//當前元素之后的緊鄰著的第一個兄弟元素
????????? nextAll();//當前元素之后的所有兄弟元素
????????? prev();//當前元素之前的緊鄰著的兄弟元素
????????? prevAll();//當前元素之前的所有兄弟元素
????????? siblings();//當前元素的所有兄弟元素
jQuery的迭代(包裝集)
????????? if($('#btn').length<=0)
????????? {
?????????????? alert("id為btn的元素不存在！");
????????? }
jQuery的Dom操作
????????? $('a:first').html('hello');
????????? $('a:first').text('hello');
????????? $('a:first').attr('href','http://www.baidu.com');
????????? $('a:first').removeAttr('class');刪除屬性
????????? $('a:first').attr('class','');屬性還有
動態創建Dom節點
????????? $("<a href='http://www.baidu.com'>百度</a>").appendTo('body');
????????? $('body').append("<a href='http://www.baidu.com'>百度</a>");
????????? prepend，在元素的開始添加元素（第一個子節點）。增加元素開始(兒子)
????????? after:在元素之后添加元素（添加兄弟）增加元素后面(兄弟)
????????? before:在元素之前添加元素（添加兄弟）增加元素前面(兄弟)
????????? (*)A.insertBefore(B);將A加到到B的前面，等同于B.before(A);
????????? (*)X.insertAfter(Y);將X加到到Y的后面，等同于Y.after(X);
????????? empty()清空某元素下的所有子節點
????????? remove()刪除當前元素，返回值為被刪除的元素
????????? clone()克隆節點
????????? $('br').replaceWith('<hr/>');用<hr/>替換br
????????? $('<br/>').replaceAll('hr');用<br/>元素替換所有的hr

轉載于:https://www.cnblogs.com/wolf-sun/p/3205619.html

總結

以上是生活随笔為你收集整理的jquery基础总结的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。