Abstract
  1. 菜鸟教程
    1. 常用
  2. JS/Jquery 表单方式提交总结
  3. jQuery 常用代码集锦
  4. query 操作表单元素代码
  5. 写 JQuery 插件的基本知识
  6. jQuery 实现手势解锁密码特效
  7. 通过 jquery 的 ajax 请求本地的 json 文件方法
Keywords Js  专题  jQuery  专题 
Citation Yao Qing-sheng.jQuery 专题.FUTURE & CIVILIZATION Natural/Social Philosophy & Infomation Sciences,20210327. https://yaoqs.github.io/20210327/jquery-zhuan-ti/

[TOC]

菜鸟教程

常用

  1. 基本选择器
1
2
3
4
$("#id")            //ID选择器
$("div")            //元素选择器
$(".classname")     //类选择器
$(".classname,.classname1,#id1")     //组合选择器
  1. 层次选择器
1
2
3
4
 $("#id>.classname ")    //子元素选择器
$("#id .classname ")    //后代元素选择器
$("#id + .classname ")    //紧邻下一个元素选择器
$("#id ~ .classname ")    //兄弟元素选择器
  1. 过滤选择器 (重点)
1
2
3
4
5
6
7
8
$("li:first")    //第一个li
$("li:last")     //最后一个li
$("li:even")     //挑选下标为偶数的li
$("li:odd")      //挑选下标为奇数的li
$("li:eq(4)")    //下标等于 4 的li(第五个 li 元素)
$("li:gt(2)")    //下标大于 2 的li
$("li:lt(2)")    //下标小于 2 的li
$("li:not(#runoob)") //挑选除 id="runoob" 以外的所有li
  1. 内容过滤选择器
1
2
3
4
$("div:contains('Runob')")    // 包含 Runob文本的元素
$("td:empty")                 //不包含子元素或者文本的空元素
$("div:has(selector)")        //含有选择器所匹配的元素
$("td:parent")                //含有子元素或者文本的元素
  1. 可见性过滤选择器
1
2
$("li:hidden")       //匹配所有不可见元素，或type为hidden的元素
$("li:visible")      //匹配所有可见元素
  1. 属性过滤选择器
1
2
3
4
5
6
7
$("div[id]")        //所有含有 id 属性的 div 元素
$("div[id='123']")        // id属性值为123的div 元素
$("div[id!='123']")        // id属性值不等于123的div 元素
$("div[id^='qq']")        // id属性值以qq开头的div 元素
$("div[id$='zz']")        // id属性值以zz结尾的div 元素
$("div[id*='bb']")        // id属性值包含bb的div 元素
$("input[id][name$='man']") //多属性选过滤，同时满足两个属性的条件的元素
  1. 状态过滤选择器
1
2
3
4
$("input:enabled")    // 匹配可用的 input
$("input:disabled")   // 匹配不可用的 input
$("input:checked")    // 匹配选中的 input
$("option:selected")  // 匹配选中的 option
  1. 表单选择器
1
2
3
4
5
6
7
8
9
$(":input")      //匹配所有 input, textarea, select 和 button 元素
$(":text")       //所有的单行文本框，$(":text") 等价于$("[type=text]")，推荐使用$("input:text")效率更高，下同
$(":password")   //所有密码框
$(":radio")      //所有单选按钮
$(":checkbox")   //所有复选框
$(":submit")     //所有提交按钮
$(":reset")      //所有重置按钮
$(":button")     //所有button按钮
$(":file")       //所有文件域

JS/Jquery 表单方式提交总结

  1. submit 提交
    (1). submit 按钮式提交

缺点：在提交前不可修改提交的 form 表单数据

1
2
3
4
5
6
// 1. html
<form method="post" action="/../.." >
    <input type="text" name="username" value="" />
    <input type="password" name="pwd" value="" />
    <input type="submit" value="提交"/>
</form>

(2). onsubmit 方式提交

优点：在请求提交操作 (action) 时，可对提交的数据进行处理

1
2
3
4
5
6
7
// 1. html
<form id='test_form' action='' method='' onsubmit='return checkForm()'>
    <input type='text' name='username' value=''/>
    <input type='password' id='input_pwd' value =''/> // 注意此没有name属性，不会提交
    <input type='hidden' name='pwd' id='md5_pwd' value=''/> // 此有name属性，会被form表单提交
    <button type='submit'>提交</button>
</form>
1
2
3
4
5
6
7
8
// 2.js
function checkForm () { // 点击“提交”按钮，执行的方法
    var input_pwd= document.getElementById('input_pwd');
    var md5_pwd= document.getElementById('md5_pwd');
     md5_pwd.value= toMD5(input_pwd.value);            
    //进行下一步
    return true;
}
  1. formData 提交
1
2
3
4
// 1. html
<form id="photoForm">
     <input id="photoInput" type="file" title="图片上传" accept=".jpg,.jpeg,image/jpg,image/jpeg" name="myfiles" multiple="multiple">照片导入
</form>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
// 2. js
$('#photoForm input').change(function() {
    var photoForm = $('#photoForm')[0],
    photoFormData = new FormData(photoForm),
    photoFileList = $('#photoInput')[0].files; // 上传的文件列表
    $('.loading').show();
    $.ajax({
        type: 'POST',
        url: ZD.url+"/cert/filesUpload",
        data: photoFormData,
        // 告诉jQuery不要去处理发送的数据
        processData : false,
        // 告诉jQuery不要去设置Content-Type请求头
        contentType : false,
        complete:function(){
           $('.loading').hide();
           $("#photoForm input").val('');
        },
        success:function(d){
            // 成功。。
       }
     });
});
  1. 动态添加表单提交，js 方式提交
    1. 动态追加的 form 表单
    1
    2
    3
    4
    5
    6
    var exportForm = $('<form action="'+ajaxUrl+'" method="post">\
        <input type="hidden" name="beginDate" value="'+$(".beginDate").val()+'"/>\
        </form>');     
      $(document.body).append(exportForm);
       exportForm.submit(); // 表单提交
       exportForm.remove();
    1. 静态 form 表单，js 方式提交
    1
    2
    3
    4
    // 1. html
    <form action="'+ajaxUrl+'" method="post">
        <input type="hidden" name="beginDate" value="'+$(".beginDate").val()+'"/>
    </form>
    1
    2
    3
    // 2. js/JQuery
    document.getElementById("form").submit(); // js写法
    $("#form").submit(); // jquery写法

jQuery 常用代码集锦

  • 选择或者不选页面上全部复选框

    1
    2
    3
    4
    5
    var tog = false; // or true if they are checked on load
    $('a').click(function() {
    $("input[type=checkbox]").attr("checked",!tog);
    tog = !tog;
    });

  • 取得鼠标的 X 和 Y 坐标

    1
    2
    3
    4
    5
    6
    $(document).mousemove(function(e){
    $(document).ready(function() {
    $().mousemove(function(e){
    $('#XY').html("Gbin1 X Axis : " + e.pageX + " | Gbin1 Y Axis " + e.pageY);
    });
    });

  • 判断一个图片是否加载完全

    1
    2
    3
    $('#theGBin1Image').attr('src', 'image.jpg').load(function() {
    alert('This Image Has Been Loaded');
    });

  • 判断 cookie 是否激活或者关闭

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
        var dt = new Date();
        dt.setSeconds(dt.getSeconds() + 60);
        document.cookie = "cookietest=1; expires=" + dt.toGMTString();
        var cookiesEnabled = document.cookie.indexOf("cookietest=") != -1;
        if(!cookiesEnabled)
        {
        //cookies have not been enabled
        }

    + 强制过期cookie

        ```js
        var date = new Date();
        date.setTime(date.getTime() + (x * 60 * 1000));
        $.cookie('example', 'foo', { expires: date });

  • 在表单中禁用 “回车键”，表单的操作中需要防止用户意外的提交表单

    1
    2
    3
    4
    5
    $("#form").keypress(function(e) {
    if (e.which == 13) {
    return false;
    }
    });

  • 清除所有的表单数据

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    function clearForm(form) {
    // iterate over all of the inputs for the form
    // element that was passed in
    $(':input', form).each(function() {
    var type = this.type;
    var tag = this.tagName.toLowerCase(); // normalize case
    // it's ok to reset the value attr of text inputs,
    // password inputs, and textareas
    if (type == 'text' || type == 'password' || tag == 'textarea')
    this.value = "";
    // checkboxes and radios need to have their checked state cleared
    // but should *not* have their 'value' changed
    else if (type == 'checkbox' || type == 'radio')
    this.checked = false;
    // select elements need to have their 'selectedIndex' property set to -1
    // (this works for both single and multiple select elements)
    else if (tag == 'select')
    this.selectedIndex = -1;
    });
    };

  • 禁止多次递交表单

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    $(document).ready(function() {
    $('form').submit(function() {
    if(typeof jQuery.data(this, "disabledOnSubmit") == 'undefined') {
    jQuery.data(this, "disabledOnSubmit", { submited: true });
    $('input[type=submit], input[type=button]', this).each(function() {
    $(this).attr("disabled", "disabled");
    });
    return true;
    }
    else
    {
    return false;
    }
    });
    });

  • 自动将数据导入 selectbox 中

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    $(function(){
    $("select#ctlJob").change(function(){
    $.getJSON("/select.php",{id: $(this).val(), ajax: 'true'}, function(j){
    var options = '';
    for (var i = 0; i < j.length; i++) {
    options += '<option value="' + j[i].optionValue + '">' + j[i].optionDisplay + '</option>';
    }
    $("select#ctlPerson").html(options);
    })
    })
    })

  • 创建一个嵌套的过滤器

    1
    .filter(":not(:has(.selected))") //去掉所有不包含class为.selected的元素

  • 使用 has () 来判断一个元素是否包含特定的 class 或者元素

    1
    2
    3
    4
    //jQuery 1.4.* includes support for the has method. This method will find 
    //if a an element contains a certain other element class or whatever it is 
    //you are looking for and do anything you want to them. 
    $("input").has(".email").addClass("email_icon");

  • 使用 jQuery 切换样式

    1
    2
    //Look for the media-type you wish to switch then set the href to your new style sheet 
    $('link[media='screen']').attr('href', 'Alternative.css');

  • 如何正确使用 ToggleClass

1
2
3
4
5
6
//Toggle class allows you to add or remove a class 
//from an element depending on the presence of that 
//class. Where some developers would use: 
a.hasClass('blueButton') ? a.removeClass('blueButton') : a.addClass('blueButton'); 
//toggleClass allows you to easily do this using 
a.toggleClass('blueButton');

  • 使用 jQuery 来替换一个元素

    1
    $('#thatdiv').replaceWith('fnuh');

  • 绑定一个函数到一个事件

    1
    2
    3
    $('#foo').bind('click', function() { 
    alert('User clicked on "foo."'); 
    });

  • 使用 jQuery 预加载图片

    1
    2
    jQuery.preloadImages = function() { for(var i = 0; i').attr('src', arguments[i]); } }; 
    // Usage $.preloadImages('image1.gif', '/path/to/image2.png', 'some/image3.jpg');

  • 设置任何匹配一个选择器的事件处理程序

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    $('button.someClass').live('click', someFunction);
    //Note that in jQuery 1.4.2, the delegate and undelegate options have been
    //introduced to replace live as they offer better support for context
    //For example, in terms of a table where before you would use..
    // .live()
    $("table").each(function(){
    $("td", this).live("hover", function(){
    $(this).toggleClass("hover");
    });
    });
    //Now use..
    $("table").delegate("td", "hover", function(){
    $(this).toggleClass("hover");
    });

  • 自动的滚动到页面特定区域

    1
    2
    3
    4
    5
    6
    7
    8
    jQuery.fn.autoscroll = function(selector) {
    $('html,body').animate(
    {scrollTop: $(selector).offset().top},

    );
    }
    //Then to scroll to the class/area you wish to get to like this:
    $('.area_name').autoscroll();

  • 检测各种浏览器

    1
    2
    3
    4
    Detect Safari (if( $.browser.safari)),
    Detect IE6 and over (if ($.browser.msie && $.browser.version > 6 )),
    Detect IE6 and below (if ($.browser.msie && $.browser.version <= 6 )),
    Detect FireFox 2 and above (if ($.browser.mozilla && $.browser.version >= '1.8' )

  • 限制 textarea 的字符数量

    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
    jQuery.fn.maxLength = function(max){
    this.each(function(){
    var type = this.tagName.toLowerCase();
    var inputType = this.type? this.type.toLowerCase() : null;
    if(type == "input" && inputType == "text" || inputType == "password"){
    //Apply the standard maxLength
    this.maxLength = max;
    }
    else if(type == "textarea"){
    this.onkeypress = function(e){
    var ob = e || event;
    var keyCode = ob.keyCode;
    var hasSelection = document.selection? document.selection.createRange().text.length > 0 : this.selectionStart != this.selectionEnd;
    return !(this.value.length >= max && (keyCode > 50 || keyCode == 32 || keyCode == 0 || keyCode == 13) && !ob.ctrlKey && !ob.altKey && !hasSelection);
    };
    this.onkeyup = function(){
    if(this.value.length > max){
    this.value = this.value.substring(0,max);
    }
    };
    }
    });
    };
    //Usage:
    $('#gbin1textarea').maxLength(500);

  • 使用 jQuery 克隆元素

    1
    var cloned = $('#gbin1div').clone();

  • 元素屏幕居中

    1
    2
    3
    4
    5
    6
    jQuery.fn.center = function () {
    this.css('position','absolute');
    this.css('top', ( $(window).height() - this.height() ) / +$(window).scrollTop() + 'px');
    this.css('left', ( $(window).width() - this.width() ) / 2+$(window).scrollLeft() + 'px');return this;
    }
    //Use the above function as: $('#gbin1div').center();

  • 简单的 tab 标签切换

    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
    jQuery('#meeting_tabs ul li').click(function(){
    jQuery(this).addClass('tabulous_active').siblings().removeClass('tabulous_active');
    jQuery('#tabs_container>.pane:eq('+jQuery(this).index()+')').show().siblings().hide(); 
    })

    <div id="meeting_tabs">
        <ul>
        <li class="tabulous_active"><a href="#" title="">进行中</a></li>
        <li><a href="#" title="">未开始</a></li>
        <li><a href="#" title="">已结束</a></li>
        <li><a href="#" title="">全部</a></li>
        </ul>
    <div id="tabs_container">
    <div class="pane"  >1</div>
    <div class="pane"  >2</div>
    <div class="pane"  >3</div>
    <div class="pane"  >4</div>
    </div>
    </div>



    jQuery('#meeting_tabs ul li').click(function(){
    jQuery(this).addClass('tabulous_active').siblings().removeClass('tabulous_active');
    jQuery('#tabs_container>.pane:eq('+jQuery(this).index()+')').show().siblings().hide(); 
    })

    <div id="meeting_tabs">
        <ul>
        <li class="tabulous_active"><a href="#" title="">进行中</a></li>
        <li><a href="#" title="">未开始</a></li>
        <li><a href="#" title="">已结束</a></li>
        <li><a href="#" title="">全部</a></li>
        </ul>
    <div id="tabs_container">
    <div class="pane"  >1</div>
    <div class="pane"  >2</div>
    <div class="pane"  >3</div>
    <div class="pane"  >4</div>
    </div>
    </div>

query 操作表单元素代码

1
2
3
4
5
6
7
/*假设在一个表单中有一个按钮id="save"*/
$(document).ready(function(){
    $("#save").click(function(){
        $("#save").attr("disabled",true);//设为不可用                        
        $("#form1")[0].submit();//如果你有很多个id为form1的表单也没关系，只有第一个会提交的哈哈.
    });
});

  1. 取下拉菜单选中项的文本

    1
    2
    $("#select option[selected]").text();//select和option之间有空格，option为select的子元素  
    $("#select option:selected").text();//如果写成$("#select").text();会把所有下拉菜单的文本选择出来

  2. 获取和设置下拉菜单的值

    1
    2
    $("#select").val();//取值  
    $("#select").val("value");//设置,如果select中有值为value的选项,该选项就会被选中,如果不存在,则select不做任何变动

  3. 清空下拉菜单

    1
    2
    $("#select").empty();  
    $("#select").html("");

  4. 给下列菜单添加元素

    1
    2
    $('<option value="1">1</option>').appendto($("#select"));  
    $("#select").append('<option value="1">1</option>');

  5. 取单选框值

    1
    $("#id[checked]").val();

  6. 单选或复选按钮的选择

    1
    2
    3
    4
    $("#id[value=val]").attr("checked",true);//选择  
    $("#id[value=val]").attr("checked","");//取消选择  
    $("#id[value=val]").attr("checked",false);//取消选择  
    $("#id[value=val]").removeattr("checked");//取消选择

  7. 取复选框值

    1
    2
    3
    4
    $("input[type=checkbox][checked]").each(function(){  
    alert($(this).val());  
    })  
    //如果用$("input[type=checkbox][checked]").val(),只会返回第一个被选中的值

  8. 判断单选或复选框是否被选中

    1
    2
    3
    if($("#id").attr("checked")){}//判断选中  
    if($("#id").attr("checked")==true){}//判断选中  
    if($("#id").attr("checked")==undefined){}//判断未选中

  9. 元素可用不可用

    1
    2
    $("#id").attr("disabled",false);//设为可用  
    $("#id").attr("disabled",true);//设为不可用

  10. 判断元素可用不可用

    1
    2
    if($("#id").attr("disabled")){}//判断不可用  
    if($("#id").attr("disabled")==undefined){}//判断可用

  • 文本框操作

    1
    2
    3
    4
    取 值：var textval = $("#text_id").attr("value");
    var textval = $("#text_id").val();
    清除内容：$("#txt").attr("value","");
    填充内容：$("#txt").attr("value",'123');

  • 文本域操作

    1
    2
    3
    4
    取 值：var textval = $("#text_id").attr("value");
    var textval = $("#text_id").val();
    清除内容：$(”#txt”).attr("value","");
    填充内容：$(”#txt”).attr("value",'123');

  • 单选按钮操作

    1
    2
    取 值：var valradio = $("input[@type=radio][@checked]").val(); //只有一组Radio情况下
    var valradio =$('input[@name=chart][@checked]').val(); //多组Radio情况下，根据name取一组的值

  • 下拉框操作

    1
    2
    3
    4
    取 值：var selectval = $('#sell').val();
    设置选中：$("#select_id").attr("value",'test');//设置value=test的项目为当前选中项
    添加新项：$("<option value='test'>test</option><option value='test2'>test2</option>").appendTo("#select_id")//添加下拉框的option
    清空下拉框：$("#select_id").empty()；//清空下拉框

  • 多选框操作

    1
    2
    3
    取 值：$("#chk_id").attr("checked",'');//未选中的值
    $("#chk_id").attr("checked",true);//选中的值
    if($("#chk_id").attr('checked')==undefined) //判断是否已经选中

写 JQuery 插件的基本知识

  • 用 JQuery 写插件时，最核心的方法有如下两个：
1
2
3
$.extend(object) 可以理解为JQuery 添加一个静态方法。

$.fn.extend(object) 可以理解为JQuery实例添加一个方法。

基本的定义与调用：

1
2
3
4
5
6
7
8
9
10
11
/* $.extend 定义与调用
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
$.extend({ fun1: function () { alert("执行方法一"); } });
$.fun1();
/*  $.fn.extend 定义与调用
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
$.fn.extend({ fun2: function () { alert("执行方法2"); } });
$(this).fun2();
//等同于
$.fn.fun3 = function () { alert("执行方法三"); }
$(this).fun3();
  • jQuery (function () { }); 与 (function ($) { })(jQuery); 的区别：
1
2
3
4
5
6
7
8
jQuery(function () { });
//相当于
$(document).ready(function () { });
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
(function ($) { })(jQuery);
//相当于
var fn = function ($) { };
fn(jQuery);

jQuery (function () { }); 是某个 DOM 元素加载完毕后执行方法里的代码。
(function ($) { })(jQuery); 定义了一个匿名函数，其中 jQuery 代表这个匿名函数的实参。通常用在 JQuery 插件开发中，起到了定义插件的私有域的作用。

jQuery 实现手势解锁密码特效

HTML：

1
2
<div id="gesturepwd" style="position: absolute;width:440px;height:440px;left:50%;top:50%;
margin-left:-220px;margin-top:-220px"></div>

首次渲染：

1
2
3
4
5
6
7
8
9
10
11
12
$("#gesturepwd").GesturePasswd({
  margin:"0px auto",
  backgroundColor:"#252736", //背景色
  color:"#FFFFFF", //主要的控件颜色
  roundRadii:42, //大圆点的半径
  pointRadii:6, //大圆点被选中时显示的圆心的半径
  space:60, //大圆点之间的间隙
  width:440, //整个组件的宽度
  height:440, //整个组件的高度
  lineColor:"#00aec7", //用户划出线条的颜色
  zindex :100 //整个组件的css z-index属性
 })

密码判断代码：(这里的密码 “34569” 意思为页面上从上到下，从左到右的 9 个原点中的 5 个点)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
$("#gesturepwd").on("hasPasswd",function(e,passwd){
  var result;
  if(passwd == "34569"){//密码设置处
   result=true;
  } else {
   alert("密码错误!");
   result=false;
  }
  if(result == true){
   $("#gesturepwd").trigger("passwdRight");
   setTimeout(function(){
   //密码验证正确后的其他操作，打开新的页面等。。。
    //alert("密码正确！")
    //window.location.href="../统计图/index.html";
    alert("验证通过!");
 
 
   },500); //延迟半秒以照顾视觉效果
  }
  else{
   $("#gesturepwd").trigger("passwdWrong");
   //密码验证错误后的其他操作。。。
  }
 })

核心脚本调用展示：

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
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
(function ($) {
 
 var GesturePasswd= function (element, options) {
  this.$element = $(element);
  this.options = options;
  var that=this;
  this.pr=options.pointRadii;
  this.rr=options.roundRadii;
  this.o=options.space;
  this.color=options.color;
  //全局样式
  this.$element.css({
   "position":"relation",
   "width":this.options.width,
   "height":this.options.height,
   "background-color":options.backgroundColor,
   "overflow":"hidden",
   "cursor":"default"
  });
 
 
  //选择器规范
  if(! $(element).attr("id"))
   $(element).attr("id",(Math.random()*65535).toString());
  this.id="#"+$(element).attr("id");
 
 
 
  var Point = function (x,y){
   this.x =x;this.y=y
  };
 
  this.result="";
  this.pList=[];
  this.sList=[];
  this.tP=new Point(0,0);
 
 
  this.$element.append('<canvas class="main-c" width="'+options.width+'" height="'+options.height+'" >');
  //this.$element.append('<canvas class="main-p" width="'+options.width+'" height="'+options.height+'" >');
  this.$c= $(this.id+" .main-c")[0];
  this.$ctx=this.$c.getContext('2d');
 
 
 
 
  this.initDraw=function(){
   this.$ctx.strokeStyle=this.color;
   this.$ctx.lineWidth=2;
   for(var j=0; j<3;j++ ){
    for(var i =0;i<3;i++){
     this.$ctx.moveTo(this.o/2+this.rr*2+i*(this.o+2*this.rr),this.o/2+this.rr+j*(this.o+2*this.rr));
     this.$ctx.arc(this.o/2+this.rr+i*(this.o+2*this.rr),this.o/2+this.rr+j*(this.o+2*this.rr),this.rr,0,2*Math.PI);
     var tem=new Point(this.o/2+this.rr+i*(this.o+2*this.rr),this.o/2+this.rr+j*(this.o+2*this.rr));
     if (that.pList.length < 9)
      this.pList.push(tem);
    }
   }
   this.$ctx.stroke();
   this.initImg=this.$ctx.getImageData(0,0,this.options.width,this.options.height);
  };
  this.initDraw();
  //this.$ctx.stroke();
  this.isIn=function(x,y){
 
   for (var p in that.pList){
    //console.log(that.pList[p][x]);
    // console.log(( Math.pow((x-that.pList[p][x]),2)+Math.pow((y-that.pList[p][y]),2)));
    if(( Math.pow((x-that.pList[p]["x"]),2)+Math.pow((y-that.pList[p]["y"]),2) ) < Math.pow(this.rr,2)){
     return that.pList[p];
    }
   }
   return 0;
  };
 
  this.pointDraw =function(c){
   if (arguments.length>0){
    that.$ctx.strokeStyle=c;
    that.$ctx.fillStyle=c;
   }
   for (var p in that.sList){
    that.$ctx.moveTo(that.sList[p]["x"]+that.pr,that.sList[p]["y"]);
    that.$ctx.arc(that.sList[p]["x"],that.sList[p]["y"],that.pr,0,2*Math.PI);
    that.$ctx.fill();
   }
  };
  this.lineDraw=function (c){
   if (arguments.length>0){
    that.$ctx.strokeStyle=c;
    that.$ctx.fillStyle=c;
   }
   if(that.sList.length > 0){
    for( var p in that.sList){
     if(p == 0){
      console.log(that.sList[p]["x"],that.sList[p]["y"]);
      that.$ctx.moveTo(that.sList[p]["x"],that.sList[p]["y"]);
      continue;
     }
     that.$ctx.lineTo(that.sList[p]["x"],that.sList[p]["y"]);
     console.log(that.sList[p]["x"],that.sList[p]["y"]);
    }
 
   }
  };
 
  this.allDraw =function(c){
   if (arguments.length>0){
    this.pointDraw(c);
    this.lineDraw(c);
    that.$ctx.stroke();
   }
   else {
    this.pointDraw();
    this.lineDraw();
   }
 
  };
 
 
  this.draw=function(x,y){
   that.$ctx.clearRect(0,0,that.options.width,that.options.height);
   that.$ctx.beginPath();
   //that.initDraw();
   that.$ctx.putImageData(this.initImg,0,0);
   that.$ctx.lineWidth=4;
   that.pointDraw(that.options.lineColor);
   that.lineDraw(that.options.lineColor);
   that.$ctx.lineTo(x,y);
   that.$ctx.stroke();
  };
 
 
 
  this.pointInList=function(poi,list){
   for (var p in list){
    if( poi["x"] == list[p]["x"] && poi["y"] == list[p]["y"]){
     return ++p;
    }
   }
   return false;
  };
 
  this.touched=false;
  $(this.id).on ("mousedown touchstart",{that:that},function(e){
   e.data.that.touched=true;
  });
  $(this.id).on ("mouseup touchend",{that:that},function(e){
   e.data.that.touched=false;
   that.$ctx.clearRect(0,0,that.options.width,that.options.height);
   that.$ctx.beginPath();
   that.$ctx.putImageData(e.data.that.initImg,0,0);
   that.allDraw(that.options.lineColor);
   // that.$ctx.stroke();
   for(var p in that.sList){
    if(e.data.that.pointInList(that.sList[p], e.data.that.pList)){
     e.data.that.result= e.data.that.result+(e.data.that.pointInList(that.sList[p], e.data.that.pList)).toString();
    }
   }
   $(element).trigger("hasPasswd",that.result);
  });
 
  //
  $(this.id).on('touchmove mousemove',{that:that}, function(e) {
   if(e.data.that.touched){
    var x= e.pageX || e.originalEvent.targetTouches[0].pageX ;
    var y = e.pageY || e.originalEvent.targetTouches[0].pageY;
    x=x-that.$element.offset().left;
    y=y-that.$element.offset().top;
    var p = e.data.that.isIn(x, y);
    console.log(x)
    if(p != 0 ){
     if ( !e.data.that.pointInList(p,e.data.that.sList)){
      e.data.that.sList.push(p);
     }
    }
    console.log( e.data.that.sList);
    e.data.that.draw(x, y);
   }
 
  });
 
 
 
  $(this.id).on('passwdWrong',{that:that}, function(e) {
   that.$ctx.clearRect(0,0,that.options.width,that.options.height);
   that.$ctx.beginPath();
   that.$ctx.putImageData(that.initImg,0,0);
   that.allDraw("#cc1c21");
   that.result="";
   that.pList=[];
   that.sList=[];
 
   setTimeout(function(){
    that.$ctx.clearRect(0,0,that.options.width,that.options.height);
    that.$ctx.beginPath();
    that.initDraw()
   },500)
 
  });
 
 
  $(this.id).on('passwdRight',{that:that}, function(e) {
   that.$ctx.clearRect(0,0,that.options.width,that.options.height);
   that.$ctx.beginPath();
   that.$ctx.putImageData(that.initImg,0,0);
   that.allDraw("#00a254");
   that.result="";
   that.pList=[];
   that.sList=[];
   setTimeout(function(){
    that.$ctx.clearRect(0,0,that.options.width,that.options.height);
    that.$ctx.beginPath();
    that.initDraw()
   },500)
  });
 
 
 };
 
 
 GesturePasswd.DEFAULTS = {
  zindex :100,
  roundRadii:25,
  pointRadii:6,
  space:30,
  width:240,
  height:240,
  lineColor:"#00aec7",
  backgroundColor:"#252736",
  color:"#FFFFFF"
 };
 

 function Plugin(option,arg) {
  return this.each(function () {
   var $this = $(this);
   var options = $.extend({}, GesturePasswd.DEFAULTS, typeof option == 'object' && option);
   var data = $this.data('GesturePasswd');
   var action = typeof option == 'string' ? option : NaN;
   if (!data) $this.data('danmu', (data = new GesturePasswd(this, options)));
   if (action) data[action](arg);
  })
 }
 
 
 $.fn.GesturePasswd    = Plugin;
 $.fn.GesturePasswd.Constructor = GesturePasswd;
 
 
 
})(jQuery);

通过 jquery 的 ajax 请求本地的 json 文件方法

  1. ajax
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
$(function(){
  $.ajax({
  //请求方式为get
  type:"GET",
  //json文件位置
  url:"./data/shuju.json",
  //返回数据格式为json
  dataType: "json",
  //请求成功完成后要执行的方法
  success: function(data){
   //使用$.each方法遍历返回的数据date,插入到id为#result中
   var str="<ul>";
   $.each(data.list,function(i,n){
    str+="<li>"+n["item"]+"</li>";
   })
   str+="</ul>";
   $("#test").append(str);
  }
 });
});

  1. 还可以通过 $.getJSON 来获取本地 json 文件
1
2
3
4
5
6
7
8
9
10
11
/* getJSON*/
$(function(){
 $.getJSON("./data/shuju.json",function(data){
  var str="<ul>";
  $.each(data.list,function(i,n){
   str+="<li>"+n["item"]+"</li>";
  })
  str+="</ul>";
  $("#test").append(str);
 });
});
References

*Corresponding Author: Yao Qing-sheng <Email: 350788415@qq.com> BY-NC-SA .

  1. Yao Qing-sheng.jQuery 专题.FUTURE & CIVILIZATION.Natural/Social Philosophy & Infomation Sciences,20210327.https://yaoqs.github.io/20210327/jquery-zhuan-ti/
  2. 版权声明：本文为「LordYao」的原创文章，遵循 CC 4.0 BY-NC-SA 版权协议，转载请附上原文出处链接及本声明。
    原文链接： https://yaoqs.github.io/20210327/jquery-zhuan-ti/