art-template和jQuey模板引擎

大熊_
158 阅读3分钟

art-template 模板引擎

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

  1. 导入

    • cdn链接
    • 下载到本地
    <script src="https://unpkg.com/art-template@4.13.2/lib/template-web.js"></script>

  2. 书写模板

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

  3. 指定模板和模板数据

    const html = template('tpl', data);

  4. 使用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 特点总结

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

jQuery 封装的DOM 操作

  1. 增

    • 创建元素

      $('<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);

  2. 删

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

  3. 改

    1. 内容

      $('ele').text()

      $('ele').html()

      1. 属性

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

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

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

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

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

    2. 样式

      // 获取样式
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();

  4. 查

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

  5. 绑定事件

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

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

jQuery动画效果

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

  1. jQuery的animate函数

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

  2. 常用的动画效果

    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对象上挂载方法，实现对应的功能。

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

avatar
文章
阅读
粉丝