jQuery概述、优点、使用步骤、入口函数、jQuery对象和DOM对象之间的转换、层级选择器、属性选择器、筛选选择器、节点选择器
jQuery簡介：
jQuery是一個高效、精簡并且功能豐富的javascript庫，它提供的API簡單易學，且兼容眾多瀏覽器，極大地簡化了javascript代碼開發，包含內容：HTML 元素選取、HTML 元素操作、CSS 操作、HTML 事件函數、JavaScript 特效和動畫、HTML DOM 遍歷和修改、AJAX、Utilities。
jQuery優點：
jQuery 的使用步驟：
1.下載jQuery：
下載jQuery可以到官網地址： https://jquery.com/，選擇自己需要的版本，不同版本之間的大概區別如下：
1x ：兼容 IE 678 等低版本瀏覽器， 官網不再更新
2x ：不兼容 IE 678 等低版本瀏覽器， 官網不再更新
3x ：不兼容 IE 678 等低版本瀏覽器， 是官方主要更新維護的版本
2.將jQuery文件引入項目：
下載下來的壓縮包里面有兩種格式jQuery文件，選擇以min.js結尾的壓縮文件（不壓縮也可以，生產環境一般選擇壓縮文件）并通過script標簽推薦引入到head標簽中：
<head><script type="text/javascript" src="jquery.min.js"></script><!-- type="text/javascript"可以省略,當然jQuery文件可以使用cdn等網絡資源 --></head>3.在新的script標簽中書寫jQuery代碼：
因為jQuery實際就是封裝的javascript代碼，因此jQuery代碼和javascript代碼可以相互書寫，但是它們之間有自己的API，不能混淆，如：
<script>// 書寫jQuery代碼和javascript代碼：$('p').text('這是一段文本');function myf(){};</script>jQuery語法：
入口函數(文檔就緒函數)：
因為jQuery在頁面未加載完成時，是不能操作DOM元素的，為了避免出現這個問題，jQuery封裝了像javascript中onload事件一樣的方法，如：
<script>// 第一種: $(function(){書寫jquery代碼：})，這種比較簡潔，推薦使用：$(function() {$('div').text('hello word');});// 第二種:通過$(document).ready()方法實現加載延時，同樣在ready()方法的括號中使用function(){書寫jQuery代碼：}$(document).ready(function() {$('div').text('hello word');});</script>注意：
1.在jQuery中$就是jQuery的頂級對象，在jQuery中任何$都可以使用jQuery代替（jQuery中的Q是大寫），在jQuery中使用jQuery關鍵字可以解決其他語言中$命名沖突問題；
2.上面的兩種方式都是指DOM元素的加載，相當于原生javascript中的DOMContentLoaded方法，并非指的圖片等其他引用資源。
jQuery 對象和 DOM 對象實質比較：
jQuery的方法和javascript的方法是不同的，因此不能混淆使用，如DOM元素中的innerHTML和jQuery的html()是不能混淆使用；
jQuery對象和javascript對象也是不同的， 它們之間的實質是：jQuery對象是通過$符號將DOM對象包裝后產生的，jQuery對象是一個偽數組。
jQuery 對象和 DOM 對象的相互轉換：
因為jQuery對象是通過$包裝后生成的，因此：DOM對象轉jQuery對象僅需通過$符號或jQuery包裹，如：
<script>var divs = document.querySelector('div');divs.innerText = 'hello';// 通過$將divs這個DOM對象轉換為jQuery對象：$(divs).css('color', 'red');</script>因為jQuery對象實際是以DOM對象為元素的偽數組，因此可以通過索引的方式拿到某個DOM元素，一般索引為0的元素為DOM元素本身，因此一般都是通過[0]的方式將jQuery對象轉換為DOM對象，但是jQuery中提供了get(0)方法轉換為DOM元素，如：
<script>var $box = $('div');$box.html('hello word');// 通過[0]將jQuery對象轉換為DOM對象：$box[0].style.color = 'skyblue';// 通過get()轉換為DOM對象：$box.get(0).style.fontSize='20px';</script>jQuery 選擇器:
原生javascript中的選擇器存在兼容性問題，而且使用比較單一，jQuery給我們封裝了豐富而且沒有兼容問題的選擇器，其語法：$(‘CSS選擇器’)，具體如下：
基礎選擇器：
<script>// 1標簽選擇器：$('div').text('hello');// 2.class類選擇器：$('.p').html('<a href = "https://www.baidu.com">百度</a>');// 3.id選擇器：$('#a').css('color', 'green');// 4.通配符選擇器：$('*').css('fontSize', '30px');// 5.并集選擇器：$('.p,a,span').css('fontSize', '12px');// 6.交集選擇器：$('a.as').css('textDecoration', 'none');</script>層級選擇器：
層級選擇器指父級選擇器、父代選擇器、子級選擇器、后代選擇器等。
<script>// 1.后代選擇器：選中類名為box的div里面所有的p標簽$('.box p').css('color', 'blue');// 2.子代選擇器：選中類名為box的div的親子p標簽$('.box > p').css('color', 'red');</script>屬性選擇器：
屬性選擇器指通過[‘屬性’]表達式進行選擇：
<script>// 1.選中具有class屬性的標簽：$('[class]').css('color', 'red');// 2.選中具有class屬性，且class值為li的標簽：$('[class="li"]').css('fontSize', '30px');// 3.選中具有href屬性，但href值不為#的標簽：$("[href!='#']").css('textDecoration', 'none');// 4.選中具有href屬性，且href值以.com結尾的標簽：$("[href$='.com']").css('display', 'none')</script>篩選選擇器
篩選選擇器指的是通過特殊的字符進行篩選：
<script>// 1.選中一組li中的第一個li：$('li:first').css('color', 'yellow');// 2.選中一組li中的最后一個li:$('li:last').css('color', 'red');// 3.選中索引為3的li:$('li:eq(3)').css('color', 'pink');$('li').eq(3).css('fontSize', '28px');// 4.選中索引為奇數的li:$('li:odd').css('backgroundColor', 'skyblue');// 5.選中索引為偶數的li:$('li:even').css('backgroundColor', 'gray');</script>節點選擇器：
節點選擇器指類似于DOM中節點的操作，具體如下：
<script>// 1.選中類名為li2的li的父級元素：特別提醒：當某個元素有多層父代元素時parent()括號中可以傳入特指的某個父代元素的選擇器$('li.li2').parent().css('listStyle', 'none');// 2.選中類名為ul2的ul中的親子級li:$('.ul2').children().css('listStyle', 'decimal');// 3.找到div里面所有的span（后代選擇器）: $('div').find('span').css('color', 'orange');// 4.找到類名為ul2的ul的所有兄弟元素：特別提醒：siblings()括號中可以傳入要查找的具體元素的選擇器$('ul.ul2').siblings('span').css('fontSize', '30px');// 5.查找id為lia元素的后面所有兄弟元素：$('#lia').nextAll().css('color', 'blue');// 6.查找類名為li2元素的前面所有兄弟元素：$('.li2').prevAll().css('color', 'skyblue');</script>相同元素多次獲取性能損耗問題：
在jQuery中同樣的，如果在一個作用域中多次使用$(元素),此時會造成性能損耗，建議和原生javascript中一樣將獲取的元素通過變量本地化，如：
$('div').show();$('div').hide();//可以將$('div')用一個變量接收，使用時直接用變量即可，因此上面的代碼可優化為：$div = $('div');$div.show();$div.hide();提示：本文圖片等素材來源于網絡，若有侵權，請發郵件至郵箱：810665436@qq.com聯系筆者 刪除。
筆者：苦海
總結
以上是生活随笔為你收集整理的jQuery概述、优点、使用步骤、入口函数、jQuery对象和DOM对象之间的转换、层级选择器、属性选择器、筛选选择器、节点选择器的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： python py2exe_转：py2e
- 下一篇： 初步认识java中的方法