8 前端 jQuery 事件 – 源码巴士

前端

1 操作标签

1.1 操作类

原生Javascript	jQuery
classList.add()	addClass()
classList.remove()	removeClass()
classList.contains()	hasClass()
classList.toggle()	toggleClass()

1.2 操作css

jQuery的链式操作
调用jQuery方法后返回的还是当前jQuery对象，可以继续调用其它jQuery方法。
可以做到一行代码操作很多标签。

$('p').first().css('color','red').next().css('color','green');

1.3 操作位置

offset()
获取或设置元素相对于浏览器窗口的偏移坐标，
返回的对象包含两个整型属性top和left，单位是px。

let pOffset = $("p").offset();
console.log("Top: " + pOffset.top + " Left: " + pOffset.left);
$("p").offset({top:20,left:20});

position()
返回匹配元素相对于父元素的位置偏移，
返回的对象包含两个整型属性top和left，单位是px。

let pPosition = $("p").position();
console.log("Top: " + pPosition.top + " Left: " + pPosition.left);

scrollTop()
获取或设置元素的垂直滚动条位置，
当滚动条位于最顶部时，位置是 0px。

$("div").scrollTop(100);

scrollLeft()
获取或设置元素的水平滚动条位置。

1.4 操作尺寸

<div id="d1" style="margin:5px; padding:10px; width:100px; height:100px; border:1px solid #000;"></div>

$('div').height();  // 100 元素内容高度height
$('div').width();  // 100

$('div').innerHeight();  // 120 height+padding*2
$('div').innerWidth();  // 120

$('div').outerHeight();  // 122 height+padding*2+border*2
$('div').outerWidth();  // 122

$('div').outerHeight(true);  // 132 height+padding*2+border*2+margin*2
$('div').outerWidth(true);  // 132

1.5 操作文本和值

原生Javascript	jQuery
innerText	text()
innerHTML	html()
value	val()

<div>
	<p>对面隐形不插眼，真视掉了没人拣，</p>
	<p>一个红血五人撵，死在地图同一点。</p>
</div>

$('div').text();
"
		一个红血五人撵，死在地图同一点。
	"

$('div').html();
"
		<p>一个红血五人撵，死在地图同一点。</p>
	"

注意，对于文件，val()得到的是文件路径。

$('#d1').val();  // "C:\fakepath\01_测试路由.png"

$('#d2')[0].files[0];  // 需要转换为dom对象，再获取文件。

1.6 操作属性

1.6.1 attr

原生Javascript	jQuery
setAttribute()	attr(name,value)
getAttribute()	attr(name)
removeAttribute()	removeAttr(name)

$("img").attr("width");
$("img").attr("width","180");
$("img").removeAttr("width");

1.6.2 attr 与 prop

对于标签上能够直接看到的固有属性和自定义属性，使用attr；
对于需要返回布尔值的元素，例如checkbox，radio，option，判断其是否被选中，必须使用prop。

<input id="chk1" type="checkbox" checked />
<!-- 等价于 <input id="chk1" type="checkbox" checked="checked" /> -->
<input id="chk2" type="checkbox" />

// prop可以获取或设置布尔类型数据。
$("#chk1").prop("checked");  // true
$("#chk2").prop("checked");  // false

$("#chk1").prop("checked", false);  // 取消选中
$("#chk2").prop("checked", true);  // 设置选中

// attr的返回值与选中状态无关，只与checked是否在标签中出现有关。
$("#chk1").attr("checked");  // "checked"
$("#chk2").attr("checked");  // undefined

1.7 文档处理

原生Javascript	jQuery
createElement(‘p’)	`$('<p>')`
appendChild()	append()

let $pEle = $('<p>');
$pEle.text('Hello');
$pEle.attr('id','d1');

$('#d1').append($pEle);  // 内部尾部追加
$pEle.appendTo($('#d1'));

$('#d1').prepend($pEle);  // 内部头部追加
$pEle.prependTo($('#d1'));

$('#d2').after($pEle);  // 放在某个标签后面
$pEle.insertAfter($('#d1'));

$('#d1').before($pEle);  // 放在某个标签前面
$pEle.insertBefore($('#d2'));

$('#d1').remove();  // 将标签及其子标签从DOM树中删除
           
$('#d1').empty();  // 清空标签内部所有的内容

2 jQuery事件

2.1 两种绑定事件的方式

$('#d1').click(function() {
	alert('Hello.');
});

// 支持事件委托
$('#d2').on('click', function() {
	alert('Hello.');
})

2.2 克隆事件

<button id="d1">点击复制</button>

<script>
    $('#d1').on('click', function() {
        // this指代是当前被操作的标签对象。
        // clone默认情况下只克隆html和css，不克隆事件。
        // $(this).clone().insertAfter($('body'));
        
		// 设置参数true，支持克隆事件。
        $(this).clone(true).insertAfter($('body'));  
    });
</script>

2.3 自定义模态框

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>自定义模态框</title>
    <style>
        .cover {
	        position: fixed;
	        left: 0;
	        right: 0;
	        top: 0;
	        bottom: 0;
	        background-color: rgba(0,0,0,0.6);
	        z-index: 999;
	    }
	    .modal {
	        width: 600px;
	        height: 400px;
	        background-color: white;
	        position: fixed;
	        left: 50%;
	        top: 50%;
	        margin-left: -300px;
	        margin-top: -200px;
	        z-index: 1000;
	    }
	    .hide {
	        display: none;
	    }
    </style>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
</head>
<body>
    <input id="i0" type="button" value="弹出窗口">
    <div class="cover hide"></div>
    <div class="modal hide">
        <label for="i1">姓名</label>
        <input id="i1" type="text">
        <label for="i2">爱好</label>
        <input id="i2" type="text">

        <input id="i3" type="button" value="关闭">
    </div>
    <script>
	    $("#i0").click(function(event) {
	    	$(".cover").removeClass("hide");
	    	$(".modal").removeClass("hide");
	    });

	    $("#i3").click(function(event) {
	    	$("#i1").val("");
	    	$("#i2").val("");

	        $(".cover").addClass("hide");
	        $(".modal").addClass("hide");
	    });
    </script>
</body>
</html>

2.4 左侧菜单

<script>
    $('.title').click(function() {
        // 先给所有的items加hide
        $('.items').addClass('hide');
        // 然后移除被点击元素的子元素的hide
        $(this).children().removeClass('hide');
    });
</script>

2.5 返回顶部

<script>
    $(window).scroll(function() {
        if($(window).scrollTop() > 300) {
            $('#d1').removeClass('hide');
        } else {
            $('#d1').addClass('hide');
        }
    });
</script>

2.6 实时登陆校验

// 用户点击提交按钮时，用户如果没有填写，则向用户展示提示信息。
<p>username:
    <input type="text" id="username">
    <span style="color: red"></span>
</p>
<p>password:
    <input type="text" id="password">
    <span style="color: red"></span>
</p>
<button id="d1">提交</button>
<script>
    let $userNameEle = $('#username');
    let $passWordEle = $('#password');
    $('#d1').click(function() {
        // 获取用户输入的用户名和密码 做校验
        let usernameVal = $userNameEle.val();
        let passwordVal = $passWordEle.val();
        if (!usernameVal) {
            $userNameEle.next().text("用户名不能为空。");
        }
        if (!passwordVal) {
            $passWordEle.next().text('密码不能为空。');
        }
    });
    $('input').focus(function() {
        $(this).next().text('');
    });
</script>

2.7 input实时监控

<input type="text" id="d1">
<script>
    $('#d1').on('input', function() {
        console.log(this.value);
    });
</script>

2.8 hover事件

规定当鼠标指针悬停在被选元素上时要运行的两个函数。

$(selector).hover(inFunction, outFunction)

inFunction - 必需，规定mouseenter事件发生时运行的函数；
outFunction - 可选，规定mouseleave事件发生时运行的函数。
如果只指定函数inFunction，则 mouseenter 和 mouseleave 都执行。

<script>
	// 鼠标悬浮 + 鼠标移开
    // $("#d1").hover(function() {  
    //     alert('鼠标悬浮 + 鼠标移开');
    // });

    $('#d1').hover(
        function() {
            alert('鼠标悬浮');  // 悬浮
    	},
        function() {
            alert('鼠标移开');  // 移开
        }
    );
</script>

2.9 键盘按键事件

<script>
    $(window).keydown(function(event) {
        console.log(event.keyCode);
        if (event.keyCode === 16) {
            alert('你按了shift键。');
        }
    });
</script>

3 知识回顾

3.1 有一个列表 [3, 4, 1, 2, 5, 6, 6, 5, 4, 3, 3]，请写出一个函数，找出该列表中没有重复的数的总和。

l = [3, 4, 1, 2, 5, 6, 6, 5, 4, 3, 3]

def get_uniq_sum(lst):
    return len(set(lst))

print(get_uniq_sum(l))

3.2 简述数据库表设计中一对一、一对多、多对多的应用场景，char与varchar的区别。

3.2.1 一对一、一对多、多对多

一对一
一般用于某张表的补充。
可以在任意一方建立外键关联，一般在查询频率较高的一方。
比如用户基本信息是一张表，详细信息是基本信息表的扩充，并与详细信息表一一对应。
一对多
一个对象A会对应多个对象B，而从B的角度看，一个对象B只会对应一个对象A。
需要在“多”的这个表中建立“一”的外键关联。
例如一个班级对应多个学生，一个学生只会对于一个班级。
多对多
一个对象A会对应多个对象B，而从B的角度看，一个对象B对应多个对象A。
需要定义第三个中间表，由 A 表和 B 表的外键组成。
例如一个作者可以对应多本书，一本书可以对应多个作者。

3.2.2 char与varchar的区别

字符类型
char 定长存取速度较块
varchar 变长节省存储空间

char(4)  # 超过4个字符直接报错，不够时用空格补充，MySQL在显示时会自动将多余空格去除。

varchar(4)  # 超过4个字符直接报错，不够时有几个存几个。

原文链接：https://blog.csdn.net/qq_36565509/article/details/106239894