zepto--学习日常demo3(data,each,eq,get,has,height,hide,DOM结点与Zepto对象区别)

程序员文章站 2022-05-03 16:07:34

...

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<script src="http://zeptojs.com/zepto.js"></script>
	<title>Document</title>
</head>
<body>
<div id="example">
<ul>
	<li>1<span></span></li>
	<li>2</li>
	<li>3</li>
</ul>
    <p> a paragarph</p>
</div>
<script src="2-demo1.js"></script>
</body>
</html>

//data（）
//data( name)读取 data-name值
//data( name, value)设置data-name值为value
$('p').data( 'data', '1');
let data = $('p').data('data');//1


//each
//each(function( index, item){ ... })
//功能与$.each一样

//empty()
//清空对象集合中每个元素的DOM内容
//$('ul').empty();


//ep(index)
//从匹配元素集合获取索引为index的元素（0开始）
 //$( 'li' ).eq( 0 ).addClass('li0');
 let ep1 = $( 'li' ).eq( 0 );
 ep1.addClass('li0');
 $( 'li' ).eq( -1 ).addClass('liLast');

 //filter
 //过滤对象集合，返回对象集合中满足css选择器的项。
 //如果参数为一个函数，函数返回有实际值得时候，
 //元素才会被返回。在函数中， this 关键字指向当前的元素。

 //find
 //在当对象前集合内查找符合CSS选择器的每个元素的后代元素。
 let find1 = $( 'div' ).find('p');
 find1.addClass(' find1 ');


 //first
 //获取当前对象集合中的第一个元素.
 $('ul li').first().addClass('firstLi');

 //get
 //从当前对象集合中获取所有元素或单个元素。
 //当index参数不存在的时，以普通数组的方式返回所有的元素。
 //当指定index时，只返回该置的元素。
 //这点与eq不同，该方法返回的是DOM节点，不是Zepto对象集合。
 //DOM结点和Zepto对象集合不同点：DOM结点不能直接用zepto的方法
 //DOM对象转换成Zepto对象，需要用$()转换如下例子
 let get1 = $('ul li').get();
 $(get1).addClass('get1');

 //has
 //判断当前对象集合的子元素是否有符合选择器的元素，
 //或者是否包含指定的DOM节点，
 //如果有，则返回新的对象集合，该对象过滤掉不含有选择器匹配元素或者不含有指定DOM节点的对象。
 let has1 = $('li').has('span');

 //hasClass
 //检查对象集合中是否有元素含有指定的class
 //返回布尔值
 let hasClass1 = $('li').hasClass('get1');//true

 //height
 //获取对象集合中第一个元素的高度；
 //或者设置对象集合中所有元素的高度。
 let height1 = $('li').height();//21
 $('li').height(40);


 //hide()
 //通过设置css的属性display为none来将对象集合中的元素隐藏。
 $('li').hide();

 //insertAfter,insertBefore
 //将集合中的元素插入到指定的目标元素后面/前面
 //外部插入
 
 //is
 //判断当前元素集合中的第一个元素是否符css选择器。
 

 //last
 //获取对象集合中的最后一个元素