jQuery 備忘單
2021-08-31 11:55 更新
這個jQuery備忘單對于初學(xué)者和有經(jīng)驗的開發(fā)人員都是很好的參考。
開始
導(dǎo)入jQuery
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js" rel="external nofollow" ></script>
官方CDN
<script src="https://code.jquery.com/jquery-3.5.1.min.js" rel="external nofollow" crossorigin="anonymous"></script>
jQuery 語法
$(selector).methodOrFunction();
例子：
$('#menu').on('click', () =>{
$(this).hide();
});
$("body").css("background", "red");
jQuery 文檔準(zhǔn)備就緒
$(document).ready(function() {
// Runs after the DOM is loaded.
alert('DOM fully loaded!');
});
$(function(){
// Runs after the DOM is loaded.
alert('DOM fully loaded!');
});
jQuery 選擇器
例子
$("button").click(() => {
$(":button").css("color", "red");
});
組合選擇器
$("selector1, selector2 ...selectorn")
基本
屬性
子過濾器
jQuery 屬性
例子
$('h2').css({
color: 'blue',
backgroundColor: 'gray',
fontSize: '24px'
});
jQuery 添加類
$('.button').addClass('active');
jQuery 刪除類
$('.button').on('mouseleave', evt => {
let e = evt.currentTarget;
$(e).removeClass('active');
});
jQuery .toggleClass
$('.choice').toggleClass('highlighted');
屬性
CSS
jQuery 操作
例子
/*<span>Span.</span>*/
$('span').after('<p>Paragraph.</p>');
/*<span>Span.</span><p>Paragraph.</p>*/
/*<span>Span.</span>*/
$('<span>Span.</span>').replaceAll('p');
/*<p>Span.</p>*/
/*<span>This is span.</span>*/
$('span').wrap('<p></p>');
/*<p><span>This is span.</span></p>*/
復(fù)印
DOM 插入，周圍
DOM 插入，內(nèi)部
DOM 替換
jQuery 遍歷
jQuery 事件
例子
// A mouse event 'click'
$('#menu-button').on('click', () => {
$('#menu').show();
});
// A keyboard event 'keyup'
$('#textbox').on('keyup', () => {
$('#menu').show();
});
// A scroll event 'scroll'
$('#menu-button').on('scroll', () => {
$('#menu').show();
});
事件對象
$('#menu').on('click', event => {
$(event.currentTarget).hide();
});
方法鏈
$('#menu-btn').on('mouseenter', () => {
$('#menu').show();
}).on('mouseleave', () => {
$('#menu').hide();
});
阻止事件
$( "p" ).click(function( event ) {
event.stopPropagation();
// Do something
});
事件對象
- event.currentTarget
- event.delegateTarget
- event.data
- event.isDefaultPrevented()
- event.isImmediatePropagationStopped()
- event.isPropagationStopped()
- event.metaKey
- event.namespace
- event.pageX
- event.pageY
- event.preventDefault()
- event.relatedTarget
- event.result
- event.stopImmediatePropagation()
- event.stopPropagation()
- event.target
- event.timeStamp
- event.type
- event.which
jQuery 效果
例子
$('#menu-button').on('click', () => {
// $('#menu').fadeIn(400, 'swing')
$('#menu').fadeIn();
});
淡出效果
$('#menu-button').on('click', () => {
// $('#menu').fadeOut(400, 'swing')
$('#menu').fadeOut();
});
動畫
jQuery Ajax
例子
$.ajax({
url: this.action,
type: this.method,
data: $(this).serialize()
}).done(function(server_data){
console.log("success" + server_data);
}).fail(function(jqXHR, status, err){
console.log("fail" + err);
});
其他
延遲對象
- jQuery.Deferred()
- deferred.always()
- deferred.done()
- deferred.fail()
- deferred.isRejected()
- deferred.isResolved()
- deferred.notify()
- deferred.notifyWith()
- deferred.pipe()
- deferred.progress()
- deferred.promise()
- deferred.reject()
- deferred.rejectWith()
- deferred.resolve()
- deferred.resolveWith()
- deferred.state()
- deferred.then()
- .promise()
公共方法
- jQuery.boxModel
- jQuery.browser
- jQuery.contains()
- jQuery.each()
- jQuery.extend()
- jQuery.globalEval()
- jQuery.grep()
- jQuery.inArray()
- jQuery.isArray()
- jQuery.isEmptyObject()
- jQuery.isFunction()
- jQuery.isNumeric()
- jQuery.isPlainObject()
- jQuery.isWindow()
- jQuery.isXMLDoc()
- jQuery.makeArray()
- jQuery.map()
- jQuery.merge()
- jQuery.noop()
- jQuery.now()
- jQuery.parseHTML()
- jQuery.parseJSON()
- jQuery.parseXML()
- jQuery.proxy()
- jQuery.support
- jQuery.trim()
- jQuery.type()
- jQuery.unique()
- jQuery.uniqueSort()
DOM 元素方法
以上內(nèi)容是否對您有幫助：
更多建議：