art-template和jQuey模板引擎art-template 模板引擎导入 cdn链接下载到本地书写模板

art-template 模板引擎

art-template，模板引擎的一种，因其高效的渲染效率，而被广泛使用

导入

cdn链接
下载到本地

<script src="https://unpkg.com/art-template@4.13.2/lib/template-web.js"></script>

书写模板

  <script type="text/html" id="tpl">
    这是我的名字 {{ name }}, 这是我的年龄： {{ age }}
  </script>

指定模板和模板数据
```
const html = template('tpl', data);
```

使用innerHTML添加元素

document.getElementById('content').innerHTML = html;

模板语法

输出

{{value}}
{{data.key}}
{{data['key']}}
{{a ? b : c}}
{{a || b}}
{{a + b}}

转义输出

{{@ value }}

条件输出

{{if value}} ... {{/if}}
{{if v1}} ... {{else if v2}} ... {{/if}}

循环输出

{{each target}}    <!-- 外层用each包裹 -->
    {{$index}} {{$value}}  
{{/each}}

过滤器

// 注册过滤器
template.defaults.imports.dateFormat = function(date, format){/*[code..]*/};
template.defaults.imports.timestamp = function(value){return value * 1000};

// 使用过滤器  第一个参数就是date，第二个参数需要传入
{{date | timestamp | dateFormat 'yyyy-MM-dd hh:mm:ss'}}

jQuery

jQuery 特点总结

选择器：可以使用 CSS 选择器来方便地获取和操作 DOM 元素。
DOM 操作：可以快速方便地对页面中的元素进行增删改查等 DOM 操作。
Ajax：提供了方便的 Ajax 封装，可以在页面不刷新的情况下与服务器进行通信。
动画效果：提供了丰富的动画效果和效果定制方法，可以快速实现网页中的各种动画效果。
插件扩展：有丰富的插件，可以为网站添加各种功能，比如图像滑动、弹出框等。

jQuery 封装的DOM 操作

增

创建元素

$('<li')
$('<ul><li><li></li></li></ul>')
$('ul li:last').clone()

增添元素

$("#myList").append($newLi); // #myList最后一个子元素
$("#myList").prepend($newLi);
$("#myList").after($newLi);  // #myList的后一个兄弟元素
$("#myList").before($newLi);

删

// 删除所有子元素
myDiv.empty();

// 从DOM中删除所选元素及其所有子元素
myDiv.remove();

改

内容

$('ele').text()

$('ele').html()
1. 属性
$('ele').attr('', '')

$('ele').attr('')

$('ele').prop('')

$('ele').prop('', true/false)

需要注意的是，.attr() 方法和 .prop() 方法之间的区别在于它们如何处理属性的值。通常来说，.attr() 方法适用于非布尔属性和自定义属性，而 .prop() 方法适用于布尔属性。同时，.attr() 方法返回属性的值，而 .prop() 方法返回属性的布尔值。

样式

// 获取样式
var bgColor = $("#myDiv").css("background-color");
// 修改样式
$("#example").css("color", "red");
$("#example").addclass();
// 如果有多个样式
$("#example").css({
  "color": "red",
  "background": "yellow",
  "font-size": "24px"
});

// 通过函数返回值修改样式
$("#example").css("font-size", function(index, value) {  // 第一个参数是对象索引值，第二个是本来的样式值
  return parseInt(value) + 10 + "px";
});

    
4. 获取父子兄弟节点
    
    ``` js
    // 获取某个元素的父节点
    var parent = $('#myElement').parent();
    
    // 获取某个元素的所有祖先节点
    var ancestors = $('#myElement').parents();

``` js
// 获取某个元素的所有子节点
var children = $('#myElement').children();

// 获取某个元素的某个子节点
var child = $('#myElement').children('.myClass');

    
    ``` js
    // 获取某个元素的前一个兄弟节点
    var prevSibling = $('#myElement').prev();
    
    // 获取某个元素的后一个兄弟节点
    var nextSibling = $('#myElement').next();
    
    // 获取某个元素的所有兄弟节点
    var siblings = $('#myElement').siblings();

查
1. 元素选择器 $('li')
2. 类选择器$('.className')
3. id选择器 $('#id')
4. 属性选择器 $("[attribute=value]")
5. 后代选择器 $("ul li")

绑定事件

原生DOM API里，是不支持事件传参的，但可以通过调用外部函数实现

// 可以通过传递对象{ event1: function1， event2: function2 }绑定多个事件 
$(selector).on(event, childSelector, data, function)

jQuery动画效果

在原生的DOM中，动画效果需要开始结尾状态，jQuery的animate函数，开始就是现在默认的css样式，在参数中传入结束后的css样式，设置持续时间就可以了。

jQuery的animate函数

// duration是持续时间，easing是时间函数
.animate( properties [, duration ] [, easing ] [, complete ] )

常用的动画效果
1. fadeIn([time])：淡入效果，要先把display设为none，动画执行时，display的效果，display改为block，opacity从0变成1
2. fadeOut(): 淡出效果
3. slideUp()：向上滑动隐藏元素。
  
  margin-top/bottom 、 padding/botttom 、 height不断减小，，归于0，恢复，但display为none
4. slideDown()：向下滑动显示元素。
  
  一开始的display要为none，然后，height和margin-top/bottom, padding-top/bottom ，直至完全显示
5. slideToggle()：在显示和隐藏状态之间切换元素。

jQuery插件

jQuery插件其实就是往jQuery对象上挂载方法，实现对应的功能。

插件与依赖不同，插件和框架是绑定的