创新互联jQuery教程：jQuery备忘单

这个jQuery备忘单对于初学者和有经验的开发人员都是很好的参考。

创新互联建站专注为客户提供全方位的互联网综合服务，包含不限于网站制作、成都网站制作、沙河口网络推广、微信小程序、沙河口网络营销、沙河口企业策划、沙河口品牌公关、搜索引擎seo、人物专访、企业宣传片、企业代运营等，从售前售中售后，我们都将竭诚为您服务，您的肯定，是我们最大的嘉奖；创新互联建站为所有大学生创业者提供沙河口建站搭建服务，24小时服务热线：18982081108，官方网址：www.cdcxhl.com

开始

导入jQuery

官方CDN

jQuery 语法

$(selector).methodOrFunction();

例子：

$('#menu').on('click', () =>{
  $(this).hide();  
});

$("body").css("background", "red");

jQuery 文档准备就绪

$(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")

基本

• *
• .class
• element
• #id
• :hidden
• :visible
• :contains()
• :empty
• :has()
• :parent
• panrent > child
• ancestor descendant
• prev + next
• prev ~ siblings

基本过滤器

• :animated
• :eq()
• :even
• :first
• :gt()
• :header
• :lang()
• :last
• :lt()
• :not()
• :odd
• :root
• :target

属性

• [name|="value"]
• [name*="value"]
• [name~="value"]
• [name$="value"]
• [name="value"]
• [name!="value"]
• [name^="value"]
• [name]
• [name="value"][name2="value2"]

子过滤器

• :first-child
• :first-of-type
• :last-child
• :last-of-type
• :nth-child()
• :nth-last-child()
• :nth-last-of-type()
• :nth-of-type()
• :only-child
• :only-of-type()

组件

• :button
• :checkbox
• :checked
• :disabled
• :enabled
• :focus
• :file
• :image
• :input
• :password
• :radio
• :reset
• :selected
• :submit
• :text

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');

属性

• .attr()
• .prop()
• .removeAttr()
• .removeProp()
• .val()

数据

• jQuery.data()
• .data()
• jQuery.hasData()
• jQuery.removeData()
• .removeData()

CSS

• .addClass()
• .addClass()
• .hasClass()
• .removeClass()
• .toggleClass()
• .css()
• jQuery.cssHooks
• jQuery.cssNumber
• jQuery.escapeSelector()

Dimensions

• .height()
• .innerHeight()
• .innerWidth()
• .outerHeight()
• .outerWidth()
• .width()

Offset

• .offset()
• .offsetParent()
• .position()
• .scrollLeft()
• .scrollTop()

jQuery 操作

例子

/*Span.*/
$('span').after('
Paragraph.
');
/*Span.
Paragraph.
*/

/*Span.*/
$('Span.').replaceAll('p');
/*
Span.
*/

/*This is span.*/
$('span').wrap('
');
/*
This is span.
*/

复印

• .clone()

DOM 插入，周围

• .wrap()
• .wrapAll()
• .wrapInner()

DOM 插入，内部

• append()
• .appendTo()
• .html()
• .prepend()
• .prependTo()
• .text()

DOM 插入，外部

• .after()
• .before()
• .insertAfter()
• .insertBefore()

DOM 移除

• .detach()
• .empty()
• .remove()
• .unwrap()

DOM 替换

• .replaceAll()
• .replaceWith()

jQuery 遍历

过滤

• .eq()
• .filter()
• .first()
• .has()
• .is()
• .last()
• .map()
• .not()
• .slice()

杂项遍历

• .add()
• .addBack()
• .andSelf()
• .contents()
• .each()
• .end()

树遍历

• .children()
• .closest()
• .find()
• .next()
• .nextAll()
• .nextUntil()
• .parent()
• .parents()
• .parentsUntil()
• .prev()
• .prevAll()
• .prevUntil()
• .siblings()

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
});

浏览器事件

• .error()
• .resize()
• .scroll()

事件对象

• 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

文件装载

• .load()
• .ready()
• .unload()

事件处理程序附件

• .bind()
• .delegate()
• .die()
• .live()
• .off()
• .on()
• .one()
• .trigger()
• .triggerHandler()
• .unbind()
• .undelegate()

表单事件

• .blur()
• .change()
• .focus()
• .focusin()
• .focusout()
• .select()
• .submit()

键盘事件

• .keydown()
• .keypress()
• .keyup()

鼠标事件

• .click()
• .contextMenu()
• .dblclick()
• .hover()
• .mousedown()
• .mouseenter()
• .mouseleave()
• .mousemove()
• .mouseout()
• .mouseover()
• .mouseup()
• .toggle()

jQuery 效果

例子

$('#menu-button').on('click', () => {
  // $('#menu').fadeIn(400, 'swing')
  $('#menu').fadeIn();
});

淡出效果

$('#menu-button').on('click', () => {
  // $('#menu').fadeOut(400, 'swing')
  $('#menu').fadeOut();
});

隐藏显示

• .hide()
• .show()
• .toggle()

滑动

• .slideDown()
• .slideToggle()
• .slideUp()

动画

• .animate()
• .clearQueue()
• .delay()
• .dequeue()
• jQuery.dequeue()
• .finish()
• jQuery.fx.interval
• jQuery.fx.off
• jQuery.speed
• .queue()
• jQuery.queue()
• .stop()

淡入淡出

• .fadeIn()
• .fadeOut()
• .fadeTo()
• .fadeToggle()

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);
});

全局 Ajax 事件处理程序

• .ajaxComplete()
• .ajaxError()
• .ajaxSend()
• .ajaxStart()
• .ajaxStop()
• .ajaxSuccess()

辅助函数

• jQuery.param()
• .serialize()
• .serializeArray()

低级接口

• jQuery.ajax()
• jQuery.prefilter()
• jQuery.ajaxSetup()
• jQuery.ajaxTransport()

速记方法

• jQuery.get()
• jQuery.getJSON()
• jQuery.getScript()
• jQuery.post()
• .load()

其他

jQuery 对象

• jQuery()
• jQuery.noConflict()
• jQuery.sub()
• jQuery.holdReady()
• jQuery.when()

延迟对象

• 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 元素方法

• .get()
• .index()
• .size()
• .toArray()

内件

• .jquery
• .context
• jQuery.error()
• .length
• .pushStack()
• .selector

回调对象

• jQuery.Callbacks()
• callbacks.add()
• callbacks.disable()
• callbacks.disabled()
• callbacks.empty()
• callbacks.fire()
• callbacks.fired()
• callbacks.fireWith()
• callbacks.has()
• callbacks.lock()
• callbacks.locked()
• callbacks.remove()

分享题目：创新互联jQuery教程：jQuery备忘单
文章起源：http://www.shufengxianlan.com/qtweb/news1/486651.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联