zoukankan      html  css  js  c++  java
  • jQuery基础

    1. $(selector).action()   
     //用美元符号$定义,
    //选择符(selector)"查询"和"查找" HTML 元素
    //jQuery 的 action() 执行对元素的操作
    如:$("#text").hide()  -隐藏id='text'的元素

    2.所有 jQuery 函数位于一个 document ready 函数中,这是为了防止文档在完全加载(就绪)之前运行 jQuery 代码.
    $(document).ready(function(){     //code       });

    3.jQuery 中所有选择器都以美元符号开头:$()。择器基于元素的 id、类、类型、属性、属性值等"查找"
      $("p")  //所有的<p>
    $("*") 选取所有元素 
    $(this) 选取当前 HTML 元素 
    $("p.intro") 选取 class 为 intro 的 <p> 元素
    $("p:first") 选取第一个 <p> 元素 
    $("ul li:first") 选取第一个 <ul> 元素的第一个 <li> 元素 
    $("ul li:first-child") 选取每个 <ul> 元素的第一个 <li> 元素 
    $("[href]") 选取带有 href 属性的元素 
    $("a[target='_blank']") 选取所有 target 属性值等于 "_blank" 的 <a> 元素 
    $("a[target!='_blank']") 选取所有 target 属性值不等于 "_blank" 的 <a> 元素 
    $(":button") 选取所有 type="button" 的 <input> 元素 和 <button> 元素 
    $("tr:even") 选取偶数位置的 <tr> 元素 
    $("tr:odd") 选取奇数位置的 <tr> 元素

    4.$(document).ready() 方法允许我们在文档完全加载完后执行函数。

    5. 鼠标、键盘事件
    鼠标事件      键盘事件                 表单事件 文档/窗口事件
    click      keypress(按下按键时触发) submit load
    dblclick      keydown change resize
    mouseenter  keyup focus(当元素获得焦点时) scroll
    mouseleave   blur(当元素失去焦点时) unload
    mousedown(按下按键时触发)
    mouseup(松开鼠标按钮时 )
    hover(mouseenter和 mouseleave)

    6.隐藏、显示
    $(selector).hide(speed,callback);
    $(selector).show(speed,callback);
    $(selector).toggle(speed,callback); //切换 hide() 和 show() 方法。
    可选的 speed 参数规定隐藏/显示的速度,可以取以下值:"slow"、"fast" 或毫秒。可选的 callback 参数是隐藏或显示完成后所执行的函数名称。

    7. 淡入、淡出
    $(selector).fadeIn(speed,callback);//用于淡入已隐藏的元素
    $(selector).fadeOut(speed,callback);//用于淡出可见元素
    $(selector).fadeToggle(speed,callback);//在 fadeIn() 与 fadeOut() 方法之间进行切换
    可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。可选的 callback 参数是 fading 完成后所执行的函数名称
     $(selector).fadeTo(speed,opacity,callback);  //方法允许渐变为给定的不透明度(值介于 0 与 1 之间)

    8.滑动
     $(selector).slideDown(speed,callback);  //用于向下滑动元素
     $(selector).slideUp(speed,callback);    //用于向上滑动元素至隐藏
     $(selector).slideToggle(speed,callback); //在 slideDown() 与 slideUp() 方法之间进行切换

    9. 动画
     $(selector).animate({params},speed,callback);  //需的 params 参数定义形成动画的 CSS 属性。
    可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。
    可选的 callback 参数是动画完成后所执行的函数名称。当使用 animate() 时,必须使用 Camel 标记法书写所有的属性名.
    编写多个 animate() 调用,然后逐一运行这些 animate 调用。
    $("button").click(function(){
      $("div").animate({
        left:'250px',
        opacity:'0.5',
        height:'150px',
        '150px'
      });
    });

    10. 停止动画或效果
    $(selector).stop(stopAll,goToEnd);
    可选的 stopAll 参数规定是否应该清除动画队列。默认是 false,即仅停止当前活动的动画,允许任何排入队列的动画向后执行。
    可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。

    11.Chaining  允许我们在相同的元素上运行多条 jQuery 命令,一条接着另一条。 这样的话,浏览器就不必多次查找相同的元素。jQuery 会抛掉多余的空格,并当成一行长代码来执行上面的代码行。

    12. DOM 操作
    text() - 设置或返回所选元素的文本内容 // $("#test1").text("Hello world!");
    html() - 设置或返回所选元素的内容(包括 HTML 标记)
    val() - 设置或返回表单字段的值
    attr() 方法用于获取属性值 如:attr("href")="http://"
    attr({,,}) 方法也允许您同时设置多个属性。
    如:$("button").click(function(){
           $("#w3s").attr({
          "href" : "http://www....com/jquery",
          "title" : "W3Schools jQuery Tutorial"
         });
     });

    13.元素操作
    appendTo() 方法把被选元素的插入到指定元素的结尾。如需在被选元素的开头插入 HTML 元素,请使用 prependTo() 方法。
    append() - 在被选元素的结尾插入内容  //$("p").append(txt1,txt2,txt3);添加多个元素。// 使用appendTo这个方法是颠倒了常规的$(A).append(B)的操作,即不是把B追加到A中,而是把A追加到B中。
    prepend() - 在被选元素的开头插入内容
    after() - 在被选元素之后插入内容
    before() - 在被选元素之前插入内容
    after() 方法在被选元素之后插入内容。 //$("img").after(txt1,txt2,txt3); 添加多个元素
    before() 方法在被选元素之前插入内容。

    14.删除元素
    remove() - 删除被选元素(及其子元素) // remove() 方法也可接受一个参数,允许您对被删元素进行过滤 如:$("p").remove(".italic");
    empty() - 从被选元素中删除子元素

    15. class 类
    addClass() - 向被选元素添加一个或多个类 // $("#div1").addClass("important blue")添加多个类, $("h1,h2,p").addClass("blue")多个元素添加类;
    removeClass() - 从被选元素删除一个或多个类
    toggleClass() - 对被选元素进行添加/删除类的切换操作

    16. css() - 设置或返回样式属性
    css("propertyname");  //获得属性值
    css("propertyname","value"); //设置属性值

    17. 属性方法
    width()    //width() 方法设置或返回元素的宽度(不包括内边距、边框或外边距),设置  $("#div1").width("100px");
    height()
    innerWidth() //方法返回元素的宽度(包括内边距)
    innerHeight()
    outerWidth()//方法返回元素的宽度(包括内边距和边框)
    outerHeight()
    outerWidth(true) 方法返回元素的宽度(包括内边距、边框和外边距)

    18. 遍历
    parent() 方法返回被选元素的直接父元素。
    parents() 方法返回被选元素的所有祖先元素,它一路向上直到文档的根元素 (<html>)。
    parentsUntil() 方法返回介于两个给定元素之间的所有祖先元素。
    children() 方法返回被选元素的所有直接子元素。同parent()相反。
    find() 方法返回被选元素的后代元素,一路向下直到最后一个后代。 $("div").find("*"); div后的所有元素
    siblings() 方法返回被选元素的所有同胞元素。
    next() 方法返回被选元素的下一个同胞元素。
    nextAll() 方法返回被选元素的所有跟随的同胞元素
    nextUntil() 方法返回介于两个给定参数之间的所有跟随的同胞元素。
    prev(), prevAll() 以及 prevUntil() 方法的工作方式与上面的方法类似,只不过方向相反而已
    first() 方法返回被选元素的首个元素。  // $("div p").first();选取首个 <div> 元素内部的第一个 <p> 元素
    last() 方法返回被选元素的最后一个元素。
    eq() 方法返回被选元素中带有指定索引号的元素 //索引号从0开始
    filter() 方法允许您规定一个标准。$("p").filter(".intro");类名是intro的p
    not() 方法返回不匹配标准的所有元素。提示:not() 方法与 filter() 相反。

    19. ajax
    $(selector).load(URL,data,callback);从服务器加载数据,并把返回的数据放入被选元素中。
    必需的 URL 参数规定您希望加载的 URL。
    可选的 data 参数规定与请求一同发送的查询字符串键/值对集合。
    可选的 callback 参数是 load() 方法完成后所执行的函数名称。

    beforeSend(xhr) 发送请求前运行的函数。
    cache 布尔值,表示浏览器是否缓存被请求页面。默认是 true。
    complete(xhr,status) 请求完成时运行的函数(在请求成功或失败之后均调用,即在 success 和 error 函数之后)。
    contentType 发送数据到服务器时所使用的内容类型。默认是:"application/x-www-form-urlencoded"。
    context 为所有 AJAX 相关的回调函数规定 "this" 值。
    data 规定要发送到服务器的数据。
    dataFilter(data,type) 用于处理 XMLHttpRequest 原始响应数据的函数。
    dataType 预期的服务器响应的数据类型。
    error(xhr,status,error) 如果请求失败要运行的函数。
    global 布尔值,规定是否为请求触发全局 AJAX 事件处理程序。默认是 true。
    ifModified 布尔值,规定是否仅在最后一次请求以来响应发生改变时才请求成功。默认是 false。
    jsonp 在一个 jsonp 中重写回调函数的字符串。
    jsonpCallback 在一个 jsonp 中规定回调函数的名称。
    password 规定在 HTTP 访问认证请求中使用的密码。
    processData 布尔值,规定通过请求发送的数据是否转换为查询字符串。默认是 true。
    scriptCharset 规定请求的字符集。
    success(result,status,xhr) 当请求成功时运行的函数。
    timeout 设置本地的请求超时时间(以毫秒计)。
    traditional 布尔值,规定是否使用参数序列化的传统样式。
    type 规定请求的类型(GET 或 POST)。
    url 规定发送请求的 URL。默认是当前页面。
    username 规定在 HTTP 访问认证请求中使用的用户名。
    xhr 用于创建 XMLHttpRequest 对象的函数。


    20. noConflict() 方法会释放会 $ 标识符的控制,这样其他脚本就可以使用它了。可以通过全名替代简写的方式来使用 jQuery:
    $.noConflict();
     jQuery("p").text("jQuery is still working!");


     

  • 相关阅读:
    对抗杀软高级启发(主动防御)技术
    __readfsdword __readgsqword PEB TEB
    net1 user
    vc 获取windows 网卡信息
    RunPE
    windows crpyt API 实现DES 3DES 3DES_112 加解密
    软件开发图标收藏
    有关windows 网卡信息获取
    BCGPContorBar 静态工程设置详解
    (二)特征匹配
  • 原文地址:https://www.cnblogs.com/guanguan-/p/5417035.html
Copyright © 2011-2022 走看看