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>

　　

posted @ 2021-08-22 17:50  从此重新定义啦  阅读(76)  评论(0)    收藏  举报