jQuery（二②）

2023-12-14 14:02:30

一、使用jQuery操作DOM

dom : 文档对象模型 ? ?就是HTML元素 ?
? ? ? ? ? ??
js中如何操作DOM节点
document.write("<p>我是p标签</p>"); ? ? ? ?
缺点:无法在指定的位置生成元素
? ? ? ? ? ??
? ? ? ? ? ??
$() ? 函数的2个用法:
用法1:放入一个字符串(选择器)表示获取元素 ? 例如$("p") $("#abc") ?$(".del")?
用法2:放入一个函数，表示文档就绪函数 ? 例如 ?$(function(){代码...})
? ? ? ? ? ??
用法3:如下所示
? ? ? ? ? ??
jquery创建节点的方法如下：
1.创建节点语法如下:
$("xxxxx"); xxx表示你要创建的dom元素 ? 例如 ?$("<p>我是p标签<p>");
? ? ? ? ? ??
此时仅仅是创建了节点.理解为是孤儿节点. ?需要将其插入到某个节点中.
例如放入body标签中方法div标签中等等.
? ? ? ? ? ??
? ? ? ? ? ??
插入方法1:append() 表示插入到指定元素内部的尾端.
语法: $("aa").append("bb") ?表示将bb插入到aa内部的尾端
?

二、show和hide方法

<!DOCTYPE html>
<html>
?? ?<head>
?? ??? ?<meta charset="utf-8">
?? ??? ?<title></title>
?? ?</head>
?? ?<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>
?? ?</body>
</html>

三、addClass()和removeClass()方法

<!DOCTYPE html>
<html>
?? ?<head>
?? ??? ?<meta charset="utf-8">
?? ??? ?<title></title>
?? ??? ?<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>
</html>

四、如何获取当前元素

<!DOCTYPE html>
<html>
?? ?<head>
?? ??? ?<meta charset="utf-8">
?? ??? ?<title></title>
?? ?</head>
?? ?<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>
</html>

五、轮播图简化图

<!DOCTYPE html>
<html>
?? ?<head>
?? ??? ?<meta charset="utf-8">
?? ??? ?<title></title>
?? ??? ?<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>
</html>

六、each方法讲解

<!DOCTYPE html>
<html>
?? ?<head>
?? ??? ?<meta charset="utf-8">
?? ??? ?<title></title>
?? ?</head>
?? ?<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>
</html>

七、选项卡特效

<!DOCTYPE html>
<html>
?? ?<head>
?? ??? ?<meta charset="utf-8">
?? ??? ?<title></title>
?? ??? ?
?? ??? ?<style>
?? ??? ??? ?div{
?? ??? ??? ??? ?width:400px;
?? ??? ??? ??? ?height: 300px;
?? ??? ??? ??? ?background-color: pink;
?? ??? ??? ??? ?margin: auto;
?? ??? ??? ?}
?? ??? ??? ?
?? ??? ??? ?ul{
?? ??? ??? ??? ?list-style: none;
?? ??? ??? ?}
?? ??? ??? ?
?? ??? ??? ?li{
?? ??? ??? ??? ?float: left;
?? ??? ??? ??? ?margin-left: 20px;
?? ??? ??? ??? ?font-size: 20px;
?? ??? ??? ?}
?? ??? ??? ?
?? ??? ??? ?
?? ??? ?</style>
?? ??? ?
?? ??? ?
?? ?</head>
?? ?<body>
?? ??? ?
?? ??? ?<div>
?? ??? ??? ?<ul>
?? ??? ??? ??? ?<li>综合</li>
?? ??? ??? ??? ?<li>公告</li>
?? ??? ??? ??? ?<li>赛事</li>
?? ??? ??? ??? ?<li>攻略</li>
?? ??? ??? ??? ?<li>社区</li>
?? ??? ??? ?</ul>
?? ??? ??? ?
?? ??? ??? ?<br><br><br>
?? ??? ??? ?
?? ??? ??? ?<a href="#"> ?</a> ?<br><br>
?? ??? ??? ?<a href="#"> ?</a> ?<br><br>
?? ??? ??? ?<a href="#"> ?</a> ?<br><br>
?? ??? ??? ?<a href="#"> ?</a> ?<br><br>
?? ??? ??? ?<a href="#"> ?</a> ?<br><br>
?? ??? ??? ?<a href="#"> ?</a> ?<br><br>
?? ??? ??? ?
?? ??? ?</div>
?? ??? ?
?? ??? ?
?? ??? ?<script src="js/jquery.js"></script>
?? ??? ?<script>
?? ??? ??? ?
?? ??? ??? ?//暂时模拟去数据库拿数据
?? ??? ??? ?
?? ??? ??? ?let arr = [
?? ??? ??? ??? ?["这是第1条综合数据~~~~~~~~~~","这是第2条综合数据~~~~~~~~~~","这是第3条综合数据~~~~~~~~~~","这是第4条综合数据~~~~~~~~~~","这是第5条综合数据~~~~~~~~~~","这是第6条综合数据~~~~~~~~~~"],
?? ??? ??? ??? ?["这是第1条公告数据~~~~~~~~~~","这是第2条公告数据~~~~~~~~~~","这是第3条公告数据~~~~~~~~~~","这是第4条公告数据~~~~~~~~~~","这是第5条公告数据~~~~~~~~~~","这是第6条公告数据~~~~~~~~~~"],
?? ??? ??? ??? ?["这是第1条赛事数据~~~~~~~~~~","这是第2条赛事数据~~~~~~~~~~","这是第3条赛事数据~~~~~~~~~~","这是第4条赛事数据~~~~~~~~~~","这是第5条赛事数据~~~~~~~~~~","这是第6条赛事数据~~~~~~~~~~"],
?? ??? ??? ??? ?["这是第1条攻略数据~~~~~~~~~~","这是第2条攻略数据~~~~~~~~~~","这是第3条攻略数据~~~~~~~~~~","这是第4条攻略数据~~~~~~~~~~","这是第5条攻略数据~~~~~~~~~~","这是第6条攻略数据~~~~~~~~~~"],
?? ??? ??? ??? ?["这是第1条社区数据~~~~~~~~~~","这是第2条社区数据~~~~~~~~~~","这是第3条社区数据~~~~~~~~~~","这是第4条社区数据~~~~~~~~~~","这是第5条社区数据~~~~~~~~~~","这是第6条社区数据~~~~~~~~~~"]
?? ??? ??? ?];
?? ??? ??? ?
?? ??? ??? ?
?? ??? ??? ?
?? ??? ??? ?$("li").mouseover(function(){
?? ??? ??? ??? ?
?? ??? ??? ??? ?//将所有的颜色都还原
?? ??? ??? ??? ?$("li").css("color" , "black");
?? ??? ??? ??? ?//悬停在哪里就将li标签文字颜色改成蓝色
?? ??? ??? ??? ?$(this).css("color" , "blue");
?? ??? ??? ??? ?//将li标签对应的所有新闻展示出来
?? ??? ??? ??? ?//获取li标签的下标
?? ??? ??? ??? ?let index = $(this).index();
?? ??? ??? ??? ?
?? ??? ??? ??? ?let a_index = 0;
?? ??? ??? ??? ?$("a").each(function(){
?? ??? ??? ??? ??? ?
?? ??? ??? ??? ??? ?
?? ??? ??? ??? ??? ?//注意index方法返回的是当前元素在兄弟节点的下标
?? ??? ??? ??? ??? ?//由于a标签的兄弟不仅仅只有a还有ul标签和br标签
?? ??? ??? ??? ??? ?// 所以这里的值不为012345 ?而是一堆可能没规律的数
?? ??? ??? ??? ??? ?//解决方式:在外面加一个变量负责计数
?? ??? ??? ??? ??? ?// let i = $(this).index();
?? ??? ??? ??? ??? ?// console.log(i);
?? ??? ??? ??? ??? ?
?? ??? ??? ??? ??? ?
?? ??? ??? ??? ??? ?$(this).text ( ?arr[index][ ?a_index++ ?] ) ;
?? ??? ??? ??? ??? ?
?? ??? ??? ??? ??? ?
?? ??? ??? ??? ??? ?
?? ??? ??? ??? ?});
?? ??? ??? ??? ?
?? ??? ??? ?});
?? ??? ??? ?
?? ??? ??? ?
?? ??? ??? ?
?? ??? ??? ?
?? ??? ??? ?
?? ??? ?</script>
?? ?</body>
?? ?
</html>

八、客串知识讲解

<!DOCTYPE html>
<html>
?? ?<head>
?? ??? ?<meta charset="utf-8">
?? ??? ?<title></title>
?? ?</head>
?? ?<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>
</html>

文章来源:https://blog.csdn.net/ObscureMoon/article/details/134912847
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若内容造成侵权/违法违规/事实不符，请联系我的编程经验分享网邮箱：veading@qq.com进行投诉反馈，一经查实，立即删除！