JQuery

jquery语法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
//防止文档在完全加载（就绪）之前运行 jQuery 代码，即在 DOM 加载完成后才可以对 DOM 进行操作。
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>

<script>
    $(document).ready(function(){
   		// 开始写 jQuery 代码...
	});
    // 简洁写法
    $(function(){
	   // 开始写 jQuery 代码...
	});
</script>

jquery 选择器

  • 元素选择器

    ​ 获取页面所有

    元素

1
$("p")

  • #id 选择器

    ​ 通过 id 选取元素语法如下

1
$("#test")

  • .class 选择器

    ​ 通过指定的 class 查找元素

1
$(".test")

  • nextAll()

    ​ 获取下一个元素的所有同级元素

1
$('#div1').nextAll('p').css({color:'red'});

  • prev()

    ​ 获取下一个元素的所有同级元素

1
$('#div1').prev('p').css({color:'red'});

  • parent()

    获取父元素

1
$('#span01').parent().css({width:'100px',height:'100px',background:'gold'});

  • closest()

    选取最近的元素，可以是父级，可以是子级

1
$('#span02').closest('div').css({width:'200px',height:'200px',background:'pink'});
  • 链式调用
1
2
3
4
5
6
7
// $('.list li')：不能回到父级
// $('.list').children()：可以通过end() 回到父级
			$('.list').children().css({background:'gold',height:'30px',marginBottom:'10px'}).end().css({background:'green'});

$('.list2 li:eq(2)').css({background:'gold'}).siblings().css({background:'green'});

$('#div2').find('.link1').css({color:'red'});
  • 更多实例
元素 元素
语法 描述
$(“*”) 选取所有元素
$(this) 选取当前 HTML 元素
$(“p.intro”) 选取 class 为 intro 的

元素
$(“p:first”) 选取第一个

元素
$(“ul li:first”) 选取第一个
    元素的第一个
  • 元素
$(“ul li:first-child”) 选取每个
    元素的第一个
  • 元素
$(“[href]”) 选取带有 href 属性的元素
$(“a[target=’_blank’]”) 选取所有 target 属性值等于 “_blank” 的 元素
$(“a[target!=’_blank’]”) 选取所有 target 属性值不等于 “_blank” 的 元素
$(“:button”) 选取所有 type=”button” 的 元素 和
$(“tr:even”) 选取偶数位置的
$(“tr:odd”) 选取奇数位置的

jquery事件

​ 鼠标事件

  • click() 单击事件 $(selector).click()

    1
    2
    3
    $("p").click(function(){
        alert("段落被点击了。");
    });

  • dblclik() 双击事件 $(selector).dblclick()

    1
    2
    3
    $("p").dblclick(function(){
        alert("这个段落被双击。");
    });

  • mouseenter() 鼠标经过事件 $(selector).mouseenter()

    1
    2
    3
    $("p").mouseenter(function(){
        $("p").css("background-color","yellow");
    });

  • mouseleave() 鼠标离开事件 $(selector).mouseleave()

    1
    2
    3
    4
    // 当鼠标指针离开 <p> 元素时，设置背景色为灰色
    $("p").mouseleave(function(){
        $("p").css("background-color","gray");
    });

  • hover() 鼠标指针悬停事件 $(selector).hover(inFunction,outFunction)

    1
    2
    3
    4
    5
    $("p").hover(function(){
        $("p").css("background-color","yellow");
    },function(){
        $("p").css("background-color","pink");
    });

​ 键盘事件

  • keypress() 监控键盘按下 $(selector).keypress()

    1
    2
    3
    $("input").keypress(function(){
        $("span").text(i+=1);
    });

  • keydown() 监控键盘按下过程 $(selector).keydown()

    1
    2
    3
    $("input").keydown(function(){
        $("input").css("background-color","yellow");
    });

  • keyup() 键盘松开 $(selector).keyup()

    1
    2
    3
    $("input").keyup(function(){
        $("input").css("background-color","pink");
    });

​ 表单事件

  • sumbit() 提交表单事件 $(selector).submit()

    1
    2
    3
    $("form").submit(function(){
        alert("提交");
    });

  • change() 监听表单修改事件 $(selector).change()

    1
    2
    3
    $("input").change(function(){
        alert("文本已被修改");
    });

  • focus() 表单获取焦点事件 $(selector).focus()

    1
    2
    3
    $("input").focus(function(){
        $("span").css("display","inline").fadeOut(2000);
    });

  • blur() 表单失去焦点事件 $(selector).blur()

    1
    2
    3
    $("input").blur(function(){
        alert("输入框失去了焦点");
    });

​ 文档/窗口事件

  • load() 当元素全部加载完成时触发 $(selector).load() load() 方法在 jQuery 版本 1.8 中[已废弃]

    1
    2
    3
    $("img").load(function(){
        alert("图片已载入");
    });

  • resize() 当调整浏览器窗口时触发 $(selector).resize()

    1
    2
    3
    $(window).resize(function(){
        $('span').text(x+=1);
    });

  • scroll() 当用户滚动指定的元素时,会发生 scroll 事件 $(selector).scroll()

    1
    2
    3
    $("div").scroll(function(){
        alert("滚动触发")
    });

  • unload() 当用户离开页面时，会发生 unload 事件 **unload() 方法在 jQuery 版本 1.8 中[被废弃]，在 3.0 版本被移除 ** $(selector).unload(function)

jquery样式操作

  • 读取样式

    1
    alert(  $('.div1').css('fontSize') );

  • 写入样式

    1
    2
    $('.div1').css({background:'gold'});
    $("p").css({"background-color":"yellow","font-size":"200%"});

  • 添加样式

    1
    2
    3
    4
    5
    $('.div1').addClass('big');

    $("button").click(function(){
      $("body div:first").addClass("important blue");
    });

  • 删除样式

    1
    2
    3
    4
    5
    $('.div1').removeClass('div1');

    $("button").click(function(){
      $("h1,h2,p").removeClass("blue");
    });

  • 添加/ 删除操作

    1
    2
    3
    $("button").click(function(){
      $("h1,h2,p").toggleClass("blue");
    });

jquery动画效果

  • 显示/隐藏

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    // 第一个是动画效果时间； 第二个是回调函数
    $(selector).hide(speed,callback);
    $(selector).show(speed,callback);
    //隐藏
    $("button").click(function(){
      $("p").hide(1000);
    });
    //显示
    $("button").click(function(){
      $("p").show(1000);
    });

  • 淡入淡出

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    fadeIn()
    /**  fadeIn() 用于淡入已隐藏的元素
    可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。.
    可选的 callback 参数是 fading 完成后所执行的函数名称。
    */
    $("button").click(function(){
      $("#div1").fadeIn();
      $("#div2").fadeIn("slow");
      $("#div3").fadeIn(3000);
    });

    fadeOut()
    /**   fadeOut() 方法用于淡出可见元素。
    可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
    可选的 callback 参数是 fading 完成后所执行的函数名称。
    */
    $("button").click(function(){
      $("#div1").fadeOut();
      $("#div2").fadeOut("slow");
      $("#div3").fadeOut(3000);
    });


    fadeToggle()
    /**
    fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。
    */
    $("button").click(function(){
      $("#div1").fadeToggle();
      $("#div2").fadeToggle("slow");
      $("#div3").fadeToggle(3000);
    });

    fadeTo()
    /**
    $(selector).fadeTo(speed,opacity,callback);
    fadeTo() 方法允许渐变为给定的不透明度（值介于 0 与 1 之间）
    fadeTo() 方法中必需的 opacity 参数将淡入淡出效果设置为给定的不透明度（值介于 0 与 1 之间）。
    */
    $("button").click(function(){
      $("#div1").fadeTo("slow",0.15);
      $("#div2").fadeTo("slow",0.4);
      $("#div3").fadeTo("slow",0.7);
    });

  • 滑动

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    slideDown()
    /**
    $(selector).slideDown(speed,callback);
    可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
    可选的 callback 参数是滑动完成后所执行的函数名称。
    */
    $("#flip").click(function(){
      $("#panel").slideDown();
    });

    slideUp()
    /**
    $(selector).slideUp(speed,callback);
    */
    $("#flip").click(function(){
      $("#panel").slideUp();
    });

    slideToggle()
    /**
    $(selector).slideToggle(speed,callback);
     slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换。
    */
    $("#flip").click(function(){
      $("#panel").slideToggle();
    });

  • 动画

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    $("button").click(function(){
      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");
    });
    /**
    $(selector).animate({params},speed,callback);
    必需的 params 参数定义形成动画的 CSS 属性。
    可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
    */

  • 停止动画

    1
    2
    3
    $("#stop").click(function(){
      $("#panel").stop();
    });

jquery 操作 html DOM

  • 捕获

    • 获取内容

      • text() - 设置或返回所选元素的文本内容
      • html() - 设置或返回所选元素的内容（包括 HTML 标签）
      • val() - 设置或返回表单字段的值
      1
      2
      3
      4
      5
      6
      7
      8
      9
      $("#btn1").click(function(){
        alert("Text: " + $("#test").text());
      });
      $("#btn2").click(function(){
        alert("HTML: " + $("#test").html());
      });
      $("#btn1").click(function(){
        alert("值为: " + $("#test").val());
      });

    • 获取属性 - attr()

      1
      2
      3
      $("button").click(function(){
        alert($("#runoob").attr("href"));
      });

  • 设置

    • 设置内容和属性

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25
      26
      27
      28
      29
      30
      31
      32
      // 设置内容
      $("#btn1").click(function(){
          $("#test1").text("Hello world!");
      });
      $("#btn2").click(function(){
          $("#test2").html("<b>Hello world!</b>");
      });
      $("#btn3").click(function(){
          $("#test3").val("RUNOOB");
      });
      // 方法二 回调函数
      $("#btn1").click(function(){
          $("#test1").text(function(i,origText){
              return "旧文本: " + origText + " 新文本: Hello world! (index: " + i + ")"; 
          });
      });
      $("#btn2").click(function(){
          $("#test2").html(function(i,origText){
              return "旧 html: " + origText + " 新 html: Hello <b>world!</b> (index: " + i + ")"; 
          });
      });

      // 设置属性
      $("button").click(function(){
        $("#runoob").attr("href","http://www.runoob.com/jquery");
      });
      // 方法二  回调函数
      $("button").click(function(){
        $("#runoob").attr("href", function(i,origValue){
          return origValue + "/jquery"; 
        });
      });

  • 添加删除元素/ 获取元素尺寸

    • 添加元素

      • append() - 在被选元素的结尾插入内容
      • prepend() - 在被选元素的开头插入内容
      • after() - 在被选元素之后插入内容
      • before() - 在被选元素之前插入内容
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      $("p").append("追加文本");

      $("p").prepend("在开头追加文本");

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

      $("img").after("在后面添加文本");
       
      $("img").before("在前面添加文本");

      function afterText()
      {
          var txt1="<b>I </b>";                    // 使用 HTML 创建元素
          var txt2=$("<i></i>").text("love ");     // 使用 jQuery 创建元素
          var txt3=document.createElement("big");  // 使用 DOM 创建元素
          txt3.innerHTML="jQuery!";
          $("img").after(txt1,txt2,txt3);          // 在图片后添加文本
      }

    • 删除元素

      • remove() - 删除被选元素（及其子元素）
      • empty() - 从被选元素中删除子元素
      1
      2
      3
      4
      $("#div1").remove();
      $("#div1").empty();
      // 删除 class="italic" 的所有 <p> 元素：
      $("p").remove(".italic");

    • 尺寸

      • width()
      • height()
      • innerWidth()
      • innerHeight()
      • outerWidth()
      • outerHeight()
      1
      2
      3
      4
      5
      6
      width() 方法设置或返回元素的宽度（不包括内边距、边框或外边距）。
      height() 方法设置或返回元素的高度（不包括内边距、边框或外边距）
      innerWidth() 方法返回元素的宽度（包括内边距）。
      innerHeight() 方法返回元素的高度（包括内边距）。
      outerWidth() 方法返回元素的宽度（包括内边距和边框）。
      outerHeight() 方法返回元素的高度（包括内边距和边框）。

jquery 遍历DOM

  • 向上遍历 DOM 树

    • parent()
    • parents()
    • parentsUntil()
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    /**
    parent() 方法返回被选元素的直接父元素。
    该方法只会向上一级对 DOM 树进行遍历。
    */
    $(document).ready(function(){
      $("span").parent();
    });
    /**
    parents() 方法返回被选元素的所有祖先元素，它一路向上直到文档的根元素 
    */
    $(document).ready(function(){
      $("span").parents();
    });
    /**
    parentsUntil() 方法返回介于两个给定元素之间的所有祖先元素。
    */
    $(document).ready(function(){
      $("span").parentsUntil("div");
    });

  • 向下遍历

    • children()
    • find()
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    /**
    children() 方法返回被选元素的所有直接子元素。
    该方法只会向下一级对 DOM 树进行遍历。
    */
    $(document).ready(function(){
      $("div").children("p.1");
    });
    /**
    find() 方法返回被选元素的后代元素，一路向下直到最后一个后代。
    */
    $(document).ready(function(){
      $("div").find("span");
    });

  • 同级遍历

    • siblings()

      siblings() 方法返回被选元素的所有同胞元素。

    • next()

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

    • nextAll()

      nextAll() 方法返回被选元素的所有跟随的同胞元素。

    • nextUntil()

      nextUntil() 方法返回介于两个给定参数之间的所有跟随的同胞元素。

    • prev()

    • prevAll()

    • prevUntil()

      prev(), prevAll() 以及 prevUntil() 方法的工作方式与上面的方法类似，只不过方向相反而已：它们返回的是前面的同胞元素

  • 过滤

    • first() 方法返回被选元素的首个元素。
    • last() 方法返回被选元素的最后一个元素。
    • eq() 方法返回被选元素中带有指定索引号的元素。
    • filter() 方法允许您规定一个标准。不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回。
    • not() 方法返回不匹配标准的所有元素。not() 方法与 filter() 相反。

ajax异步请求

  • load() 方法

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    $(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);
      });
    });

  • get() 和 post() 方法

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    // get
    /**
    $.get(URL,callback);
    或
    $.get( URL [, data ] [, callback ] [, dataType ] )
    URL：发送请求的 URL字符串。
    data：可选的，发送给服务器的字符串或 key/value 键值对。
    callback：可选的，请求成功后执行的回调函数。
    dataType：可选的，从服务器返回的数据类型。默认：智能猜测（可以是xml, json, script, 或 html）。
    */
    $("button").click(function(){
      $.get("demo_test.php",function(data,status){
        alert("数据: " + data + "\n状态: " + status);
      });
    });

    //post
    /**
    $.post(URL,callback);
    或
    $.post( URL [, data ] [, callback ] [, dataType ] )
    URL：发送请求的 URL字符串。
    data：可选的，发送给服务器的字符串或 key/value 键值对。
    callback：可选的，请求成功后执行的回调函数。
    dataType：可选的，从服务器返回的数据类型。默认：智能猜测（可以是xml, json, script, 或 html）。
    */
    $("button").click(function(){
        $.post("/try/ajax/demo_test_post.php",
        {
            name:"菜鸟教程",
            url:"http://www.runoob.com"
        },
        function(data,status){
            alert("数据: \n" + data + "\n状态: " + status);
        });
    });

jquery input 验证

  • 创建cookie并设置有效期

    1
    $.cookie('name', 'value', { expires: 7 });

  • 读取cookie

    1
    $.cookie(); // => { "name": "value" }

  • 写入cookie

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    // cookie 删除成功返回 true，否则返回 false
    $.removeCookie('name'); // => true
    $.removeCookie('nothing'); // => false 
     
    // 写入使用了 path时，读取也需要使用相同的属性 (path, domain) 
    $.cookie('name', 'value', { path: '/' });
     
    // 以下代码【删除失败】
    $.removeCookie('name'); // => false
    // 以下代码【删除成功】
    $.removeCookie('name', { path: '/' }); // => true

jquery 提示框

  • 下载好插件后导入 jQuery 库

    1
    2
    3
    <script src="https://cdn.bootcss.com/jquery/2.0.2/jquery.min.js" type="text/javascript"></script>
    <script src="https://static.jyshare.com/assets/jquery/jquery.growl/javascripts/jquery.growl.js" type="text/javascript"></script>
    <link href="https://static.jyshare.com/assets/jquery/jquery.growl/stylesheets/jquery.growl.css" rel="stylesheet" type="text/css" />

  • 使用插件

    1
    2
    3
    4
    $.growl({ title: "消息标题", message: "消息内容!" });
    $.growl.error({    title: "错误标题", message: "错误消息内容!" });
    $.growl.notice({title: "提醒标题", message: "提醒消息内容!" });
    $.growl.warning({title: "警告标题", message: "警告消息内容!" });