1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>04-jq事件绑定、入口函数、样式控制</title> 6 <script src="js/jquery-3.3.1.min.js"></script> 7 <script> 8 /*window.onload = function () { //js入口函数 9 $("#b1").click(function () { 10 alert("hello jquery"); 11 }); 12 };*/ 13 14 /*$(function () { //jq入口函数(dom文档加载完成之后执行该函数中的代码) 15 $("#b1").click(function () { 16 alert("hello jquery"); 17 }); 18 });*/ 19 20 21 /*window.onload = function () { 22 alert("abc"); 23 }; 24 window.onload = function () { 25 alert("def"); 26 }; 27 //弹出def，不弹abc*/ 28 29 /*$(function () { 30 alert("123"); 31 }); 32 $(function () { 33 alert("456"); 34 }); 35 //先弹出123，再弹456*/ 36 37 38 /* 39 window.onload 和 $(function) 区别 40 * window.onload 只能定义一次,如果定义多次，后边的会将前边的覆盖掉 41 * $(function)可以定义多次 42 */ 43 44 45 //页面加载完成后，获取id=div1的div元素，使其背景变为红色 46 $(function () { 47 // $("#div1").css("background-color", "red"); //写法1 48 $("#div1").css("backgroundColor", "red"); //写法2（dom写法，在backgroundColor上ctrl可以追踪源码） 49 }); 50 </script> 51 </head> 52 <body> 53 <div id="div1">div1....</div> 54 <div id="div2">div2....</div> 55 <input type="button" value="点我" id="b1"> 56 57 <script> 58 /* //给b1按钮绑定单击事件 59 $("#b1").click(function () { 60 alert("hello jquery"); 61 }); //click函数的参数为一个匿名函数*/ 62 </script> 63 </body> 64 </html>
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 2 <html> 3 <head> 4 <title>基本选择器</title> 5 <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 6 <script src="../js/jquery-3.3.1.min.js"></script> 7 8 <style type="text/css"> 9 div,span{ 10 width: 180px; 11 height: 180px; 12 margin: 20px; 13 background: #9999CC; 14 border: #000 1px solid; 15 float:left; 16 font-size: 17px; 17 font-family:Roman; 18 } 19 div .mini{ 20 width: 50px; 21 height: 50px; 22 background: #CC66FF; 23 border: #000 1px solid; 24 font-size: 12px; 25 font-family:Roman; 26 } 27 div .mini01{ 28 width: 50px; 29 height: 50px; 30 background: #CC66FF; 31 border: #000 1px solid; 32 font-size: 12px; 33 font-family:Roman; 34 } 35 </style> 36 <script type="text/javascript"> 37 $(function () { 38 //改变 id 为 one 的元素的背景色为 红色 39 $("#b1").click(function () { 40 $("#one").css("backgroundColor", "pink"); //id选择器 41 }); 42 //改变元素名为 <div> 的所有元素的背景色为 红色 43 $("#b2").click(function () { 44 $("div").css("backgroundColor", "pink"); //标签选择器 45 }); 46 //改变 class 为 mini 的所有元素的背景色为 红色 47 $("#b3").click(function () { 48 $(".mini").css("backgroundColor", "pink"); //class选择器 49 }); 50 //改变所有的<span>元素和 id 为 two 的元素的背景色为红色 51 $("#b4").click(function () { 52 $("span, #two").css("backgroundColor", "pink"); //并集选择器 53 }); 54 }); 55 </script> 56 </head> 57 <body> 58 <input type="button" value="保存" class="mini" name="ok" class="mini" /> 59 <input type="button" value="改变 id 为 one 的元素的背景色为 红色" id="b1"/> 60 <input type="button" value=" 改变元素名为 <div> 的所有元素的背景色为 红色" id="b2"/> 61 <input type="button" value=" 改变 class 为 mini 的所有元素的背景色为 红色" id="b3"/> 62 <input type="button" value=" 改变所有的<span>元素和 id 为 two 的元素的背景色为红色" id="b4"/> 63 <h1>有一种奇迹叫坚持</h1> 64 <h2>自信源于努力</h2> 65 <div id="one">id为one</div> 66 <div id="two" class="mini" > 67 id为two class是 mini 68 <div class="mini" >class是 mini</div> 69 </div> 70 <div class="one" > 71 class是 one 72 <div class="mini" >class是 mini</div> 73 <div class="mini" >class是 mini</div> 74 </div> 75 <div class="one" > 76 class是 one 77 <div class="mini01" >class是 mini01</div> 78 <div class="mini" >class是 mini</div> 79 </div> 80 <span class="spanone">class为spanone的span元素</span> 81 <span class="mini">class为mini的span元素</span> 82 <input type="text" value="zhang" id="username" name="username"> 83 </body> 84 </html>
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 2 <html> 3 <head> 4 <title>层次选择器</title> 5 <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 6 <script src="../js/jquery-3.3.1.min.js"></script> 7 <style type="text/css"> 8 div,span{ 9 width: 180px; 10 height: 180px; 11 margin: 20px; 12 background: #9999CC; 13 border: #000 1px solid; 14 float:left; 15 font-size: 17px; 16 font-family:Roman; 17 } 18 div .mini{ 19 width: 50px; 20 height: 50px; 21 background: #CC66FF; 22 border: #000 1px solid; 23 font-size: 12px; 24 font-family:Roman; 25 } 26 div .mini01{ 27 width: 50px; 28 height: 50px; 29 background: #CC66FF; 30 border: #000 1px solid; 31 font-size: 12px; 32 font-family:Roman; 33 } 34 </style> 35 <script type="text/javascript"> 36 $(function () { 37 //改变 <body> 内所有 <div> 的背景色为红色 38 $("#b1").click(function () { 39 $("body div").css("backgroundColor", "pink"); //后代选择器 40 }); 41 42 //改变 <body> 内子 <div> 的背景色为 红色 43 $("#b2").click(function () { 44 $("body > div").css("backgroundColor", "pink"); //子选择器 45 }); 46 }); 47 </script> 48 </head> 49 <body> 50 51 <input type="button" value="保存" class="mini" name="ok" class="mini" /> 52 <input type="button" value=" 改变 <body> 内所有 <div> 的背景色为红色" id="b1"/> 53 <input type="button" value=" 改变 <body> 内子 <div> 的背景色为 红色" id="b2"/> 54 <h1>有一种奇迹叫坚持</h1> 55 <h2>自信源于努力</h2> 56 <div id="one">id为one</div> 57 <div id="two" class="mini" > 58 id为two class是 mini 59 <div class="mini" >class是 mini</div> 60 </div> 61 <div class="one" > 62 class是 one 63 <div class="mini" >class是 mini</div> 64 <div class="mini" >class是 mini</div> 65 </div> 66 <div class="one"> 67 class是 one 68 <div class="mini01" >class是 mini01</div> 69 <div class="mini" >class是 mini</div> 70 </div> 71 <span class="spanone"> span 72 </span> 73 74 </body> 75 </html>
JavaWeb20.2【JQuery基础：jq基本操作、基本选择器、层次选择器】
原文：https://www.cnblogs.com/yppah/p/14977815.html