jQuery是一款前端開發(fā)框架,jQuery使用的方法如下:
創(chuàng)新互聯(lián)是一家專注于成都網(wǎng)站設(shè)計(jì)、網(wǎng)站制作與策劃設(shè)計(jì),浦東網(wǎng)站建設(shè)哪家好?創(chuàng)新互聯(lián)做網(wǎng)站,專注于網(wǎng)站建設(shè)10余年,網(wǎng)設(shè)計(jì)領(lǐng)域的專業(yè)建站公司;建站業(yè)務(wù)涵蓋:浦東等地區(qū)。浦東做網(wǎng)站價(jià)格咨詢:18980820575
工具/原料:聯(lián)想威6、win10 20H2、jQuery 3.5.1。
1、jQuery給放到一個(gè)文件夾里面,方便我們待會引用這個(gè)jQuery,這里我就放到我項(xiàng)目的js文件夾里面。
2、然后我們來開始編輯HTML界面代碼。
3、如圖,使用script標(biāo)簽把jQuery引入到我們的HTML界面。src引號里面的就是我們的jQuery路徑名稱。
4、接著再書寫一個(gè)script標(biāo)簽對,里面寫上jQuery入口函數(shù),這樣,當(dāng)我們的HTML加載完成之后就會執(zhí)行我們的jQuery代碼,入口函數(shù)寫法有兩種,function里面就是用來書寫執(zhí)行代碼的。
5、如圖,我就使用alert來在網(wǎng)頁中彈出一個(gè)警告框。
6、這樣,當(dāng)我們運(yùn)行我們的網(wǎng)頁的時(shí)候,就會彈出一個(gè)窗口,里面有我們的警告內(nèi)容。至此,jQuery也算簡單的入門了解了。
jQuery對象是通過jQuery包裝DOM對象后產(chǎn)生的對象
注意:jQuery對象只能使用jQuery里的方法,DOM對象只能使用DOM對象的方法
基本選擇器
層級選擇器:
基本篩選器:
屬性選擇器:
表單篩選器:
篩選器方法:
jQuery的一些方法:
注意:對于標(biāo)簽上有的能夠看到的屬性和自定義屬性用attr()方法
對于返回布爾值比如checkbox,radion,option這三個(gè)標(biāo)簽是否被選中,用prop方法
事件綁定方式:
注意:DOM定義的事件可以用 .on()方法來綁定事件,但是jQuery定義的事件就不可以
常用事件有:
移除事件:把on改成off,就是移除 .on()綁定的事件
阻止后續(xù)事件執(zhí)行:事件函數(shù)中添加 return false; (常用于阻止表單提交等)或者e.preventDefault()
阻止事件冒泡:添加e.stopPropagation()
利用父標(biāo)簽去捕獲子標(biāo)簽的事件
推薦閱讀:
前端開發(fā)框架之jQuery 和 Vue 的選擇
前端開發(fā)之15個(gè)jQuery小技巧分享
前端開發(fā)之JQuery入門基礎(chǔ)操作
前端開發(fā)框架jQuery的優(yōu)勢與基礎(chǔ)知識分享
現(xiàn)在網(wǎng)上關(guān)于js和jquery封裝的插件很多,我剛剛接觸前端的時(shí)候,就很敬佩那些自己寫插件的大牛們!因?yàn)槭撬麄兘o網(wǎng)站開發(fā)更多的便利,很多網(wǎng)頁效果,網(wǎng)上很多現(xiàn)成的插件!那么這些插件是如何寫的呢看首先是有扎實(shí)的js和jquery技術(shù)基礎(chǔ),其次還有一些寫插件的方法和技巧。關(guān)于js和jquery的技術(shù)基礎(chǔ),那是一個(gè)慢慢積累的過程。但是關(guān)于寫插件的一些注意和技巧,本文可以略微介紹一下,方便以后寫插件的時(shí)候用得到。
jquery插件開發(fā)模式
jquery插件一般有三種開發(fā)方式:
通過$.extend()來擴(kuò)展jQuery
通過$.fn 向jQuery添加新的方法
通過$.widget()應(yīng)用jQuery UI的部件工廠方式創(chuàng)建
第一種$.extend()相對簡單,一般很少能夠獨(dú)立開發(fā)復(fù)雜插件,第三種是一種高級的開發(fā)模式,本文也不做介紹。第二種則是一般插件開發(fā)用到的方式,本文著重講講第二種。
//類級別插件開發(fā),主要是在jQuery中定義全局方法:
//第一種寫法
jQuery.myFunc = function(str){
alert("直接在jquery中定義方法",str)
}
//調(diào)用方式 $.myFunc("hello!");
//第二種寫法
jQuery.extend({
myFunc:function(str){
alert("extend擴(kuò)展$的方法",str)
}
})
//調(diào)用方式 $.myFunc("hello!");
//第三種寫法: 為了不污染全局,掛載一個(gè)對象作為命名空間,自定義的所有方法放在這里,保證jQuery全局安全。
jQuery.define={
myFunc:function(str){
alert("命名空間的寫法",str)
}
}
//調(diào)用方式:$.define.myFunc("hello");
//以上三種是級別插件開發(fā)方式,不常用,從調(diào)用方式看出,他們是全局執(zhí)行的,不需要綁定節(jié)點(diǎn)對象。
//對象級別插件開發(fā):有規(guī)范模板
;(function($){
$.fn.plugin = function(options){
var defaults = {
//各種默認(rèn)參數(shù)
}
var options = $.extend(defaults,options); //傳入的參數(shù)覆蓋默認(rèn)參數(shù)
this.each(function(){
var _this = $(this); //緩存一下插件傳進(jìn)來的節(jié)點(diǎn)對象。
//執(zhí)行內(nèi)容
})
return $(this); //把節(jié)點(diǎn)對象返回去,為了支持鏈?zhǔn)秸{(diào)用。
}
})(jQuery);
//調(diào)用方式
$("selector").plugin({
//自定義參數(shù),json格式
})