发表于： 2023-03-28 20:18:48
0 256
jquery知识点：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
}
.current {
background-color: skyblue;
}
</style>
</head>
<body>
<div></div>
<ul>
<li>我是小li</li>
<li>我是小li</li>
<li>我是小li</li>
<li>我是小li</li>
</ul>
<ol>
</ol>
<script src="../bootstrap/js/jquery-3.5.1/jquery-3.5.1.min.js"></script>
<script>
// 1、单个事件注册
// $(function () {
// $('div').click(function () {
// $(this).css('background', 'red')
// })
// })
// 事件处理 on
// $('div').on({
// mouseenter: function () {
// $(this).css('background', 'red')
// },
// click: function () {
// $(this).css('background', 'skyblue')
// },mouseleave: function () {
// $(this).css('background', 'blue')
// }
// })
// 函数用空格隔开
// $('div').on('mouseenter mouseleave', function () {
// $(this).toggleClass('current')
// })
// 2、on可以实现事件委托
// click 是绑定在 ul 身上的 但是触发的对象是ul里面的 小li
$('ul').on('click', 'li', function () {
alert(11)
})
//3、on可以给动态创建的元素绑定事件
// $('ol li').click(function () {
// alert(11)
// })
$('ol').on('click', 'li', function () {
alert(11)
})
const li = $('<li>我是后面创建的小li</li>')
$('ol').append(li)
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0
}
ul {
list-style: none
}
.box {
width: 600px;
margin: 100px auto;
border: 1px solid #000;
padding: 20px;
}
textarea {
width: 450px;
height: 160px;
outline: none;
resize: none;
}
ul {
width: 450px;
padding-left: 80px;
}
ul li {
line-height: 25px;
border-bottom: 1px dashed #cccccc;
display: none;
}
input {
float: right;
}
ul li a {
float: right;
}
</style>
</head>
<body>
<div class="box" id="weibo">
<span>微博发布</span>
<textarea name="" class="txt" cols="30" rows="10"></textarea>
<button class="btn">发布</button>
<ul>
</ul>
</div>
<script src="../bootstrap/js/jquery-3.5.1/jquery-3.5.1.min.js"></script>
<script>
$(function () {
// 1、点击发布按钮，动态创建一个小li，放入文本框的内容和删除按钮，并且添加到ul 中
$(".btn").on("click", function () {
const li = $("<li></li>")
// jquery 里面 使用 html 赋值
li.html($(".txt").val() + "<a href='javascript:;'>删除</a>")
$("ul").prepend(li)
li.slideDown()
$(".txt").val("")
})
// 2、点击删除按钮 ，可以删除留言
$('ul').on('click', 'a', function () {
// alert(11)
$(this).parent('li').slideUp(function () {
$(this).remove()
})
})
})
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div {
width: 200px;
height: 200px;
background-color: skyblue;
}
</style>
</head>
<body>
<div></div>
<ul>
<li>我们都是好孩子</li>
<li>我们都是好孩子</li>
<li>我们都是好孩子</li>
</ul>
<p>我是p</p>
<script src="../bootstrap/js/jquery-3.5.1/jquery-3.5.1.min.js"></script>
<script>
$(function () {
$('div').on({
click: function () {
console.log('我点击了')
},
mouseover: function () {
console.log('鼠标经过了')
}
})
$('ul').on('click', 'li', function () {
alert(11)
})
// 1、事件解除 off
// $('div').off('click') // 括号为空时 解除所有绑定事件
$('div').off('click') // 解除了 点击事件
$('ul').off('click', 'li')
// 2、one() 但是它只能触发事件一次
$('p').one('click', function () {
alert(11) //只触发一次
})
})
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div {
width: 200px;
height: 200px;
background-color: skyblue;
}
</style>
</head>
<body>
<div></div>
<input type="text">
<script src="../bootstrap/js/jquery-3.5.1/jquery-3.5.1.min.js"></script>
<script>
$(function () {
$('div').on('click', function () {
alert(11)
})
// 自动触发事件
//1、元素.事件()
// $('div').click()
//2、元素.trigger(''事件)
// $('div').trigger('click')
$('input').trigger('focus')
//3、元素.triggerHandler(''事件) 不会触发元素的默认行为
// $('div').triggerHandler('click')
$('input').on('focus', function () {
$(this).val('你好吗')
})
// $('input').triggerHandler('focus')
})
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script src="../bootstrap/js/jquery-3.5.1/jquery-3.5.1.min.js"></script>
<script>
$(function () {
// const targetObj = {}
// const obj = {
// id: 1,
// name: 'andy'
// }
//
// // $.extend(target, obj)
// $.extend(targetObj, obj)
// console.log(targetObj)
// const targetObj = {
// id: 2
// }
// const obj = {
// id: 1,
// name: 'andy'
// }
//
// // $.extend(target, obj)
// $.extend(targetObj, obj)
// console.log(targetObj) // 会覆盖 targetObj 里面原来的数据
const targetObj = {
id: 2,
msg: {
sex: '男'
}
}
const obj = {
id: 1,
name: 'andy',
msg: {
age: 18
}
}
// $.extend(target, obj)
// $.extend(targetObj, obj)
// console.log(targetObj) // 会覆盖 targetObj 里面原来的数据
// // 浅拷贝 把原来对象里面的复杂数据类型地址拷贝给目标对象
// targetObj.msg.age = 20
// console.log(targetObj)
// console.log(obj)
//深拷贝 把里面 的数据完全复制一份给目标对象，如果里面有不冲突的属性，会合并到一起
$.extend(true,targetObj, obj)
// console.log(targetObj) // 会覆盖 targetObj 里面原来的数据
targetObj.msg.age = 20
console.log(targetObj)
console.log(obj)
})
</script>
<div></div>
<span></span>
<script src="../bootstrap/js/jquery-3.5.1/jquery-3.5.1.min.js"></script>
<script>
$(function () {
function $(ele) {
return document.querySelector(ele)
}
console.log($('div'))
// 1、$符号冲突了 我们就使用 jQuery
jQuery.each()
// 2、让 jQuery 释放对$ 控制权 让用户自己绝定
let s = jQuery.noConflict()
console.log(s('span'))
})
</script>
</body>
</html>
返回列表
评论