JQuery（4）前端

jayden-leo

已于 2022-05-06 21:57:23 修改

阅读量697

点赞数

分类专栏：前端文章标签：前端 jquery javascript web web app

于 2022-05-06 21:56:08 首次发布

本文链接：https://blog.csdn.net/qq_34516746/article/details/124596491

版权

前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

1 JQuery概述

1.1 介绍

JQuery是目前最流行的JavaScript函数库之一，对JavaScript进行了封装。并不是一门新语言。它将常用的、复杂的操作进行函数化封装，直接调用，大大降低了使用JavaScript的难度，改变了使用JavaScript的习惯。jQuery能做的JavaScript也能做，但使用jQuery能大幅提高开发效率,由美国人John Resig在2006年推出，目前最新版本是v3.5.1。宗旨：Write less，do more（写更少代码，做更多事情）。
官方网址：http://jquery.com/
中文网：http://www.jq22.com/

1.2 使用JQuery的原因

（1）使用原生JavaScript编码存在问题：选择器功能弱，DOM操作繁琐之极，浏览器兼容性不好，动画功能弱等的问题
（2）而jQuery的优点就在于：强大的选择器出色的DOM封装，出色的浏览器兼容性，强大的动画功能，体积小，压缩后只有100KB左右，可靠的事件处理机制，使用隐式迭代简化编程，丰富的插件支持。

1.3 实例

JQuery如何引入？在官网下载JQuery的js文件，然后复制到自己的项目下，用script引入即可。

案例内容：实现隔行变色的效果，在使用jQuery实现效果之前，先使用在HTML中使用class属性直接标记、使用JavaScript来实现动态隔行变色，然后再采用jQuery来实现，可以明显体现到jQuery的方便和简单。

（1）使用原生JavaScript实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .a {
            background-color:  greenyellow;
        }
        .b {
            background-color:  yellowgreen;
        }
        .c {
            background-color: yellow;
        }
    </style>
    <script type="text/javascript">
        //页面加载后调用一个匿名函数
        window.onload = function() {
            //获取所有的行
            var arr = document.getElementsByTagName("tr");
            //对所有的行动态实现隔行变色
            for(var i = 0; i < arr.length; i++) {
                if(i == 0) {
                    arr[i].className   = "a";

                }   else if(i % 2 == 1) {
                    arr[i].className   = "b";
                }   else {
                    arr[i].className   = "c";
                }
            }
        }
    </script>
</head>
<body>
<table class="datalist">
    <tr>
        <th scope="col">Name</th>
        <th scope="col">Class</th>
        <th scope="col">Birthday</th>
        <th scope="col">Constellation</th>
        <th scope="col">Mobile</th>
    </tr>
    <tr>
        <td>isaac</td>
        <td>W13</td>
        <td>Jun   24th</td>
        <td>Can</td>
        <td>1118159</td>
    </tr>
    <tr>
        <td>fresheggs</td>
        <td>W610</td>
        <td>Nov   5th</td>
        <td>Scorpio</td>
        <td>1038818</td>
    </tr>
    <tr>
        <td>girlwing</td>
        <td>W210</td>
        <td>Sep   16th</td>
        <td>Virgo</td>
        <td>1307994</td>
    </tr>
    <tr>
        <td>tastestory</td>
        <td>W15</td>
        <td>Nov   29th</td>
        <td>Sagittarius</td>
        <td>1095245</td>
    </tr>
</table>
</body>
</html>

（2）使用JQuery实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--引入jQuery文件-->
    <script  src="js/jquery.min.js"></script>
    <script>
        $(function(){
            $("tr:odd").css("backgroundColor","yellowgreen")
            $("tr:even").css("backgroundColor","lightyellow")
            $("tr:first").css("backgroundColor","greenyellow")
        })
    </script>
</head>
<body>
<table class="datalist"   summary="list   of members in EE Studay" id="oTable">
    <tr>
        <th scope="col">Name</th>
        <th scope="col">Class</th>
        <th scope="col">Birthday</th>
        <th scope="col">Constellation</th>
        <th scope="col">Mobile</th>
    </tr>
    <tr>
        <td>isaac</td>
        <td>W13</td>
        <td>Jun   24th</td>
        <td>Cancer</td>
        <td>1118159</td>
    </tr>
    <tr>
        <td>fresheggs</td>
        <td>W610</td>
        <td>Nov   5th</td>
        <td>Scorpio</td>
        <td>1038818</td>
    </tr>
    <tr>
        <td>girlwing</td>
        <td>W210</td>
        <td>Sep   16th</td>
        <td>Virgo</td>
        <td>1307994</td>
    </tr>
    <tr>
        <td>tastestory</td>
        <td>W15</td>
        <td>Nov   29th</td>
        <td>Sagittarius</td>
        <td>1095245</td>
    </tr>
</table>
</body>
</html>

通过案例我们发现,引入jQuery后我们的js代码变的简单,和write less,do more的目标特别契合

1.4 jQuery页面加载函数

页面加载函数是页面加载完毕事件绑定的函数，该函数在真实应用里面应用比较多，所以再此处强调一下jQuery中的页面加载函数。
实例

<!DOCTYPE html>
<html>
        <head>
                <meta charset="UTF-8">
                <title></title>
                <script type="text/javascript" src="js/jquery.min.js" ></script>
                <script>
                        /*jQuery(document).ready(function (){
                                var domS1=document.getElementById("s1");
                                console.log(domS1.innerText);
                        })*/
                        
                        // jQuery  可以简写 $
                        /*$(document).ready(function (){
                                var domS1=document.getElementById("s1");
                                console.log(domS1.innerText);
                        })*/
                        
                        
                        $(function(){
                                var domS1=document.getElementById("s1");
                                console.log(domS1.innerText);
                        })
                        
                        $(function(){
                                console.log("第二个页面加载函数")
                        })
                        
                        $(function(){
                                console.log("第三个页面加载函数")
                        })
                        
                        
                </script>
        </head>
        <body>
                <span id="s1">测试文字</span>
        </body>
</html>

1.5 小结

关于jQuery的使用需要先导入jQuery的js文件，jQuery本身就是一个JS文件。jQuery.min.js是jQuery文件的压缩版,生产环境下推荐压缩版, $ 是jQuery是使用最多的符号，它有多个作用。这个示例中就使用了 $ 的两个作用。

作用1：页面加载函数

jQuery(document).ready(function(){});和$(document).ready(function({}));简写为$(function(){})，相当于window.onload=function(){}但是功能比window.onload更强大window.onload一个页面只能写一个,但是可以写多个$() 而不冲突,window.onload要等整个页面加载完后再执行(包括图片、超链接、音视频等)，但是$()的执行时间要早

作用2：选择器标志 $(selector)
选择器。jQuery具有强大的选择器功能，后面会有专门章节进行介绍

2 JQuery选择器

jQuery提供了丰富的选择器功能，这个是jQuery相比JavaScript的一大优势。我们先来看一下jQuery API。可以看到提供了众多的选择器，可以非常方便简单的获取要选择的内容。
回顾问题：JavaScript是如何直接获取要选择的内容的
getElementById( ) ：返回一个节点对象
getElementsByName( )：返回多个（节点数组）
getElementsByTagName( ) ：返回多个（节点数组）
而jQuery的选择器功能要强大的多

2.1 基本选择器

（1）标签选择器 $(" a ") （ 2 ） I D 选择器 ‘$ (“#id”) $KaTeX parse error: Expected 'EOF', got '#' at position 4: ("p#̲id")` （3）类选择器 `$ (“.class”) $(" h 2 . c l a s s ") ‘ （ 4 ）通配选择器 ‘$ (“*”) （5）并集选择器 $(" e l e m 1, e l e m 2, e l e m 3 ") ‘ （ 6 ）后代选择器 ‘$ (ul li) （7）父子选择器$(ul>li) （8）后面第一个兄弟元素prev + next（9）后面所有的兄弟元素prev ~ next`
这些选择器其实我们并不陌生，因为在CSS样式中都有类似的选择器，并且其含义也是一样的。不同的在CSS中是对选择的内容定义CSS样式，在jQuery中用来选择内容并后续进行更多的下步操作。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>基本选择器</title>
    <style type="text/css">
        .myClass{
            background-color:  aqua;
        }
    </style>
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript">
        // 必须自己会使用的选择器  id选择器  $("#id") 类选择器 $('.class属性值')  标签选择器 $("标签名")
        $(function(){
            //标签选择器 $("a")
            //$("h3").addClass("myClass");
            //$("p").addClass("myClass");
            
            //ID选择器 $("#id")     $("p#id")
            //$("#h31").addClass("myClass");
            //$("h3#h31").addClass("myClass");
            
            //类选择器 $(".class")    $("h2.class")
            //$(".red1").addClass("myClass");
            
            //通配选择器 $("*")
            //$("*").addClass("myClass");
            
            //并集选择器$("elem1,elem2,elem3")
            //$("#h31,span,div").addClass("myClass");
            
            //后代选择器$(ul li)
            //$("p span").addClass("myClass");
            
            //父子选择器 $(ul>li)
            //$("p>span").addClass("myClass");
            
            //后面第一个兄弟元素 prev + next
            //$("h3+p").addClass("myClass");
            
            //后面所有的兄弟元素 prev ~ next
            $("h3~p").addClass("myClass");
        });
    </script>
</head>
<body>
<h3 id="h31">JSP</h3>
<p>
    JSP全名为Java Server Pages，中文名叫java服务器页面，
    其根本是一个简化的<span>Servlet</span>设计， 它[1]  是
    由Sun Microsystems公司倡导、许多公司参与一起建立的一种
    动态网页技术标准。JSP技术有点类似ASP技术，它是在传统的网
    页<em><span>HTML</span></em>（标准通用标记语言的子集）
    文件(*.htm,*.html)   中插入Java程序段(Scriptlet)和JSP
    标记(tag)，从而形成JSP文件，后缀名为(*.jsp)。 用JSP开发
    的Web应用是跨平台的，既能在Linux下运行，也能在其他操作系
    统上运行。
</p>
<h3 id="h32"   class="red1">Servlet</h3>
<p>
    Servlet（Server Applet）是Java Servlet的简称，是为小服
    务程序或服务连接器，用Java编写的服务器端程序，主要功能在于
    交互式地浏览和修改数据，生成动态Web内容。
</p>
<p class="red1">
    狭义的Servlet是指Java语言实现的一个接口，广义的Servlet
    是指任何实现了这个Servlet接口的类，一般情况下，人们将
    Servlet理解为后者。Servlet运行于支持Java的应用服务器中。
    从原理上讲，Servlet可以响应任何类型的请求，但绝大多数情
    况下Servlet只用来扩展基于HTTP协议的Web服务器。
</p>
<div>
    <p>div   p</p>
</div>
<span>span</span>
<p class="red1">
    狭义的Servlet是指Java语言实现的一个接口，广义的Servlet
    是指任何实现了这个Servlet接口的类，一般情况下，人们将Servlet
    理解为后者。Servlet运行于支持Java的应用服务器中。从原理上讲，
    Servlet可以响应任何类型的请求，但绝大多数情况下Servlet只用
    来扩展基于HTTP协议的Web服务器。
</p>
</body>
</html>

2.2 属性选择器

[attribute] 匹配包含给定属性的元素
[attribute1][attribute2] 复合属性选择器，需要同时满足多个属性
[attribute=value] 匹配给定的属性是某个特定值的元素
[attribute!=value] 匹配所有属性不等于特定值的元素
[attribute^=value] 匹配给定的属性是以某些值开始的元素
[attribute$=value] 匹配给定的属性是以某些值结尾的元素
[attribute*=value] 匹配给定的属性是以包含某些值的元素

<!DOCTYPE html>
<html>
    <head>
         <meta charset="utf-8">
         <title>属性选择器</title>
         <style type="text/css">
             .myClass {
                  background-color: aqua;
             }
         </style>
         <script src="js/jquery.js"   type="text/javascript"   charset="utf-8"></script>
         <script type="text/javascript">
             $(function() {
                  //[attribute] 
                  //$("a").addClass("myClass"); 
                  //$("a[href]").addClass("myClass"); 
                  //[attribute1][attribute2] 
                  //$("a[href][title]").addClass("myClass"); 
                  //[attribute=value]   
                  //$("a[href='film-2.html']").addClass("myClass"); 
                  //[attribute!=value]   
                  //$("a[href][href!='film-2.html']").addClass("myClass"); 
                  //[attribute^=value]   
                  //$("a[href^='http']").addClass("myClass"); 
                  //[attribute$=value   
                  //$("a[href$='htm']").addClass("myClass"); 
                  //[attribute*=value]   
                  $("a[href*='mashibing']").addClass("myClass");
             });
         </script>
    </head>
    <body>
         <ul id="msb">
             <li>
                  <a href="http://www.mashibing.com/job.html">青花瓷</a>
             </li>
             <li>
                  <a href="http://www.mashibing.com/dorm">小朋友,你是否有很多问号</a>
             </li>
             <li>
                  <a href="http://www.mashibing.com/mobile">羞答答的玫瑰静悄悄的开</a>
             </li>
             <li>
                  <a href="http://www.mashibing.com/flag">月半小夜曲</a>
             </li>
             <li>
                  <a href="http://www.msb.com/film">单恋一枝花</a>
                  <ul id="film">
                      <li>
                          <a href="film-1.html">乱世佳人</a>
                      </li>
                      <li>
                          <a href="film-2.html"   title="阿郎的故事">阿郎的故事</a>
                      </li>
                      <li id="film3">
                          <a href="film-3.html">阿甘正传</a>
                      </li>
                      <li>
                          <a href="http://www.mashibing.com/film/film-4.htm"   title="鲁冰花">鲁冰花</a>
                      </li>
                      <li>
                          <a name="film-5.htm"   title="太行山上">太行山上</a>
                      </li>
                      <li>无问西东</li>
                  </ul>
             </li>
         </ul>
    </body>
</html>

2.3 位置选择器

针对整个页面而言的位置选择器
:first 获取第一个元素
:last 获取最后一个元素
:odd 匹配所有索引值为奇数的元素，从0 开始计数 
:even匹配所有索引值为偶数的元素，从0 开始计数
:eq(n) 匹配一个给定索引值的元素
:gt(n) 匹配所有大于给定索引值的元素
:lt(n) 匹配所有小于给定索引值的元素

针对上级标签而言的位置选择器
:first-child  匹配第一个子元素
:last-child匹配最后一个子元素 
:only-child如果某个元素是父元素中唯一的子元素，将会被匹配
:nth-child(n)  :nth-child(odd|even) :nth-child(xn+y) 匹配其父元素下的第N个子或奇偶元素
注意：nth-child()选择器编号是从1开始，而其他选择器从0开始

<!DOCTYPE html> 
<html> 
      <head> 
        <meta charset="utf-8"> 
        <title>位置选择器</title> 
        <style type="text/css"> 
                 div{ 
                      border: 1px solid  red; 
                } 
                .myClass{ 
                      background-color:  aqua; 
                } 
        </style> 
        <script src="js/jquery.min.js"   ></script>
        <script type="text/javascript"> 
            $(function(){ 
                //位置针对整个页面 
                //:first     :last   :odd   :even   
                //$("p:first").addClass("myClass"); 
                //$("p:last").addClass("myClass"); 
                //$("p:odd").addClass("myClass");//索引从0开始 奇数的索引 1 3 5 第偶数的元素
                //$("p:even").addClass("myClass"); //
                //:eq(n)     :gt(n)   :lt(n) 
                //$("p:eq(4)").addClass("myClass");   //equals 
                //$("p:lt(4)").addClass("myClass");//less   than  
                //$("p:gt(4)").addClass("myClass");//greater   than 
                //位置针对上级标签 
                //:first-child    :last-child   :only-child 
                //$("p:first-child").addClass("myClass"); 
                //$("p:last-child").addClass("myClass"); 
                //$("p:only-child").addClass("myClass"); 
                //:nth-child(n)   :nth-child(odd|even) :nth-child(xn+y)
                  //索引从0开始 只有此处从1开始
                //$("p:nth-child(2)").addClass("myClass");
                //$("p:nth-child(odd)").addClass("myClass"); 
                //$("p:nth-child(even)").addClass("myClass"); 
                //$("p:nth-child(3n+1)").addClass("myClass");//n=0,1,2,3 
            });
        </script> 
    </head>   
    <body> 
        <div> 
            <p>1.   JavaSE</p>
            <p>2.   Oracle</p>
        </div> 
        <div> 
            <p>3.   HTML/CSS/JS</p>
            <p>4.   jQuery/EasyUI</p>
            <p>5.   JSP/Servlet/Ajax</p>
        </div> 
        <div> 
            <p>6.   SSM</p>  
            <p>7.   SpringBoot/SpringCloud/SpringData</p>
            <p>8.   Maven/Linux/p> 
            <p>9.   Redis/Solr/Nginx</p> 
            <p>10.   SpringBoot/SpringCloud/SpringData</p> 
            <p>11.   SpringBoot/SpringCloud/SpringData</p> 
            <p>12.   SpringBoot/SpringCloud/SpringData</p> 
        </div> 
        <div> 
            <p>13. 就业指导</p> 
        </div> 
    </body>  
</html>

2.4 表单选择器

关于表单项的选择器
:text   :password  :radio  :checkbox  :hidden  :file  :submit
:input  匹配所有 input, textarea, select 和 button 元素

关于表单项状态的选择器
:selected  :checked  :enabled  :disabled  :hidden :visible

注意：$("input")和$(":input")的区别：
（1）$("input")：标签选择器，只匹配input标签
（2）$(":input")：匹配所有 input, textarea, select 和 button 元素

<!DOCTYPE html>
<html>
    <head>
         <meta charset="utf-8">
         <title>表单选择器</title>
         <style type="text/css">
             .myClass {
                  background-color: aqua;
             }
         </style>
         <script src="js/jquery.js"   type="text/javascript"></script>
         <script type="text/javascript">
             $(function() {
                  //:text   :password    :radio  :checkbox  :hidden    :file  :submit 
                  //var arr =$("input"); // 标签名选择器
                  
                  //var arr = $("input[type=hidden]"); 
                  //var arr = $("input:hidden");              
                  //:input  匹配所有 input, textarea, select 和 button 元素 
                  //var arr =   $("input,select,textarea,button");   
                  //var arr = $(":input"); 
                  //:selected    :checked  :enabled  :disabled   
                  //var arr = $(":disabled"); 
                  //var arr = $(":enabled"); 
                  //var arr = $(":input:not(:disabled)"); 
                  //var arr = $(":checked"); 
                  //var arr = $(":selected"); 
                  //:hidden :visible       
                  //var arr = $("input:hidden") 
                 /* var   arr = $(":input:visible")
                  for(var i = 0; i < arr.length; i++) {
                      console.info(arr[i]);
                  }*/
             });
         </script>
    </head>
    <body>
         <h3>注册用户</h3>
         <form action=""   method="get">
             <table border="1"   width="40%">
                  <tr>
                      <td>用户名</td>
                      <td>
                      	  <input type="text"   name="username"   value="请输入姓名" />
                          <input type="hidden"   name="username"   id="username"   value="请输入姓名"    />
                      </td>
                  </tr>
                  <tr>
                      <td>密 码</td>
                      <td><input type="password"   name="pwd"   id="pwd" disabled="disabled"   /></td>
                  </tr>
                  <tr>
                      <td>确认密码</td>
                      <td><input type="color"   name="repwd"   id="repwd"   /></td>
                  </tr>
                  <tr>
                      <td>性别</td>
                      <td>
                           <input type="radio"   name="sex"   value="男" />男
                           <input type="radio"   name="sex"   checked="checked"   value="女" />女
                      </td>
                  </tr>
                  <tr>
                      <td>年龄</td>
                      <td><input type="text"   min="6"   max="30"   name="age"   id="age"   value="18"   /></td>
                  </tr>
                  <tr>
                      <td>电子邮箱</td>
                      <td><input type="text"   name="email"   id="email"   /></td>
                  </tr>
                  <tr>
                      <td>籍贯</td>
                      <td>
                          <select name="pro">
                          	<option value="1">京</option>
                          	<option value="2" selected="selected">津</option>
                          	<option value="3">冀</option>
                          </select>
                      </td>
                  </tr>
                  <tr>
                      <td>自我介绍</td>
                      <td>
                         <textarea name="intro"></textarea>
                      </td>
                  </tr>
                  <tr>
                      <td colspan="2">
                      	<input type="submit" />
                      	<input type="reset" />
                      	
                      </td>
                      
                  </tr>
             </table>
         </form>
    </body>
</html>

3 JQuery完成DOM编程

3.1属性和样式操作

操作属性：原生js 中的通过元素.属性名或者元素.setAttribute()方式操作元素属性,jQuery给我们封装了attr() 和removeAttr(),更加便捷的操作属性。

<!DOCTYPE html>
<html>
    <head>
         <meta charset="UTF-8">
         <title></title>
         <style>
             .a{
                  background-color: aqua;
             }
         </style>
         <script type="text/javascript"   src="js/jquery.min.js"   ></script>
         <script>
         	/*
         	 *attr() 
         	 * 
         	 * */
             function fun1(){
                  console.log($("#f1").attr("color"))
                  console.log($("#f1").attr("id"))
                  console.log($("#f1").attr("size"))
             }
             function fun2(){
                 $("#f1").attr("color","green")
                 $("#f1").attr("size","5")
             }
             function fun3(){
                 $("#f1").removeAttr("color") 
             }
             function fun4(){
                $("#f1").attr("class","a")
             }
         </script>
    </head>
    <body>
         <font id='f1' color="red" size="7" >牛气冲天</font>
         <hr />
         <input type="button"   value="获得属性" onclick="fun1()" />
         <input type="button"   value="修改属性" onclick="fun2()" />
         <input type="button"   value="删除属性" onclick="fun3()" />
         <input type="button"   value="添加属性" onclick="fun4()" />
    </body>
</html>

操作样式：原生js 中的通过元素.style.样式名=’样式值’的方式操作元素样式，jQuery给我们封装了css()方法,便于我们操作样式，多数情况样式选择器使用类选择器，所以jQuery针对于这一情况，给我们封装了addClass removeClass toggleClass 三个方法


<!DOCTYPE html>
<html>
    <head>
         <meta charset="UTF-8">
         <title></title>
         <style>
          .a{
              width: 100px;
              height: 100px;
              background-color: pink;
          }  
          .b{
              border: 10px solid green;
              border-radius: 20px;
          }
         </style>
         <script type="text/javascript"   src="js/jquery.min.js"   ></script>
         <!--
         	元素.style.样式名=
         	css()
         -->
         <script>
             function fun1(){
                 //获得d1的css样式
                 console.log($("#d1").css("width"));
                 console.log($("#d1").css("height"));
                 console.log($("#d1").css("background-color"));
                 //修改d1的css样式
                 
                 $("#d1").css("width","200px")
                 $("#d1").css("height","300px")
                 $("#d1").css("background-color","yellow");
             }
             /*
              * CSS 样式在实际的研发中,往往通过类选择器作用到元素上
              * jQuery就专门的封装了操作class属性值的方法
              * */
           
             function fun2(){
                $("#d2").addClass("b")
             }
             function fun3(){
                $("#d2").removeClass("b")
             }
             function fun4(){
                $("#d2").toggleClass("b")// 原来有b 则删除,如果没有,则增加b
             }
         </script>
    </head>
    <body>
         <div id="d1"class="a">
         </div>
         <input type="button"   value="修改样式" onclick="fun1()" />
         <div id="d2"  class="a" >
             d2
         </div>
         <input type="button"   value="添加class值" onclick="fun2()" />
         <input type="button"   value="删除class值" onclick="fun3()" />
         <input type="button"   value="切换class值" onclick="fun4()" />
    </body>
</html>

3.2 操作文本和增删改查

操作文本：原生js 中的通过元素.innerText，innerHTML和.value属性操作标签内部文本和内容,jQuery给我们封装了text(),html()和val()三个方法。

<!DOCTYPE html>
<html>
         <head>
                  <meta charset="utf-8">
                  <title></title>
                  <style>
                          #d1{
                                   width: 200px;
                                   height: 200px;
                                   border: 1px solid green;
                          }
                  </style>
                  <script type="text/javascript" src="js/jquery.min.js" ></script>
                  <script>
                          function fun1(){
                          	/*
                          	 * innerText >>>> text();
                          	 * innerHTML >>>> html();
                          	 * value     >>>> val();
                          	 * 
                          	 * */
                             console.log($("#d1").text()) 
                             console.log($("#d1").html())
                             console.log($("#i1").val())
                          }
                          function fun2(){
                          	//$("#d1").text("<h1>牛气冲天</h1>");
                          	$("#d1").html("<h1>牛气冲天</h1>");
                            $("#i1").val("你好");
                          }
                          function fun3(){
                            //$("#d1").html("");
                            $("#d1").empty();// 清空内容
                            $("#i1").val("");
                          }
                  </script>
         </head>
         <body>
                  <input type="text" value="这里是文字" id='i1' />
                  <div id='d1'>
                          a
                          <span>xxx</span>
                          b
                  </div>
                  <input  type="button" value="获得标签内容" onclick="fun1()"/>
                  <input  type="button" value="修改标签内容" onclick="fun2()"/>
                  <input  type="button" value="删除标签中的内容" onclick="fun3()"/>
         </body>
</html>

增删元素：原生js 中的对于元素的创建,增加和删除代码比较繁琐，而jQuery从元素的创建到元素的增加和删除都给我们提供了更加便捷的方法。
（1）创建元素：$('<span>text<span>')
（2）追加元素append() appendTo() 添加内部标签
（3）before() insertBefore() 向前增加标签
（4）after() insertAfter() 向后增加标签
（5）删除元素：empty() 清空字标签
（6）remove() 移除当前标签

<!DOCTYPE html>
<html>
 <head>
          <meta charset="utf-8">
          <title></title>
          <style>
                  #d1{
                           width: 200px;
                           height: 200px;
                           border: 1px solid red;    
                  }
          </style>
          <script type="text/javascript" src="js/jquery.min.js" ></script>
          <script>
                  function fun1(){
                  	  // 创建元素
                      var span1=$("<span></span>");
                      // 设置样式
                      span1.css("color","green");
                      span1.css("border","1px solid blue");
                      span1.css("background-color","lightgray")
                      // 设置文字
                      span1.text("今天天气很好");
                      $('#d1').append(span1)
                  }
                  function fun2(){
                      var h =$("<h3>测试文字</h3>").css("color","red").css("border","1px solid green")
                      h.appendTo($('#d1'))
                  }
                  function fun3(){
                      var span1=$('<span style="color: red; border: 1px solid orangered;">测试文字</span>') 
                      $("#d1").before(span1);
                  }
                  function fun4(){
                      var span1=$('<span style="color: red; border: 1px solid orangered;">测试文字</span>') 
                      span1.insertBefore($("#d1"));
                  }
                  function fun5(){
                      var span1=$('<span style="color: red; border: 1px solid orangered;">测试文字</span>') 
                      $("#d1").after(span1);
                  }
                  function fun6(){
                      var span1=$('<span style="color: red; border: 1px solid orangered;">测试文字</span>') 
                      span1.insertAfter($("#d1"));
                  }
                  function fun7(){
                      $("#d1").empty()
                  }
                  function fun8(){
                  	 $("#d1").remove(); // 移除当前元素本身
                  }
          </script>
 </head>
 <body>
          <div id='d1'></div>
          <input type="button" value="testAppend" onclick="fun1()" />
          <input type="button" value="testAppendTo" onclick="fun2()" />
          <input type="button" value="testbefore" onclick="fun3()" />
          <input type="button" value="testinsertBefore" onclick="fun4()" />
          <input type="button" value="testafter" onclick="fun5()" />
          <input type="button" value="testInsertAfter" onclick="fun6()" />
          <input type="button" value="empty" onclick="fun7()" />
          <input type="button" value="remove" onclick="fun8()" />
 </body>
</html>

3.3 绑定和触发事件

操作事件：无非就是绑定事件，触发事件，解绑定事件。原生js中的通过DOM编程和在标签上的事件属性绑定事件。jQuery中,我们可以使用。
事件的绑定:bind()，live()(1.8及之前可用)，on()(1.9之后推荐使用)，one()
事件解绑定:unbind()
事件的触发:行为触发, jQuery方法触发

<!DOCTYPE html>
<html>
    <head>
         <meta charset="UTF-8">
         <title></title>
         <style>
             #d1{
                  width: 200px;
                  height: 200px;
                  border: 1px solid red;
             }
         </style>
         <script type="text/javascript"   src="js/jquery.min.js"   ></script>
         <script>
             function fun1(){
                //给元素绑定事件
                //原生JS
                /*var div1=document.getElementById("d1")
                div1.οnmοuseοver=function (){
                	alert("悬停")
                }*/
               
               /* bind 方法绑定事件
                * 在jQuery中,事件的名称= 原始名称去掉 on
                * onclick       click
                * onmouseover   mouseover
                * 
                * */
                $("#d1").bind('mouseover',function(){
                	$('#d1').css("background-color",'yellow')
                });
                
                /*事件名作为方法*/
                $("#d1").mouseleave(function(){
                	$('#d1').css("background-color",'lightgreen')
                });
                
                /*
                 * one 绑定事件一次 
                 * 
                 * */
                /*$("#d1").one('mouseover',function(){
                	$('#d1').css("background-color",'yellow')
                });
                
                 $("#d1").one('mouseleave',function(){
                	$('#d1').css("background-color",'lightgreen')
                });*/
             }
             function fun2(){
             	//$("#d1").unbind();  接触绑定的所有事件
             	$("#d1").unbind("mouseover") // 接触绑定的指定事件
             }
             function fun3(){
                 // 相当于发生了获得焦点事件
                 $("#i1").focus()
             }
             function fun4(){
                 console.log("获得焦点了")
             }
         </script>
    </head>
    <body>
         <div id='d1'>
         	
         </div>
         <input type="button"   value="添加事件" onclick="fun1()" />
         <input type="button"   value="解除绑定" onclick="fun2()" />
         <br />
         <input type="text"  id='i1' onfocus="fun4()"/>
         <input type="button"   value="触发事件" onclick="fun3()" />
    </body>
</html>

3.4 DOM对象和jQuery对象转换

使用原生JS方式获得的页面结点对象我们可以简称为DOM对象，使用jQuery核心函数获得的对象我们可以简称为jQuery对象，这两种方式获得的对象即是是页面上同一个元素，那么也是不一样的，二者之间的API是不通用的。而在某些情况下,我们往往无法选择接收的对象，只能被动使用，那么这个时候我们可以让二者实现转换，以达到可以调用API实现功能的目的。

<!DOCTYPE html>
<html>
        <head>
                <meta charset="utf-8">
                <title></title>
                <script type="text/javascript" src="js/jquery.min.js" ></script>
                <script>
                        $(function(){
                                //1 原生JS获取页面元素  原生DOM对象
                                var div1=document.getElementById("d1");
                                
                                //2 jQuery方式获取页面元素 jQuery对象
                                var div2=$("#d1");
                                /*
                                 * DOM对象和jQuery对象之间的方法和属性是不通用
                                 *  
                                 * */
                                console.log(div1.innerText);
                                console.log(div2.text());
                                console.log(div1)
                                console.log(div2)

                                // DOM对象如何调用jQuery函数  DOM对象转换为jQuery    $(DOM)
                                console.log($(div1).text());
                                // jQuery对象如何调用DOM对象的属性和方法   jQuery转换为DOM对象  get(0)  [0]
                                console.log(div2.get(0).innerText)
                                console.log(div2[0].innerText)
                                
                        }) 
                </script>
        </head>
        <body>
                <div id="d1">测试文字</div>
        </body>
</html>

注意：使用原生JSDOM对象转换成jQuery对象方式是$(dom对象)，jQuery对象转换成DOM对象的方式是jQuery对象[0]/.get(0)

3.5 迭代遍历方式

jQuery给我们封装了一个快捷遍历元素的方法,接下来我们就使用一下jQuery中新的遍历方式。

<!DOCTYPE html>
<html>
    <head>
         <meta charset="utf-8">
         <title></title>
         <script type="text/javascript" src="js/jquery.min.js" ></script>
         <script>
             $(function(){
                  var $lis =$('li')
                  console.info($lis)
                  for(var i = 0;i<$lis.length;i++){
                      /*遍历出的每个元素是DOM对象*/
                      console.info($lis[i].innerText)
                  }
                  for(var i in $lis){
                      console.info($lis[i].innerText)
                  }
                  /*遍历所有元素的方法*/
                  /*
                   each每拿出一个元素 都会执行一次内部的function
                   i 当前元素的所有
                   e 当前元素 DOM对象
                   *
                   * */
                  $lis.each(function (i,e){
                      console.info(i+'>>>'+$(e).text())
                  })
                  $.each($lis,function (i,e){
                      console.info(i+'>>>'+$(e).text())
                  })
             })
         </script>
    </head>
    <body>
         <ul>
             <li>AI</li>
             <li>Python</li>
             <li>大数据</li>
             <li>JAVA</li>
             <li>前端</li>
         </ul>
    </body>
</html>

4 JQuery动画效果使用

4.1 现实和隐藏动画

实现简单显示动画效果方法show()
实现简单隐藏动画效果方法hide()
实现切换简单显示和隐藏动画效果方法toggle()

<!DOCTYPE html>
<html>
        <head>
                <meta charset="utf-8" />
                <title></title>
                <style>
                        #d1{
                                width: 200px;
                                height: 200px;
                                background-color: yellow;
                                display: none;
                        }
                </style>
                <script type="text/javascript" src="js/jquery.min.js"></script>
                <script>
                        function fun1(){
                                /*$("#d1").show(2000,'swing',function(){
                                        alert("动画执行结束")
                                })*/
                                $("#d1").show(2000);
                        }
                        function fun2(){
                                $("#d1").hide(3000)
                        }
                        function fun3(){
                                $("#d1").toggle(5000);//
                        }
                </script>
        </head>
        <body>
                <div id="d1"></div>
                <input type="button" value="show" onclick="fun1()" />
                <input type="button" value="hide" onclick="fun2()" />
                <input type="button" value="toggle" onclick="fun3()" />
        </body>
</html>

4.2 上下滑动

实现向下滑动动画效果slideDown()
实现向上滑动动画效果slideUp()
实现滑动切换动画效果slideToggle()

<!DOCTYPE html>
<html>
        <head>
                <meta charset="utf-8" />
                <title></title>
                <style>
                        #d1{
                                width: 200px;
                                height: 200px;
                                background-color: yellow;
                                display: none;
                        }
                </style>
                <script type="text/javascript" src="js/jquery.min.js"></script>
                <script>
                        function fun1(){
                                
                                $("#d1").slideDown(2000);
                        }
                        function fun2(){
                                $("#d1").slideUp(3000)
                        }
                        function fun3(){
                                $("#d1").slideToggle(5000);//
                        }
                </script>
        </head>
        <body>
                <div id="d1"></div>
                <input type="button" value="slideDown" onclick="fun1()" />
                <input type="button" value="slideUp" onclick="fun2()" />
                <input type="button" value="slideToggle" onclick="fun3()" />
        </body>
</html>

4.3 淡入淡出

实现淡入动画效果方法fadeIn()
实现淡出动画效果方法fadeOut()
实现淡入淡出切换效果方法fadeToggle()
实现淡入之指定透明度效果方法fadeTo()

<!DOCTYPE html>
<html>
        <head>
                <meta charset="utf-8" />
                <title></title>
                <style>
                        #d1{
                                width: 200px;
                                height: 200px;
                                background-color: green;
                                display: none;
                        }
                </style>
                <script type="text/javascript" src="js/jquery.min.js"></script>
                <script>
                        function fun1(){
                                $("#d1").fadeIn(2000);
                        }
                        function fun2(){
                                $("#d1").fadeOut(3000)
                        }
                        function fun3(){
                                $("#d1").fadeToggle(5000);
                        }
                        function fun4(){
                                $("#d1").fadeTo(5000,0.2);// 0-1 
                        }
                </script>
        </head>
        <body>
                <div id="d1"></div>
                <input type="button" value="fadeIn" onclick="fun1()" />
                <input type="button" value="fadeOut" onclick="fun2()" />
                <input type="button" value="fadeToggle" onclick="fun3()" />
                <input type="button" value="fadeTo" onclick="fun4()" />
        </body>
</html>

4.4 自定义动画

<!DOCTYPE html>
<html>
        <head>
                <meta charset="utf-8">
                <title></title>
                <style>
                        #d1 {
                                width: 200px;
                                height: 200px;
                                background-color: yellow;
                        }
                </style>
                <script type="text/javascript" src="js/jquery.min.js"></script>
                <script>
                        $(function(){
                                //$("").animate({动画内容},执行时间,动画结束后要执行的方法)
                                $("#d1").animate({
                                        width:"100px",
                                        height:"100px",
                                        opcity:0.5,
                                        borderRadius:"50px"
                                },2000,function(){
                                        alert("动画执行结束了")
                                })
                        })
                </script>
        </head>
        <body>
                <div id="d1"></div>
        </body>
</html>

5 表单校验

5.1 表单校验案例

案例内容的验证要求:
（1）用户名不能为空
（2）用户名长度大于等于6
（3）用户名中不能有数字
（4）密码不少于5位
（5）两次密码必须一致
（6）邮箱格式正确必须有@和. 例如123456789@qq.com

<!DOCTYPE html>
<html>
        <head>
                <meta charset="UTF-8">
                <title></title>
                <script type="text/javascript" src="js/jquery.min.js"></script>
                <script>
                        function checkUsername(){
                                var username =$("#user").val();
                                if(username == ""){// 不能为空字符串
                                        $("#usertip").html("<font color='red'>不能为空</font>");
                                        return false;
                                }
                                
                                if(username.length<=6){// 长度不能少于6位
                                        $("#usertip").html("<font color='red'>长度必须在6位之上</font>");
                                        return false;
                                }
                                
                                for(var i =0;i<username.length;i++){// zhangsan
                                        var c =username.charAt(i);
                                        if(c<= '9' && c>= '0'){
                                                $("#usertip").html("<font color='red'>不能使用数字</font>");
                                            return false;
                                        }
                                }
                                // 提示OK
                                $("#usertip").html("<font color='green'>OK</font>")
                                return true;
                                
                        }
                        
                        function checkPassword(){
                                var pwd =$("#pwd").val();
                                if(pwd.length<5){
                                        $("#pwdtip").html("<font color='red'>长度不能少于5位</font>");
                                        return false;
                                }
                                $("#pwdtip").html("<font color='green'>OK</font>");
                                return true;
                        }
                        
                        function checkRepwd(){
                                var p1=$("#pwd").val();
                                var p2=$("#repwd").val();
                                
                                if(p1.length< 5 || p1 != p2){
                                   $("#repwdtip").html("<font color='red'>两次密码不一致</font>");
                                   return false;
                                }
                                
                           $("#repwdtip").html("<font color='green'>OK</font>");
                           return true;
                        }
                        
                        function checkEmail(){
                                var em=$("#email").val();
                                var index1=em.indexOf("@");
                                var index2=em.indexOf(".");
                                if(index1<1 || index2 < 1 ){
                                        $("#emailtip").html("<font color='red'>邮箱格式有误</font>");
                                    return false;
                                }
                                $("#emailtip").html("<font color='green'>OK</font>");
                                return true;
                        }
                        
                        function checkForm(){
                                return checkUsername()&&checkPassword()&&checkRepwd()&&checkEmail();
                        }
                </script>
        </head>
        <body>
                <table id="center" border="0" cellspacing="0" cellpadding="0">
                        <form action="http://www.baidu.com" method="get" onsubmit="return checkForm()">
                                <tr>
                                        <td>您的姓名：</td>
                                        <td>
                                                <input id="user" type="text" name="username" onblur="checkUsername()"/>
                                                <div id="usertip" style="display: inline;"></div>
                                        </td>
                                </tr>
                                <tr>
                                        <td>输入密码：</td>
                                        <td>
                                                <input id="pwd" name="pwd" type="password" onblur="checkPassword()"/>
                                                <div id="pwdtip" style="display: inline;"></div>
                                        </td>
                                </tr>
                                <tr>
                                        <td>再输入一遍密码：</td>
                                        <td>
                                                <input id="repwd" type="password" onblur="checkRepwd()"/>
                                                <div id="repwdtip" style="display: inline;"></div>
                                        </td>
                                </tr>
                                <tr>
                                        <td>您的Email：</td>
                                        <td>
                                                <input id="email" type="text" onblur="checkEmail()"/>
                                                <span id="emailtip"></span>
                                        </td>
                                </tr>
                                <tr>
                                        <td colspan="2">
                                                <input type="submit" value="注册" class="rb1" />
                                        </td>
                                </tr>
                        </form>
                </table>
        </body>
</html>

总结：

对于表单的提交，要给form标签绑定onSubmit事件，而不是给submit按钮绑定onClick事件，onsubmit绑定的方法时要有return关键字，绑定的方法要返回true/false
表单项内容不管输入的是字符串、数字、日期，js、jQuery、JSP接收后都是String类型
表单的验证和String对象有密切关系 length charAt(i) indexOf("@")
如果表单项内容为空，js收到的不是null，而是空字符串。判断条件不能写 username == null，而要写username==""或username.length ==0
验证出错要return false，验证无错要return true，并且 onsubmit="return checkForm()
该示例的缺点主要在于对于邮箱如果采用传统方式进行验证，代码繁琐并且不能保证严谨性，过度依赖String的API。对于邮箱、手机号码、邮政编码等验证，可以使用正则表达式进行验证，严谨而且简单。

5.2 正则表达式

5.2.1 什么是正则表达式

Regular Expression，在代码中常简写为regex，正则表达式使用单个字符串来描述、匹配一系列符合某个句法规则的字符串。在很多文本编辑器里，正则表达式通常被用来检索、替换那些符合某个模式的文本。正则表达式是对字符串（包括普通字符（例如，a 到 z 之间的字母）和特殊字符（称为“元字符”））操作的一种逻辑公式，就是用事先定义好的一些特定字符、及这些特定字符的组合，组成一个“规则字符串”，这个“规则字符串”用来表达对字符串的一种过滤逻辑。正则表达式是一种文本模式，该模式描述在搜索文本时要匹配的一个或多个字符串。

5.2.2 为什么使用正则表达式

（1）正则表达式可以是文本的校验的代码更加简洁
（2）正则表达式可以实现更加严谨细致的校验

正则表达式举例

匹配国内电话号码：\d{3}-\d{8}|\d{4}-\d{7}
匹配腾讯QQ号：[1-9][0-9]{4,}
匹配中国邮政编码：\d{6}   
匹配身份证：\d{15}|\d{18}
匹配由数字和26个英文字母组成的字符串 ^[A-Za-z0-9]+$　
匹配Email地址：\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*
匹配中文字符的正则表达式： [\u4e00-\u9fa5] [a-zA-Z]

5.2.3 如何创建正则表达式

正则表达式在JS中创建的语法为:

var reg=/china/;
var reg=new RegExp("china");

正则表达式的通配符号
正则表达式的重复字符
案例

<!DOCTYPE html>
<html>
        <head>
                <meta charset="UTF-8">
                <title></title>
                <script>
                        /*
                         * 正则表达式不依赖jQuery
                         * 正则表达式本身就是一个字符串 只不过该字符串用于表述一种规则
                         * 
                         * */
                        var reg =/^\w?$/
                        var words ="a";
                        console.log(reg.test(words))             
                        var regex1 = /^\d{6}$/;
                        var regex2 = /^1[3456789]\d{9}$/;
                        var regex3 = /^\w{6,}@[0-9A-Za-z]{2,}(\.[a-zA-Z]{2,3}){1,2}$/;  
                </script>
        </head>
        <body>
        </body>
</html>

5.3 表单验证完善

<!DOCTYPE html>
<html>
        <head>
                <meta charset="UTF-8">
                <title></title>
                <script type="text/javascript" src="js/jquery.min.js"></script>
                <script>
                        function checkUsername(){
                                var reg1=/^\D{6,}$/
                                var username =$("#user").val();
                                if(!reg1.test(username)){
                                        $("#usertip").html("<font color='red'>格式必须是至少六位的非数字</font>");
                                        return false;
                                }
                                // 提示OK
                                $("#usertip").html("<font color='green'>OK</font>")
                                return true;
                                
                        }
                        
                        function checkPassword(){
                                var reg2=/^\S{5,}$/
                                var pwd =$("#pwd").val();
                                if(!reg2.test(pwd)){
                                        $("#pwdtip").html("<font color='red'>至少为5位非空格</font>");
                                        return false;
                                }
                                $("#pwdtip").html("<font color='green'>OK</font>");
                                return true;
                        }
                        
                        function checkRepwd(){
                                var p1=$("#pwd").val();
                                var p2=$("#repwd").val();
                                
                                if(p1.length< 5 || p1 != p2){
                                   $("#repwdtip").html("<font color='red'>两次密码不一致</font>");
                                   return false;
                                }
                                
                           $("#repwdtip").html("<font color='green'>OK</font>");
                           return true;
                        }
                        
                        function checkEmail(){
                                var em=$("#email").val();
                                var regex3 = /^\w{6,}@[0-9A-Za-z]{2,}(\.[a-zA-Z]{2,3}){1,2}$/; 
                                if(!regex3.test(em) ){
                                        $("#emailtip").html("<font color='red'>邮箱格式有误</font>");
                                    return false;
                                }
                                $("#emailtip").html("<font color='green'>OK</font>");
                                return true;
                        }
                        
                        function checkForm(){
                                return checkUsername()&&checkPassword()&&checkRepwd()&&checkEmail();
                        }
                </script>
        </head>
        <body>
                <table id="center" border="0" cellspacing="0" cellpadding="0">
                        <form action="http://www.baidu.com" method="get" onsubmit="return checkForm()">
                                <tr>
                                        <td>您的姓名：</td>
                                        <td>
                                                <input id="user" type="text" name="username" onblur="checkUsername()"/>
                                                <div id="usertip" style="display: inline;"></div>
                                        </td>
                                </tr>
                                <tr>
                                        <td>输入密码：</td>
                                        <td>
                                                <input id="pwd" name="pwd" type="password" onblur="checkPassword()"/>
                                                <div id="pwdtip" style="display: inline;"></div>
                                        </td>
                                </tr>
                                <tr>
                                        <td>再输入一遍密码：</td>
                                        <td>
                                                <input id="repwd" type="password" onblur="checkRepwd()"/>
                                                <div id="repwdtip" style="display: inline;"></div>
                                        </td>
                                </tr>
                                <tr>
                                        <td>您的Email：</td>
                                        <td>
                                                <input id="email" type="text" onblur="checkEmail()"/>
                                                <span id="emailtip"></span>
                                        </td>
                                </tr>
                                <tr>
                                        
                                        <td colspan="2">
                                                <input type="submit" value="注册" class="rb1" />
                                        </td>
                                </tr>
                        </form>
                </table>
        </body>
</html>

jayden-leo

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
JQuery（4）前端

详细介绍了对JavaScirpt的封装库JQuery的内容，JQuery是为了方便程序员开发前端页面效率低而研发的一个库，可以使用这个库快速的编写页面，而且可以使页面性能更加高效。最后每个内容都有样例代码，方便快速掌握和应用
复制链接

扫一扫