|--转 jquery动态添加元素后,元素的事件无效(已解决)
1.先点击“动态添加”按钮,把a标签动态生成出来。
2.再点击a标签(百度),查看控制台。
$("#xinjia").on(click,#a1,function(){
console.log(123);
动态添加元素后,元素的事件无效(已解决)
基于jquery1.9以上版本作的解决方案
先贴一段正常逻辑写的代码
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="jquery-3.3.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
//b2的单击事件,这里面动态添加了一个a元素内容为百度,id为a1
$("#b2").on(click,function(e) {
var a = $("<a></a>");
a.attr("id","a1");
a.html("百度");
$("#xinjia").html("");
$("#xinjia").append(a);
});
//id为a1的元素单击事件
$("#a1").on(click,function(){
console.log(123);
});
})
</script>
</head>
<body>
<a id="ceshi">ceshi</a>
<button id="b2">动态添加</button>
<div id="xinjia">
</div>
</body>
</html>
前端页面操作流程:
1.先点击“动态添加”按钮,把a标签动态生成出来。
2.再点击a标签(百度),查看控制台。
结果:控制台啥也没有输出
因为这样写是有问题的。所有需要修改一下。我先把我修改后的代码贴出来。后面解释
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="jquery-3.3.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#b2").on(click,function(e) {
var a = $("<a></a>");
a.attr("id","a1");
a.html("百度");
$("#xinjia").html("");
$("#xinjia").append(a);
});
$("#xinjia").on(click,a,function(){
console.log(123);
});
})
</script>
</head>
<body>
<a id="ceshi">ceshi</a>
<button id="b2">动态添加</button>
<div id="xinjia">
</div>
</body>
</html>
前端页面操作流程:
1.先点击“动态添加”按钮,把a标签动态生成出来。...
|--原 关于js的console.log在异步async和Promise的是否会执行的问题
//20240930
async function autoScrollDown1500px(page){
console.log("autoScrollDown1500px start")
const startTime = new Date();
await page.evaluate(async () => {
console.log("这里是await page.evaluate(async ()内部")
await new Promise((resolve, reject) => {
console.log("这里是await new Promise 内部")
var totalHeight = 0;
var distance = 1500;
var timer = setInterval(() => {
console.log("这里是await new Promise里调研setInterval()")
var scrollHeight = document.body.scrollHeight;
window.scrollBy(0, distance);
totalHeight += distance;
if(totalHeight >= scrollHeight){
clearInterval(timer);
resolve();
}
}, 200);
});
});
const endTime = new Date();
const executionTime = endTime - startTime;
console.log("这里间隔的时间毫秒数是"+executionTime)
console.log("autoScrollDown1500px end")
}
browser = await puppeteer.launch({
args:['--no-sandbox'],//不是沙箱模式
dumpio:false,//DevTools true为打开开发工具
headless: isheadless, //是否运行在浏览器headless模式,true为不打开浏览器执行,默认为true
// ignoreHTTPSErrors : true
});
await wait(2000);//等待2秒,等待浏览器打开 20240917
page = await browser.newPage();
page.setDefaultNavigationTimeout( 60000 );
await page.setViewport({
width: 1280,
height: 900,
})
target_url = 'https://search.bilibili.com/all?keyword=%E6%8D%9F%E7%9B%8A%E8%A1%A8%E5%AE%A1%E8%AE%A1&from_source=webtop_search&spm_id_from=333.999&search_source=5'
await page.goto(target_url,{
waitUntil:'networkidle2' //等待页面不动了,说明加载完毕了
});
await autoScrollDown1500px(page);//滚动页面到底部,一次滚动1500px 20240930这样的代码执行的结果是什么,打印出的结果是什么 20241001...
|--转 如何给div块或者给某个DOM元素赋值
两种办法:
1、用js原生办法:
document.getElementById(“div”).innerHTML=“欢迎您!”;
也可以把这句话拆开:
var content = document.getElementById(“hh”);
content.innerHTML=“欢迎您!”;
针对新手注意一点细节:①innerHTML后面跟的是"="符号,一定注意不要写成(),不然会提示innerHTML不是函数的错误
此外,document.getElementById(“hh”).innerText=“欢迎您!”;也能达到效果
2、用jQuery方法:
$(“h1”).html(“欢迎您!”); 或者 $(“h1”).text(“欢迎您!”);这两种方式都能达到效果。
注意给具体元素赋值时的命名:直接给元素标签赋值:$( " h 1 " ) , $ ("h1"),$("h1"),$(“div”) ...
|--转 video.js播放m3u8视频
video.js播放m3u8视频_小龙在山东的技术博客_51CTO博客
m3u8 是一种基于HTTP Live Streaming(HLS)文件视频格式,它主要是存放整个视频的基本信息和分片(Segment)组成。目前 由 Apple.inc 率先提出的 HLS 协议在 Mac 的 Safari 上原生支持。
video.js是H5视频播放器,支持播放m3u8视频。这里做了一个简易的m3u8视频地址测试页: ...