参考菜鸟教程jQuery 教程jQuery 教程 | 菜鸟教程 

目录

引用

jQuery 语法

jQuery 选择器

元素选择器

#id 选择器

.class 选择器

更多实例

jQuery 事件

jQuery 效果- 隐藏和显示

隐藏和显示设置速度

来回切换显示与隐藏

jQuery 效果 - 标签隐藏或显示添加淡入淡出效果 

jQuery 效果 - 元素滑动（显示和隐藏加上滑动效果）

jQuery 效果- 动画-animate() 方法

jQuery animate() - 使用预定义的值

jQuery animate() - 使用队列功能

jQuery 停止动画

jQuery - 链(Chaining)

jQuery - 获取或者内容text/HTML/val和属性attr

上面函数的回调函数

jQuery - 添加HTML元素/内容

添加多个HTML标签

jQuery - 删除HTML元素

过滤被删除的元素

jQuery - 获取并设置 CSS 类

jQuery css() 方法设置或返回被选元素的一个或多个样式属性

jQuery 尺寸

jQuery 遍历 找 祖先

jQuery 遍历 找 后代

jQuery 遍历 找 同胞(siblings)

jQuery 遍历- 过滤

jQuery ajax() 方法

jQuery - AJAX load() 方法

为了避免多页面情形下的代码重复 使用load方法解决

jQuery - AJAX get() 和 post() 方法

GET 和 POST 方法的区别： 

jQuery - noConflict() 方法 释放jQuery对$的控制

jsonp

jQuery 选择器

jQuery 实用工具

???????

引用

下载后 

在线

jQuery 语法

基础语法： $(selector).action()

• 美元符号定义 jQuery
• 选择符（selector）"查询"和"查找" HTML 元素
• jQuery 的 action() 执行对元素的操作

选择符有this当前元素，p元素，p.test 元素下面的test元素，#test id为test的元素

下图选择整个文档，行为是加载好了。 

$(document).ready(function(){
 
   // 开始写 jQuery 代码...
 
});

上图也称为入口函数

jQuery 选择器

元素选择器

元素选择器基于元素名选择元素

$("p") 选择全体p标签

#id 选择器

$("#test") 

.class 选择器

$(".test")

更多实例

$("*") 选取全部元素

$("p:first") 选取第一个

元素

$("ul li:first")  选取第一个

元素的第一个
• 元素         

  $("ul li:first-child") 选取每个

  元素的第一个
  • 元素

    $("[href]")  选取带有 href 属性的元素

    $(":button") 选取所有 type="button" 的 元素 和 元素

    $("tr:even") 选取偶数位置的 元素

    $("tr:odd") 选取奇数位置的 元素

    jQuery 事件

    鼠标事件	键盘事件	表单事件	文档/窗口事件
    click	keypress	submit	load
    dblclick 双击标签	keydown	change input的字段改变（离开此input时看是否改变）	resize
    mouseenter 进入标签	keyup	focus（input获得焦点时，也就是进入input标签）	scroll
    mouseleave 离开标签		blur （当input标签失去焦点时）	unload
    hover 鼠标悬停在上面

    $("input").focus(function(){
      $(this).css("background-color","#cccccc");
    });

    input获得焦点触发

    $("input").blur(function(){
      $(this).css("background-color","#ffffff");
    });

    input失去焦点时触发

    jQuery 效果- 隐藏和显示

    hide() 隐藏行为

    show() 显示行为 

    $("#hide").click(function(){
      $("p").hide();
    });
     
    $("#show").click(function(){
      $("p").show();
    });

    隐藏和显示设置速度

    $("button").click(function(){
      $("p").hide(1000);
    });

    上代码消失的过程有一秒

    $(document).ready(function(){
      $(".hidebtn").click(function(){
        $("div").hide(1000,"linear",function(){
          alert("Hide() 方法已完成!");
        });
      });
    });

    上代码一秒内消失，jQuery自身提供"linear" 和 "swing"缓动函数，这里使用linear，并使用回调函数，也就是相当于一个返回值，当运行到最后就会返回，也就是运行这个函数

    来回切换显示与隐藏

    $("button").click(function(){
      $("p").toggle();
    });

    按一下按钮就会执行回调函数，对p标签就会执行toggle函数，也就是由显示变为隐藏，由隐藏变为显示

    同样，切换函数同样有特效

    $(selector).toggle(speed,callback);

    jQuery 效果 - 标签隐藏或显示添加淡入淡出效果 

    • fadeIn() 由隐藏变为显示，会有淡入的效果
    • fadeOut() 由显示变为隐藏，会有淡出的效果
    • fadeToggle()显示和隐藏的开关
    • fadeTo()颜色变淡

    以上方法都可以加上时间，提供了"slow"、"fast" 或多少毫秒。.也可以再加上回调函数

    $("#div2").fadeOut("slow");

    $("#div3").fadeIn(3000);

    jQuery 效果 - 元素滑动（显示和隐藏加上滑动效果）

    • slideDown()向下滑动元素，由隐藏变为显示
    • slideUp() 向上滑动元素，由显示变为隐藏
    • slideToggle()上面两个合起来

    以上方法都可以加上时间，提供了"slow"、"fast" 或多少毫秒。.也可以再加上回调函数.

    $("#panel").slideToggle("slow");

    jQuery 效果- 动画-animate() 方法

    $("div").animate({left:'250px'}); 向左移动250像素 

    默认情况下，所有的 HTML 元素有一个静态的位置，且是不可移动的。 如果需要改变为，我们需要将元素的 position 属性设置为 relative, fixed, 或 absolute!

    生成动画的过程中可同时使用多个属性

    $("button").click(function(){
      $("div").animate({
        left:'250px',
        opacity:'0.5',
        height:'150px',
        width:'150px'
      });
    });

     使用定义相对值（该值相对于元素的当前值）。需要在值的前面加上 += 或 -=：

    下面比当前高度高150px，宽度宽150px

    $("button").click(function(){
      $("div").animate({
        left:'250px',
        height:'+=150px',
        width:'+=150px'
      });
    });

    jQuery animate() - 使用预定义的值

    可以把属性的动画值设置为 "show"、"hide" 或 "toggle"

    $("button").click(function(){
      $("div").animate({
        height:'toggle'
      });
    });

    toggle是显示或者隐藏变换

    jQuery animate() - 使用队列功能

     var div=$("div");
        div.animate({height:'300px',opacity:'0.4'},"slow");
        div.animate({width:'300px',opacity:'0.8'},"slow");
        div.animate({height:'100px',opacity:'0.4'},"slow");
        div.animate({width:'100px',opacity:'0.8'},"slow");

    将变高，变宽，再变窄，再变短

    jQuery 停止动画

    $("#panel").stop(); 如果上述动画还没完成，将停止动画

    jQuery - 链(Chaining)

     $("#p1").css("color","red").slideUp(2000).slideDown(2000);

    将会都执行

    jQuery - 获取或者内容text/HTML/val和属性attr

    • text() - 设置或返回所选元素的文本内容
    • html() - 设置或返回所选元素的内容（包括 HTML 标记）
    • val() - 设置或返回表单字段的值
    • attr() 方法用于获取属性值

    $("#test1").text("Hello world!"); 往里加文本，()里面没东西就就是获得内容

    $("#test2").html("Hello world!"); 对id为test2 添加内容,()没有内容就是获得内容

    $("#runoob").attr("href","http://www.runoob.com/jquery"); 设置属性，可以同时设置多个

    $("#runoob").attr({

            "href" : "http://www.runoob.com/jquery",

              "title" : "jQuery 教程" }); //同时设置多个属性

    上面函数的回调函数

    回调函数有两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值

    $("#test1").text(function(i,origText){ return "旧文本: " + origText + " 新文本: Hello world! (index: " + i + ")"; });

    jQuery - 添加HTML元素/内容

    • append() - 在被选元素的结尾插入内容 （仍然在该元素的内部）
    • prepend() - 在被选元素的开头插入内容
    • after() - 在被选元素之后插入内容
    • before() - 在被选元素之前插入内容

    $("p").append("追加文本");

    添加多个HTML标签

    下面将标签内容变成一个变量，然后到最后的时候添加进去 

    function appendText(){
        var txt1="

    文本-1。

    ";              // 使用 HTML 标签创建文本
        var txt2=$("

    ").text("文本-2。");  // 使用 jQuery 创建文本
        var txt3=document.createElement("p");
        txt3.innerHTML="文本-3。";               // 使用 DOM 创建文本 text with DOM
        $("body").append(txt1,txt2,txt3);        // 追加新元素
    }

    jQuery - 删除HTML元素

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

    $("#div1").remove(); 移除id为div1的标签

    $("#div1").empty(); 将div1里面的内容置空（也就是删除所有子元素）

    过滤被删除的元素

    在remove里面加内容，将指定只删除这个

    $("p").remove(".italic"); 只删除italic的内容

    jQuery - 获取并设置 CSS 类

    • addClass() - 向被选元素添加一个或多个类
    • removeClass() - 从被选元素删除一个或多个类 删除类里面的元素
    • toggleClass() - 对被选元素进行添加/删除类的切换操作

    有一个类为

    .important {

       font-weight:bold;

       font-size:xx-large;

    }     

    执行   $("h1,h2,p").addClass("blue"); 将会对h1，h2，p都增加里面两条css样式

    因此可以对一些样式包装一个类，然后对元素添加这个类

    jQuery css() 方法设置或返回被选元素的一个或多个样式属性

    返回属性

    $("p").css("background-color");

    设置属性

    $("p").css("background-color","yellow");

    设置多个属性

    $("p").css(

     {"background-color":"yellow","font-size":"200%"});

    jQuery 尺寸

    • width() 设置或返回元素的宽度    $("#div1").width()
    • height() 设置或返回元素的高度
    • innerWidth()返回元素的宽度（包括内边距）
    • innerHeight()返回元素的高度（包括内边距）
    • outerWidth()返回元素的宽度（包括内边距和边框）
    • outerHeight()返回元素的高度（包括内边距和边框）

    jQuery 遍历 找 祖先

    • parent() 返回被选元素的直接父元素
    • parents()返回被选元素的所有祖先元素，它一路向上直到文档的根元素 ()
    • parentsUntil()返回介于两个给定元素之间的所有祖先元素。

    过滤，在()里面加入元素

    $("span").parents("ul");返回所有 元素的所有祖先，并且它是

    元素

    $("span").parentsUntil("div");返回介于 与

    元素之间的所有祖先元素：
    jQuery 遍历 找 后代
    • children() 返回被选元素的所有直接子元素 该方法只会向下一级对 DOM 树进行遍历
    • find()返回被选元素的后代元素，一路向下直到最后一个后代。
    $("div").children();返回每个
    元素的所有直接子元素
    $("div").find("span");返回属于
    后代的所有 元素
    过滤，在()加入元素
    $("div").children("p.1");返回类名为 "1" 的所有
    元素，并且它们是
    的直接子元素
    jQuery 遍历 找 同胞(siblings)
    • siblings()返回被选元素的所有同胞元素
    • next()返回被选元素的下一个同胞元素
    • nextAll()返回被选元素的所有跟随的同胞元素
    • nextUntil()介于两个给定参数之间的所有跟随的同胞元素
    • prev() 前面的一个同胞
    • prevAll()前面的所有同胞
    • prevUntil()前面介于两个给定参数之间的所有跟随的同胞元素
    过滤，在()加入元素
    $("h2").siblings("p");返回属于
    的同胞元素的所有
    元素
    $("h2").nextUntil("h6");返回介于
    与
    元素之间的所有同胞元素
    jQuery 遍历- 过滤
    它们允许基于其在一组元素中的位置来选择一个特定的元素。
    • first()返回被选元素的首个元素
    • last() 返回被选元素的最后一个元素
    •  eq()返回被选元素中带有指定索引号的元素
    • filter() 方法允许您规定一个标准。不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回
    • not() 方法返回不匹配标准的所有元素，not() 方法与 filter() 相反
    $("div p").first();     选取首个
    元素内部的第一个
    元素 注意这里加了空格
    $("p").eq(1);  索引号从 0 开始，因此首个元素的索引号是 0 而不是 1。此例子选取第二个
    元素（索引号 1）
    $("p").filter(".url");返回带有类名 "url" 的所有
    元素：
    jQuery ajax() 方法
    jQuery ajax() 方法 | 菜鸟教程
    jQuery - AJAX load() 方法
    jQuery load() 方法是简单但强大的 AJAX 方法。
    load() 方法从服务器加载数据，并把返回的数据放入被选元素中。
    $(selector).load(URL,data,callback);
    必需的 URL 参数规定您希望加载的 URL。
    可选的 data 参数规定与请求一同发送的查询字符串键/值对集合。
    可选的 callback 参数是 load() 方法完成后所执行的函数名称。
    $("#div1").load("demo_test.txt"); 比如这个将在div1里面加载后台txt文件
     callback 参数规定当 load() 方法完成后所要允许的回调函数。回调函数可以设置不同的参数：
    • responseTxt - 包含调用成功时的结果内容
    • statusTXT - 包含调用的状态
    • xhr - 包含 XMLHttpRequest 对象
    为了避免多页面情形下的代码重复 使用load方法解决
    //1.当前文件中要插入的地方使用此结构：
    
    
    //2.代码：
    $(".include").each(function() {
        if (!!$(this).attr("file")) {
            var $includeObj = $(this);
            $(this).load($(this).attr("file"), function(html) {
                $includeObj.after(html).remove(); //加载的文件内容写入到当前标签后面并移除当前标签
            })
        }
    });
     //3.***.html中放入内容，用html格式仅仅因为会有编辑器的书写辅助。。 
    
    或者在index文件里只写重复部分，剩下的一股脑放各自单独文件 load() 进来~
    jQuery - AJAX get() 和 post() 方法
    $.get() 方法通过 HTTP GET 请求从服务器上请求数据。
    $.get(URL,callback);
    $("button").click(function(){
      $.get("demo_test.php",function(data,status){
        alert("数据: " + data + "\n状态: " + status);
      });
    });
     $.post() 方法通过 HTTP POST 请求向服务器提交数据。
    $.post(URL,data,callback);
     $.post("/try/ajax/demo_test_post.php",
        {
            name:"菜鸟教程",
            url:"http://www.runoob.com"
        },
        function(data,status){
            alert("数据: \n" + data + "\n状态: " + status);
        });
    GET 和 POST 方法的区别： 
    1、发送的数据数量
    在 GET 中，只能发送有限数量的数据，因为数据是在 URL 中发送的。
    在 POST 中，可以发送大量的数据，因为数据是在正文主体中发送的。
    2、安全性
    GET 方法发送的数据不受保护，因为数据在 URL 栏中公开，这增加了漏洞和黑客攻击的风险。
    POST 方法发送的数据是安全的，因为数据未在 URL 栏中公开，还可以在其中使用多种编码技术，这使其具有弹性。
    3、加入书签中
    GET 查询的结果可以加入书签中，因为它以 URL 的形式存在；而 POST 查询的结果无法加入书签中。
    4、编码
    在表单中使用 GET 方法时，数据类型中只接受 ASCII 字符。
    在表单提交时，POST 方法不绑定表单数据类型，并允许二进制和 ASCII 字符。
    5、可变大小
    GET 方法中的可变大小约为 2000 个字符。
    POST 方法最多允许 8 Mb 的可变大小。
    6、缓存
    GET 方法的数据是可缓存的，而 POST 方法的数据是无法缓存的。
    7、主要作用
    GET 方法主要用于获取信息。而 POST 方法主要用于更新数据。
    jQuery - noConflict() 方法 释放jQuery对$的控制
    $.noConflict();
    jQuery(document).ready(function(){
      jQuery("button").click(function(){
        jQuery("p").text("jQuery 仍然在工作!");
      });
    });
    仍然可以通过全名替代简写的方式来使用 jQuery
    jsonp
    jQuery 选择器
    元素，索引值从 0 开始，第一个元素是偶数 (0)，第二个元素是奇数 (1)，以此类推。 元素，索引值从 0 开始，第一个元素是偶数 (0)，第二个元素是奇数 (1)，以此类推。
    选择器	实例	选取
    *	$("*")	所有元素
    #id	$("#lastname")	id="lastname" 的元素
    .class	$(".intro")	class="intro" 的所有元素
    .class,.class	$(".intro,.demo")	class 为 "intro" 或 "demo" 的所有元素
    element	$("p")	所有 元素
    el1,el2,el3	$("h1,div,p")	所有 、 和 元素
    :first	$("p:first")	第一个 元素
    :last	$("p:last")	最后一个 元素
    :even	$("tr:even")	所有偶数
    :odd	$("tr:odd")	所有奇数
    :first-child	$("p:first-child")	属于其父元素的第一个子元素的所有 元素
    :first-of-type	$("p:first-of-type")	属于其父元素的第一个 元素的所有 元素
    :last-child	$("p:last-child")	属于其父元素的最后一个子元素的所有 元素
    :last-of-type	$("p:last-of-type")	属于其父元素的最后一个 元素的所有 元素
    :nth-child(n)	$("p:nth-child(2)")	属于其父元素的第二个子元素的所有 元素
    :nth-last-child(n)	$("p:nth-last-child(2)")	属于其父元素的第二个子元素的所有 元素，从最后一个子元素开始计数
    :nth-of-type(n)	$("p:nth-of-type(2)")	属于其父元素的第二个 元素的所有 元素
    :nth-last-of-type(n)	$("p:nth-last-of-type(2)")	属于其父元素的第二个 元素的所有 元素，从最后一个子元素开始计数
    :only-child	$("p:only-child")	属于其父元素的唯一子元素的所有 元素
    :only-of-type	$("p:only-of-type")	属于其父元素的特定类型的唯一子元素的所有 元素
    child" rel="noopener">parent > child	$("div > p")	元素的直接子元素的所有 元素
    parent descendant	$("div p")	元素的后代的所有 元素
    element + next	$("div + p")	每个 元素相邻的下一个 元素
    element ~ siblings	$("div ~ p")	元素同级的所有 元素
    :eq(index)	$("ul li:eq(3)")	列表中的第四个元素（index 值从 0 开始）
    :gt(no)	$("ul li:gt(3)")	列举 index 大于 3 的元素
    :lt(no)	$("ul li:lt(3)")	列举 index 小于 3 的元素
    :not(selector)	$("input:not(:empty)")	所有不为空的输入元素
    :header	$(":header")	所有标题元素 , ...
    :animated	$(":animated")	所有动画元素
    :focus	$(":focus")	当前具有焦点的元素
    :contains(text)	$(":contains('Hello')")	所有包含文本 "Hello" 的元素
    :has(selector)	$("div:has(p)")	所有包含有 元素在其内的 元素
    :empty	$(":empty")	所有空元素
    :parent	$(":parent")	匹配所有含有子元素或者文本的父元素。
    :hidden	$("p:hidden")	所有隐藏的 元素
    :visible	$("table:visible")	所有可见的表格
    :root	$(":root")	文档的根元素
    :lang(language)	$("p:lang(de)")	所有 lang 属性值为 "de" 的 元素
    [attribute]	$("[href]")	所有带有 href 属性的元素
    [attribute=value]	$("[href='default.htm']")	所有带有 href 属性且值等于 "default.htm" 的元素
    [attribute!=value]	$("[href!='default.htm']")	所有带有 href 属性且值不等于 "default.htm" 的元素
    [attribute$=value]	$("[href$='.jpg']")	所有带有 href 属性且值以 ".jpg" 结尾的元素
    [attribute|=value]	$("[title|='Tomorrow']")	所有带有 title 属性且值等于 'Tomorrow' 或者以 'Tomorrow' 后跟连接符作为开头的字符串
    [attribute^=value]	$("[title^='Tom']")	所有带有 title 属性且值以 "Tom" 开头的元素
    [attribute~=value]	$("[title~='hello']")	所有带有 title 属性且值包含单词 "hello" 的元素
    [attribute*=value]	$("[title*='hello']")	所有带有 title 属性且值包含字符串 "hello" 的元素
    [name=value][name2=value2]	$( "input[id][name$='man']" )	带有 id 属性，并且 name 属性以 man 结尾的输入框
    :input	$(":input")	所有 input 元素
    :text	$(":text")	所有带有 type="text" 的 input 元素
    :password	$(":password")	所有带有 type="password" 的 input 元素
    :radio	$(":radio")	所有带有 type="radio" 的 input 元素
    :checkbox	$(":checkbox")	所有带有 type="checkbox" 的 input 元素
    :submit	$(":submit")	所有带有 type="submit" 的 input 元素
    :reset	$(":reset")	所有带有 type="reset" 的 input 元素
    :button	$(":button")	所有带有 type="button" 的 input 元素
    :image	$(":image")	所有带有 type="image" 的 input 元素
    :file	$(":file")	所有带有 type="file" 的 input 元素
    :enabled	$(":enabled")	所有启用的元素
    :disabled	$(":disabled")	所有禁用的元素
    :selected	$(":selected")	所有选定的下拉列表元素
    :checked	$(":checked")	所有选中的复选框选项
    .selector	$(selector).selector	在jQuery 1.7中已经不被赞成使用。返回传给jQuery()的原始选择器
    :target	$( "p:target" )	选择器将选中ID和URI中一个格式化的标识符相匹配的 元素
    jQuery 实用工具
    方法	描述
    $.boxModel	在版本 1.8 中被废弃。检测浏览器是否使用W3C的CSS盒模型渲染当前页面
    $.browser	在版本 1.9 中被废弃。返回用户当前使用的浏览器的相关信息
    $.contains()	判断另一个DOM元素是否是指定DOM元素的后代
    $.each()	遍历指定的对象和数组
    $.extend()	将一个或多个对象的内容合并到目标对象
    $.fn.extend()	为jQuery扩展一个或多个实例属性和方法
    $.globalEval()	全局性地执行一段JavaScript代码
    $.grep()	过滤并返回满足指定函数的数组元素
    $.inArray()	在数组中查找指定值并返回它的索引值（如果没有找到，则返回-1）
    $.isArray()	判断指定参数是否是一个数组
    $.isEmptyObject()	检查对象是否为空（不包含任何属性）
    $.isFunction()	判断指定参数是否是一个函数
    $.isNumeric()	判断指定参数是否是一个数字值
    $.isPlainObject()	判断指定参数是否是一个纯粹的对象
    $.isWindow()	判断指定参数是否是一个窗口
    $.isXMLDoc()	判断一个DOM节点是否位于XML文档中，或者其本身就是XML文档
    $.makeArray()	将一个类似数组的对象转换为真正的数组对象
    $.map()	指定函数处理数组中的每个元素(或对象的每个属性)，并将处理结果封装为新的数组返回
    $.merge()	合并两个数组内容到第一个数组
    $.noop()	一个空函数
    $.now()	返回当前时间
    $.parseHTML()	将HTML字符串解析为对应的DOM节点数组
    $.parseJSON()	将符合标准格式的JSON字符串转为与之对应的JavaScript对象
    $.parseXML()	将字符串解析为对应的XML文档
    $.trim()	去除字符串两端的空白字符
    $.type()	确定JavaScript内置对象的类型
    $.unique()	在jQuery 3.0中被弃用。对DOM元素数组进行排序，并移除重复的元素
    $.uniqueSort()	对DOM元素数组进行排序，并移除重复的元素
    $.data()	在指定的元素上存取数据，并返回设置值
    $.hasData()	确定一个元素是否有相关的jQuery数据
    $.sub()	创建一个新的jQuery副本，其属性和方法可以修改，而不会影响原来的jQuery对象
    $.speed	创建一个包含一组属性的对象用来定义自定义动画
    $.htmlPrefilter()	通过jQuery操作方法修改和过滤HTML字符串
    $.readyException()	处理包裹在jQuery()中函数同步抛出的错误
    前端
    相关
    ---
    Java web开发：从零到 Run 一个现有的 Spring Boot 前后端分离项目（前端Vue）
    nodejs 一个简单的web服务器，用于前端自己快速测试部署
    深入理解前端跨域方法和原理
    【前端单元测试入门04】Karma
    前端MVC Vue2学习总结（六）——axios与跨域HTTP请求、Lodash工具库
    前端MVC Vue2学习总结（二）——Vue的实例、生命周期与Vue脚手架（vue-cli）
    web前端面试题
    箭头流程图--前端实现
    GMTC 2019-前端夜话《聊聊前端工程师的成长和发展》会后简要总结
    第十一章 前端基础
    前端性能优化
    前端开发框架Vue之findIndex() 的使用
    标签