• JQuery功能查询页


    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”

  • 相关阅读:
    _MainTex_TexelSize
    资源处理参考
    unity 判断一个trans在不在sceen内
    DX11 绘制三角形 判断顺时针
    int型转LPCWSTR在MessageBox上显示
    sizeof struct
    buffer和cache
    DX11 三维空间: depth信息与stencil信息
    DX11 纹理的添加
    hlsl SV_POSITION
  • 原文地址:https://www.cnblogs.com/xuning/p/4323729.html
Copyright © 2020-2023  润新知