前端程序的一个公共方法库,包括:domReady、children、append、find、jsonFormData、setUrlParam等公共方法。
npm i @hoangcung1804npm/ipsum-harum-animi
代码中先引入后正常调用其包括的方法
//根据实际需要引入方法
import {domReady,jsonFormData} from '@hoangcung1804npm/ipsum-harum-animi';
HTML页面加载完成后触发执行
代码示例
import {
domReady
} from '@hoangcung1804npm/ipsum-harum-animi'
import xqTabForm from "./xq-tab-form";
domReady(() => {
xqTabForm()
})
HTML网页窗口加载完成后触发执行
代码示例
import {
windowReady
} from '@hoangcung1804npm/ipsum-harum-animi'
import xqTabForm from "./xq-tab-form";
windowReady(() => {
xqTabForm()
})
HTML网页元素向上缩起(隐藏元素)
代码示例
import {
slideUp
} from '@hoangcung1804npm/ipsum-harum-animi'
const testElement=document.querySelector('#test')
//#test元素将被隐藏(向上缩小直到高度为0)
slideUp(testElement)
slideUp(testElement,500)//可以设置隐藏动画持续的时间
HTML网页元素向下展示(显示元素)
代码示例
import {
slideDown
} from '@hoangcung1804npm/ipsum-harum-animi'
const testElement=document.querySelector('#test')
//#test元素将被向下展示出来(高度为元素能显示完的高度)
slideDown(testElement)
slideDown(testElement,500)//可以设置向下展示动画持续的时间
HTML网页元素显示与隐藏切换,显示变隐藏,隐藏会变显示
代码示例
import {
slideToggle
} from '@hoangcung1804npm/ipsum-harum-animi'
const testElement=document.querySelector('#test')
slideToggle(testElement)
slideToggle(testElement,500)//可以设置动画持续的时间
返回HTML元素匹配选择器的子元素数组
代码示例
import {
children
} from '@hoangcung1804npm/ipsum-harum-animi'
const testElement=document.querySelector('#test')
//返回#test下匹配#t1选择器的子元素数组
children(testElement,'#t1')
返回HTML元素匹配选择器的一个父元素
代码示例
import {
parent
} from '@hoangcung1804npm/ipsum-harum-animi'
const testElement=document.querySelector('#test')
//返回#test下匹配#t1选择器的一个父元素
parent(testElement,'#t1')
返回HTML元素匹配选择器的父元素数组
代码示例
import {
parents
} from '@hoangcung1804npm/ipsum-harum-animi'
const testElement=document.querySelector('#test')
//返回#test下匹配#t1选择器的父元素数组
parents(testElement,'#t1')
返回HTML元素匹配选择器的前面相邻元素数组
代码示例
import {
prev
} from '@hoangcung1804npm/ipsum-harum-animi'
const testElement=document.querySelector('#test')
//返回#test下匹配#t1选择器的前面相邻元素数组
prev(testElement,'#t1')
返回HTML元素匹配选择器的后面相邻元素数组
代码示例
import {
next
} from '@hoangcung1804npm/ipsum-harum-animi'
const testElement=document.querySelector('#test')
//返回#test下匹配#t1选择器的后面相邻元素数组
next(testElement,'#t1')
在HTML元素内部最后面添加元素(字符串形式表示)
代码示例
import {
append
} from '@hoangcung1804npm/ipsum-harum-animi'
const testElement=document.querySelector('#test')
//返回#test元素内部最后面添加<p>添加的元素</p>
append(testElement,'<p>添加的元素</p>')
在HTML元素内部最前面添加元素(字符串形式表示)
代码示例
import {
prepend
} from '@hoangcung1804npm/ipsum-harum-animi'
const testElement=document.querySelector('#test')
//返回#test元素内部最前面添加<p>添加的元素</p>
prepend(testElement,'<p>添加的元素</p>')
在HTML元素前面添加元素(字符串形式表示)
代码示例
import {
before
} from '@hoangcung1804npm/ipsum-harum-animi'
const testElement=document.querySelector('#test')
//返回#test元素前面添加<p>添加的元素</p>
before(testElement,'<p>添加的元素</p>')
在HTML元素后面添加元素(字符串形式表示)
代码示例
import {
after
} from '@hoangcung1804npm/ipsum-harum-animi'
const testElement=document.querySelector('#test')
//返回#test元素后面添加<p>添加的元素</p>
after(testElement,'<p>添加的元素</p>')
查找指定选择器的HTML元素数组
代码示例
import {
find
} from '@hoangcung1804npm/ipsum-harum-animi'
//返回所有p标签元素数组
find('p')
查找指定选择器的一个HTML元素
代码示例
import {
findOne
} from '@hoangcung1804npm/ipsum-harum-animi'
//返回一个p标签元素
findOne('p')
将指定的表单填写的数组转为json格式
代码示例
import {
jsonFormData
} from '@hoangcung1804npm/ipsum-harum-animi'
const form=findOne('#form1')
const json=jsonFormData(form)