zoukankan      html  css  js  c++  java
  • jQuery 简单归纳总结

    jQuery语法是为HTML元素的选取编制的,能够对元素运行某些操作。




    基础语法是:$(selector).action()
    +美元符号定义 jQuery
    +选择符(selector)“查询”和“查找” HTML 元素
    +jQuery 的 action() 运行对元素的操作
    演示样例:
    $("p").hide()--隐藏全部段落
    $(this).hide()--隐藏当前元素


    jQuery选择器:
    元素选择器:
    $("p")--选取<p>元素
    $("p.intro")--选取全部class=“intro”的<p>元素
    $("p#intro")--选取全部id=“ontro”的<p>元素


    属性选择器:
    jQuery 使用 XPath 表达式来选择带有给定属性的元素。
    $("[href]") 选取全部带有 href 属性的元素。
    $("[href='#']") 选取全部带有 href 值等于 "#" 的元素。


    $("[href!='#']") 选取全部带有 href 值不等于 "#" 的元素。
    $("[href$='.jpg']") 选取全部 href 值以 ".jpg" 结尾的元素


    CSS选择器:
    $("p").css("background-color","red");


    jQuery 名称冲突:
    jQuery使用$符号作为jQuery的简称方式。
    某些其它JavaScript库(比方Prototype)也是用相同的符号。
    那么此时,jQuery使用noConflict()的方法来解决此问题。
    Var jq=jQuery.noConflict(); //帮助你使用自己的名称来使用jQuery


    jQuery是为事件处理专门设计的。
    $(document).ready(function(){
      $("button").click(function(){
        $("p").hide();
      });
    });


    jQuery hide()和show()
    语法:
    $(selector).hide(speed,callback);
    $(selector).show(speed,callback);
    speed隐藏动作所运行速度。它能够取值:“slow”.“fast”和毫秒值
    callback隐藏后回调函数


    jQuery toggle():显示被隐藏的元素,隐藏已显示的元素


    jQuery效果:淡入淡出
    淡入:$(selector).fadeIn(speed,callback)
    淡出:$(selector).fadeOut(speed,callback)
    淡入淡出切换:$(selector).fadeToggle(speed,callback)
    渐变为给定不透明度:$(selector).fadeTo(speed,opacity,callback)
    speed:动作运行速度。

    它能够取值:“slow”.“fast”和毫秒值
    opacity:參数将淡入淡出效果设置为给定的不透明度(值介于 0 与 1 之间)。


    jQuery滑动效果
    向下滑动:$(selector).slideDown(speed,callback);
    向上滑动:$(selector).slideUp(speed,callback);
    上下切换:$(selector).slideToggle(speed,callback);
    可选的 speed 參数规定效果的时长。它能够取下面值:"slow"、"fast" 或毫秒。


    jQuery 动画 animate()
    语法:$(selector).animate({params},speed,callback);
    patams:必须參数,定义形成的动画css属性
    speed :可选參数,规定效果的时长。它能够取下面值:"slow"、"fast" 或毫秒。
    注:默认情况下。全部 HTML 元素的位置都是静态的。而且无法移动。

    如需对位置
        进行操作,记得首先把元素的 CSS position 属性设置为 relative、fixed 或 
        absolute。


    jQuery:stop()--停止函数,动画或效果。


    语法:$(selector).stop(stopAll,goToEnd);
    可选的 stopAll 參数规定是否应该清除动画队列。默认是 false,
    即仅停止活动的动画,同意不论什么排入队列的动画向后运行。


    可选的 goToEnd 參数规定是否马上完毕当前动画。默认是 false。


    Chaining能够把动作方法链接起来:
    $("#p1").css("color","red")
      .slideUp(2000)
      .slideDown(2000);
      
     jQuery拥有可操作HTMML元素的属性的强慷慨法。
    三个简单有用的用于 DOM 操作的 jQuery 方法:
    text() - 设置或返回所选元素的文本内容
    html() - 设置或返回所选元素的内容(包含 HTML 标记)
    val() - 设置或返回表单字段的值
    attr() - 获取链接中href属性的值
    ps:括号无值为获取,有值为设置


    jQuery-加入元素
    append() - 在被选元素的结尾插入内容(内部)
    prepend() - 在被选元素的开头插入内容(内部)
    after() - 在被选元素之后插入内容(外部)
    before() - 在被选元素之前插入内容(外部)


    jQuery-删除元素
    remove() - 删除被选元素(及其子元素)
    empty() - 从被选元素中删除子元素


    jQuery-获取并设置CSS类
    addClass() - 向被选元素加入一个或多个类
    removeClass() - 从被选元素删除一个或多个类
    toggleClass() - 对被选元素进行加入/删除类的切换操作
    css() - 设置或返回样式属性,可设置多个css属性。例如以下:
    css({"propertyname":"value","propertyname":"value",...});


    jQuery-尺寸
    width() 方法设置或返回元素的宽度(不包含内边距、边框或外边距)。
    height() 方法设置或返回元素的高度(不包含内边距、边框或外边距)。
    innerWidth() 方法返回元素的宽度(包含内边距)。


    innerHeight() 方法返回元素的高度(包含内边距)。


    outerWidth() 方法返回元素的宽度(包含内边距和边框)。
    outerHeight() 方法返回元素的高度(包含内边距和边框)。




    jQuery-遍历
    向上遍历 DOM 树
    这些 jQuery 方法非常实用。它们用于向上遍历 DOM 树:
    parent() 方法返回被选元素的直接父元素。
    parents() 方法返回被选元素的全部祖先元素,它一路向上直到文档的根元素 (<html>)。
               能够使用可选參数来过滤对祖先元素的搜索。
    parentsUntil() 方法返回介于两个给定元素之间的全部祖先元素。
    例:
    $(document).ready(function(){
      $("span").parents("ul");
    });
    向下遍历 DOM 树
    以下是两个用于向下遍历 DOM 树的 jQuery 方法:
    children()方法返回被选元素的全部直接子元素。

    能够使用可选參数来过滤对子元素的搜索。
    find()方法返回被选元素的后代元素,一路向下直到最后一个后代。


    $(document).ready(function(){
      $("div").children("p.1");
    });
    在 DOM 树中水平遍历
    有很多实用的方法让我们在 DOM 树进行水平遍历:
    siblings()方法返回被选元素的全部同胞元素。


    next()方法返回被选元素的下一个同胞元素。


    nextAll()方法返回被选元素的全部尾随的同胞元素。


    nextUntil()方法返回介于两个给定參数之间的全部尾随的同胞元素。
    prev()
    prevAll()
    prevUntil()


    jQuery 遍历-过滤
    first() 方法返回被选元素的首个元素。
    $(document).ready(function(){
      $("div p").first();
    });
    last() 方法返回被选元素的最后一个元素。
    eq() 方法返回被选元素中带有指定索引號的元素。
    filter() 方法同意您规定一个标准。不匹配这个标准的元素会被从集合中删除,
              匹配的元素会被返回。
    not() 方法返回不匹配标准的全部元素。与 filter() 相反。


     jQuery - AJAX 
     AJAX = 异步 JavaScript 和 XML(Asynchronous JavaScript and XML)。


     简短地说,在不重载整个网页的情况下,AJAX 通过后台载入数据。并在网页上进行显示。
    使用 AJAX 的应用程序案例:谷歌地图、腾讯微博、优酷视频、人人网等等。


     
    jQuery - AJAX load() 方法(简单但强大的AJAX方法),
    从server载入数据,并把返回的数据放入被选的元素中。


    语法: $(selector).load(URL,data,callback);
    必需的 URL 參数规定您希望载入的 URL。


    可选的 data 參数规定与请求一同发送的查询字符串键/值对集合。
    可选的 callback 參数是 load() 方法完毕后所运行的函数名称。


    实例:
    $("button").click(function(){
      $("#div1").load("demo_test.txt",function(responseTxt,statusTxt,xhr){
        if(statusTxt=="success")
          alert("外部内容载入成功!");
        if(statusTxt=="error")
          alert("Error: "+xhr.status+": "+xhr.statusText);
      });
    });


    jQuery $.get() 方法
    $.get() 方法通过 HTTP GET 请求从server上请求数据。
    语法:
    $.get(URL,callback);
    实例:
    $(document).ready(function(){
      $("button").click(function(){
        $.get("/example/jquery/demo_test.asp",function(data,status){
          alert("数据:" + data + " 状态:" + status);
        });
      });
    });


    jQuery $.post() 方法
    $.post() 方法通过HTTP POST 请求从server上请求数据
    语法:
    $post(URL,data,callback);
    必需的 URL 參数规定您希望请求的 URL。
    可选的 data 參数规定连同请求发送的数据。
    可选的 callback 參数是请求成功后所运行的函数名。
    实例:
    $("button").click(function(){
      $.post("demo_test_post.asp",
      {
        name:"Donald Duck",
        city:"Duckburg"
      },
      function(data,status){
        alert("Data: " + data + " Status: " + status);
      });
    });



  • 相关阅读:
    四、面向对象分析和设计全流程概述
    三、三大核心特征-继承
    二、三大核心特征-多态
    [第三章]一、三大核心特征-封装
    四、抽象类
    三、接口
    二、对象
    [第二章]一、类
    六、面向对象的迷思
    五、面向对象的应用范围
  • 原文地址:https://www.cnblogs.com/mfrbuaa/p/5325212.html
Copyright © 2011-2022 走看看