笔记12.17

最新推荐文章于 2024-09-16 21:30:36 发布

2301_80612591

最新推荐文章于 2024-09-16 21:30:36 发布

阅读量66

点赞数

文章标签：笔记

本文链接：https://blog.csdn.net/2301_80612591/article/details/135088582

版权

本文介绍了JavaScript中DOM元素的获取、事件监听（包括冒泡和捕获）、原型对象与原型链，以及jQuery库的基础使用，如选择器、CSS操作、动画和回调函数。实例演示了如何使用jQuery改变按钮背景色并实现事件委托。

摘要由CSDN通过智能技术生成

const ...... = document.querySelector	获取元素
().addEventListener	事件监听
documen。documenElement.addEventListener（，）	同上
false	默认~~冒泡
true	捕获
e.stopPropagation（）	阻止捕获和冒泡
.addEventListener( . (e）{}	事件委托

new关键字

obj相当于独立空间

原型对象

Person.prototype.sing = func（）{}

对应关系

全选和单选

jquery

$	顶级对象是jquery的别称，相当于原生js中的window，对其元素进行包装使其成为jQuery对象，从而可以调用jQuery的方法
$("")[0].style	把jQuery转为dom对象
$(dom对象）	dom转换为jQuery对象
$("选择器").css(“属性名”，”属性值“）	选择器格式
console.log($("div"))	隐式迭代；遍历内部DOM元素的过程
	筛选选择器
odd	奇数
even	偶数
$(".father").children(".son")	子代选择器
$(".father").find("div").css("color","red")	后代选择器
$("li").siblings("div").css("color"，”red”）	查找兄弟节点但不包括本身
$("选择器").css(“属性名”，”属性值“）	更改形式
第2种在第一种的基础上添加
在css上写上类名后 $("").addClass("类名")	第3种方式（添加）
$("").removeClass("类名")	移除
$("").toggleClass("类名")	切换（更换样式
$("").show(可以添加时间)	显示
$("").hide()	隐藏
$("").toggle()	切换

animate	想要更改的样式属性
speed	速度
easing	切换效果
fn	回调函数

	stop立即停止

练习

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./jquery.min.js"></script>
    <script>
        $(function () {
            $("button").click(function () {
                $(this).css("backgroundColor", "pink")
                $(this).siblings("button").css("backgroundColor", "")
            })

        });
    </script>
</head>

<body>
    <button>按钮1</button>
    <button>按钮2</button>
    <button>按钮3</button>
    <button>按钮4</button>
    <button>按钮5</button>
    <button>按钮6</button>

</body>

</html>