JQery

• 从鼠标获取输入

addEventListener("click",function(){})

let input = document.querySelector(".input");
let output = document.querySelector("pre");
let run = document.querySelector("button");

function main() {
    run.addEventListener("click", function () {
        let s = input.value;
        output.innerHTML = s;
    });
}
export {
    main,
}

• 从标准输入（键盘）获取输入【leetcode常用重点s】

let fs = require('fs')
let buf = '';

process.stdin.on('readable',function(){ // 标准输入由内容的话，读到临时变量chunk里
    let chunk = process.stdin.read();
    if(chunk) buf+=chunk.toString();
})
process.stdin.on('end',function(){

})

例子：
let buf = "";
process.stdin.on("readable",function(){
    let chunk = process.stdin.read();
    if(chunk) buf +=chunk.toString();
});

process.stdin.on("end",function(){
    let X = buf.split('\n').map(x => {return parseInt(x)});
    for(let i = 0;i<10;i++){
        if(X[i] <= 0){
            X[i] = 1;
        }
        console.log(`X[${i}] = ${X[i]}`);
    }
});

JQuery

• 选择器

相比获得标签的原生写法，JQuery可以更容易的获取标签

在<header>中引入JQuery，链接是https://cdn.acwing.com/static/jquery/js/jquery-3.3.1.min.js

<script src="https://cdn.acwing.com/static/jquery/js/jquery-3.3.1.min.js"></script>

let div = document.querySelector('div');
console.log(div);

let $div = $('div'); # 普通标签选择器
let $div2 = $('.mydiv'); # 类选择器
let $div3 = $('#iddiv');
let $div4 = $('#iddiv > p');
console.log($div);

JS代码一般通过事件触发。JQuery对于事件的操作

// 两种普通方式
div.click(function () {
        console.log("click on");
    })
div.on('click',function(){
        console.log("Click on");
})
// 只能点击一次，然后解绑标签
div.on('click', function () {
        console.log("click on");
        div.off("click");
    })
// 第一次两个标签都不解绑；第二次点击以后，解绑`click.name2`,只会输出click on
div.on('click.name1', function () {
        console.log("click on");
        div.off('click.name2');

    })
    div.on('click.name2', function () {
        console.log("Haha Madira");

    })

e.stopPropagation可以阻止事件向上传递

div.on('click', function () {
        console.log("click on div");
    })

    $('a').on('click', function (e) {
        console.log("click on a");
        e.stopPropagation();
    })

e.preventDefault阻止本级标签的执行，但是上级标签可以正常执行

div.on('click', function () {
        console.log("click on div");
    })

    $('a').on('click', function (e) {
        console.log("click on a"); // 只是阻止本级标签的打开功能，但是本级函数中的输出功能仍然会正常执行
        e.preventDefault();
    })

针对上面两个函数进行封装[在事件触发的函数中，return false等价于同时执行stopPropagation和preventDefault]

div.on('click', function () {
        console.log("click on div");
    })

    $('a').on('click', function (e) {
        console.log("click on a"); // 只是阻止本级标签的打开功能，但是本级函数中的输出功能仍然会正常执行
        return false; // 只会输出click on a.因为等价这里写了e.stopPropagation和e.preventDefault
    })

• 元素标签的隐藏与展现

$A.hide()

$A.show()

$A.fadeIn 渐变慢慢消失 参数是时间，单位ms

$A.fadeOut

• 元素标签添加与删除

$A.append($B):$B插入到$A的末尾

$A.prepend($B):$B插入到$A的开头

$A.remove():删除$A

$A.empty():清空$A的所有子节点

• 元素标签对应类的添加与删除

$A.addClass()

$A.removeClass()

$A.hasClass()

• 不通过类，直接对CSS操作

$A.html()

$A.text()

$A.val()

• 查找元素标签

$A.parent(filter):查找父元素

$A.parents(filter)查找祖先元素

$A.children(filter):在子元素中查找

$A.find(filter):在后代元素中查找

Ajax

ajax简单来说就是两个函数。post和get。作用是跟后端通信

link是刷新整个页面；ajax是从服务器端获取部分数据(一般是获取json数据)，并加载

$.ajax({
    url:"www.acwing.com",
    type:"GET",
    data:{
    
    },
    dataType:"json",
    success:function(resp){
    
    },
});

$.ajax({
    url:"www.acwing.com",
    type:"POST",
    data:{
    
    },
    dataType:"json",
    success:function(resp){
    
    },
});