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

參考文獻(xiàn)：http://jquery.cuishifeng.cn/index.html

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

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

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

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

tips：

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

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

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

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

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

?

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

添加樣式：$('').addClass()
刪除樣式 $('').removeClass()
　　js還支持鏈?zhǔn)骄幊?#xff0c;就是說可以將多個操作都通過jquery的.寫成一條語句

其他jquery的功能請參考網(wǎng)站：http://jquery.cuishifeng.cn/

文本操作：(這些知識點(diǎn)可以練習(xí)模態(tài)框)
　　$(...).text() 獲取文本內(nèi)容
　　$(...).text('xxx') 設(shè)置文本內(nèi)容，如果內(nèi)含標(biāo)簽，不會解析，直接作為字符串
　　$(...).html() 獲取內(nèi)含標(biāo)簽的內(nèi)容
　　$(...).html('xxx') 設(shè)置值
　　$(...).val() 相當(dāng)于Dom中的value，獲取值
　　$(...).val(‘’) 相當(dāng)于Dom中的value，設(shè)置值

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

TAB切換菜單：
文檔處理：

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

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

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

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

阻止事件發(fā)生：

　　這些綁定的事件都是后來綁定的，執(zhí)行先后順序?yàn)?#xff0c;后來綁定的優(yōu)先于標(biāo)簽?zāi)J(rèn)自帶的先執(zhí)行，如a標(biāo)簽，當(dāng)添加的事件加上return false時，后面的事件不會執(zhí)行，如果是ruturn true 就會執(zhí)行后面的；注意，通過Dom綁定事件，標(biāo)簽中的事件綁定要加上return（οnclick='return Foo()'），用jquery綁定的在函數(shù)里面添加return函數(shù)就行;（表單提交驗(yàn)證的時候可以用這個功能）

　　默認(rèn)事件先執(zhí)行標(biāo)簽：Checkbox標(biāo)簽；

　　自定義事件先執(zhí)行：a,submit...標(biāo)簽；

?　　登陸注冊框?qū)崿F(xiàn)代碼實(shí)例：

?

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

擴(kuò)展:里面是字典形式的
　　第一種：

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

第二種：

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

?

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

　　2、后端：python驗(yàn)證實(shí)現(xiàn)

　　3、業(yè)務(wù)處理

轉(zhuǎn)載于:https://www.cnblogs.com/daemon-czk/p/9743258.html

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。