8.juery
代码1：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#mysp{
display: none;
}
</style>
</head>
<body>
<h1 class="myc">111</h1>
<h1 class="myc">222</h1>
<img src="mei.jpeg"/>
<span id="mysp">
<button>图片回来</button>
</span>
<form>
<input type="text" name="" id="id1" value="hello"/>
<input type="text" name="" id="id2" value="hello2"/>
</form>
<script src="jquery-3.6.0.js"></script>
<script>
//jquery遍历数组
var arr1=['linzi1','linzi2','linzi3','linzi4'];
$.each(arr1,function (key,value) {
console.log(key,value);
})
//jquery选择器
console.log($('title').html());
$('.myc').each(function (key,value) {
$(value).css('color','red');
});
var var3=$('.myc').eq(1).html();
console.log(var3);
//jquery事件绑定
$('.myc').eq(0).click(function () {
console.log('jq事件'+$(this).html());
})
//juery鼠标事件
$('.myc').eq(1).mouseover(function () {
console.log("juery鼠标事件");
})
//juery属性
$('#id1').val("linzi").attr("type",'password');
$('#id2').attr("maxlength",'2');
$('title').html("juery属性");
//juery隐藏显示
$('img').click(function () {
$(this).hide();
$('#mysp').show();
})
$('#mysp').click(function () {
$('img').show();
$(this).hide();
})
</script>
</body>
</html>
代码2：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.active{
color: aqua;
}
</style>
</head>
<body>
<button>小米</button>
<button>华为</button>
<button>苹果</button>
<div>
<p class="brand0">小米1</p>
<p class="brand0">小米2</p>
<p class="brand1">华为1</p>
<p class="brand2">苹果1</p>
</div>
<script src="jquery-3.6.0.js"></script>
<script>
$('button').each(function (index,item) {
$(item).click(function () {
$('p').hide();
$('.brand'+index).show();
$(this).addClass('active');
}
)
})
</script>
</body>
</html>
