目录

前端JS方法

前端JS方法是指前端框架提供的常用的JavaScript工具方法。
$summer对象提供了对HTML DOM和常用js方法，不涉及任何原生服务的调用。这是有别于summer对象的（summer对象是一个提供所有原生服务的对象）

基础常量

$summer.os

  • 描述：OS类型常量
  • 用法：$summer.os
  • 返回值：当前OS类型
  • 示例：
    1.   var platform = $summer.os;
    2.   if(platform == "android"){
    3.       // 执行android特殊代码
    4.   } else if(platform == "ios"){
    5.       // 执行ios特殊代码
    6.   } else if(platform == "pc"){
    7.       // 执行pc特殊代码
    8.   }

窗口处理

$summer.fixStatusBar(el)

  • 描述：在页面全屏显示情况下，设置状态条不遮挡应用页面。注意：前提是页面全屏显示，也就是需要在config.xml文件中勾选【页面全屏显示】，且页面全屏显示仅IOS8、Android6及以上版本支持
  • 用法：.fixStatusBar(el)
  • 参数：
    • el(类型：Element)：DOM元素，其中header为页面中header区域的元素id
  • 示例：
    1. $summer.fixStatusBar($summer.byId('header')); //header为页面中header区域的元素id

对象处理

$summer.trim()

  • 描述：去掉字符串首尾空格
  • 用法：trim(str)
  • 参数： str (类型：String)
  • 返回值：去除首尾空格的字符串
  • 示例：
    1.   $summer.trim('   abc  123   ');

$summer.trimAll()

  • 描述：去掉字符串所有空格
  • 用法：trimAll(str)
  • 参数：str (类型：String)
  • 返回值：去除所有空格的字符串
  • 示例：
    1. $summer.trimAll('  abc 123  ');

$summer.isArray()

  • 描述：判断对象是否为数组
  • 用法：.isArray(obj)
  • 参数： obj (类型：Object)
  • 返回值：Boolean
  • 示例：
    1. $summer.isArray([1,2,3]);  // => true
    2. $summer.isArray('123')  // => false

$summer.jsonToStr()

  • 描述：将标准的JSON 对象转换成字符串格式
  • 用法：. jsonToStr (json)
  • 参数：json(类型：JSON)
  • 返回值：转换后的字符串
  • 示例：
    1. var json = {a:111, b:222};
    2. $summer.jsonToStr(json); // => "{"a":111,"b":222}"

$summer.strToJson()

  • 描述：将JSON字符串转换成JSON对象
  • 用法：. strToJson (str)
  • 参数：str(类型：String)：JSON字符串
  • 返回值：JSON对象
  • 示例：
    1. var a = '{"a":"111", "b":"222"}';
    2. $summer.strToJson(a); // => Object {a: "111", b: "222"}

DOM元素

$summer.addEvt()

  • 描述：为DOM元素绑定事件
  • 用法：.addEvt(el, name, fn, useCapture)
  • 参数：
    1. el (类型：Element)：DOM元素
    2. name (类型：String)：事件类型
    3. fn (类型：Function)：事件回调
    4. useCapture (类型：Boolean)：事件捕获，默认为 false
  • 示例：
    1. $summer.addEvt(element, 'click',function(){
    2. //do something
    3. });

$summer.rmEvt()

  • 描述：移除DOM元素绑定的事件
  • 用法：.rmEvt(el, name, fn, useCapture)
  • 参数：
    1. el (类型：Element)：DOM元素
    2. name (类型：String)：事件类型
    3. fn (类型：Function)：事件回调
    4. useCapture (类型：Boolean)：事件捕获，默认为 false
  • 示例：
    1. $summer.rmEvt(element, 'click', function(){
    2. //do something
    3. });

$summer.one()

  • 描述：为DOM元素绑定事件，事件只执行一次
  • 用法：.one(el, name, fn, useCapture)
  • 参数：
    1. el (类型：Element)：DOM元素
    2. name (类型：String)：事件类型
    3. fn (类型：Function)：事件回调
    4. useCapture (类型：Boolean)：事件捕获，默认为 false
  • 示例：
    1. $summer.one(element, 'click', function(){
    2. //do something
    3. });

$summer.dom()

  • 描述：选择首个匹配的DOM元素
  • 用法：
    1、 $summer.dom(el, selector)
  • 参数：
    1. el (类型：Element)：DOM元素
    2. selector (类型：Selector)：CSS 选择器
    3. 返回值： 返回首个匹配的DOM元素

  • 示例：

    1. $summer.dom(el, '#id');

    2、 $summer.dom(selector)

  • 描述：从document元素开始查找

  • 参数： selector (类型：Selector)：CSS 选择器
  • 返回值：返回首个匹配的DOM元素
  • 示例：
    1. $summer.dom('#id');

$summer.domAll()

  • 描述：选择所有匹配的DOM元素
  • 用法：
    1、 $summer.domAll(el, selector)
  • 从el元素开始查找
  • 参数：
    • el (类型：Element)：DOM元素
    • selector (类型：Selector)：CSS 选择器
  • 返回值： 返回所有匹配的DOM元素
  • 示例：
    1. $summer.domAll(el, '.class');
    2、 $summer.domAll(selector)
  • 从document元素开始查找
  • 参数： selector (类型：Selector)：CSS 选择器
  • 返回值：返回所有匹配的DOM元素
  • 示例：
    1. $summer.domAll('.class');

$summer.byId()

  • 描述：通过Id选择DOM元素
  • 用法：.byId(id)
  • 参数： id(类型：String)：CSS id 字符串
  • 返回值： 返回匹配的DOM元素
  • 示例：
    1. $summer.byId('idStr')

$summer.first()

  • 描述：选择DOM元素的第一个子元素
  • 用法：.first(el, selector)
  • 参数：
    • el (类型：Element)：DOM元素
    • selector (类型：Selector)：CSS 选择器
  • 返回值： 返回DOM元素的第一个子元素
  • 示例：
    1. $summer.first(el,'li');

$summer.first(el)

  • 参数：el (类型：Element)：DOM元素
  • 返回值：返回DOM元素的第一个子元素
  • 示例：
    1. $summer.first(el);

$summer.last()

  • 描述：选择DOM元素的最后一个子元素
  • 用法：.last(el, selector)
  • 参数：
    • el (类型：Element)：DOM元素
    • selector (类型：Selector)：CSS 选择器
  • 返回值： 返回DOM元素的最后一个子元素
  • 示例：
    1. $summer.last(el,'li');

$summer.last(el)

  • 参数： el (类型：Element)：DOM元素
  • 返回值：返回DOM元素的最后一个子元素
  • 示例：
    1. $summer.last(el);

$summer.eq()

  • 描述：选择第几个子元素
  • 用法：.eq(el, index)
  • 参数：
    • el (类型：Element)：DOM元素
    • index (类型：String | Number)：索引值
  • 返回值：根据索引值返回子元素
  • 示例：
    1. $summer.eq(el, 2);
    2. $summer.eq(el, '2');

$summer.not()

  • 描述：根据排除选择器选择子元素
  • 用法：.not(el, selector)
  • 参数：
    • el (类型：Element)：DOM元素
    • selector (类型：Selector)：CSS 选择器
  • 返回值：返回不匹配选择器的所有子元素
  • 示例：
    1. $summer.not(el, '.active');

$summer.prev()

  • 描述：选择相邻的前一个元素
  • 用法：.prev(el)
  • 参数：el (类型：Element)：DOM元素
  • 返回值：返回前一个元素
  • 示例：
    1. $summer.prev(el);

$summer.next()

  • 描述：选择相邻的下一个元素
  • 用法：.next(el)
  • 参数：el (类型：Element)：DOM元素
  • 返回值：返回下一个元素
  • 示例：
    1. $summer.next(el);

$summer.contains()

  • 描述：判断某一个元素是否包含目标元素
  • 用法：.contains(parentEl, targetEl)
  • 参数：
    • parentEl (类型：Element)：DOM元素
    • targetEl (类型：Element)：DOM元素
  • 返回值：返回布尔值（true 或 false）
  • 示例：
    1. $summer.contains(parentEl, targetEl);

$summer.closest()

  • 描述：根据选择器匹配最近的父元素
  • 用法：.closest(el, selector)
  • 参数：
    • el (类型：Element)：DOM元素
    • selector (类型：Selector)：CSS 选择器
  • 返回值：根据选择器匹配最近的父元素
  • 示例：
    1. $summer.closest(el, '.parent');

$summer.remove()

  • 描述：移除DOM元素
  • 用法：.remove(el)
  • 参数：el (类型：Element)：DOM元素
  • 示例：
    1. $summer.remove(el);

$summer.attr()

  • 描述：获取或设置DOM元素的属性
  • 用法：
    1、 $summer.attr(el, name, value)
  • 设置属性值
  • 参数：
    • el (类型：Element)：DOM元素
    • name (类型：String)：属性名
    • value (类型：String)：属性值
  • 返回值： 返回当前DOM元素
  • 示例：
    1. $summer.attr(el,'data','123');

2、 $summer.attr(el, name)

  • 获取属性值
  • 参数：
    • el (类型：Element)：DOM元素
    • name (类型：String)：属性名
  • 返回值：返回属性值
  • 示例：
    1. $summer.attr(el,'data');

$summer.removeAttr()

  • 描述：移除DOM元素的属性
  • 用法：.removeAttr(el, name)
  • 参数：
    • el (类型：Element)：DOM元素
    • name (类型：String)：属性名
  • 示例：
    1. $summer.removeAttr(el, 'data')

$summer.hasCls()

  • 描述：DOM元素是否含有某个className
  • 用法：.hasCls(el, cls)
  • 参数：
    • el (类型：Element)：DOM元素
    • cls (类型：String)：className
  • 返回值：Boolean
  • 示例：
    1. $summer.hasCls(el, 'classname'); // => true

$summer.addCls()

  • 描述：为DOM元素增加className
  • 用法：.addCls(el, cls)
  • 参数：
    • el (类型：Element)：DOM元素
    • cls (类型：String)：className
  • 返回值：返回当前DOM元素
  • 示例：
    1. $summer.addCls(el, 'newclass');

$summer.removeCls()

  • 描述：移除指定的className
  • 用法：.removeCls(el, cls)
  • 参数：
    • el (类型：Element)：DOM元素
    • cls (类型：String)：className
  • 返回值：返回当前DOM元素
  • 示例：
    1. $summer.removeCls(el, 'newclass');

$summer.toggleCls()

  • 描述：切换指定的className
  • 用法：.toggleCls(el, cls)
  • 参数：
    • el (类型：Element)：DOM元素
    • cls (类型：String)：className
  • 返回值：返回当前DOM元素
  • 示例：
    1. $summer.toggleCls(el, 'display');

$summer.val()

  • 描述：获取或设置常用 Form 表单元素的 value 值
  • 用法：.val(el, val)
    • 设置表单元素value值
  • 参数：
    • el (类型：Element)：DOM元素
    • val (类型：String)：想设置的value值
  • 返回值：返回当前DOM元素
  • 示例：
    1. $summer.val(el,'123');

$summer.val(el)

  • 获取表单元素value值
  • 参数：el (类型：Element)：DOM元素
  • 返回值：返回表单元素的value值
  • 示例：
    1. $summer.val(el);

$summer.prepend()

  • 描述：在DOM元素内部，首个子元素前插入HTML字符串
  • 用法：.prepend(el, html)
  • 参数：
    • el (类型：Element)：DOM元素
    • html (类型：htmlString)：HTML字符串
  • 返回值：返回当前DOM元素
  • 示例：
    1. $summer.prepend(el,'<li>hello</li>');

$summer.append()

  • 描述：在DOM元素内部，最后一个子元素后面插入HTML字符串
  • 用法：.append(el, html)
  • 参数：
    • el (类型：Element)：DOM元素
    • html (类型：htmlString)：HTML字符串
  • 返回值：返回当前DOM元素
  • 示例：
    1. $summer.append(el,'<li>hello</li>');

$summer.before()

  • 描述：在DOM元素前面插入HTML字符串
  • 用法：.before(el, html)
  • 参数：
    • el (类型：Element)：DOM元素
    • html (类型：htmlString)：HTML字符串
  • 返回值：返回当前DOM元素
  • 示例：
    1. $summer.before(el,'<h1>world</h1>');

$summer.after()

  • 描述：在DOM元素后面插入HTML字符串
  • 用法：.after(el, html)
  • 参数：
    • el (类型：Element)：DOM元素
    • html (类型：htmlString)：HTML字符串
  • 返回值：返回当前DOM元素
  • 示例：
    1. $summer.after(el,'<h1>world</h1>');

$summer.html()

  • 描述：获取或设置DOM元素的innerHTML
  • 用法：.html(el, html)
  • 参数：
    • el (类型：Element)：DOM元素
    • html (类型：htmlString)：HTML字符串
  • 返回值：返回当前DOM元素
  • 示例：
    1. $summer.html(el,'<h1>world</h1>');

$summer.html(el)

  • 获取innerHTML
  • 参数：el (类型：Element)：DOM元素
  • 返回值：返回当前DOM元素的innerHTML
  • 示例：
    1. $summer.html(el);

$summer.text()

  • 描述：设置或者获取元素的文本内容
  • 用法：. text (el, txt)
  • 参数：
    • el(类型：Element)：DOM元素
    • txt(类型：String)：字符串
  • 返回值：当前DOM元素
  • 示例：
    1. var a = document.getElementById('a');
    2. $summer.text(a, 'text'); // => <a id=''a''>text</a>

$summer.text(el)

  • 参数：el(类型：Element)：DOM元素
  • 返回值：DOM元素的文本内容
  • 示例：
    1. <a id='a'>text</a>
    2. var a = document.getElementById('a');
    3. $summer.text(a); // => text

$summer.offset()

  • 描述：获取元素在页面中的位置与宽高，(此为距离页面左侧及顶端的位置，并非距离窗口的位置)
  • 用法：. offset (el)
  • 参数：el(类型：Element)：DOM元素
  • 返回值：该元素的位置（left,top）及宽高（width,height）,返回值是json类型的，包括l,t,w,h属性
  • 示例：
    1. var offset = $summer.offset(el);
    2. var left = offset.l;
    3. var top = offset.t;
    4. var width = offset.w;
    5. var height = offset.h;

$summer.css()

  • 描述：设置所传入的DOM元素的样式，可传入多条样式
  • 用法：.css (el, css)
  • 参数：
    • el(类型：Element)：DOM元素
    • css(类型：String)：想要设置的CSS样式
  • 示例：
    1. $summer.css(el,'width:800px;border:1px solid red');

$summer.cssVal()

  • 描述：获取指定DOM元素的指定属性的完整的值，如800px
  • 用法：. cssVal (el, prop)
  • 参数：
    • el(类型：Element)：DOM元素
    • prop(类型：String)：CSS属性
  • 返回值：完整的CSS属性值
  • 示例：
    1. $summer.cssVal(el,'width'); // => 800px
文档更新时间: 2018-05-15 15:28