• jQuery


    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>
    View Code

    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>
    View Code

    $层级选择器
    -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>
    View Code

    $简单选择器
    -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>
    View Code

    $内容选择器
    -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>
    View Code

    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>
    View Code

    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>
    View Code







  • 相关阅读:
    Java大小写转换
    java基础总结第一部分
    7-1 哥尼斯堡的“七桥问题” (25 分)
    关于并查集问题
    L1-049 天梯赛座位分配 (20 分)
    fuser 好命令
    android phone retmote control vlc player
    ubuntu 启动失败 虚惊一场
    useful vim
    cross_compile mtd-utils 出错解决
  • 原文地址:https://www.cnblogs.com/cao-yin/p/9845917.html
Copyright © 2020-2023  润新知