使用Jquery操作DOM节点
如有不会，案例还有笔记在（chap3）
dom : 文档对象模型 就是HTML元素
js中如何操作DOM节点
document.write("<p>我是p标签</p>");
缺点:无法在指定的位置生成元素
$() 函数的2个用法:
用法1:放入一个字符串(选择器)表示获取元素 例如$("p") $("#abc") $(".del")
用法2:放入一个函数，表示文档就绪函数 例如 $(function(){代码...})
用法3:如下所示
jquery创建节点的方法如下
<body>
<div>
<p>111</p>
<p>222</p>
<p>333</p>
<p>444</p>
</div>1.创建节点 语法如下:
// $("xxxxx"); xxx表示你要创建的dom元素 例如 $("<p>我是p标签<p>");
//此时仅仅是创建了节点.理解为是孤儿节点. 需要将其插入到某个节点中.
//例如 放入body标签中 方法div标签中等等.
插入方法1:append() 表示插入到指定元素内部的尾端.
语法: $("aa").append("bb") 表示将bb插入到aa内部的尾端
插入方法2:prepend() 表示插入到指定元素内部的首端.
语法: $("aa").prepend("bb") 表示将bb插入到aa内部的首端
创建与插入使用案例
需求如下:
在div的尾端插入一个值为555的p标签
1.创建一个值为555的p标签
// let a = $("<p>555<p>");
// //调用方法即可
// $("div").append(a);
需求如下:
//在div的首端插入一个值为000的p标签
// //1.创建一个值为000的p标签
// let a = $("<p>000<p>");
// //调用方法即可
// $("div").prepend(a);
插入方法3:after() 表示插入到指定元素的后面. 兄弟关系
语法: $("aa").after("bb") 表示将bb插入到aa的后面
需求如下:
//在111的后面插入一个1.5 1.5 1.5
//1.创建一个值为000的p标签
// let a = $("<p>1.5 1.5 1.5<p>");
//调用方法即可
// $("p:eq(0)").after(a);
插入方法4:before() 表示插入到指定元素的前面. 兄弟关系
语法: $("aa").before("bb") 表示将bb插入到aa的前面
需求如下:
//在333的前面插入一个2.5 2.5 2.5
//1.创建一个值为2.5 2.5 2.5的p标签
// let a = $("<p>2.5 2.5 2.5<p>");
//调用方法即可
// $("p:eq(2)").before(a);
上述的方法 可以实现 在任意位置创建新的节点.
删除任意位置的节点
下述的方法 可以实现 删除任意位置的节点:
方法1: remove()
语法如下: $("xx").remove(); 将xx元素彻底删除 不仅删除了值 而且删除了标签
需求如下: 将444的p标签删除
$("p:eq(3)").remove();
方法2: empty() 清空
语法如下: $("xx").empty(); 将xx元素删除值 但是不删除标签
需求如下: 将444的p标签删除
$("p:eq(3)").empty();
克隆节点
语法: $("xxx").clone(); 将xxx元素复制一份
注意事项:上一步仅仅只是复制 此时理解为孤儿节点. 任然需要通过append prepend after before进行粘贴
例如:将111复制一份到444的后面
let a = $("p:eq(0)").clone();
$("p:eq(3)").after(a);
小案例
<body>
<button>按钮</button>
<script src="js/jquery.js"></script>
<script>
//需求如下:点击按钮,实现按钮的复制.1-2-4-8-16-32-64
$("button").click(function(){
// alert(123);
let a = $("button:eq(0)").clone(true);
$("button").after(a);
});
//备注:clone仅仅是复制了样式 如果想要复制功能 只需要在clone()加上一个true
</script>
</body>show和hide方法
$("xx").hide();隐藏XX元素
$("xx").show();显示XX元素
$("xx").toggle();来回切换：显示或隐藏XX元素
<body>
<button>按钮</button> <br>
<img src="img/0.jpg">
<script src="js/jquery.js"></script>
<script>
//$("xx").hide();隐藏XX元素
//$("xx").show();显示XX元素
//$("xx").toggle();来回切换：显示或隐藏XX元素
$("button").click(function(){
// if($("img").css("display")=="inline"){
// $("img").hide();
// }else{
// $("img").show();
// }
$("img").toggle();
});
</script>addClass（）和removeClass（）方法
jquery对象的特点: 调用任意方法的返回值 依然是它本身
<style>
.a{
font-size: 50px;
}
.b{
color: red;
}
.c{
background-color: aqua;
}
</style>
</head>
<body>
<p>你好</p>
<script src="js/jquery.js"></script>
<script>
//$("xx").addClass("a");给元素添加类名为a
//$("xx").removeClass("aa);给元素移除类名为a
// $("p").addClass("a");
// $("p").addClass("b");
// $("p").addClass("c");
//jquery对象的特点: 调用任意方法的返回值 依然是它本身
$("p").addClass("a").addClass("b").addClass("c").click(function(){
alert(123);
}).mouseover(function(){
alert(567)
}).removeClass("c");
</script>
</body>如何获取当前元素
$("xx").index();返回当前元素在兄弟中下标
$("button").click(function(){
// $(this);获取当前的元素
alert( $(this).index() )
});
<body>
<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
<button>按钮5</button>
<button>按钮6</button>
<button>按钮7</button>
<script src="js/jquery.js"></script>
<script>
//$("xx").index();返回当前元素在兄弟中下标
$("button").click(function(){
// $(this);获取当前的元素
alert( $(this).index() )
});
</script>
</body>轮播图简化版案例
<style>
img{
width: 400px;
height: 150px;
}
li{
float: left;
margin-left: 30px;
color: pink;
}
ul{
margin-left: 300px;
margin-top: -20px;
position: absolute;
}
</style>
</head>
<body>
<div align="center">
<img src="img/0.jpg" />
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<script src="js/jquery.js"></script>
<script>
$("li").mouseover(function(){
//获取当前li标签的下标
let index = $(this).index();
$("img").attr("src","img/"+index+".jpg");
indexImg = index;
$("li").css("color","pink");
$("li:eq("+index+")").css("color","red");
})
var indexImg = 0;
setInterval(function(){
indexImg++;
if (indexImg==6) {
indexImg = 0;
}
$("img").attr("src","img/" + indexImg +".jpg");
$("li").css("color","pink");
$("li:eq("+indexImg+")").css("color","red");
},2000)
</script>
</body>each方法
each方法的语法: $("xx").each( function(){ 代码体 } );
遍历xx元素.每遍历一次 就执行一次代码体.
这种写法 较为局限 但是也很重要
$("p").text("你好");
<body>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<script src="js/jquery.js"></script>
<script>
//each方法的语法: $("xx").each( function(){ 代码体 } );
//遍历xx元素.每遍历一次 就执行一次代码体.
//这种写法 较为局限 但是也很重要
// $("p").text("你好");
var arr = ["这是第1条新闻","这是第2条新闻","这是第3条新闻",
"这是第4条新闻","这是第5条新闻"]
$("p").each(function(){
$(this).text( arr[$(this).index()] );
});
</script>
</body>删除上一级的标签（父级）
<body>
<div>
<p>
<font>啊啊啊</font>
</p>
</div>
<input type="text" id="a" />
<input type="text" id="b" />
<input type="text" id="c" />
<script src="js/jquery.js"></script>
<script>
$("#c").focus();
//需求:删除font标签
$("font").remove();
//需求:删除p
$("p").remove();
//需求:删除font标签的父亲
$("p").parent().remove();
</script>
</body>
