javaScirpt：写在html中的一门脚本语言，通常用来做校验和动画效果。目前最流行的JavaScript函数库，对JavaScript进行了封装。
jQuery：jquery就是对js的一个封装。并不是一门新语言。将常用的、复杂的操作进行函数化封装，直接调用，大大降低了使用JavaScript的难度，改变了使用JavaScript的习惯。
jQuery能做的JavaScript也都能做，但使用jQuery能大幅提高开发效率。由美国人John Resig在2006年推出，目前最新版本是v3.31。宗旨：Write less，do more（写更少代码，做更多事情）
JavaScript缺点：
1、选择器功能弱
2、DOM操作繁琐
3、浏览器兼容性不好
4、动画功能弱
jQuery优点：
1、强大的选择器功能
2、出色的DOM封装
3、浏览器兼容性好
4、强大的动画功能
5、体积小，压缩后只有100k左右
6、可靠的处理机制
7、使用隐形的迭代简化编程
8、丰富的插件
jQuery主要知识点：
1、加载页面完成就触发事件
JavaScript操作：
1 //js页面加载完成就触发的事件 2 window.onload = function(){ 3 alert("我是一个JavaScript-01"); 4 }
jQuery操作：【两种方式】
1 //jQuery页面加载完成就触发的事件 2 $(function(){ 3 alert("我是一个jQuery-01"); 4 }) 5 $(document).ready(function(){ 6 alert("我是一个jQuery-02"); 7 })
代码详情：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title>加载页面完成就触发事件</title> 6 </head> 7 <body> 8 9 </body> 10 <!--导入jQuery--> 11 <script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script> 12 <script type="text/javascript"> 13 //js页面加载完成就触发的事件 14 window.onload = function(){ 15 alert("我是一个JavaScript-01"); 16 } 17 //jQuery页面加载完成就触发的事件 18 $(function(){ 19 alert("我是一个jQuery-01"); 20 }) 21 $(document).ready(function(){ 22 alert("我是一个jQuery-02"); 23 }) 24 </script> 25 </html>
2、jQuery选择器【建议写在jQuery页面加载里面】
$基本选择器
-01：id选择器：$("id名"); => $("#div01");
-02：元素选择器：$("元素名"); => $("div");
-03：.class选择器：$(".class名") => $(".divclass")
-04：*代表所有：$("*");
-05：组合选择器：$("#div01,.divclass,h2");【逗号隔开】
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>jQuery基本选择器</title> 6 <style type="text/css"> 7 div{ 8 border: solid 1px red; 9 height: 80px; 10 } 11 </style> 12 </head> 13 <body> 14 <div id="div01"> 15 div01 16 </div><br /> 17 <div id="div02"> 18 div02 19 </div><br /> 20 <div id="div03" class="divclass"> 21 div03 22 </div> 23 <h2>hello</h2> 24 <div id="div04"> 25 <h3>divh3</h3> 26 <span>divspan3</span> 27 </div><br /> 28 <div id="div05"> 29 div05 30 </div> 31 <br /> 32 <div id="div06"> 33 div06 34 </div> 35 <br /> 36 </body> 37 <script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script> 38 <script type="text/javascript"> 39 $(function(){ 40 //1.id选择器 41 var varid=$("#div01"); 42 //varid.css("background-color","chocolate"); 43 44 //2.元素选择器 45 var vardiv=$("div"); 46 //vardiv.css("background-color","seagreen"); 47 48 //3. .class选择器 49 var varclass = $(".divclass") 50 //varclass.css("background-color","#FF0000"); 51 52 //4. *代表所有 53 var varall = $("*"); 54 //varall.css("background-color","burlywood"); 55 56 //5.组合选择器 57 var varzh = $("#div01,.divclass,h2"); 58 //varzh.css("color","gray"); 59 }) 60 </script> 61 </html>
$层级选择器
-01：包含选择器：$("#div04 h3");【之间空格隔开】
-02：子包含选择器：$("#div04>h3");
-03：prev + next 配置当前元素紧接的下一个元素(中间不可以有其他元素)
-04：prev ~ siblings 配置当前元素紧接的下的所有元素
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>层级选择器</title> 6 <style type="text/css"> 7 div{ 8 border: solid 1px red; 9 height: 80px; 10 } 11 </style> 12 </head> 13 <body> 14 <div id="div01"> 15 div01 16 </div><br /> 17 <div id="div02"> 18 div02 19 </div><br /> 20 <div id="div03" class="divclass"> 21 div03 22 </div> 23 <h2>hello</h2> 24 <div id="div04"> 25 <h3>divh3</h3> 26 <span>divspan3</span> 27 </div><br /> 28 <div id="div05"> 29 div05 30 </div> 31 <br /> 32 <div id="div06"> 33 div06 34 </div> 35 <br /> 36 </body> 37 <script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script> 38 <script type="text/javascript"> 39 $(function(){ 40 //层级选择器 41 //6.包含选择器 42 var varh3 = $("#div04 h3"); 43 //varh3.css("color","darkblue"); 44 45 //7.子包含选择器 46 var varh3son = $("#div04>h3"); 47 varh3son.css("color","red"); 48 49 //8: prev + next 配置当前元素紧接的下一个元素(中间不可以有其他元素) 50 var vardiv05 = $("#div04 + div"); 51 vardiv05.css("background-color","red"); 52 53 //9: prev ~ siblings 配置当前元素紧接的下的所有元素 54 var vardivall = $("#div02 ~ div"); 55 //vardivall.css("background-color","blue"); 56 }) 57 </script> 58 </html>
$简单选择器
-01：匹配找到的第一个元素 :first
-02：匹配找到的最后一个元素 :last
-03：去除所有与给定选择器匹配的元素 :not
-04：匹配所有索引值为偶数的元素，从 0 开始计数 :even
-05：匹配所有索引值为奇数的元素，从 0 开始计数
-06：匹配一个给定索引值的元素 :eq(index)
-07：匹配所有大于给定索引值的元素 :gt(index)
-08：匹配所有小于给定索引值的元素:lt(index)
-09：匹配如 h1, h2, h3之类的标题元素 :header
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>jQuery简单选择器</title> 6 <style type="text/css"> 7 div{ 8 border: solid 1px firebrick; 9 height: 40px; 10 } 11 </style> 12 </head> 13 <body> 14 <table border="1px" width="500px" align="center"> 15 <tr> 16 <td>0</td> 17 <td>01</td> 18 <td>02</td> 19 <td>03</td> 20 </tr> 21 <tr> 22 <td>1</td> 23 <td>11</td> 24 <td>12</td> 25 <td>13</td> 26 </tr> 27 <tr> 28 <td>2</td> 29 <td>21</td> 30 <td>22</td> 31 <td>23</td> 32 </tr> 33 <tr> 34 <td>3</td> 35 <td>31</td> 36 <td>32</td> 37 <td>33</td> 38 </tr> 39 <tr> 40 <td>4</td> 41 <td>41</td> 42 <td>42</td> 43 <td>43</td> 44 </tr> 45 <tr> 46 <td>5</td> 47 <td>51</td> 48 <td>52</td> 49 <td>53</td> 50 </tr> 51 </table> 52 <br /> 53 <div id="div01"> 54 div01 55 </div> 56 <br /> 57 <div id="div02"> 58 div02 59 </div> 60 <br /> 61 <div id="div03"> 62 div03 63 </div> 64 <h1>h1</h1> 65 <h2>h2</h2> 66 <h5>h3</h5> 67 </body> 68 <script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script> 69 <script type="text/javascript"> 70 $(function(){ 71 //1.匹配找到的第一个元素 :first 72 var varfirst = $("tr:first"); 73 //varfirst.css("background-color","red"); 74 75 //2.匹配找到的最后一个元素 :last 76 var varlast = $("tr:last"); 77 // varlast.css("background-color","firebrick"); 78 79 //3.去除所有与给定选择器匹配的元素 :not 80 var varnot = $("div:not(#div02)"); 81 //varnot.css("background-color","chartreuse"); 82 83 //4.匹配所有索引值为偶数的元素，从 0 开始计数 :even 84 var vareven = $("tr:even"); 85 // vareven.css("background-color","forestgreen"); 86 //5.匹配所有索引值为奇数的元素，从 0 开始计数 87 var varodd = $("tr:odd"); 88 // varodd.css("background-color","yellow"); 89 90 //6.匹配一个给定索引值的元素 :eq(index) 91 var vareq = $("tr:eq(3)"); 92 // vareq.css("background-color","gray"); 93 94 //7.匹配所有大于给定索引值的元素 :gt(index) 95 var vargt = $("tr:gt(1)"); 96 //vargt.css("background-color","pink"); 97 98 //8.匹配所有小于给定索引值的元素:lt(index) 99 var varlt = $("tr:lt(3)"); 100 varlt.css("background-color","chocolate"); 101 102 //9:匹配如 h1, h2, h3之类的标题元素 :header 103 var varheader = $(":header"); 104 //varheader.css("color","darkblue"); 105 }) 106 </script> 107 </html>
$内容选择器
-01：匹配包含给定文本的元素:contains(text)
-02：匹配所有不包含子元素或者文本的空元素 :empty
-03：匹配含有选择器所匹配的元素的元素 :has(selector)
-04：匹配含有子元素或者文本的元素 :parent
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>jQuery内容选择器</title> 6 <style type="text/css"> 7 div{ 8 border: solid 1px firebrick; 9 height: 100px; 10 } 11 </style> 12 </head> 13 <body> 14 <table border="1px" width="500px" align="center"> 15 <tr> 16 <td>0</td> 17 <td>01</td> 18 <td></td> 19 <td>03</td> 20 </tr> 21 <tr> 22 <td>1</td> 23 <td></td> 24 <td>12</td> 25 <td>13</td> 26 </tr> 27 <tr> 28 <td>2</td> 29 <td>21</td> 30 <td>22</td> 31 <td></td> 32 </tr> 33 <tr> 34 <td>3</td> 35 <td>31</td> 36 <td></td> 37 <td>33</td> 38 </tr> 39 <tr> 40 <td>4</td> 41 <td>41</td> 42 <td>42</td> 43 <td>43</td> 44 </tr> 45 <tr> 46 <td>5</td> 47 <td></td> 48 <td>52</td> 49 <td>53</td> 50 </tr> 51 </table> 52 <br /> 53 <div id="div01"> 54 div01 55 <h1>divh1</h1> 56 </div> 57 <br /> 58 <div id="div02"> 59 div02 60 </div> 61 <br /> 62 <div id="div03"> 63 div03 64 </div> 65 <h1>h1</h1> 66 <h2>h2</h2> 67 <h5>h3</h5> 68 </body> 69 <script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script> 70 <script type="text/javascript"> 71 $(function(){ 72 //1.匹配包含给定文本的元素:contains(text) 73 var div02 = $("div:contains(div02)"); 74 //div02.css("background-color","fuchsia"); 75 76 //2.匹配所有不包含子元素或者文本的空元素 :empty 77 var varempty = $("td:empty"); 78 //varempty.css("background-color","darkblue") 79 80 //3.匹配含有选择器所匹配的元素的元素 :has(selector) 81 var varhas = $("div:has(h1)"); 82 varhas.css("background-color","darkcyan"); 83 84 //4.匹配含有子元素或者文本的元素 :parent 85 var vartdparent = $("td:parent"); 86 //vartdparent.css("background-color","#0000FF"); 87 }) 88 </script> 89 </html>
3、jQuery操作CSS样式
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>jquery操作css</title> 6 <style type="text/css"> 7 div{ 8 border: solid 1px red; 9 height: 100px; 10 font-size: 10px; 11 } 12 13 .divclass{ 14 color: blue; 15 font-family: "微软雅黑"; 16 font-size: 60px; 17 } 18 19 .divclass2{ 20 background-color: pink; 21 } 22 </style> 23 </head> 24 <body> 25 <div id="div01"> 26 div01 27 </div> 28 <br /> 29 <div id="div02"> 30 div02 31 </div> 32 <input type="button" value="js操作css" onclick="testjscss()"/> 33 <input type="button" value="jq操作css" onclick="testjqcss()"/> 34 <input type="button" value="jq移除css" onclick="testjqcss2()"/> 35 <input type="button" value="jq切换css" onclick="testjqtoggle()"/> 36 </body> 37 <script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script> 38 <script type="text/javascript"> 39 //js操作css样式 40 function testjscss(){ 41 //1 对象.style.样式的名称=样式的值 42 //document.getElementById("div01").style.color = "gold"; 43 44 //2 对象.className 45 document.getElementById("div01").className = "divclass"; 46 47 } 48 49 //jq操作css样式 50 function testjqcss(){ 51 //1 对象.css() 52 //通过对象.css(样式的名称) 可以获取样式的值 53 var vardiv = $("#div01"); 54 //alert(vardiv.css("height"));//height: 100px; 55 56 //设置单个样式的值 57 //vardiv.css("color","gold"); 58 59 //设置多个样式的值 60 //$("#div01").css({"font-size":"50px","color":"red"}); 61 62 //把一类div添加多个样式 -- 了解 63 /*$("div").css({"height":function(index,value){ 64 return parseInt(value)*2; 65 },"font-size":function(index,value){ 66 return parseInt(value)*3; 67 } 68 });*/ 69 70 //2: 对象.addClass() 71 $("#div01").addClass("divclass divclass2"); 72 } 73 74 //jq移除样式 75 function testjqcss2(){ 76 //3:jq移除样式 对象.removeClass() 77 $("#div01").removeClass("divclass divclass2"); 78 } 79 80 //jq切换样式 81 function testjqtoggle(){ 82 $("#div01").toggleClass("divclass divclass2"); 83 } 84 </script> 85 </html>
4、jQuery操作对象属性
JavaScript获取属性值和设置属性值
1 //js-获取input的value和name 2 var varinputjs = document.getElementById("unameid"); 3 alert(varinputjs.value+"+"+varinputjs.name); 4 5 //js-设置属性值 6 varinputjs.value = "迪丽热巴"; 7 //js-设置自定的属性值:abc 8 varinputjs.setAttribute("abc","游戏解说柚子");
jQuery获取属性值和设置属性值
1 //jq-获取input的value和name 2 var varinputjq = $("#unameid"); 3 alert(varinputjq.val()+"+"+varinputjq.attr("name")); 4 5 //jq-设置属性值 6 varinputjq.val("迪丽热巴"); 7 jq-设置自定的属性值:abc 8 varinputjq.attr("abc","游戏解说柚子");
JavaScript获取文本和设置文本
1 //js获取文本 div span td h 2 var vardivjs = document.getElementById("div01"); 3 alert(vardivjs.innerText+""+vardivjs.innerHTML); 4 5 //js设置文本和html 6 vardivjs.innerText = "<font style='color:red'>hello</font>"; 7 vardivjs.innerHTML = "<font style='color:red'>hello</font>";
jQuery获取文本和设置文本
1 //jq获取文本 2 var vardivjq = $("#div01"); 3 alert(vardivjq.text()+"--"+vardivjq.html()); 4 5 //jq设置文本和html 6 vardivjq.text("<font style='color:red'>hello</font>"); 7 vardivjq.html("<font style='color:red'>hello</font>");
jQuery操作对象属性：code
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>jQuery操作对象属性</title> 6 </head> 7 <body> 8 <input type="text" name="uname" id="unameid" value="热巴" abc="柚子" /> 9 <br /> 10 <div id="div01"> 11 <h2>div01</h2> 12 </div> 13 <br /> 14 <input type="button" value="jq操作属性" onclick="testJqattr();"/> 15 <input type="button" value="jq操作文本" onclick="jqtextandhtml();"/> 16 </body> 17 <script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script> 18 <script type="text/javascript"> 19 //jq获取表单域的属性 20 function testJqattr(){ 21 22 //js-获取input的value和name 23 var varinputjs = document.getElementById("unameid"); 24 //alert(varinputjs.value+"+"+varinputjs.name); 25 26 //js-设置属性值 27 //varinputjs.value = "迪丽热巴"; 28 //js-设置自定的属性值:abc 29 //varinputjs.setAttribute("abc","游戏解说柚子"); 30 31 //jq-获取input的value和name 32 var varinputjq = $("#unameid"); 33 //alert(varinputjq.val()+"+"+varinputjq.attr("name")); 34 35 //jq-设置属性值 36 varinputjq.val("迪丽热巴"); 37 //jq-设置自定的属性值:abc 38 //varinputjq.attr("abc","游戏解说柚子"); 39 } 40 //jq获取标签里面的文本 41 function jqtextandhtml(){ 42 //js获取文本 div span td h 43 var vardivjs = document.getElementById("div01"); 44 //alert(vardivjs.innerText+""+vardivjs.innerHTML); 45 46 //js设置文本和html 47 //vardivjs.innerText = "<font style='color:red'>hello</font>"; 48 //vardivjs.innerHTML = "<font style='color:red'>hello</font>"; 49 50 //jq获取文本 51 var vardivjq = $("#div01"); 52 //alert(vardivjq.text()+"--"+vardivjq.html()); 53 54 //jq设置文本和html 55 //vardivjq.text("<font style='color:red'>hello</font>"); 56 vardivjq.html("<font style='color:red'>hello</font>"); 57 } 58 </script> 59 </html>