文档处理，克隆，常用事件，绑定事件的方式，hover事件，实时监听input输入值变化，阻止后续事件执行，阻止事件冒泡，页面载入，事件委托，补充-526互联

文档处理

# js中创建一个节点
var a = document.createElement('a');

# jq
var a = $('<a>');

克隆

<script>
    // clone方法不加参数true，克隆标签但不克隆标签带的事件
    // $("#b1").on("click", function () {
    //     // $(this).clone().insertAfter(this);
    //     $(this).clone().insertAfter(this);
    // });
    // clone方法加参数true，克隆标签并且克隆标签带的事件
    $("#b2").on("click", function () {
        // clone括号中没有true这个参数，克隆的时候只可能标签样式等，如果加上true这个参数，就会连事件也一块克隆
        $(this).clone(true).insertAfter(this);
    });
</script>

常用事件

click(function(){...})
hover(function(){...})
blur(function(){...})
focus(function(){...})
change(function(){...})
keyup(function(){...})
input监控

绑定事件的方式

// btn.click(function () {
//     alert(123);
// });

// $(".btn").on("click", function () {
//     // clone括号中没有true这个参数，克隆的时候只可能标签样式等，如果加上true这个参数，就会连事件也一块克隆
//     alert(123);
// });

// 事件委托，它的功能更加强大，支持事件委托，什么是事件委托?
$("body").on("click", '.btn',  function () {
    // clone括号中没有true这个参数，克隆的时候只可能标签样式等，如果加上true这个参数，就会连事件也一块克隆
    alert(123456);
});

hover事件

<script>
    $('p').hover(
        function () {
            alert('来啦，老弟')
        },
        function () {
            alert('慢走哦～')
        }
    )
</script>

实时监听input输入值变化

<script>
    $("#i1").on("input", function () {
        console.log($(this).val());
        // 发起ajax请求，朝后盾发起请求，做验证.
    })
</script>

阻止后续事件执行(要会)

<script>
    var span = $(".s1");
    var btn = $("#btn");
    btn.click(function (e) {
        span.text('你惦记我了');
        // return false; // 这句话就可以组织后续事件的提交
        e.preventDefault();  // 这句话就可以组织后续事件的提交
    })
</script>

阻止事件冒泡

<script>
    $("span").click(function (e) {
        alert("span");
        // 组织事件冒泡
        e.stopPropagation();
    });

    $("p").click(function (e) {
        alert("p");
        
    });
    $("div").click(function () {
        alert("div");
    })
</script>

页面载入

# 当页面中的代码全部加载完毕再去执行的代码快
# 在js中
window.onload = function () {
    
}


# 在jq中：
# 第一种方式
$(document).ready(function(){
	// 在这里写你的JS代码...
})

# 第二种方式
$(function(){
	// 你在这里写你的JS代码
})

事件委托

$("#d1").on("click", ".btn", function () {
        console.log('123456');
    })

补充

each方法
// $('div').each(function (index, value) {
//     console.log(value, index);
// });

// 第二种方式：BBS中要用的
var arr = [1, 2, 3, 4, 5];
$.each(arr, function (index, value) {
    console.log(value,index);
});


data的用法

# $('div').data('username', 'jack');
jQuery.fn.init(10) [div, div, div, div, div, div, div, div, div, div, prevObject: jQuery.fn.init(1)]

# $('div').data('username');


# 可以跟某一个标签设置data属性
$('div').first().data('username', 'jack');
$('div').eq(3).data('username', 'jack');
$('#d1').data('username', 'jack');
# 获取
$('div').first().data('username');