jQuery常用点

jQuery

事件 

1 、trigger() 方法触发被选元素的指定事件类型。

2 、delegate() 事件委派 1.不占内存2.可以给未来元素（后期动态添加的元素）添加事件。

2. 添加元素

append() - 在被选元素的结尾插入内容 *例如：要插入li标签，则要在ol元素后append。插入tr标签，要在table元素后append。 * append內的内容必须为字符串。

里面的 a 也要是字符串

prepend() - 在被选元素的开头插入内容
after() - 在被选元素之后插入内容
before() - 在被选元素之前插入内容

3. 删除元素/内容

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

4. 操作css

addClass() - 向被选元素添加一个或多个类
removeClass() - 从被选元素删除一个或多个类
toggleClass() - 对被选元素进行添加/删除类的切换操作
css() - 设置或返回样式属性

5.动画效果

6.设置内容属性

选择器

$(":button")	选取所有 type="button" 的 <input> 元素和 <button> 元素
$("p:first")	选取第一个 <p> 元素
$("input[name=name]")	选取input元素中属性为name=name的元素

7.jquery找盒子和页面的距离

$('div').offset().left/top

8.为什么$(window).scrollTop() 随着页面滚动没有变化？

因为 $(window).scrollTop()只有在$(window).scroll（function（）{里面才有效果}）

9.$.ajax 完整参数

        $.ajax(
            {
                // crossDomain: true,
                async:false,
                cache: false,
                type: 'POST',
                headers: {
                    "Content-Type": "application/x-www-form-urlencoded"
                },
                data:{
                    order_id:rowData.order_id_str,
                    access_key:$('#hisAcc').val(),
                    secret_key:$('#hisSec').val(),
                    exchange:'huobidm',
                    symbol:rowData.symbol,
                },
                url: 'http://www.xxxxx' + '/api/v1/contract/order/detail?key=asdkjaslkdjhaskdqw325e45q6we',
                success:function (res) {
                    if(res.data != ""){
                        data = res.data[0]
                    }else {
                        data = {noData:'0'}
                    }
                }
            }
        );

JS 使用URL 传递对象参数 encodeURI

var eg = {
keyName: 'U_key',
MODULE_CODE: '123'
PRIMARY_KEY: 'abc'
}
var jsonObj = JSON.stringify(eg)
var url = basePath + 'customManage/openListChild.do?TYPE_ID= P11227f338d03&PAPERCODE' + encodeURI(jsonObj)

传JSON数据

  headers: {
                    "Content-Type": 'application/json;charset=utf-8'
                },
  data:JSON.stringify(flashObj),

$(function(){
    $('#send').click(function(){
         $.ajax({
         type: "GET",
         url: "test.json",
         data: {username:$("#username").val(), content:$("#content").val()},
         dataType: "json",
         success: function(data){
                    console.log(data);
                  }
         });
    });
});

10. 返回顶部

    //返回顶部
    $(function() {
         var scrollDiv = document.createElement('div');
         //$(scrollDiv).attr('id', 'toTop').html('^ 返回顶部').appendTo('body');
         $(window).scroll(function() {
                 if ($(this).scrollTop() != 0) {
                        $('#toTop').fadeIn();
                    } else {
                        $('#toTop').fadeOut();
                     }
             });
       $('.toTop').click(function() {
                 $('body,html').animate({ scrollTop: 0 }, 800);
             })
     });

11.序列化表单值

$('form选择器').serialize() //字符串化表单值

$('form选择器').serializeArray() //数组化表单值

$('form选择器').parseForm() //对象化表单值

$('form选择器').serializeObject() //对象化表单值
去掉空值函数

 function serializeNotNull(serStr){
        return serStr.split('&').filter(item=> !item.endsWith('=')).join('&')
    }

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <form action="">
        First name: <input type="text" name="FirstName" value="Bill" /><br />
        Last name: <input type="text" name="LastName" value="Gates" /><br />
    </form>
    <button >序列化表单值</button>
    <div></div>
</body>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>

    // 给jquery添加 parseForm方法 将表单转化为JSON对象 （方法1）
    $.fn.serializeObject = function()
    {
        var o = {};
        var a = this.serializeArray();
        $.each(a, function() {
            if (o[this.name]) {
                if (!o[this.name].push) {
                    o[this.name] = [o[this.name]];
                }
                o[this.name].push(this.value || '');
            } else {
                o[this.name] = this.value || '';
            }
        });
        return o;
    };

    // 给jquery添加 parseForm方法 将表单转化为JSON对象 （方法2）
    $.fn.parseForm=function(){
        let serializeObj={};
        let array=this.serializeArray();
        let str=this.serialize();
        $(array).each(function(){
            if(serializeObj[this.name]){
                if($.isArray(serializeObj[this.name])){
                    serializeObj[this.name].push(this.value);
                }else{
                    serializeObj[this.name]=[serializeObj[this.name],this.value];
                }
            }else{
                serializeObj[this.name]=this.value;
            }
        });
        return serializeObj;
    };


    $(function () {
        $("button").click(function(){
            console.log('让我康康',$("form").serialize())
            console.log('让我康康',$("form").serializeArray())
            console.log('让我康康',$("form").parseForm())
            console.log('让我康康',$("form").serializeObject())
        });
    })
</script>

</html>


12.自己写提示框

 function kbtMsg(title,time){
      layui.use('jquery',function () {
        let $ = layui.$;
        $('body').append('<div class="kbt-msg" ><span class="txt">' + (title?title:'请填写提示') +'</span></div>')
        setTimeout(function () {
        $('.kbt-msg').remove()
        },(time?time:2) * 1000)
      })
 }

相关阅读:
ssh 命令
 mtr 命令
 ping 命令
 curl 命令
 echo 命令
 cp 命令
 sftp服务器配置
 tomcat性能优化
 消息队列
 深度学习
原文地址：https://www.cnblogs.com/it-Ren/p/10656460.html