jQuery:集合Dom/BOM/Js的類庫

參考文獻：http://jquery.cuishifeng.cn/index.html

參考博客：https://www.cnblogs.com/wupeiqi/articles/5369773.html
導入:相當于放在編輯的文檔文件中：官網下載的是js文件，有兩個文件，本地測試可以用正常版本，正常上線的時候用壓縮版的，例如：jquery-1.12.4.js，推薦使用1系列的最新版本，兼容性比較好,2和3版本會忽略低版本的瀏覽器。

我們在使用jquery的時候，也是要先把jquery的css文件放入工程里面，但是不用link導入，而是在編寫JavaScript腳本的時候再導入,如下：

導入方法：
　　<script src='jquery-1.12.4.js'></script>
　　<script>
　　　　jQuery.（也可以寫成$('#i1'),一般都是用$這個方法）
　　</script>

jquery和Dom之間的轉換：
　　$('#id')[0] 就可以轉換成Dom對象document.getElementById('i1')
　　d=document.getElementById('i1'), $(d)就可以將Dom對象轉換成jquery對象;

tips：

在使用別人的樣式時，如果你想要編輯或者添加一個小圖標(https://fontawesome.com/icons?from=io),只需要在這個網站下載他們的樣式打包文件下來，解壓到自己的工程項目里面，在<title>標簽下面用<link>標簽引入他們的css文件，然后再找到你想要的小圖標的標簽源碼復制到你的html文件想要黏貼的位置即可，這種方法可以減少代碼編寫量，但是修改就比較麻煩，如果要將自己想要渲染的樣式覆蓋掉他們的樣式，就必須在自己定義的style中添加的樣式后面加上!important，示例：

<link rel="stylesheet" href="/static/bootstrap.ss">
<style>
.c1{
!important;
}
</style>

這樣，自己渲染的c1類的背景顏色就編程了紅色，覆蓋了引入的css樣式里面定義好的背景顏色了。

一、查找元素:選擇器，直接找到某個或者某類標簽
1.id
　　$('#id')
2.class
　　<div class='c1'></div>
　　$('.c1')
3.標簽
　　<a>...</a>
　　$('a')
4.選擇多個標簽（組合選擇）
　　$('a,c1,#id')
5.層級選擇,和方法4不同的是，查找的元素之間用空格隔開；
　　$('a c1 #id') 子子孫孫
　　$('a>child')，$('a+child')，$('a~child') 只找兒子
6.基本和屬性的選擇參考相關網站

實例：
　　jquery循環：$('...').each(function(){})，例如反選實例，全選或者多選不需要后面的each，jquery默認是會自動循環的 注意function里面要有this，代表當前循環的每一個元素，這里的this是Dom對象
$(this).prop('key','value') jquery獲取和設置屬性方法，prop方法是專門針對checked和selected的
三元運算：var v=條件 ？真值：假值

?

篩選：在選擇器選擇到的所有元素中再次進行選擇，例如：
　　$(this).next() 緊挨著的下一個標簽
　　$(this).prev() 緊挨著的上一個標簽
　　$(this).parent() 獲取父標簽
　　$(this).children() 獲取所有的孩子標簽
　　$(this).siblings() 獲取除了自身的所有兄弟標簽
　　$(this).find('.c1/#id') 通過find找到.c1/$id的標簽

添加樣式：$('').addClass()
刪除樣式 $('').removeClass()
　　js還支持鏈式編程，就是說可以將多個操作都通過jquery的.寫成一條語句

其他jquery的功能請參考網站：http://jquery.cuishifeng.cn/

文本操作：(這些知識點可以練習模態框)
　　$(...).text() 獲取文本內容
　　$(...).text('xxx') 設置文本內容，如果內含標簽，不會解析，直接作為字符串
　　$(...).html() 獲取內含標簽的內容
　　$(...).html('xxx') 設置值
　　$(...).val() 相當于Dom中的value，獲取值
　　$(...).val(‘’) 相當于Dom中的value，設置值

樣式操作：
　　$(.c1).removeClass('hide')
　　$(.c1).addClass('hide')
開關操作：$(.c1).toggleClass('hide'),實現顯示或者消失
屬性操作
　　$('').attr（） 專門用來做自定義屬性，可以獲取和修改屬性
　　$('').removeAttr（） 專門用來做自定義屬性，可以刪除屬性
　　$('').prop（） 專門用于chekbox,radio進行的操作
　　$('').index() 獲取索引值

TAB切換菜單：
文檔處理：

　　$('').append() 子標簽最后添加一個標簽
　　$('').prepend() 字標簽最前面添加一個標簽
　　$('').after() 標簽下面添加一個平級標簽
　　$('').before() 標簽上面添加一個平級標簽
　　$('').eq(index).remove() 刪除一個標簽
　　$('').eq(index).empty() 清空一個標簽的內容
　　$('').eq(index).clone() 復制一個標簽

css某一條樣式的修改：
　　$('').css('樣式名稱','樣式值')
點贊功能實現：
　　-$('').append()
　　-setInterval定時器
　　-透明度
　　-opsition
　　-大小，位置

位置操作：(可以實現移動窗口位置的功能)
　　-$('').remove()
　　-$(window).scrollTop() 獲取右側滑輪位置，
　　-$(window).scrollTop(100) 設置右側滑輪到100，
　　-$('').offset() 獲取指定標簽在html中的坐標
　　-$('').offset().left() 獲取指定標簽在html中離左邊距離
　　-$('').offset().right() 獲取指定標簽在html中離右邊距離
其他操作參考上面網站。

事件：Dom：三種綁定
jquery：
　　$('.c1').click()
　　$('.c1').bind('click'.function(){})
　　$('.c1').unbind('click'.function(){})
　　比較特殊的方式：$('.c1').delegate('a','click'.function(){}) 根據標簽綁定，這種叫委托，當代碼執行的時候其實沒有綁定事件，當進行點擊了時候才綁定執行事件
　　$('.c1').undelegate('a','click'.function(){})
上面幾種綁定都是下面的on綁定方法的擴展
　　$('.c1').on('click',function(){})
　　$('.c1').off('click',function(){})

阻止事件發生：

　　這些綁定的事件都是后來綁定的，執行先后順序為，后來綁定的優先于標簽默認自帶的先執行，如a標簽，當添加的事件加上return false時，后面的事件不會執行，如果是ruturn true 就會執行后面的；注意，通過Dom綁定事件，標簽中的事件綁定要加上return（οnclick='return Foo()'），用jquery綁定的在函數里面添加return函數就行;（表單提交驗證的時候可以用這個功能）

　　默認事件先執行標簽：Checkbox標簽；

　　自定義事件先執行：a,submit...標簽；

?　　登陸注冊框實現代碼實例：

?

　　當頁面框架加載完成之后自動執行：代碼是由上至下執行的，一般圖片太大的時候會有延遲，圖片框架有了，但是內容還沒有顯示，所以將script代碼放在這個函數體內可以優先執行，不用等圖片全部加載完成
$(function(){})

擴展:里面是字典形式的
　　第一種：

　　$.extend({
　　　　'擴展名1':function(){...},
　　　　'擴展名2':function()(...),
　　　　'擴展名3':function()(...),
　　　　})
　　var v=$.擴展名();
　　alert(v);

第二種：

　　$.fn.extend({
　　　　'擴展名1':function(){...},
　　　　'擴展名2':function()(...),
　　　　'擴展名3':function()(...),
　　　　　　})
　　　　var v=$(‘選擇器’).擴展名();
　　　　alert(v);
　　以后可以引入網上其他人寫的擴展方法，寫在一個文件里，但是要像引入jquery一樣引入這個文件，當映入的兩個擴展名字相同，而且又都有全局變量的時候，這個時候就可以在擴展文件里面用自執行函數，也可以帶參數例如：帶上參數(jQuery),這樣擴展文件里面的就都是局部變量了

?

正則：
　　js中創建正則表達式對象：/匹配符/
　　test 判斷字符串是否符合規定的正則
　　rep=/\d+/;
　　rep.test('asdfgsgsg34g')
　　返回true
　　rep=/^\d+$/ 這種匹配就是開頭結束都是數字才返回ture
　　exec 獲取/提取匹配的數據
　　rep=/\d+/;
　　rep.exec('asd45sgsg34g')
　　返回的只有[‘45’],是一個列表，而且只有一個，
驗證過程：
　　1、前端：驗證

　　2、后端：python驗證實現

　　3、業務處理

轉載于:https://www.cnblogs.com/daemon-czk/p/9743258.html

總結

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

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