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>
标签:function,console,log,juery,myc,click 来源: https://www.cnblogs.com/hbxZJ/p/15172973.html