jQuery 中拼接HTML

最新推荐文章于 2024-04-01 16:53:37 发布

Aimyone

最新推荐文章于 2024-04-01 16:53:37 发布

阅读量3.9k

点赞数

分类专栏： JQuery

本文链接：https://blog.csdn.net/qq_36636312/article/details/105712466

版权

JQuery 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

1，引申

** 在记录js中拼接HTML时，想引申一个知识点，关于JS和JQuery之间的区别和关系
我理解的是JQuery是属于JS的，JQuery是JS的一个函数库，引入JQuery之后，可以直接对JQuery的函数进行调用。
补充链接:
1，浅谈JS和jQuery的区别
2，js和jquery的区别

2,代码

1，jQuery 使用class来标记位置，append()动态拼接html
核心代码： $(’.wrap1’).append(htmldm)

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%
//设置无缓存
response.setHeader("progma","no-cache");
response.setHeader("Cache-Control","no-cache");
%>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<link href="/form/layui/css/layui.css" rel="stylesheet" />
		<link href="/form/static/css/base.css" rel="stylesheet" />
		<link href="/form/static/css/index.css" rel="stylesheet" />
		<script src="/form/layui/layui.all.js" type="text/javascript"></script>
		<script src="/form/static/js/jquery-1.11.2.min.js" type="text/javascript"></script>
		<title></title>
	</head>
	<body>
		<div style="padding-top: 10px;">
			<fieldset class="layui-elem-field layui-field-title">
			  <legend>个性化</legend>
			</fieldset>
			<div class="flex wrap margin10">
				
			</div>
			<fieldset class="layui-elem-field layui-field-title">
			  <legend>系统</legend>
			</fieldset>
			<div class="flex wrap1 margin10">

			</div>
		</div>
	</body>
	<script>
		<%--issystem=0 是个性化 issystem=1 是系统--%>
		var list=${list};
		var list = [
			{"num":"1","title":"事件1","color":"#FF9800"},
			{"num":"2","title":"事件2","color":"#49D073"},
			{"num":"3","title":"事件3","color":"#567C72"},
			{"num":"4","title":"事件4","color":"#8765B9"},
			{"num":"5","title":"事件5事件5事件5事件5","color":"#10893A"},
			{"num":"6","title":"事件2","color":"#49D073"},
			{"num":"7","title":"事件3","color":"#567C72"},
			{"num":"8","title":"事件4","color":"#8765B9"},
			{"num":"9","title":"事件5事件5事件5事件5","color":"#10893A"},
		]
		
		
	这是拼接完成之后的代码样式
        // <div class='flex item'>
			// 	<div class='num colorf'>0</div>
			// 	<div class='title flex flex-align-center' οnclick='enterForm(0,'填报表单')'>填报表单
			// 	</div>
		// 	</div>

		for(var i=0;i<list.length;i++){
			var htmldm = "<div class='flex item'><div class='num colorf'>"+list[i].num+"</div><div class='title flex flex-align-center' οnclick='enterForm(0,\""+list[i].title+"\")'>"+list[i].title+"</div></div>"
			$('.wrap').append(htmldm)
		}

        for(var i=0;i<list.length;i++){
            var htmldm = "<div class='flex item'><div class='num colorf' style='margin-left: 10px'>"+list[i].num+"</div><div class='title flex flex-align-center' οnclick='enterForm(1,\""+list[i].title+"\")'>"+list[i].title+"</div></div>"
            $('.wrap1').append(htmldm)
        }
		
		$(function(){
			var colors = ["color1", "color2", "color3", "color4", "color5", "color6", "color7", "color8"];
			var titlebacks = ["titlebackground1","titlebackground2","titlebackground3","titlebackground4","titlebackground5","titlebackground6","titlebackground7","titlebackground8"];
			var backs = ["background1","background2","background3","background4","background5","background6","background7","background8"];
	     var containers = $('.wrap .title');
			var backconts = $('.wrap .num');
        for(var i= 0, j=0; i<containers.length; i++,j++){
          if(j==colors.length){
            j=0;
           }
        containers.eq(i).addClass(colors[j]);
			containers.eq(i).addClass(titlebacks[j]);
			backconts.eq(i).addClass(backs[j]);
        }

            var containers1 = $('.wrap1 .title');
            var backconts1= $('.wrap1 .num');
            for(var i= 0, j=0; i<containers1.length; i++,j++){
                if(j==colors.length){
                    j=0;
                }
                containers1.eq(i).addClass(colors[j]);
                containers1.eq(i).addClass(titlebacks[j]);
                backconts1.eq(i).addClass(backs[j]);
            }
		})

		function enterForm(issystem,modeltype) {
            window.location.href="/jsqdCrfForm/formConfig?issystem="+issystem+"&modeltype="+modeltype;
        }
		
	</script>
</html>

页面：
在这里插入图片描述

3，注意事项

1，οnclick=‘enterForm(0,‘填报表单’)’，οnclick=‘XXXXX’,里卖的点击事件是要引号引起来的
2，enterForm函数里面的参数值list[i].title因为是获取值，不可放在双引号里面，这样的话会被读成字符串，不能读取里面的值
3，οnclick=‘enterForm(0,‘填报表单’)’ 对于enterForm函数里面的参数值如果传递的是数字类型则不用引号，如果传递的参数是字符串类型则需要加上引号

标记：后期补充另一种js拼接HTML

Aimyone

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
jQuery 中拼接HTML

**1，引申** 在记录js中拼接HTML时，想引申一个知识点，关于JS和JQuery之间的区别和关系我理解的是JQuery是属于JS的，JQuery是JS的一个函数库，引入JQuery之后，可以直接对JQuery的函数进行调用。补充链接:1，浅谈JS和jQuery的区别2，js和jquery的区别2,代码1，jQuery 使用class来标记位置，append()动态拼接h...
复制链接

扫一扫