相比于原生js,Jquery真的给了我们一些新的想法和途径去实现一些功能。关于Jquery dom的第三篇。
代码如下,注释已写:(我博客上的代码基本上除了有其它关联文件都可以直接运行,我用的Jquery库为最新3.1版)
欢迎留言交流
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Jquery dom3</title>
</head>
<body>
<button class="btn">按钮1</button>
<button class="btn">按钮2</button>
<button class="btn">按钮3</button>
<script src="./js/jquery-3.3.1.min.js"></script>
<script>
var s=$("<span></span>");//创建span元素
// wrap 用元素(对象或者字符串)包裹被选择元素 一一对应(一个span对应一个btn)
// $('.btn').wrap(s);等价于下行代码
// $('.btn').wrap("<span></span>");
// wrapAll 用元素(对象或者字符串)包裹被选择元素 一对多(一个span对应多个btn)
// $('.btn').wrapAll(s);等价于下行代码
$('.btn').wrapAll("<span></span>");
// 移除被包裹元素的父级元素或者包裹标记 unwrap();
// $('.btn').unwrap();
// 用包裹元素包裹被选择元素的子元素(即对于btn里面的内容进行包裹)
// $('.btn').wrapInner(s);
// 元素的遍历 each();
// $('.btn').click(function(){
// console.log(this);
// })
// 在each里面return false 提前终止遍历
/* $('.btn').each(function(index){
$(this).click(function(){
console.log(index);
if(index==1){
return false;
}
console.log('咦?');
})
})
*/
$('.btn').each(function(index,ele){
// js添加事件
console.log(ele);//ele为js对象,无法直接利用Jquery操作
/* ele.addEventListener("click",function(){
console.log(index);
})*/
// console.log($(ele)); //转Jquery对象
/*$(ele).click(function(){
console.log(index);
})*//*Jquery事件*/
// ele.click(function(){//无效
// console.log(index);
// })
})
</script>
</body>
</html>