JQuery（4）前端

已于 2022-05-06 21:57:23 修改 406 收藏
分类专栏： 前端 文章标签： 前端 jquery javascript web web app
于 2022-05-06 21:56:08 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_34516746/article/details/124596491
版权

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 选 择 器 ‘ ("a") （2）ID选择器 ` ("a")（2）ID选择器‘(“#id”) KaTeX parse error: Expected 'EOF', got '#' at position 4: ("p#̲id")` （3）类选择器 `(“.class”) ( " h 2. c l a s s " ) ‘ （ 4 ） 通 配 选 择 器 ‘ ("h2.class")` （4）通配选择器 ` ("h2.class")‘（4）通配选择器‘(“*”) （5）并集选择器 ( " e l e m 1 , e l e m 2 , e l e m 3 " ) ‘ （ 6 ） 后 代 选 择 器 ‘ ("elem1,elem2,elem3")` （6）后代选择器` ("elem1,elem2,elem3")‘（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>
  • 总结：
  1. 对于表单的提交，要给form标签绑定onSubmit事件，而不是给submit按钮绑定onClick事件，onsubmit绑定的方法时要有return关键字，绑定的方法要返回true/false
  2. 表单项内容不管输入的是字符串、数字、日期，js、jQuery、JSP接收后都是String类型
  3. 表单的验证和String对象有密切关系 length charAt(i) indexOf("@")
  4. 如果表单项内容为空，js收到的不是null，而是空字符串。判断条件不能写 username == null，而要写username==""或username.length ==0
  5. 验证出错要return false，验证无错要return true，并且 onsubmit="return checkForm()
  6. 该示例的缺点主要在于对于邮箱如果采用传统方式进行验证，代码繁琐并且不能保证严谨性，过度依赖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>
jaydenStyle
关注
  • 0
    点赞
  • 踩
  • 0
    收藏 更改收藏夹
  • 打赏
    打赏
  • 0
    评论
专栏目录
jquery boostrap 前端UI模版页面
11-15
jquery boostrap 前端UI模版页面，值得下载
纯jQuery实现前端分页功能
10-20
本文主要介绍了纯jquery实现前端分页功能的方法。具有很好的参考价值。下面跟着小编一起来看下吧
前端+jQuery+实现烟花特效
05-02
前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+...
jQuery前端开发技术
09-19
jquery教程就来北风,零基础包就业课程,120天快速成为java编程开发工程师,入职名企,薪资立马翻倍!
75款常用的jquery特效前端网页代码
04-24
75款常用的jquery特效前端网页代码
jQuery前端UI框架表单样式代码
07-24
jQuery前端UI框架表单样式代码是一款表单集合可拆开使用样式可以自定义参数灵活特效。
前端 jQuery框架
wk3510的博客
07-29 1456
bootstrap帮我们写好了一个css文件里面定义好了很多的css样式100%;}我们在使用的时候只需要在html中写标签添加响应的class即可学习有哪些class会有什么效果jquery我们使用原生的js，需要实现很多的页面动态效果，所有的效果都需要我们自己手动写逻辑jquery就是使用js代码帮我们写好了很多的动态特效，我们需要使用的时候只需要调用其写好的函数即可。............
jQuery前端分页示例分享
10-24
主要介绍了jQuery前端分页示例分享的相关资料,需要的朋友可以参考下
基于jquery的前端翻页框架
01-17
后台一次性将数据返回。基于jquery的由前端进行分页兵跳转，再实现输入页码跳页功能！
基于Bootstrap和jQuery构建前端分页工具实例代码
10-21
本文给大家介绍基于Bootstrap和jQuery构建前端分页工具实例代码，包括前端分页的优缺点和解决办法，对jquery bootstrap分页知识感兴趣的朋友一起通过本文学习吧
前端的JQuery文件
03-23
前端的JQuery文件 前端的JQuery文件
BJUI(jQuery)前端框架源码分享
04-15
BJUI(jQuery)前端框架源码分享， 结合jq+bootstrap+divTab 涵盖1.2和1.3版本， 各种组件api使用方法(tip: 建议用火狐浏览器打开)
jQuery头像裁剪前端代码
06-10
p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; line-height: 24.0px; font: 12.0px 'Heiti SC Light';... 基于jQuery实现的图片上传裁剪的前端效果 集成了常用的jQuery UI库， 使用方法复杂，这里不再赘述
jquery属于html框架吗,jquery是前端框架吗？
weixin_32287433的博客
06-10 2661
jquery是前端框架吗？jquery不是前端框架，它是一个JavaScript库。框架与库之间最本质区别在于控制权：you call libs, frameworks call you(控制反转)库：库是一个封装好的特定的集合，提供给开发者使用，而且是特定于某一方面的集合(方法和函数)，库没有控制权，控制权在使用者手中，在库中查询需要的功能在自己的应用中使用，我们可以从封装的角度理解库；框架：框...
常用的jQuery前端技巧收集
10-25
主要介绍了个人手机的常用的jQuery前端技巧,需要的朋友可以参考下
前端JQuery导出word 前端JQuery导出word
10-31
JQuery前端导出word。
jquery ui，用于前端开发
03-03
jquery ui，用于前端开发
felx布局--百度2020校招Web前端工程师笔试
最新发布
kuang*的博客
03-27 25
right需要减少：(200*1)/(50*2+200*1) * 50 = 100/3。1、当多个子盒子的总宽度flex-basis
lodash常用函数整理
weixin_41886421的博客
03-24 343
lodash常用函数整理
vue中名词解释
山丘望月的狼
03-27 197
通过componet元素的is sttribute来实现。通常使用 const message =ref('')←初始值。使用站为符号。1，生产环境打包的情况下无法移除。3，无需加载，进行页面切换。(也被称为*.vue文件)使用导入的函数来描述逻辑。（可以大幅度的简化代码）作用-告知vue如何编译。4，数据变更是改变DOM。3，v-model绑定。组件可以被重复多次使用。2，大型项目中不宜维护。3，挂载实例到DOM。3，通过插槽分配内容。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

jaydenStyle

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额：-- )
扫码支付
扫码支付：¥2
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、C币套餐、付费专栏及课程。

余额充值