332 lines
16 KiB
HTML
332 lines
16 KiB
HTML
<!DOCTYPE html>
|
||
<html>
|
||
|
||
<head>
|
||
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
|
||
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
|
||
<link href="/jscss/style.css" rel="stylesheet" type="text/css" />
|
||
<script type="text/javascript" charset="utf-8" src="/jscss/theme.js"></script>
|
||
<style>
|
||
#class1 {
|
||
border: 1px solid #cccccc;
|
||
padding: 0.2em 0.5em;
|
||
margin: 1em;
|
||
transition: all 0.5s;
|
||
}
|
||
</style>
|
||
</head>
|
||
|
||
<body>
|
||
<blockquote>dom方法</blockquote>
|
||
dom单个元素，无null。doms多个元素，无[]。<br />
|
||
remove 删除obj单个或arr多个。<br />
|
||
eq 获取n号元素。<br />
|
||
find 选择器获取子孙元素。
|
||
<a class="btn" onclick="console.log($5(this).children(1))">child子元素<i>A</i><i>B</i></a>
|
||
<a class="btn" onclick="console.log($5('blockquote').eq(0))">第1个元素</a>
|
||
<a class="btn" onclick="console.log($5('.xp', this))"><span class="xp">xpath</span>下任意元素</a>
|
||
<a class="btn" onclick="console.log($5(this).find('.xp'))"><span class="xp">x<span class="xp">xpath</span></span>选择器元素</a>
|
||
<a class="btn" onclick="$5(this).remove()">删除元素</a>
|
||
<a class="btn" onclick="$5(document).setstyle('ciy-xxx', '.btn{color:red;}')">添加样式表</a>
|
||
<br /><br />
|
||
<blockquote>clas链</blockquote>
|
||
<div id="class1">class效果</div>
|
||
<a class="btn" onclick="$5('#class1').addClass('rad').addClass('cccc')">add添加</a>
|
||
<a class="btn" onclick="$5('#class1').removeClass('rad')">remove移除</a>
|
||
<a class="btn" onclick="$5('#class1').toggleClass('rad')">toggle切换</a>
|
||
<a class="btn" onclick="console.log($5('#class1').hasClass('rad'))">has存在</a>
|
||
<br /><br />
|
||
<blockquote>attr方法</blockquote>
|
||
get，支持stirng和json
|
||
<a class="btn" data-cc="1" onclick="console.log($5(this).attr('data-cc'))">有属性</a>
|
||
<a class="btn" data-cc onclick="console.log($5(this).attr('data-cc'))">属性没有值</a>
|
||
<a class="btn" onclick="console.log($5(this).attr('data-cc'))">无属性</a>
|
||
<br />
|
||
set,支持string和json。null为删除
|
||
<a class="btn" id="objattr" onclick="$5(this).attr('data-cc','ciy')">写str</a>
|
||
<a class="btn" onclick="$5('#objattr').attr('data-cc',{sd:3,sf:4})">写obj</a>
|
||
<a class="btn" onclick="$5('#objattr').attr('data-cc',[{sd:3},{sf:4}])">写arr</a>
|
||
<a class="btn" onclick="$5('#objattr').attr('data-cc',false)">写bool</a>
|
||
<a class="btn" onclick="$5('#objattr').attr('data-cc',3.4)">写int</a>
|
||
<a class="btn" onclick="$5('#objattr').attr('data-cc',null)">删除属性</a>
|
||
<a class="btn" onclick="console.log($5('#objattr').attr('data-cc'))">读取</a>
|
||
<br />
|
||
hasattr
|
||
<a class="btn" data-cc="null" onclick="console.log($5(this).hasattr('data-cc'))">值null</a>
|
||
<a class="btn" data-cc="0" onclick="console.log($5(this).hasattr('data-cc'))">值0</a>
|
||
<a class="btn" data-cc="1" onclick="console.log($5(this).hasattr('data-cc'))">值1</a>
|
||
<a class="btn" data-cc="true" onclick="console.log($5(this).hasattr('data-cc'))">值true</a>
|
||
<a class="btn" data-cc="false" onclick="console.log($5(this).hasattr('data-cc'))">值false</a>
|
||
<a class="btn" data-cc onclick="console.log($5(this).hasattr('data-cc'))">值空</a>
|
||
<a class="btn" onclick="console.log($5(this).hasattr('data-cc'))">无</a>
|
||
<br /><br />
|
||
<blockquote>css方法</blockquote>
|
||
get css
|
||
<a class="btn" style="background:#2bcf17cc;" onclick="console.log($5(this).css('background'))">定义style，获取bgcolor</a>
|
||
<a class="btn" onclick="console.log($5(this).css('background'))">未定义style，获取bgcolor</a>
|
||
<br />
|
||
set css
|
||
<div id="objcss" style="display: inline-block;border: 1px solid #cccccc;padding: 0.2em 0.5em;">CSS样式</div>
|
||
<a class="btn" onclick="console.log($5('#objcss').css().color)">计算cal.color</a>
|
||
<a class="btn" onclick="console.log($5('#objcss').css('color'))">获取get.color</a>
|
||
<a class="btn" onclick="$5('#objcss').css('color', '#cc0000cc')">设置css单值</a>
|
||
<a class="btn" onclick="$5('#objcss').css({'color': '#059c23cc'})">设置css多值</a>
|
||
<br />
|
||
cal css
|
||
<a class="btn" onclick="console.log($5(this).css())">计算全部css</a>
|
||
<a class="btn" onclick="console.log($5(this).css().backgroundColor)">计算bgcolor</a>
|
||
<br /><br />
|
||
<blockquote>val方法</blockquote>
|
||
val 设置/获取value，支持ciycmp对象setvalue/getvalue<br />
|
||
<input type="text" id="val1" value="val1" />
|
||
<a class="btn" onclick="$5('#val1').val('设置的val')">设置</a>
|
||
<a class="btn" onclick="console.log($5('#val1').val())">获取</a>
|
||
<br />
|
||
<ciy-inputcyc com="cyc1" value="15"></ciy-inputcyc>
|
||
<a class="btn" onclick="$5('[com=cyc1]').val(86400)">设置</a>
|
||
<a class="btn" onclick="console.log($5('[com=cyc1]').val())">获取</a>
|
||
<br /><br />
|
||
<blockquote>html/text方法</blockquote>
|
||
outhtml/html 设置/获取html。text 设置/获取文本。
|
||
<p>p1</p>
|
||
<p id="p2a">p2</p>
|
||
<p>p3</p>
|
||
<a class="btn" onclick="$5('#p2a').html('<a style=\'color:red;\'>html覆盖</span>')">html覆盖内部</a>
|
||
<a class="btn" onclick="$5('#p2a').outhtml('<a style=\'color:red;\'>覆盖自身</span>')">outhtml覆盖自身</a>
|
||
<a class="btn" onclick="$5('#p2a').text('<a style=\'color:red;\'>html覆盖</span>')">text覆盖</a>
|
||
<br />
|
||
<a class="btn" onclick="$5('#p2a').html(createi())">html替换内部</a>
|
||
<a class="btn" onclick="$5('#p2a').outhtml(createi())">outhtml替换自身</a>
|
||
<a class="btn" onclick="$5('#p2a').text(createi())">text覆盖</a>
|
||
<br /><br />
|
||
|
||
<blockquote>html方法</blockquote>
|
||
outhtml/html 设置/获取html。prepend/append 子元素。before/after 兄弟元素
|
||
<p>p1</p>
|
||
<p id="p2">p2</p>
|
||
<p>p3</p>
|
||
<a class="btn" onclick="$5('#p2').prepend('<i>内部插入'+Math.random().toFixed(2)+'</i>')">prepend内部插入</a>
|
||
<a class="btn" onclick="$5('#p2').append('<i>内部添加'+Math.random().toFixed(2)+'</i>')">append内部添加</a>
|
||
<a class="btn" onclick="$5('#p2').before('<i>上插入'+Math.random().toFixed(2)+'</i>')">before上插入</a>
|
||
<a class="btn" onclick="$5('#p2').after('<i>下添加'+Math.random().toFixed(2)+'</i>')">after下添加</a>
|
||
<a class="btn" onclick="$5('#p2').html('<a style=\'color:red;\'>html覆盖</span>')">html覆盖内部</a>
|
||
<a class="btn" onclick="$5('#p2').outhtml('<a style=\'color:red;\'>覆盖自身</span>')">outhtml覆盖自身</a>
|
||
<br />
|
||
<a class="btn" onclick="$5('#p2').prepend(createi())">prepend内部插入</a>
|
||
<a class="btn" onclick="$5('#p2').append(createi())">append内部添加</a>
|
||
<a class="btn" onclick="$5('#p2').before(createi())">before上插入</a>
|
||
<a class="btn" onclick="$5('#p2').after(createi())">after下添加</a>
|
||
<a class="btn" onclick="$5('#p2').html(createi())">html替换内部</a>
|
||
<a class="btn" onclick="$5('#p2').outhtml(createi())">outhtml替换自身</a>
|
||
<br /><br />
|
||
|
||
<blockquote>prev/next方法</blockquote>
|
||
获取n个
|
||
<p>n1</p>
|
||
<p>n2</p>
|
||
<p>n3</p>
|
||
<p id="n4">n4</p>
|
||
<p>n5</p>
|
||
<p>n6</p>
|
||
<p>n7</p>
|
||
<div>
|
||
<p id="np">无上下dom</p>
|
||
</div>
|
||
<a class="btn" onclick="console.log($5('#n4').prev(9999))">prev多个</a>
|
||
<a class="btn" onclick="console.log($5('#n4').prev(2))">prev 2个</a>
|
||
<a class="btn" onclick="console.log($5('#n4').prev())">prev对象</a>
|
||
<a class="btn" onclick="console.log($5('#np').prev())">无上下dom</a>
|
||
<br />
|
||
<a class="btn" onclick="console.log($5('#n4').next(9999))">next多个</a>
|
||
<a class="btn" onclick="console.log($5('#n4').next(2))">next 2个</a>
|
||
<a class="btn" onclick="console.log($5('#n4').next())">next对象</a>
|
||
<a class="btn" onclick="console.log($5('#np').next())">无上下dom</a>
|
||
<br /><br />
|
||
|
||
<blockquote>on/one/off方法</blockquote>
|
||
<div id="on1" style="border:1px solid #cccccc;padding:0.2em 0.5em;">
|
||
<a>AAAAA</a>
|
||
<b>BB1</b>
|
||
<b>BB2</b>
|
||
<div>只在A中生效</div>
|
||
</div>
|
||
<button class='btn' onclick="on1()">匿名整体事件</button>
|
||
<button class='btn' onclick="on12()">独立函数事件</button>
|
||
<button class='btn' onclick="on2()">AA move事件</button>
|
||
<button class='btn' onclick="on3()">AA click事件</button>
|
||
<button class='btn' onclick="onb()">BB click单次事件</button>
|
||
<button class='btn' onclick="$5('#on1').off('mousemove')">off.mousemove</button>
|
||
<button class='btn' onclick="$5('#on1').off()">off全部</button>
|
||
<button class='btn' onclick="$5('#on1>a').trigger('click')">触发事件</button>
|
||
<br /><br />
|
||
<script type="text/javascript">
|
||
'use strict';
|
||
function createi() {
|
||
var domi = document.createElement('i');
|
||
domi.innerHTML = '=' + Math.random().toFixed(2) + '=';
|
||
return domi;
|
||
}
|
||
function on1() {
|
||
$5('#on1').on('mousemove', function (e) {
|
||
console.log(e);
|
||
});
|
||
}
|
||
function on12fn(e) {
|
||
console.log('on12');
|
||
}
|
||
function on12() {
|
||
$5('#on1').on('mousemove', on12fn);
|
||
}
|
||
function on2() {
|
||
$5('#on1').on('mousemove', 'a', function (e) {
|
||
console.log('a');
|
||
});
|
||
};
|
||
function on3() {
|
||
$5('#on1').on('click', 'a', function (e) {
|
||
console.log('click a');
|
||
});
|
||
};
|
||
function onb() {
|
||
$5('#on1').one('click', 'b', function (e) {
|
||
console.log('click bbb', e.currentTarget);
|
||
});
|
||
};
|
||
</script>
|
||
<blockquote>rect方法</blockquote>
|
||
<div id="rect0" style="box-sizing: content-box; border:3px solid #d32626;margin:7px;padding:5px;width:100px;height:100px;">
|
||
<span class="txt-smmm">
|
||
width:100px<br />
|
||
height:100px<br />
|
||
content-box<br />
|
||
本框架不用
|
||
</span>
|
||
</div>
|
||
<div id="rect1" style="border:3px solid #d32626;margin:7px;padding:5px;width:100px;height:100px;">
|
||
<span class="txt-smmm">
|
||
wh:100px<br />
|
||
border:3px<br />
|
||
padding:5px<br />
|
||
margin:7px<br />
|
||
border-box<br />
|
||
</span>
|
||
</div>
|
||
<div style="width:100px;height:6px;background: #53d844;margin-left:7px;"></div>
|
||
<button class='btn' onclick="setscale(0.5)">缩小</button>
|
||
<button class='btn' onclick="setscale(2)">放大</button>
|
||
<button class='btn' onclick="showrect()">width/height/rect</button>
|
||
<br /><br />
|
||
<script type="text/javascript">
|
||
'use strict';
|
||
function setscale(scale) {
|
||
$5('#rect0,#rect1').css('transform', 'scale(' + scale + ')');
|
||
}
|
||
function showrect() {
|
||
var doms = [$5('#rect0'), $5('#rect1')];
|
||
for (var i in doms) {
|
||
var dom = doms[i];
|
||
console.warn('width:', i);
|
||
console.log('$5.rect.width:', dom.rect().width);
|
||
console.log('$5.width:', dom.width());
|
||
console.log('$width', $(dom[0]).width());
|
||
console.log('$innerWidth', $(dom[0]).innerWidth());
|
||
console.log('$outerWidth', $(dom[0]).outerWidth());
|
||
console.log('$outerWidth true', $(dom[0]).outerWidth(true));
|
||
|
||
console.log('offsetWidth', dom[0].offsetWidth);
|
||
console.log('ComputedStyle', window.getComputedStyle(dom[0]).width);
|
||
console.log('clientWidth', dom[0].clientWidth);
|
||
|
||
console.warn('height:', i);
|
||
console.log('$5.rect.height:', dom.rect().height);
|
||
console.log('$5.height:', dom.height());
|
||
console.log('$height', $(dom[0]).height());
|
||
console.log('$innerHeight', $(dom[0]).innerHeight());
|
||
console.log('$outerHeight', $(dom[0]).outerHeight());
|
||
console.log('$outerHeight true', $(dom[0]).outerHeight(true));
|
||
|
||
console.log('offsetHeight', dom[0].offsetHeight);
|
||
console.log('ComputedStyle', window.getComputedStyle(dom[0]).height);
|
||
console.log('clientHeight', dom[0].clientHeight);
|
||
|
||
console.log('$offset:', $(dom[0]).offset());
|
||
console.log('$5.rect:', dom.rect());
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<blockquote>aniin/aniout动画方法</blockquote>
|
||
<button class='btn' onclick="$5('#ani1').aniin('translateX(30px)');">左右渐入</button>
|
||
<button class='btn' onclick="$5('#ani1').aniout('translateX(30px)');">左右渐出</button>
|
||
<button class='btn' onclick="$5('#ani1').aniin('translateY(30px)');">上下渐入</button>
|
||
<button class='btn' onclick="$5('#ani1').aniout('translateY(30px)');">上下渐出</button>
|
||
<br />
|
||
<button class='btn' onclick="$5('#ani1').aniin('');">虚化渐入</button>
|
||
<button class='btn' onclick="$5('#ani1').aniout('');">虚化渐出</button>
|
||
<button class='btn' onclick="$5('#ani1').aniin('rotate(3600deg)');">旋转渐入</button>
|
||
<button class='btn' onclick="$5('#ani1').aniout('rotate(3600deg)');">旋转渐出</button>
|
||
<br />
|
||
<button class='btn' onclick="$5('#ani1').aniin('scale(0.5)');">缩放渐入</button>
|
||
<button class='btn' onclick="$5('#ani1').aniout('scale(2)');">缩放渐出</button>
|
||
<button class='btn' onclick="$5('#ani1').aniin('skew(10deg, 30deg)');">变形渐入</button>
|
||
<button class='btn' onclick="$5('#ani1').aniout('skew(10deg, 30deg)');">变形渐出</button>
|
||
<br />
|
||
<button class='btn' onclick="$5('#ani1').aniin('scale(2) translateX(100%) rotate(360deg)');">组合渐入</button>
|
||
<button class='btn' onclick="$5('#ani1').aniout('scale(2) translateX(100%) rotate(360deg)');">组合渐出</button>
|
||
<br />
|
||
<ciy-select com="showhide" style="display: inline-block;"></ciy-select>
|
||
<button class='btn' onclick="opshow()">显示</button>
|
||
<button class='btn' onclick="ophide()">隐藏</button>
|
||
<button class='btn' onclick="optoggle()">切换</button>
|
||
<br />
|
||
<div style="height:100px;">
|
||
<div id="ani1" style="width:200px;border:1px solid #cccccc;padding:0.2em 0.5em;background: #ffffff;"><a>Ani</a>
|
||
<div>动画测试</div>
|
||
</div>
|
||
</div>
|
||
<script type="text/javascript">
|
||
'use strict';
|
||
function opshow() {
|
||
if (cmp_showhide.value)
|
||
$5('#ani1').show(cmp_showhide.value, 0.5);
|
||
else
|
||
$5('#ani1').show();
|
||
}
|
||
function ophide() {
|
||
if (cmp_showhide.value)
|
||
$5('#ani1').hide(cmp_showhide.value, 0.5);
|
||
else
|
||
$5('#ani1').hide();
|
||
}
|
||
function optoggle() {
|
||
if (cmp_showhide.value)
|
||
$5('#ani1').toggle(cmp_showhide.value, 0.5);
|
||
else
|
||
$5('#ani1').toggle();
|
||
}
|
||
</script>
|
||
<br /><br />
|
||
|
||
<script type="text/javascript" src="/jscss/jquery-1.12.4.min.js"></script>
|
||
<script type="text/javascript" src="/jscss/ciy.js"></script>
|
||
<script type="text/javascript" src="/jscss/ciycmp.js"></script>
|
||
<script type="text/javascript" src="/jscss/ciycmp2.js"></script>
|
||
|
||
<script type="text/javascript">
|
||
'use strict';
|
||
var cmp_showhide = ciycmp({
|
||
dom: '[com=showhide]', range: [{ id: '', name: 'none' }
|
||
, { id: 'slide', name: 'slide' }
|
||
, { id: 'up', name: 'up' }
|
||
, { id: 'down', name: 'down' }
|
||
, { id: 'left', name: 'left' }
|
||
, { id: 'right', name: 'right' }
|
||
, { id: 'small', name: 'small' }
|
||
, { id: 'big', name: 'big' }]
|
||
});
|
||
ciycmp({ dom: '[com=cyc1]', onchange: function (d) { console.log(d) } });
|
||
</script>
|
||
</body>
|
||
|
||
</html> |