目录
jQuery基础
第1关：jQuery入门
第2关：jQuery基本选择器
第3关：过滤选择器 （一）
第4关：过滤选择器 （二）
第5关：tab选项卡
jQuery DOM操作
第1关jQuery获取内容和属性
第2关jQuery设置内容和属性
第3关jQuery添加元素
第4关jQuery删除元素
点赞👍收藏❤
jQuery基础
第1关：jQuery入门
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
<div id="content"></div>
<script>
//------------begin---------
var box=$("#content");
box.html("这是我的第一个jquery程序");
//-----------end------------
</script>
<style>
#content{
width: 300px;
height: 60px;
text-align: center;
line-height: 60px;
margin: 30px auto;
font-size: 20px;
border: 2px solid #000;
}
</style>
</body>
</html>第2关：jQuery基本选择器
<script>
$(function(){
$("button").click(function(){
//inner是当前点击的button元素的内容
var inner = $(this).html();
if(inner == "id"){
//----------begin----------
var box1 = $("#box");
box1.html("我是id选择器添加的内容");
//----------end------------
}
if(inner == "类"){
//----------begin----------
var box2 = $(".box");
box2.html("我是类选择器添加的内容");
//----------end------------
}
if(inner == "元素"){
//----------begin----------
var box3 = $("p");
box3.html("我是元素选择器添加的内容");
//----------end------------
}
})
})
</script> 第3关：过滤选择器 （一）
<script>
//-----------begin-----------
$("tr:even").css("background","lavenderblush");
$("tr:odd").css("background","lightyellow");
$("tr:first").css("background","yellowgreen");
//------------end------------
</script>
第4关：过滤选择器 （二）
<script>
$(function(){
//------------- begin -------------
$(".item:eq(2)").css("background","#eee");
$(".item:not(:last)").css("border-bottom","1px dashed #ccc");
//------------ end ---------------
})
</script> 第5关：tab选项卡
<script>
$(function(){
//tab的初始化
$(".head li").removeClass('active').eq(0).addClass('active');
$(".content div").hide().eq(0).show();
$(".head li").on('click', function(){
// index是点击的li的索引
var index = $(this).index();
//-----------begin-----------
$(".head li").removeClass("active").eq(index).addClass("active");
$(".content div").hide().eq(index).show();
//------------end------------
})
})
</script>jQuery DOM操作
第1关jQuery获取内容和属性
<script>
$(function(){
//------------ Begin -----------
$(".btn1").click(function(){
alert($(".box").text());
});
$(".btn2").click(function(){
alert($(".box").html());
});
$(".btn3").click(function(){
var getValue = $(".getVal").val() + "---" + $(".getVal").attr("type");
alert(getValue);
});
//------------ End --------------
})
</script>第2关jQuery设置内容和属性
<script>
$(function(){
//------------ Begin -----------
$(".btn1").click(function(){
$(".first").text("我是第一行");
});
$(".btn2").click(function(){
$(".second").html("<span>我是第二行</span>");
});
$(".btn3").click(function(){
var typeAttr = $(".getVal").attr("type","password");
$(".getVal").val(typeAttr);
});
//------------ End --------------
})
</script>第3关jQuery添加元素
<script>
$(function(){
var count = 4;
//---------表格下面添加【添加内容】按钮-------------
//------------------- Begin ---------------
var addBtn='<button class="btn">添加内容</button>';
//------------------- End -----------------
function loadData(){
for(var i =0; i<2; i++){
count ++;
var tr = '<tr>' +
'<td>' + count + '</td>'+
'<td>王五</td>'+
'<td>男</td>'+
'<td>26</td>'+
'<td>河南</td>'+
'</tr>';
//---------表格底部添加内容------------
//------------------- Begin ---------------
$(".tab").append(tr);
//------------------- End -----------------
}
}
//-------------点击事件-----------------
//------------------- Begin ---------------
$(".btn").click(function(){loadData();});
//------------------- End -----------------
})
</script>第4关jQuery删除元素
<script>
//-----------begin-----------
$(".btn1").click(function(){
$(".line").last().remove();
});
$(".btn2").click(function(){
$(".final").last().empty();
});
//------------end------------
</script>
