JQuery在前端开发中已经是常用的不能再常用的库了。最近的项目中使用到了JQuery，我第一次接触它的时候为了学习，把常用的操作指令用比较小的字体写在一页word上，打印出来贴在桌子上，用来让自己时时刻刻想用都能看到相关的API调用方法。这种方式非常有利于记忆，国外也经常会有一些Pocket Book，即简易查询字典，书中每一个功能都用很简单的一两句话描述，让自己想用的时候随时都能查到。在此，将我自己做完贴在桌子上的JQuery查询页分享出来，供大家参考。

【JQuery】

引用JQuery库

<head><script type=”text/javascript” src=”jquery.js”></script></head>

$(this).hide()隐藏当前元素

$(“p”).hide()隐藏所有段落

$(“.test”).hide()隐藏所有class=”test”的元素

$(“#test”).hide()隐藏所有id=”test”的元素

$(document).ready(function(){…});文档就绪函数

$(“p.intro”)选取所有class=”intro”的<p>元素

$(“p#demo”)选取所有id=”demo”的<p>元素

$(“[href]”)选取所有带有href属性的元素

$(“[href=’#’]”)选取所有带有href值为”#”的元素

$("[href!='#']")选取所有带有 href 值不等于"#"的元素

$("[href$='.jpg']") 选取所有href 值以".jpg"结尾的元素

$("p").css("background-color","red");p元素背景改红色

$(“div#intro .head”) id=”intro”的<div>元素下所有class=”head”的元素（注意.head和intro之间有个空格）

$(“p[name=’xx’]”)选取所有name为xx的p元素

$(document).ready(function) 文档加载完成事件

$(selector).click(function) 元素被点击事件

$(selector).dblclick(function) 元素被双击事件

$(selector).focus(function) 元素获得焦点事件

$(selector).mouseover(function) 元素鼠标悬停事件

$(selector).hide()或$(selector).show()隐藏或显示元素

hide()和show()可以有两个参数speed和callback，callback规定了回调函数，speed隐藏速度（毫秒）

$(selector).toggle()函数可以在隐藏和显示中切换

$(selector).fadeIn(), $(selector).fadeOut(), $(selector). fadeToggle()元素淡入，淡出，淡切换，参数同hide()

$(selector).fadeTo(speed,opacity,callback);渐变为指定透明度，opacity取值0至1之间

$(selector).slideDown(), $(selector).slideUp, $(selector).Toggle滑动展开、收缩某元素，参数同hide()

$(selector).animate({params},speed,callback);元素动画，params规定形成动画的CSS属性，可使用相对值，speed为速度（毫秒），callback为回调函数。位置操作，css的position应该设置为relative，fixed，absolute之一。animate可调用多次，完成系列动画。

$(selector).stop(stopAll, goToEnd)在动画完成前停止，stopAll默认false，是否清除动画队列，goToEnd是否立即完成当前动画，默认false。

$("#p1").css("color","red").slideUp(2000).slideDown(2000);串行对一个元素执行一系列操作

$(selector).text()设置或返回元素的文本内容

$(selector).html()设置或返回元素内容，含html标记

$(selector).val()设置或返回表单字段的值

$(selector).attr(“href”)获取href属性的值

$(selector).attr(“href”,”www.qq.com”)改变href属性值

text(),html(),val(),attr()都可以设置回调函数

$(selector).append()后面追加元素

$(selector).prepend()前面追加元素

$(selector).after()和$(selector).before()在元素后面或前面插入内容

$(selector).remove()删除被选元素和它的子元素

$(selector).empty()删除被选元素的子元素

$("p").remove(".italic");删除所有class=”italic”的p元素

$(selector).addClass()向被选元素添加若干class属性

$(selector).removeClass()从元素删除若干class属性

$(selector).toggleClass()添加/删除若干class属性

$(“p”).css(“background-color”)返回p元素的背景色属性

$("p").css("background-color","yellow");设置属性值

$("p").css({"background-color":"yellow","font-size":"200%"});同时设置多个属性

$(selector).width(), $(selector).height()返回或设置元素高度或宽度（不含margin，padding，border）

$(selector).innerWidth(), $(selector).innerHeight()返回元素的宽度或高度（包括padding）

$(selector).outerWidth(),$(selector).outerHeight()返回元素的宽度和高度（包含padding，border），outerWidth和outerHeight可以加参数true，此时包含padding，border，margin

$(selector).parent()返回被选元素的父元素

$(selector).parents()返回元素的所有祖先元素

$("span").parents("ul");在祖先中筛选出ul元素

$("span").parentsUntil("div");返回两元素之间的元素

$("div").children();返回被选元素的直接子元素（下一级）

$("div").children("p.1");在直接子元素筛选并返回

$("div").find("span");在一切子元素中搜索span并返回

$("div").find("*");返回div元素的所有子元素（含间接）

$("h2").siblings();返回h2的所有同胞元素

$("h2").siblings("p");在h2所有同胞元素中过滤并返回

$("h2").next();返回h2的下一个同胞元素

$("h2").nextAll();返回h2的后面所有同胞元素

$("h2").nextUntil("h6");返回h2和h6之间所有同胞元素

prev(), prevAll()和prevUntil()方法与前面类似但反方向

$("div p").first();返回第一个div下的第一个p元素

$("div p").last();返回最后一个div下的最后一个p元素

$("p").eq(1);第二个p元素，eq(0)为第一个p元素

$("p").filter(".intro");带有类名intro的所有p元素

$("p").not(".intro");功能与filter刚好相反

$(selector).load(URL,data,callback);URL必填，data选填，data是与URL一同发送的查询字符串键/值对集合，callback可选，是回调函数，callback参数可以有三个：responseTxt调用成功时的结果，statusTxt包含调用的状态，xhr包含XMLHttpRequest对象

$("#div1").load("demo_test.txt #p1");把txt文件中id=p1的内容加载到div1中

$.get(URL,data,callback,type)使用GET请求URL页面的内容，data是连同请求一起发给服务器的数据，callback有两个参数，第一个data是被请求页面的内容，第二个status是请求的状态，type是返回数据的类型。

$.post(URL,data,callback,type)，URL是请求链接，data是连同请求一起发送的数据，callback是回调函数，参数有data和status两个，其含义和get的回调函数一样。type可以是（html,xml,json,jasonp,script,text）

JQuery使用$.noConflict()方法可以释放美元符$，来解决JQuery和其他JS库冲突的情况，可以使用jQuery(“p”)来代替$,var jq=$.noConflict()用jq代替$的作用。

jQuery.ajax({

options:

async: true (default，异步)

beforesend(XHR):

cache: true (default)

complete: function(){..}

contentType: “application/x-www-form-urlencoded”

context: 回调函数的this指向这个对象

data: GET请求中附加在URL之后

dataFilter: 对ajax返回的原始数据进行预处理

dataType: 返回类型html,xml,json,jasonp,script,text

error:请求失败时调用的函数

global: true(default)是否触发全局ajax事件

ifModified: false(default)仅在数据变化时获取新数据

jsonp: 在一个jsonp请求中重写回调函数的名字

jsonpCallback:为jsonp请求指定一个回调函数名

password: 用于响应HTTP访问认证请求的密码

processData: true(default)

scriptCharset:

success:请求成功后的回调函数

traditional:

timeout:设置请求超时时间

type:默认”GET”，也可以设置成”POST”

url:发送请求的地址

username:响应HTTP访问认证请求的用户名

xhr:返回一个XMLHttpRequest对象，用于重写

})

$(selector).ajaxComplete, $(selector).ajaxError, $(selector).ajaxSend, $(selector).ajaxSetup, $(selector).Start, $(selector).Stop, $(selector).ajaxSuccess, $(selector).getJSON, $(selector).getScript, $(“p”).param, $(“p”).serialize, $(selector).serializeArray

【AJAX】

variable xmlhttp=new XMLHttpRequest();

xmlhttp.open(“GET”, “test1.txt”, true);

最后一个参数async为true表示异步

xmlhttp.send()把GET请求发出去

如果是POST方法，使用xmlhttp.setRequestHeader(header, value);添加头部

xmlhttp.send(data);添加POST的数据

xmlhttp.onreadystatechange=function(){}规定响应处于就绪时候的函数

xmlhttp.responseText获得字符串形式的响应数据

xmlhttp.responseXML获得XML形式的响应数据

xmlhttp.readyState从0至4变化，0请求未初始化，1服务器连接已经建立，2请求已经接收，3请求处理中，4请求处理完成，且响应已经就绪

xmlhttp.status: 200 “OK” 404 “NOT FOUND”

JQuery功能查询页的更多相关文章

  1. jQuery基础之（三）jQuery功能函数前缀及与window.onload冲突

    1.jQuery功能函数前缀 在javascript中,开发者通常会编写一些小函数来处理各种操作细节,例如在用户提交表单时,要将文本框最前端和最末端的空格内容清理掉.而javascript中没有类似t ...

  2. 15个最佳jQuery的翻页书效果的例子

    在这里,你会发现15的jQuery的翻页书的插件,提供了良好的页面翻转的经验,并帮助创建类似书本的效果. jQuery的增添了一道亮丽的过渡到实际的页面在一本书或杂志HTML5. 1. BookBlo ...

  3. jquery实战---标签页效果

    在前面的博客中,小编主要简单的介绍了jquery的一些基本知识,今天这篇博文,小编继续来学习jquery的相关知识,今天我们来学习一个标签页的小例子,相关源码小编已经上传,有需要的小伙伴可以自己去下载 ...

  4. avalonjs学习笔记之实现一个简单的查询页

    官网地址:http://avalonjs.coding.me/ 因为是为了学习js,所以对样式没什么要求,先放效果图: 步骤为:初始页面-------条件查询-------编辑员工1-------保存 ...

  5. 基于jQuery功能非常强大的图片裁剪插件

    今天我们要来介绍一款基于jQuery功能非常强大的图片裁剪插件,这款jQuery图片裁剪插件可以选择裁剪框的尺寸比例,可以设置高宽尺寸,同时可以设置图片翻转角度,当然也支持图片的缩放,裁剪框也可以用鼠 ...

  6. Hexo Next配置百度分享、加入动态背景、接入网页在线联系功能、页脚增加统计功能、添加gitment、添加热度、阅读量排行

    Hexo Next配置百度分享.加入动态背景.接入网页在线联系功能.页脚增加统计功能.添加gitment.添加热度.阅读量排行: https://wangc1993.github.io/categor ...

  7. jquery 数据查询

    jquery 数据查询 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> & ...

  8. 使用CSS和jQuery实现tab页

    使用jquery来操作DOM是极大的方便和简单,这儿只是简单的用一个使用css和jquery来实现的tab页来简单介绍一些jQuery的一些方便使用的方法,下面是html文件: <!DOCTYP ...

  9. jquery实现tab页切换显示div

    1.jQuery实现tab切换显示代码实现 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" &q ...

随机推荐

  1. Java触发器CronTrigger

    摘要:如果需要像日历那样按日程来触发任务,而不是像SimpleTrigger 那样每隔特定的间隔时间触发,CronTriggers通常比SimpleTrigger更有用. 一.web.xml: < ...

  2. 十一、Android学习第十天——项目开始（转）

    (转自:http://wenku.baidu.com/view/af39b3164431b90d6c85c72f.html) 十一.Android学习第十天——项目开始 Android知识点的学习告一 ...

  3. python 笔记（一） —— 不要误用 ++i、--i

    ilocker:关注 Android 安全(新手) QQ: 2597294287 在 python 中也可以写 ++i,但含义完全不同于 c/c++.python 的 ++i 并不是将 i 自增 1, ...

  4. 六轴加速度传感器MPU6050官方DMP库到瑞萨RL78/G13的移植

    2015年的电赛已经结束了.赛前接到器件清单的时候,看到带防护圈的多旋翼飞行器赫然在列,又给了一个瑞萨RL78/G13的MCU,于是自然联想到13年的电赛,觉得多半是拿RL78/G13做四旋翼的主控, ...

  5. ajax使用serialize()序列化提交

    form 表单使用.serialize()序列化后会出现中文乱码的问题 原因: .serialize()自动调用了encodeURIComponent方法将数据编码了 解决方法: 调用decodeUR ...

  6. Java对象序列化文件追加对象的问题，以及Java的读取多个对象的问题解决方法。

    这几天做一个小的聊天项目用到对象序列化的知识,发现对象序列化不能像普通文件一样直接追加对象.每次写入对象都会被覆盖.弄了2个多小时终于解决了.Java默认的对象序列化是每次写入对象都会写入一点头ace ...

  7. [转]ExtJs4 笔记（13） Ext.menu.Menu 菜单、Ext.draw.Component 绘图、Ext.resizer.Resizer 大小变更

    作者:李盼(Lipan)出处:[Lipan] (http://www.cnblogs.com/lipan/)版权声明:本文的版权归作者与博客园共有.转载时须注明本文的详细链接,否则作者将保留追究其法律 ...

  8. android代码优化----ListView中自定义adapter的封装（ListView的模板写法）

    [声明] 欢迎转载,但请保留文章原始出处→_→ 生命壹号:http://www.cnblogs.com/smyhvae/ 文章来源:http://www.cnblogs.com/smyhvae/p/4 ...

  9. SilverFoxServer出炉！！

    SilverFoxServer是啥?各位看官搜一下SmartFoxServer便知 是一套服务端+客户端通迅框架,快速搭建起回合制,棋牌类的联机 网页游戏 SilverFoxServer的特点包括 用 ...

  10. [No00000B]MS OFFICE 2013 快捷键大全

    常用快捷键 快捷键 作用 Ctrl+Shift+Spacebar 创建不间断空格 Ctrl+-(连字符) 创建不间断连字符 Ctrl+B 使字符变为粗体 Ctrl+I 使字符变为斜体 Ctrl+U 为 ...