jquery动态添加内容

Posted 2021-04-08 辅助园地

前几天，修改我的局域网教学系统e-teach，需要用到动态添加视频、图片、文字等内容，并且设置好css。

首先，使用jquery来设置动态添加内容。举个“栗子”：

很多同学上传了视频文件，但是不确定有多少个同学上传了视频，那么我想把它们都在网页上显示出来，就不能使用静态页面了，必须使用js动态添加。

当然，前提条件是上传时候，相应的数据都上传到服务器端的数据库了。

下面，来做个动态添加视频的jquery例子吧

（一）采用h5来添加视频

2、在网页上添加

 <link href="js\video-js-5.11.4\video-js.css" rel="Stylesheet" />

<script ></script>

3、添加视频文件

<div class="main-i" id="mysample">

<div class="main-i-row">

 <video id="sample_1" class="video-js vjs-default-skin" controls preload="auto" poster="images/img1.jpg" width="300px" height="120px" data_setup="">

            <source type="video/mp4"></source>

            </video>

</div>

</div>

注意视频文件的尺寸在<video>元素中设置，本例中设置为width="300px" height="120px" ,poster表示静态时视频默认图片，其它属性选默认。

这样，视频文件就可以显示了。如图：

（二）使用jquery动态添加

假设视频文件已上传到服务器，并且数据库中已有相应记录（相关操作都可以通过jquery的ajax完成，在后面文章中会将ajax操作详细说明）。数据如下：

视频文件在video下，文件名通过ajax已读取，是video1.mp4。

那么用jquery动态装入视频的操作分为以下几步：

1、通过id或class取得div

id取得--$("#myid")

class取得---$(".myclass")

2、清除div里原有的内容，以id为例

$("#myid").html("")

3、添加现有的内容

$("myid").html(

"<div class='main-i' >"+

" <video id='sample_1' class='video-js vjs-default-skin' controls preload='auto' poster='images/img1.jpg' width='300px' height='120px' data_setup=''>"+

" <source src='video/video1.mp4 ' type='video/mp4'></source>"

+"</div>"

)

4、合在一起的代码如下：

$(function(){

$("#myid").html("")

$("myid").html(

"<div class='main-i' >"+

" <video id='sample_1' class='video-js vjs-default-skin' controls preload='auto' poster='images/img1.jpg' width='300px' height='120px' data_setup=''>"+

" <source src='video/video1.mp4 ' type='video/mp4'></source>"

+"</div>"

)

})

5、说明一下，如果iis环境下，需要给“MIME头“添加类型mp4，因为iis默认没有mp4类型。如图添加：

（三）添加的内容样式只需要在css中设置好即可，如第二步内容，则只需设置

.main-i就可以取得自己想要的结果。

（四）添加多个文件或文本，则只需加个循环遍历下从服务器得到的数据就可以了。

结语：jquery是对js的封装，在js中相对比复杂的操作在jquery里就显得轻松多了