|--转 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视频地址测试页: ...