【JavaLearn】#(22)jQuery介绍、选择器、事件、动画、DOM编程、操做CSS、表单验证

2022年05月10日 阅读数:17
这篇文章主要向大家介绍【JavaLearn】#(22)jQuery介绍、选择器、事件、动画、DOM编程、操做CSS、表单验证,主要内容包括基础应用、实用技巧、原理机制等方面,希望对大家有所帮助。

1. jQuery定义和特色

1.1 jQuery 入门

对 JavaScript 进行了封装,下降了使用JavaScript的难度,能够大幅提升开发效率(Write less, do more)javascript

jQuery 普遍使用的是 1.x 版本,兼容 ie678css

jQuery 实例:隔行变色(页面结构)html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        .datalist{
     
     
            border:1px solid #007108;
            font-family:"微软雅黑";
            border-collapse:collapse;
            background-color:#d9ffdc;
            font-size:14px;
        }
        .datalist th{
     
     
            border:1px solid #007108;
            background-color:#00a40c;
            color:#FFFFFF;
            padding: 4px 12px;
            text-align:center;
        }
        .datalist td{
     
     
            border:1px solid #007108;
            text-align: center;
            padding: 4px 10px;
        }
        .datalist tr.altrow{
     
     
            background-color:#a5e5aa;
        }
    </style>

    <script type="application/javascript" src="../js/jquery-1.9.1.js"></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>
    <tr>					<!-- 奇数行 -->
        <td>lovehate</td>
        <td>W47</td>
        <td>Sep 5th</td>
        <td>Virgo</td>
        <td>6098017</td>
    </tr>
</table>
</body>
</html>
<!--  
	区分HTML注释和CSS注释
-->

script代码前端

// JavaScript 形式
/** window.onload = function (){
        var arr = document.getElementsByTagName("tr");
        for (var i = 0; i < arr.length; i++) {
            if (i % 2 == 0) {
                arr[i].className = "altrow";
            }
        }
    } */

// jQuery形式
$(function () {
   
   
    $("tr:even").addClass("altrow")
})

$(func)java

  • 至关于 window.οnlοad=function(){}
  • 功能比window.onload更强大
    • window onload一个页面只能写一个,可是能够写多个$() 而不冲突
    • window onload要等整个页面加载完后再执行(包括图片、超连接、音视频等),可是$的执行时间要早

$(selector):选择器jquery

jQuery的基本语法$(selector).actiongit

  • 获取页面内容:$(selector)
  • 操做页面的内容:action
    • 控制页面样式
    • 访问和操做DOM元素
    • 事件处理功能
    • 动画功能
    • Ajax功能(jQuey不只封装了JavaScript,还封装了Ajax)

1.2 jQuery对象和DOM对象

DOM对象:直接使用 JavaScript 获取的节点对象web

  • className、innerHTML、value

jQuery对象:使用 jQuery 选择器获取的节点对象正则表达式

  • addClass()、html()、val()

DOM对象 ----> jQuery对象: $(DOM对象)数据库

jQuery对象 ----> DOM对象: jQuery对象[index] (使用索引)

2. jQuery 选择器

jQuery提供了丰富的选择器功能,针对于 JavaScript 的 getElementById( )、getElementsByName( )、getElementsByTagName( ),强大的多

2.1 基本选择器

  • 标签选择器: $("元素标签(例如 p )")

  • ID选择器: $("#id"), 选择某个标签内部的id: $("p#id")

  • 选择器: $(".class")$("h2.class")

  • 通配(*)选择器:$("*")

  • 并集选择器:$("elem1, elem2, elem3)

  • 后代(爷爷的儿子,爷爷的儿子的儿子等)选择器:$("ul li")

  • 父子选择器:$("ul>li")

  • 后面第一个next兄弟元素:$("prev + next")

    例如 $(“h2+p”) 表明全部 h2 标签后面的第一个 兄弟p 元素,若是 h2 和 p 之间有其余元素,其余元素也不会选中

  • 后面全部的next兄弟元素:$("prev ~ next")

HTML素材

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>基本选择器</title>
		 <style type="text/css">
            .myClass{
     
     
                background-color: aqua;
            }
        </style>
		<script src="js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
	   <h3 id="h31">JSP</h3>
	   <span>span</span>
       <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>

关键的jQuery操做代码

$(function(){
   
   
    //•标签选择器 $("a")   
    $("h3").addClass("myClass");
    $("p").addClass("myClass");

    
    //•ID选择器 $("#id")     $("p#id") 
    $("#h31").addClass("myClass");

    
    //•类选择器 $(".class")    $("h2.class") 
    $(".red1").addClass("myClass");

    
    //•通配选择器 $("*") 
    $("*").addClass("myClass");

    
    //•并集选择器$("elem1,elem2,elem3") 
    $("h3, p").addClass("myClass");

    
    //•后代选择器$(ul li) 
    $("span").addClass("myClass");
    $("p span").addClass("myClass");

    
    //•父子选择器 $(ul>li)  
    $("p>span").addClass("myClass");

    
    //•后面第一个next兄弟元素 prev + next 
    $("h3+p").addClass("myClass");
    
    
    //•后面全部的兄弟元素 prev ~ next 
    $("h3~p").addClass("myClass");
});

2.2 属性选择器

使用 [] 选择属性

  • 匹配 包含给定属性( [attribute] ) 的元素:$("元素[attribute]")
  • 复合属性选择器,须要同时知足多个属性$("元素[attribute1][attribute2]")
  • 匹配给定的属性是某个特定值( [attribute = value] )的元素:$("元素[attribute=value]")
  • 匹配全部属性不等于特定值( [attribute != value] )的元素:$("元素[attribute!=value]")
  • 匹配给定的属性是以某些值开始 ( [attribute ^= value] )的元素:$(“元素[attribute^=value]”)`
  • 匹配给定的属性是以某些值结尾 ( [attribute = v a l u e ] ) 的 元 素 : = value] )的元素: =value](“元素[attribute$=value]”)`
  • 匹配给定的属性包含某些值的元素:$(“元素[attribute*=value]”)`

HTML素材

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>属性选择器</title>
		 <style type="text/css">
            .myClass{
     
     
                background-color: aqua;
            }
        </style>
		<script src="js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		  <ul  id="sxt">
	           <li><a href="http://www.bjsxt.com/score.html">积分管理制度</a>
	           <li><a href="http://www.bjsxt.com/dorm">宿舍管理制度</a>
	            <li><a href="http://www.bjsxt.com/mobile">班级手机入袋制度</a>
	            <li><a href="http://www.bjsxt.com/flag">班级流动红旗制度</a>
	           <li><a href="http://www.bjsxt.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.bjsxt.com/film/film-4.htm" title="鲁冰花">鲁冰花</a></li>
	                       <li><a name="film-5.htm" title="太行山上">太行山上</a></li>
	                       <li>无问西东</li>
	                   </ul>
	           </li>                
           </ul>
	</body>
</html>

关键的jQuery操做代码

window.onload=function(){
   
   
    //•[attribute] 匹配包含给定属性的元素
    $("a").addClass("myClass");
    $("a[href]").addClass("myClass");   // 全部包含 href 属性的 a 标签

    
    //•[attribute1][attribute2] 复合属性选择器,须要同时知足多个属性
    $("a[href][title]").addClass("myClass");  // 包含 href 和 title 属性的 a 标签

    
    //•[attribute=value] 匹配给定的属性是某个特定值的元素
    $("a[href='http://www.bjsxt.com/score.html']").addClass("myClass");

    
    //•[attribute!=value] 匹配全部属性不等于特定值的元素
    $("a[href!='http://www.bjsxt.com/score.html']").addClass("myClass");

    
    //•[attribute^=value] 匹配给定的属性是以某些值开始的元素
    $("a[href^=http]").addClass("myClass");

    
    //•[attribute$=value] 匹配给定的属性是以某些值结尾的元素
    $("a[href$=htm]").addClass("myClass");

    
    //•[attribute*=value] 匹配给定的属性是以包含某些值的元素
    $("a[href*=film]").addClass("myClass");				
}

2.3 位置选择器

  • 针对整个页面而言的位置选择器

    • 获取第一个元素: :first

      (例如 $("p:first") 表明整个页面的第一个 p 元素)

    • 获取最后一个元素: :last

    • 匹配全部索引值为 奇数 的元素(索引从 0 开始): :odd

      (例如 $("p:odd") 表明整个页面的索引为奇数的 p 元素)

    • 匹配全部索引值为 偶数 的元素(索引从 0 开始): :even

    • 匹配一个等于给定索引值的元素(索引从 0 开始): eq(n)

      (例如 $("p:eq(5)") 表明整个页面的索引为5的 p 元素)

    • 匹配全部大于给定索引值的元素(索引从 0 开始): gt(n)

    • 匹配全部小于给定索引值的元素(索引从 0 开始): lt(n)

  • 针对上级标签而言的(全部有父子结构的父级标签)

    • 匹配每一个标签的第一个子元素: :first-child

      (例如 $("p:first-child") 表明每一个有**父子结构(例如div中有p元素)**的元素的第一个子元素 p)

    • 匹配每一个标签的最后一个子元素: :last-child

    • 针对每一个标签,若是某个元素是其惟一的子元素,将会被匹配: :only-child

    • 匹配每一个标签的第 N 个子元素(索引从 1 开始): :nth-child(n)

      :nth-child(xn+y) 此时的 n 从 0 开始 3n+1 则是 1, 4, 7,

    • 匹配每一个标签下的奇偶元素: :nth-child(odd|even)

HTML素材

<!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-1.9.1.js" type="text/javascript" charset="utf-8"></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>10. SpringBoot/SpringCloud/SpringData</p>   
            <p>10. SpringBoot/SpringCloud/SpringData</p>   
        </div>
        <div>
            <p>11. 就业指导</p>
        </div>
	</body>
</html>

关键的jQuery操做代码

$(function(){
   
   
    // ====================针对整个页面而言的位置选择器====================
    //•:first  获取第一个元素
    $("p:first").addClass("myClass");
    
    
    //•:last  获取最后一个元素
    $("p:last").addClass("myClass");
    
    
    //•:odd 匹配全部索引值为奇数的元素,从 0 开始计数  
    $("p:odd").addClass("myClass");
    
    
    //•:even匹配全部索引值为偶数的元素,从 0 开始计数 
    $("p:even").addClass("myClass");
    
    
    //•:eq(n) 匹配一个给定索引值的元素 equals,从 0 开始计数 
    $("p:eq(5)").addClass("myClass");
    
    
    //•:gt(n) 匹配全部大于给定索引值的元素 great than gt,从 0 开始计数 
    $("p:gt(5)").addClass("myClass");
    
    
    //•:lt(n) 匹配全部小于给定索引值的元素 less than lt,从 0 开始计数 
    $("p:lt(5)").addClass("myClass");

    
    // ====================针对上级标签而言的位置选择器====================
    //•:first-child  匹配每一个标签的第一个子元素
    $("p:first-child").addClass("myClass");

    
    //•:last-child   匹配每一个标签的最后一个子元素  
    $("p:last-child").addClass("myClass");
    
    
    //•:only-child   针对每一个标签,若是某个元素是父元素中惟一的子元素,将会被匹配
    $("p:only-child").addClass("myClass");
    
    
    //•:nth-child(n)   匹配每一个标签下的第N个子元素
    $("p:nth-child(2)").addClass("myClass");
    
    // :nth-child(odd|even)    匹配每一个标签下的第奇偶数个元素
    $("p:nth-child(odd)").addClass("myClass");
    $("p:nth-child(even)").addClass("myClass");
    
    // :nth-child(xn+y) 
    $("p:nth-child(3n+2)").addClass("myClass");  // 3n+1  n分别取值0,1,2,3....     1,4,7,10
});

2.4 表单选择器

  • 针对表单项的选择器
    • :text:password:radio:checkbox:hidden:file:submit
    • :input 匹配全部 input、 textarea、 select、 button 元素
  • 针对表单项状态的选择器
    • :selected:checked:enabled:disabled
    • :hidden:visable:not

注意: $(“input”) 和 $(“:input”) 的区别

  • $(“input”): 标签选择器,只匹配 input 标签
  • $(“:input”): 匹配全部 input、 textarea、 select、 button 元素

HTML素材

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表单选择器</title>
		<style type="text/css">
            .myClass{
     
     
                background-color: aqua;
            }
        </style>
		<script src="js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		 <h3>注册用户</h3>
        <form action="doRegister.jsp" method="get">
            <table border="1" width="40%">						
                <tr>
                    <td>用户名</td>
                    <td><input  type="hidden" name="username" value="请输入姓名" />
                    	<input  type="text" name="username" id="username" value="请输入姓名" disabled="disabled"/></td>
                </tr>
                <tr>
                    <td>&nbsp;</td>
                    <td><input  type="password" name="pwd" id="pwd" /></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>
                        <input  type="checkbox" name="hobby" value="music"/>音乐
                        <input  type="checkbox" name="hobby" value="sports" checked="checked"/>体育
                        <input  type="checkbox" name="hobby" value="art" checked/>美术
                    </td>
                </tr>
                <tr>
                    <td>身份</td>
                    <td>
                        <select name="professional" multiple="multiple">
                            <option value="1">工人</option>
                            <option value="2" selected="selected">农民</option>
                            <option value="3" selected="selected">解放军</option>
                            <option value="4">知识分子</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td>简历</td>
                    <td>
                        <textarea name="resume" rows="5" cols="40">请输入简历</textarea>
                    </td>
                </tr>
                <tr>
                    <td>照片</td>
                    <td><input type="file" name="photo" id="photo"/></td>
                </tr>
                <tr>
                    <td colspan="2"  align="center">
                        <input  type="submit" value="提交" disabled="disabled"/>
                        <input type="reset" value="重置"/>
                        <input type="button" value="返回" onclick="alert('back')"/>
                        <button onclick="confirm('返回2')">返回2</button>
                    </td>
                </tr>
            </table>
        </form>
	</body>
</html>

关键的jQuery操做代码

$(function(){
   
   
    //•:text   :password  :radio  :checkbox  :hidden  :file  :submit 
    //var arr = $("input[type=text]");
    //var arr = $("input[type=password]");
    //var arr = $(":text")
    //var arr = $(":password");
    //var arr = $("input[type=color]");
    //var arr = $(":checkbox");


    //:input  匹配全部 input, textarea, select 和 button 元素 
    //var arr = $("input");
    //var arr = $("form");  // 拿到整个表单项
    //var arr = $(":input");
    //var arr = $("input,select,textarea,button");


    //•:selected  :checked  :enabled  :disabled 
    //var arr = $(":selected");
    //var arr = $(":checked");
    //var arr = $("input:checked");

    //var arr = $(":disabled");
    var arr = $(":enabled");    // 只针对于表单项启用的元素

    //•:hidden  :visible  :not 
    //var arr = $(":hidden");   // 针对于全部的元素 例如 head, meta, title 等
    //var arr = $("input:hidden");
    //var arr = $(":input:visible");
    //var arr = $("input:not(:text):not(:password):not(:radio)")  // 全部的 input,除了 text类型、password类型、 radio类型的 

    for(var i=0;i<arr.length;i++){
   
   
        console.info(arr[i])
    }
});

2.5 内容选择器

  • 匹配全部不包含子元素或者文本的空元素: :empty
  • 匹配含有子元素或者文本的元素: :parent
  • 匹配含有包含给定元素的元素: :has 【 $(“div:has(‘p’)”),查找内容中有p元素的div元素 】
  • 匹配包含给定文本的元素: :contains

HTML素材

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<table border="1">
		  <tr>
		  	<td>Value 1</td>
		  	<td></td>
		  </tr>
		  <tr>
		  	<td>Value 2</td>
		  	<td></td>
		  </tr>
		</table>
		
		<div>John Resig</div>
		<div>George Martin</div>
		<div>Malcom John Sinclair</div>
		<div>J. Ohn</div>
		
		<div><p>Hello</p></div>
		<div>Hello again!</div>
		
		<h1>Header 1</h1>
		<p>Contents 1</p>
		<h2>Header 2</h2>
		<p>Contents 2</p>
	</body>
</html>

关键的jQuery操做代码

//•:empty  匹配全部【不包含】子元素或者文本的空元素
$("td:empty").css("background-color","yellow");

//•:parent 匹配【含有】子元素或者文本的元素
$("td:parent").css("background-color","blue");


//•:has  匹配含有选择器所匹配的元素的元素
$("div:has(p)").css("background-color","blue");
//•:contains  匹配包含给定文本的元素	
$("div:contains('John')").css("background-color","yellow");

//:header:匹配如 h1, h2, h3之类的标题元素
$(":header").css("background-color","green");

3. 事件和动画

3.1 事件 event

  • 绑定事件
    • 方法1: click()、mousemove()、mouseout()、mouseover()等,直接使用函数名
    • 方法2: bind(“函数名”, function() { })
  • 解除绑定
    • unbind():不传参表示解除全部事件,传参表示解除特定的事件

HTML素材

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div style="background-color: #7FFFD4;">
			div1
		</div>
		<p></p>
		<div style="background-color: #7FFFD4;" >
			div2
		</div>
		<p></p>
		<div style="background-color: #7FFFD4;">
			div3
		</div>
		<p></p>
		<input id="btn1" type="button" value="绑定" />
		<input id="btn2" type="button" value="解除绑定" />
	</body>
</html>

关键的jQuery操做代码

$(function(){
   
   
    // 给按钮 btn1 绑定单击click事件
    $("#btn1").bind("click", function() {
   
   
        // 给全部的 div 绑定 mouseover 事件
        $("div").mouseover(function() {
   
   
            // this:当前mouseover的div,但这是一个 DOM对象,因此使用 $() 转为 jQuery对象
            $(this).css("background-color", "blue");
        });
        /** 也可使用 bind 函数
            $("div").bind("mouseover", function() {
                $(this)..css("background-color", "blue");
            })
        */

        // 给全部的 div 绑定 mouseout 事件
        $("div").mouseout(function() {
   
   
            $(this).css("background-color", "#7FFFD4");
        });
    })
    
    
    // 给按钮 btn2 绑定单击 click事件
    $("#btn2").bind("click", function() {
   
   
        $("div").unbind("mouseout")
    })
    
    
    // 使用代码点击 btn1按钮
    $("#btn1").click();
})

3.2 动画 animate

  • 显示隐藏show()hide() 【改变 width、height、opacity】
  • 淡入淡出fadeIn()fadeOut() 【改变 opacity】
  • 滑入滑出slideUp()slideDown() 【改变 height】

HTML素材

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		   <input  type="button" value="马上隐藏" onclick="hideElem()"/>
           <input  type="button" value="马上显示" onclick="showElem()"/>
           <input  type="button" value="3秒隐藏" onclick="hideElem()"/>
           <input  type="button" value="3秒显示" onclick="showElem()"/>|
           <input  type="button" value="3秒淡出" onclick="hideElem()"/>
           <input  type="button" value="3秒淡入" onclick="showElem()"/>|
           <input  type="button" value="3秒滑入" onclick="hideElem()"/>
           <input  type="button" value="3秒滑出" onclick="showElem()"/>
           <br>
        <img id="img1"  src="img/IDEA.jpg"  width="40%"/>
         <img id="img2"  src="img/IDEA.jpg"  width="40%"/>
        <div id="div1" style="border: 1px solid red;background-color:green;width:300px; height:100px;"></div>
	</body>
</html>

关键的jQuery操做代码

function hideElem() {
   
   
    $("img").hide();
    $("div").hide();
    
    // 能够添加动画时间
    $("img").hide(3000); // 3秒的隐藏时间
    
    $("div").fadeIn(3000);
    
    $("div").slideUp(4000);
}

function showElem() {
   
   
    $("img").show();
    $("div").show();
}

4. DOM 编程

4.1 操做文本

  • 对应 innerHTML: html() 取值、 html(txt) 赋值
    • 获取时:获取完整的内容,若是有标签也会获取到
    • 赋值时:若是有标签,自动对标签进行转换处理
  • 对应 innerText:text() 取值、text(txt) 赋值 【赋值时不会处理标签,直接显示
    • 获取时:只会获取文本信息
    • 赋值时:若是有标签,不会处理标签,原样显示
  • 对应 value:val() 取值、 val(txt) 赋值

HTML素材

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="div1" style="border:1px solid red; background-color: aqua;">
			<h3>测试操做文本</h3>
		</div>
		<div id="div2" style="border:1px solid red;background-color:bisque;">
			1
		</div>		
		<input id="username" type="text" value="zhangsan" /><br>
		<input type="button" value="func1" onclick="func1()" />
		<input type="button" value="func2" onclick="func2()" />
	</body>
</html>

关键的jQuery操做代码

function func1() {
   
   
    var txt = $("#div1").html();  // <h3>测试操做文本</h3>
    alert(txt);
    
    // 写到第二个div中
    $("#div2").html(txt);
}

function func2() {
   
   
    var val = $("#username").val();
    $("#username").val(val+'123')
}

4.2 操做属性

  • 获取属性的值: attr(attr)
  • 给指定属性赋值attr(attr, val)
  • 去掉指定属性:removeAttr(attr)

特殊的:针对 checked, selected, readonly, disabled,使用 prop() 返回值是 true 和 false,更加方便操做

  • 获取属性的值:prop(prop)
  • 给指定属性赋值prop(prop, val)
  • 符合条件的元素逐个处理: each(index)

HTML素材

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		
		<a id="a1"  href="http://www.taobao.com" target="_blank">淘宝</a>
		<input type="button" value="改变超连接" onclick="changeA()"/>

	<h3>注册用户</h3>
		<form action="doRegister.jsp" method="get">
			<table border="0" width="40%">						
				<tr>
					<td>手机号码</td>
					<td><input  type="text"  name="username" id="username" value="请输入姓名"/></td>
				</tr>
				<tr>
					<td>&nbsp;</td>
					<td><input  type="password" name="pwd" id="pwd" /></td>
				</tr>
				<tr>
					<td>确认密码</td>
					<td><input type="password" name="repwd" id="repwd"/></td>
				</tr>
				<tr>
					<td>&nbsp;</td>
					<td><input type="checkbox" name="agreement" id="agreement" checked="checked" onchange="changeSubmit()"/>我赞成该协议</td>
				</tr>
				<tr>
					<td colspan="2"  align="center">
						<input id="sub1" type="submit" disabled="disabled"  value="提交"  />
						<input type="reset" value="重置"/>
					</td>
				</tr>
			</table>
		</form>
		
		<hr />
		<img  src="img/img1.jpg"/>
		<img  src="img/img2.jpg"/>
		<img  src="img/img3.jpg"/>
		<img  src="img/img4.jpg"/>
		<img  src="img/img5.jpg"/>
		<input  type="button" value="改变图片" onclick="changeImg()"/>
	</body>
</html>

关键的jQuery操做代码

function changeA() {
   
   
    // 改变超连接的文本: 淘宝 ---- 京东
    $("#a1").html("京东");
    
    // 改变超连接的 href 属性: http://www.taobao.com ---- http://www.jd.com
    $("#a1").attr("href", "http://www.jd.com")
    
    // 改变超连接的 target 属性: _blank ----  _self
    $("#a1").attr("target", "_self")
}

function changeSubmit() {
   
   
    // 获取复选框的值
    var flag = $("#agreement").prop("checked");  // 使用 prop() 返回值为 true和 false
    if (flag) {
   
   
        $("#sub1").prop("disabled", false);
    } else {
   
   
        $("#sub1").prop("disabled", true);
    }
}

function changeImg() {
   
   
    // 使用 each,函数里若是有参数,则表明为 索引
    $("img").each(function(index) {
   
   
        $(this).attr("src", "img/img" + (5 - index) + ".jpg");
    });
}

4.3 操做元素

  • 添加子元素(末尾):append()appendTo()

    $(“#div1”).append(newElem); newElem.appendTo(“#div1”) 是相同的操做

  • 添加子元素(前置):prepend()prependTo()

  • 添加平级元素(前面): insertBefore()before()

  • 添加平级元素(后面): insertAfter()after()

  • 替换某个节点: replaceWith()replaceAll()

  • 删除元素remove()

  • 删除子元素empty()

HTML素材

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div{
     
     
				font-size:16px;
				border:1px solid #003a75;
				margin:5px;
			}
			.myClass{
     
     
				background-color:#7FFFD4;
			}
		</style>
		<script src="js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="div1">
		    <p id="p1">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 id="p8">8. Maven/Linux</p>
			<p>123<span>9. Redis/Solr/Nginx</span></p>
		 	<p>10. SpringBoot/SpringCloud/SpringData</p>
		</div>
		
		<div>
		    <p>11. 就业指导</p>
		</div>
	</body>
</html>

关键的jQuery操做代码

$(function() {
   
   
    // 准备一个新的段落
    var newDiv = $("<div><p>口才训练课</p></div>");  // !!!!建立新元素,jQuery对象!!!
    
    // 添加
    $("#div1").append(newDiv);  // newDiv.appendTo("#div1")    子元素添加
    $("div:first").after(newDiv);  // 平级元素添加
    
    // 替换
    $("div:last").replaceWith(newDiv);  // 用newDiv 替换最后一个div
    
    // 删除
    $("div:last").remove(); // 删除元素
    $("div:last").empty(); // 删除子元素
    
    // 间接查询!!!!!
    // 平级元素  first()  last()  next()  nextAll()   prev()   prevAll()  siblings()全部的兄弟  has()
    // 上级元素:parent()  parents("具体到某个父类元素")
    // 下级元素:children()   find("标签名")
})

4.4 简单实例

HTML素材

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
        <h3>注册用户</h3>
		<form action="doRegister.jsp" method="get">
			<table id="table1" border="1" width="40%">						
				<tr>
					<td>用户名</td>
					<td><input  type="text" name="username" id="username" value="请输入姓名"/></td>
				</tr>
				<tr>
					<td>照片 </td>
					<td>
						<input type="file" name="photo" id="photo"/>
						<input type="button"  value="添加"  onclick="addFileItem()"/> 
					</td>					
				</tr>
				
				<tr id="lastrow">
					<td colspan="2"  align="center">
						<input  type="submit" value="提交" />
						<input type="reset" value="重置"/>						
					</td>					
				</tr>
			</table>
		</form>
	</body>
</html>

关键的jQuery操做代码

function addFileItem() {
   
   
    var newTr = $('<tr><td> &nbsp; </td>' + 
                  '<td>' + 
                  	'<input type="file" name="photo" id="photo"/>' + 
                  	'<input type="button"  value="删除"  οnclick="delFileItem(this)"/>' +
                  '</td></tr>')
    $("#lastrow").before(newTr);
}

function delFileItem(obj) {
   
    // obj为 DOM对象
    $(this).parents("tr").remove();
}

5. 操做CSS

5.1 直接操做CSS样式

  • 获取css样式: css()
  • 设置css样式: css(css, val)
  • 同时设置多个css样式: css({css1:val1, css2:val2})

HTML素材

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			li{
     
     
				font-size: 12px;
				color: #ffffff;
				background-color:gray;
				border-radius:5px;
				height: 33px;
				width:104px;
				text-align: center;
				line-height:38px;
				list-style:none;
				float:left;
			}
		</style>
		<script src="js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<ul>
            <li style="background-color: red; color:yellow; font-size: 16px;">前端技术</li>
            <li>编程技术</li>
            <li>数据库</li> 
       </ul>
	</body>
</html>

关键的jQuery操做代码

$(function() {
   
   
    $("li").mouseover(function() {
   
   
        $(this).css({
   
   
            "background-color" : "red",
            "color" : "yellow",
            "font-size" : "16px"
        });
    });
    
    $("li").bind("mouseout", function() {
   
   
        $(this).css("background-color", "gray")
            .css("color", "#fff")
            .css("font-size", "12px");
    });
})

5.2 使用类样式

  • 判断是否具备类样式: hasClass(class)
  • 追加类样式: addClass(class) 注意不是覆盖
  • 删除类样式: removeClass(class)
  • 切换类样式: toggleClass(class) 若是有就去掉,没有就加上

将样式提取为:

.over {
   
   
    "background-color" : "red",
    "color" : "yellow",
    "font-size" : "16px"
}

.out {
   
   
    "background-color" : "gray",
    "color" : "#fff",
    "font-size" : "1px"
}

关键的jQuery操做代码

$(function() {
   
   
    $("li").mouseover(function() {
   
   
        $(this).addClass("over").removeClass("out");
    });
    
    $("li").bind("mouseout", function() {
   
   
        $(this).addClass("out");
        $(this).removeClass("over");
    });
})

6. 表单验证

为了下降服务器端负担,因此在前端进行表单验证,保证数据的有效性。 表单验证经过后还能够进行服务器验证(JSP)

6.1 基本表单验证

HTML素材

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<table  id="center" border="0" cellspacing="0" cellpadding="0">
           <!-- 表单提交到的jsp后面进行学习 -->
          <form action="demo.jsp" method="post" name="myform" onsubmit="return checkForm()" > <!-- return必须有 -->
           <tr>
              <td >您的姓名:</td>
              <td>
                  <input id="user" type="text" onblur="checkUser()"/>
                  <span id="userError"></span>
               </td>
            </tr>
            <tr>
              <td >输入密码:</td>
              <td><input id="pwd" name="pwd" type="password"/></td>
            </tr>
            <tr>
              <td >再输入一遍密码:</td>
              <td><input id="repwd" type="password"/></td>
            </tr>
           <tr>
              <td >您的Email:</td>
              <td><input id="email" type="text" onblur="checkEmail()"/><span id="emailError"></span></td>
            </tr>   
            <tr>
              <td>&nbsp;</td>
              <td ><input name="btn"  type="submit"  value="注册" class="rb1" /></td>
            </tr>
          </form>
        </table>
	</body>
</html>

关键的jQuery操做代码

/*
 * 1.表单的提交事件要在form上绑定【onsubmit事件】才会向action提交,而不是绑定onclick事件
 * 2.若是表单项没有输入内容,【内容是空字符串""】,不是null
     判断表单项内容为空的表达式  user == ""   或者  user.length==0
 * 3.无论表单项是用户名、年龄,入学时间,接收数据后【都是String 】 "bjsxt"  "20"  "1999-12-23"
 * 4.进行表单提交验证注意事项
    *   1)出现错误要return false。一切正常建议return true;
    *   2)οnsubmit="return checkForm()"  【return不可少】
 * 6.表单验证【【和String】】有密切关系
	*  user.length <=6
	*  var ch = user.charAt(i);
	*  email.indexOf('@')<0
 * 
 * 7.缺点
	*   1)须要等到点击提交按钮时才进行表单验证,应该输入完成一个表单项后马上进行该表单项的验证   ==>   使用 onblur 
	*   2)验证信息的输出是经过alert给出,不方便,建议在文本框后面直接输出信息    ==>   在文本框后面加 <span>
 */
function checkForm(){
   
   
    if(checkUser() && checkEmail()) {
   
   
        return true;
    }
    return false;
}

function checkUser() {
   
   
    $("#userError").css("color", "white").html("")
    //	用户名不能为空
    var user = $("#user").val();
    if (user == "") {
   
   
        $("#userError").css("color", "red").html("用户名不能为空")
        return false;
    }

    //  用户名长度大于6
    if (user.length <= 6) {
   
   
        $("#userError").css("color", "red").html("用户名长度大于6")
        return false;
    }

    //  用户名中不能有数字  ad34adf
    for (var i = 0; i < user.length; i++) {
   
   
        var ch = user.charAt(i);
        if(ch >= '0' && ch <= '9' ){
   
   
            $("#userError").css("color", "red").html("用户名中不能有数字")
            return false;
        }
    }
    return true;  // 方便【调用】的时候直接以返回值进行判断
}

function checkEmail() {
   
   
    $("#emailError").css("color", "white").html("")
    //  邮箱格式正确
    var email = $("#email").val();
    if (email.indexOf('@') < 0) {
   
   
        $("#emailError").css("color", "red").html("邮箱中必须有@")
        return false;
    }
    if (email.indexOf('.') < 0) {
   
   
        $("#emailError").css("color", "red").html("邮箱中必须有.")
        return false;
    }
    return true;
}

还能够在 文本框上添加 onfocus() 事件:得到焦点后执行什么操做。

function onfocusFun() {
   
   
    $("#user").select();  // 获取焦点后,选中内容
}

6.2 正则表达式

使用简洁的代码,严谨的验证文本框中的内容

正则表达式使用单个字符串来描述、匹配一系列符合某个句法规则的字符串

建立方法

var reg = /china/;  // 使用两个 / 括起来
var reg = new RegExp("china")  // 使用 new建立对象

// 使用建立好的正则表达式进行验证
reg.test("字符串内容");

通配符号

image-20220404102605836

重复字符

image-20220404102633861

注意: [ ]里面的内容无论写多少都表明一位,例如[1-10],表示1-1,0这两个取值的其中1个数字

HTML素材

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<form name="form1" id="form11">			
			邮政编码:
			<input id="code1" name="code2" type="text" onblur="checkCode()" />
			<div id="code_prompt"></div>
			手机号码:
			<input id="mobile" type="text" onblur="checkMobile()" />
			<div id="mobile_prompt"></div>
			邮箱:
			<input id="email" name="email" type="text" onblur="checkEmail()" />
			<div id="email_prompt"></div>
		</form>
	</body>
</html>

关键的jQuery操做代码

function checkCode() {
   
   
    // 获取内容
    var code = $("#code1").val();
    // 给出正则表达式
    var reg = /^\d{6}$/;   // ^表示开始, $表示结束
    // 使用正则表达式进行验证,并给出结果
    if (reg.test(code)) {
   
   
        $("#code_prompt").html("格式正确");
    } else {
   
   
        $("#code_prompt").html('<font color="red">格式错误</font>');
    }
}

function checkMobile() {
   
   
    var mobile = $("#mobile").val();
    var reg = /^1[3578]\d{9}$/;
    //if().....
}

function checkEmail() {
   
   
    var email = $("#email").val();
    var reg = /^\w{6,}@[a-zA-Z0-9]{2,}(\.[a-zA-Z]{2,3}){1,2}$/;
    //if().....
}

经常使用的正则表达式

  • 匹配国内电话号码:\d{3}-\d{8}|\d{4}-\d{7}
  • 匹配腾讯QQ号:[1-9][0-9]{4,}
  • 匹配中国邮政编码:\d{6}
  • 匹配由数字和26个英文字母组成的字符串:^[A-Za-z0-9]+$
  • 匹配Email地址:\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*
  • 匹配中文字符:[\u4e00-\u9fa5]

7. jQuery案例

7.1 购物车

HTML素材

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>购物车</title>
		<style type="text/css">
			tr{
     
     
				height: 50px;
			}
		</style>
		<script src="js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<h3>jQuery操做表格</h3>
		<hr />
		<input type="button" id="fx" value="反选" />
		<input type="button" id="addRow" value="新增一行" />
		<input type="button" id="delRow" value="删除行"/>
		<input type="button" id="copyRow" value="复制行" />
		<table border="1px" cellpadding="10px" cellspacing="0" id="ta">
			<tr>
				<td width="50px"><input type="checkbox" name="chks" id="chks"  value="1" /></td>
				<td width="200px">书名</td>
				<td width="200px">做者</td>
				<td width="200px">数量</td>
				<td width="200px">操做</td>
			</tr>
			<tr id="">
				<td><input type="checkbox" name="chk" id="" value="2"/></td>
				<td>《Java编程之道》</td>
				<td>wollo</td>
				<td>10</td>
				<td>
					<input type="button" name="aa" id="" value="修改数量" />
					<input type="button" name="" id="" value="删除" />
				</td>
			</tr>			
			<tr>
				<td><input type="checkbox" name="chk" id="" value="3" /></td>
				<td>《Python和个人故事》</td>
				<td>赵老师</td>
				<td>10</td>
				<td>					
					<input type="button" name="" id="" value="修改数量" onclick="updateAmount(this)"/>
					<input type="button" name="" id="" value="删除" onclick="delRow(this)" />
				</td>
			</tr>
			
			<tr>
				<td><input type="checkbox" name="chk" id="" value="4" /></td>
				<td>《web开发详解》</td>
				<td>张老师</td>
				<td>30</td>
				<td>
					<input type="button" name="" id="" value="修改数量"onclick="updateAmount(this)"/>
					<input type="button" name="" id="" value="删除" />
				</td>
			</tr>
		</table>
	</body>
</html>

全选反选操做

$(function() {
   
   
    // 全选
    $("#chks").click(function() {
   
   
        // 获取当前选中状态
        var flag = $("#chks").prop("checked");
        $("input[name='chk']").prop("checked", flag);
    })

    // 全选的完善:改变复选框的状态时,要判断全部的复选框是否都被选中,以此决定全选框的值
    $("input[name='chk']").click(judgeAll);

    // 反选
    $("#fx").bind("click", function() {
   
   
        $("input[name='chk']").each(function() {
   
   
            $(this).prop("checked", !$(this).prop("checked"));
        })
        judgeAll();
    })
})

function judgeAll() {
   
   
    var flag = true;
    $("input[name='chk']").each(function() {
   
   
        if (!$(this).prop("checked")) {
   
   
            flag = false;
            return;
        }
    })
    $("#chks").prop("checked", flag);
}

增长、删除、复制行

$(function() {
   
   
    // 新增一行
    $("#addRow").click(function() {
   
   
        var newRow = $('<tr>' +
                       '<td><input type="checkbox" name="chk" id="" value="3" /></td>' + 
                       '<td>《Python从入门到入狱》</td>' + 
                       '<td>Tom老师</td>' + 
                       '<td>10</td>' + 
                       '<td>' + 
                       '<input type="button" name="" id="" value="修改数量" οnclick="updateAmount(this)"/>&nbsp;' + 
                       '<input type="button" name="" id="" value="删除" οnclick="delRow(this)" />' + 
                       '</td></tr>');

        $("#ta").append(newRow);
    });

    // 复制多行
    $("#copyRow").click(function() {
   
   
        var toCopyArr = $("input[name='chk']:checked");
        if (toCopyArr.length == 0) {
   
   
            alert("至少选中一行");
            return;
        }
        toCopyArr.each(function() {
   
   
            var newRow = $(this).parents("tr").clone();  // 复制一份!!!
            $("#ta").append(newRow);
        })
    });

    // 删除多行
    $("#delRow").click(function() {
   
   
        // 获取被选中的行
        var toDelArr = $("input[name='chk']:checked");
        if (toDelArr.length == 0) {
   
   
            alert("至少选中一行");
            return;
        }
        toDelArr.parents("tr").remove();  // 删除操做是相同的,不须要使用 each
    });
});

修改数量、单条删除

// 删除行
function delRow(obj) {
   
   
    $(obj).parents("tr").remove();
}

// 修改数量
function updateAmount(obj) {
   
   
    var numObj = $(obj).parent().prev();
    // 获取数量
    var num = numObj.text();
    // 将数量赋给输入框
    var newInput = $('<input type="text" value="' + num + '" οnblur="checkNum(this)"/>');
    numObj.html(newInput);
    // 修改数量按钮变为肯定
    var confirmBtn = $('<input type="button" name="" id="" value="肯定" οnclick="confirmNum(this)"/>')
    $(obj).replaceWith(confirmBtn);
}

// 肯定数量
function confirmNum(obj) {
   
   
    var inputObj = $(obj).parent().prev();
    // 获取数量
    var num = inputObj.find("input").val();
    judgeNum(num);
    // 将输入框赋给数量
    inputObj.html(num);
    // 修改肯定按钮变为修改数量
    var updateBtn = $('<input type="button" name="" id="" value="修改数量" οnclick="updateAmount(this)"/>')
    $(obj).replaceWith(updateBtn);
}

function checkNum(obj) {
   
   
    var num = $(obj).val();
    judgeNum(num);
}

function judgeNum(num) {
   
   
    if (isNaN(num) || parseInt(num) != num || num <= 0) {
   
   
        alert("必须是大于0的整数")
    }
}

7.2 Tab切换

HTML素材

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Tab切换</title>
		<style type="text/css">
			#ul1 li{
     
     
				border: 1px solid red;
				width: 100px;
				text-align: center;
				float: left;
				list-style-type: none;
			}
			
			.liselected{
     
     
				background-color: white;
			}
			.linoselected{
     
     
				background-color:darkgray;
			}
		</style>
		<script src="js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<ul id="ul1">
			<li id="li1">发布通知</li>
			<li id="li2" class="linoselected">自定义</li>
			<li id="li3" class="linoselected">数据图片表</li>
		</ul>
		<div style="clear:left"></div>
		<div id="tab1">
			第一个页面
		</div>
		<div id="tab2" style="display: none;">
			2222222
		</div>
		<div id="tab3" style="display: none;">
			这是333
		</div>
	</body>
</html>

关键的jQuery操做代码

$(function() {
   
   
    $("#ul1 li").click(function() {
   
   
        // 当前点击的元素
        $(this).addClass("liselected").removeClass("linoselected");
        // 其余兄弟  siblings()!!!!
        $(this).siblings().addClass("linoselected").removeClass("liselected");

        var idVal = $(this).attr("id").replace("li", "tab");
        $("div:gt(0)").each(function() {
   
   
            if ($(this).attr("id") == idVal) {
   
   
                $(this).css("display", "inline");
            } else{
   
   
                $(this).css("display", "none");
            }
        });
    });
})