zoukankan      html  css  js  c++  java
  • jquery 中的一写常用方法

    $('form').submit(); // 表单提交
     window.parent.location.reload();    // 子窗口刷新父页面
    $(selector, window.parent.document); //获取iframe父窗体元素

      window.frames["iframe的name"] //获取iframe列表里面某个具体的iframe

      $(selector, window.parent.window.frames["兄弟的iframe的name"].document) //在一个父窗口中有两个兄弟iframe,获取兄弟iframe

     window.location.reload();   // 刷新当前页面
    $('input').blur(function () {...... })   // 当鼠标从input框中移出是发生的事件
    $('.addwork').live('click',function () {
            $('#hrcboxClose').css('visibility','hidden');   // 想隐藏弹窗中的小×,使用display:none,无效时,可以试一下visibility:hidden
        });
        // 使用tp5作为框架想要选择一个option后替换整个页面或者局部页面,可以将所选择的参数传递过去,然后在controller中return $this->fetch()一个页面,将整个页面通过字符串的方法返回(ajax如果不规定所返回数据的类型,默认为字符串),在来替换想要替换的地方,比如整个body。
        $('select').change(function(){
            var subjectTitle = $('.subject_title').val();  // 获取选择条件
            $.post(
                "filter",                    // 请求的方法
                {
                    subjectTitle : subjectTitle        // 将条件传递过去
                },
                function(data) {
                    console.log(data);            // 将整个页面以字符串的形式返回
                    $('body').html(data);           // 用新页面替换当前页面的body
                }
            )
        })
     // tp5中如果使用新页面替换原页面在分页后会出现点击页面跳转到了页码所对应的url,解决方法如下:
        $('.pagination').find('a').each(function () {           // 循环遍历分页中的每一个页码
            $(this).click(function(){                           // 如果某个页码被点击
                var url = $(this).attr('href');                 // 获取它的href属性
                param = url.substring(url.indexOf("?") + 1).split("&"); //得到page参数,比如[page=2]
                var page = param[0].substring(param[0].indexOf("=") + 1).split("=")[0]; // 得到页码的值,例如:2
                $('.pagination').find('a').attr('href','javascript::void(0)');  // 将该页码的href属性改为javascript:void(0);不让它跳转到页码所对应的url
                var subjectTitle = $('.subject_title').val();                   // 传递select的参数
                $.post(
                    "filter",                                   
                    {
                        subjectTitle : subjectTitle,            // 将选择条件和页码传递过去
                        page:page
                    },
                    function(data) {
                        $('body').html(data);                   // 重新替换body
                    }
                )
            })
        })

    // 获取单选按钮的值
     var score = $('#checkScore input[name="score"]:checked ').val();
    // 获取select被选中的值
    var subject_title = $('.subject_title').find('option:selected').html();

     限制 textarea 文本框输入内容的大小

    <li>
         <p class="comments">评语 <span class="in">(您还可以输入<span id="word">248</span>个字)</span></p>
         <textarea name="comment" class="write" id="writer" cols="30" rows="5"></textarea>
    </li>
    $("#writer").keyup(function(){
            if($("#writer").val().length > 248){
                $("#writer").val( $("#writer").val().substring(0,248) );  // 只截取前面的248个字符
            }
            $("#word").text( 248 - $("#writer").val().length ) ;      // 自动显示还可以输入多少个字符
        });

    点击按钮后将其置为不可选中,一段时间后有自动恢复

    $('button').click(function(){
      $('button').attr('disabled','disabled');    // 点击按钮后不可选中
            setTimeout(function(){
                $('button').removeAttr("disabled");   // 1.5s后恢复
            },1500);
    })

     获取select中被选中option的值

    $('select').find('option:selected').html()

     data()向被选元素添加数据或者从备选元素获取数据。

    //像被选元素附加数据
    $('selecter').data(name,value);
    
    // 从备选元素获取数据
    $('selecter').data(name);

     event.preventDefalt()

    //preventDefault() 方法阻止元素发生默认的行为(例如,当点击提交按钮时阻止对表单的提交)。
    event.preventDefault()

     delay()

    //delay() 方法对队列中的下一项的执行设置延迟。
    $(selector).delay(speed)  // speed为设置延迟的速度

    width() 和 hieght()

    $(selector).height() ;   // 元素实际的高度,不包括边距和边框,只返回一个数值
    $(selector).width(); // 元素实际的宽度,不包括边距和边框,只返回一个数值
    $(selector).outerHeight() ;   // 元素高度,包括边距和边框,只返回一个数值
    $(selector).outerWidth(); // 元素宽度,包括边距和边框,只返回一个数值
    $(selector).outerHeight(true) ;   // 元素高度,包括边距和边框和外边距,只返回一个数值
    $(selector).outerWidth(true); // 元素宽度,包括边距和边框和外边距,只返回一个数值

    offset()

    $(selector).offset() // 返回当前匹配元素相对于当前文档的偏移,也就是相对于当前文档的坐标。该函数只对可见元素有效。
    $(selector).offset() .top
    $(selector).offset() .right
    $(selector).offset() .bottom
    $(selector).offset() .left

    page

    event.pageX   // 鼠标指针相对于文档左边缘的位置
    event.pageY   // 鼠标指针相对于文档上边缘的位置

     在 iframe 中操作父窗口中的元素:

     $(window.parent.document).find('span’).html('字符');
    <div id="#div_id">
        <div>
            <div><span>文本1</span></div>
            <div><span>文本2</span></div>
            <div><span>文本3</span></div>
        </div>
    </div>
    
    //获取 "文本2" 
    $('#div_id').children('div').children('div:nth-child(2)').children('span').html();

     js格式化时间

    function formatDate(time){
        time = parseInt(time);
        var date = new Date(time);
        var year = date.getFullYear(),
            month = date.getMonth()+1,//月份是从0开始的
            day = date.getDate(),
            hour = date.getHours(),
            min = date.getMinutes(),
            sec = date.getSeconds();
        var newTime = year + '-' +
            (month < 10? '0' + month : month) + '-' +
            (day < 10? '0' + day : day) + ' ' +
            (hour < 10? '0' + hour : hour) + ':' +
            (min < 10? '0' + min : min) + ':' +
            (sec < 10? '0' + sec : sec);
        return newTime;
    }
    使用方法:formatDate(传时间戳);

    如果是用ajax提交数据到后台的话,在后台直接echo"<script>alert("111")</script>"这样子是不行的

    因为ajax提交的返回会根据设置返回json或者文本,不会解析js,只能返回只一个状态,然后在前端页面显示需要提示的消息

    如何select调用了类似bootstrap的selectpiceker()这种用div+ul来实现select功能的情况下,此时在复制整个html,复制的元素中select的事件如change等是不能触发的。需要在复制时来进行初始化select,而不是在调用是来初始化select。

    js定义对象方法

    js 可以这样来定义一个对象,然后在对象中写方法。

    var obj = {
        render: function (target, options) {
            this.target = $(target);
            this.canEdit = canEdit || true;
            this.canDelete = canDelete || true;
            this.functionName(this.target, options);
        }
        
        functionName: function(target, options) {
            //...
        }
    }
    
    //方法调用示例:
    obj.render(obj, options);

    jQuery库拓展方法

    $.fn.extend() 函数为jQuery扩展一个或多个实例属性和方法(主要用于扩展方法)

    $.fn.extend({
        functionName:function(options){
        
        }
    })

    ~

  • 相关阅读:
    ARP 协议
    天梯赛L1 题解
    DNS域名系统
    LeetCode 三角形最小路径和
    sql注入漏洞的利用
    XSS漏洞防御
    忘记密码功能漏洞挖掘
    sql bypass
    Web环境搭建组合
    常用数据库的总结
  • 原文地址:https://www.cnblogs.com/chrdai/p/6100786.html
Copyright © 2011-2022 走看看