Some jq methods used in my own projects

1, this can add events to future elements

$(document).on("click", ".title-r", function() {}

2. Input events in the input box, it feels easier to use than focusing, limit the number of words, and display the length according to the number of input words

$(".text-box").bind("input propertychange",function(){
        var put = $(this).next(".num").find('.put');
        var max = $(this).next(".num").find('.max');
        var val = $(this).val();
        var lgh = $(this).val().length;
        var maxlgh = parseInt($(max).text());
        if(lgh>maxlgh){
            $(this).val(val.substring(0,maxlgh));
            $(put).text(maxlgh);
        }else{
            $(put).text(lgh);
        }
    });

3, change event, used in input:file here

$(".file-input").change(function(){
        var val = $(this).val();
        if(!val==""){
            $(this).next(".file-img").removeClass("hide").attr("src",val);
            $(this).next().next(".del-img").removeClass("hide");
        }
    });

4, scroll bar event, let a piece of dom trigger the positioning effect with the scroll bar event

$(window).scroll(function() {
                if($(window).scrollTop() > 135) {
                    $('.new-r-phone').css({
                        "position": "fixed",
                        "margin": "-130px 0 0 0"
                    })
                }else{
                    $('.new-r-phone').css({
                        "position": "relative",
                        "margin": "0 0 0 0"
                    })
                }
            });

5, get the height, set the height

var height = $(".newtask-l").height();
$(".newtask-r").height(height);

6. Introduce public parts, such as headers

$(document).ready(function() {
    $(".header").load("public-header.html");
});

7. Traverse, I am traversing the radio checkbox

$.each($('input:checkbox,input:radio'), function() {
    if(this.checked) {
        $(this).next('b').css({
            background: "#5C6AC0",
            border: "none",
            width: "17px",
            height: "17px"
        })
    }
});

8. Add an event to the select drop-down, use change, and add a val value to the option

$(".send-way").bind("change", function() {
    if($(this).val() == 1) {
        $(".news-center,.up-pic").addClass('hide')
    }
    if($(this).val() == 2) {
        $(".news-center").removeClass('hide')
        if($(".news-model").val() == 2) {
            $(".up-pic").removeClass('hide')
        }
    }
})

9, get the subscript, or operate after the subscript selection

var index = $(this).parent().parent().index();
$('.pcd').eq(index).remove();

10. The difference between find and childeren, find is to find all the sub-elements that meet the conditions, including sub-elements in sub-elements, children is to find parent-child elements, and will not continue to search under the sub-elements