一、使用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>
