回顾语法结构
<script> $(function () { $("div1") .click(function () { alert("JQuery 文件 ") }) }) </script>
click事件
理解
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="jquery-3.6.js"></script> <title>click事件</title> </head> <body> <h1>111111变呈红色11-在click事件后变yellow<!--<script> $(function () { $("h2").click(function () { $("h2").css('color','red'); }) }) </script>-->1111</h1> <h2 class="p1">2222222222</h2> <h3>333333333333</h3> <h4>444444444444</h4> <h5>css修饰多重样式*</h5> <script>/*click多重事件基础*/ $(function () { $("h2").click(function () { $("h2").css('color','red'); }) $("h2.p1").click(function () { $("h2.p1").css("height",'200px') }) $("h2.p1").click(function () { $("h2.p1").css("color",'green') }) $("h2.p1").click(function () { $("h2.p1").css("font-size",'200px') }) }) </script> <script> $(function () { $("h1").click(function () { $("h1").css('color','pink'); $("h1").css('font-size',"40px") }) }) </script> <script> $(function () { $("h1").click(function () { /*$("h1").css('color','yellow'); $("h1").css('font-size',"100px");*/ $(this).css('font-size','50px') $(this).css('line-height','100px') }) }) </script> <script> $(function () { /*css修饰多重样式*/ $("h3").click(function () { $("h3").css('color','pink'); $("h3").css('font-size',"80px"); $("h3").css('weight','60px') }) }) </script> <script> $(function () { $("h4").click(function () { $("h4").css('color','blue'); $("h4").css('font-size',"100px"); }) }) </script> <script> $(function () { $("h5").click(function () { /* $("h5").css('color','green'); $("h5").css('font-size',"80px");*/ $(this).css({ 'font-size':'34px', 'line-height':'50px', 'color':'green', 'color':'blue', 'line-weight':'20px', }) }) }) </script> </body> </html>c
采用JavaScript+HTML实现一案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="jquery-3.6.js"></script> <title>js方法</title> <script type="text/javascript"> window.onload=function () { //获取按钮 //设置边框 //设置文本 三个div var btOne = document.getElementById('btnone'); // console.log(btOne); var btTwo = document.getElementById('btntwo'); // console.log(btTwo); var divs = document.getElementsByTagName('div'); // console.log(div); var btTree=document.getElementById('bttree') var bttFor=document.getElementById('bttfor') $(document).click(function () { }) btOne.onclick = function () { for (var i = 0; i < divs.length; i++) { divs[i].style.border = '4px solid pink' divs[i].style.background='yellow'; divs[i].style.height='300px' divs[i].style.weight='600px' } } btTwo.onclick=function () { for (var j=0;j<divs.length;j++){ /* alert("文本设置成功") alert("JavaScript方法引入成功")*/ divs[j].textContent = '今天是第二天学习jquery'; } } btTree.onclick=function () { for (var d=0;d<divs.length;d++){ /* alert("文本设置成功") alert("JavaScript方法引入成功")*/ divs[d].style="font-familly","黑体" divs[d].textContent = '今天是第二天学习jquery likeseeyou'; } } bttFor.onclick=function () { for (var f=0;f<divs.length;f++){ /* alert("文本设置成功") alert("JavaScript方法引入成功")*/ divs[f].style="font-familly","黑体" divs[f].textContent = '今天是第二zhou学习jquery '; divs[f].style="color","red" divs[f].style.border = '10px solid pink' divs[f].style.background='while'; divs[f].style.height='300px' divs[f].style.weight='600px' } } } </script> <!--JavaScript语言--> </head> <body> <hr> <input type="button" id="btnone" value="设置边框" > <input type="button" id="btntwo" value="设置文本"> <input type="button" id="bttree" value="设置字体"> <input type="button" id="bttfor"value="设置行高"> <div></div> <br> <div></div> <br> <div></div> <br> <div></div> <br> <div></div> <br> <div></div> <br> <div></div> <br> <div></div> <br> <div></div> <br> <div></div> <br> <div></div> <br> <div></div> <br> <div></div> <br> <div></div> <br> <div></div> <br> <div></div> <br> <div></div> <br> <div></div> <br> </body> </html>
事件是实现一种功能
