JQuery笔记

最新推荐文章于 2022-02-14 01:05:42 发布

Vkerei

最新推荐文章于 2022-02-14 01:05:42 发布

阅读量197

点赞数 1

分类专栏：笔记

本文链接：https://blog.csdn.net/weixin_46517301/article/details/106033202

版权

笔记专栏收录该内容

7 篇文章 0 订阅

订阅专栏

JQuery是一个JavaScript的框架，是对JavaScript的一种封装。通过JQuery可以很方便的操作html元素

一、基本操作

1.例：使用JQuery进行隐藏和显示

<script src="https://how2j.cn/study/jquery.min.js"></script>
 
<script>
$(function(){
   $("#b1").click(function(){
      $("#d").hide();
   });
   $("#b2").click(function(){
      $("#d").show();
   });
});
 
</script>
 
<button id="b1">隐藏div</button>
 
<button id="b2">显示div</button>
 
<br>
<br>
 
<div id="d">
 
这是一个div
 
</div>

$(function(){
)};由两部分组成：$()和function(){}
这是为了防止文档在完全加载之前运行JQuery代码
另一种写法：$(document).ready();

2.通过id获取元素节点：$("#id")得到的是一个JQuery对象
需要注意的是，通过 document.getElementById 获取到的是 DOM里的元素节点，而通过$("#id") 获取到的是一个 JQuery 对象

<script src="https://how2j.cn/study/jquery.min.js"></script>
 
<script >
 
$(function(){
  document.write( $("#d") );
  document.close();
});
 
</script>
 
<div id="d">Hello JQuery</div>

[object Object]

3.增加监听器：增加click事件的监听

$("#b1").click(function(){
   alert("点击了按钮");
});

由两部分组成：b1按钮的点击事件$("#b1").click();
和弹出对话框的函数function(){alert("点击了按钮");}

4.取值：$("#id").val()方法，相当于document.getElementById("id").value

<script src="https://how2j.cn/study/jquery.min.js"></script>
  
<script>
$(function(){
   $("#b1").click(function(){
      alert($("#input1").val());
   });
});
   
</script>
   
<button id="b1">取值</button>
    
<br>
<br>
   
<input type="text" id="input1" value="默认值">

在这里插入图片描述

5.获取元素内容（文本内容），若有子元素则保留标签：JQuery对象的html()方法

<script src="https://how2j.cn/study/jquery.min.js"></script>
  
<script>
$(function(){
   $("#b1").click(function(){
      alert($("#d1").html());
   });
});
  
</script>
  
<button id="b1">获取文本内容</button>
   
<br>
<br>
  
<div id="d1">
这是div的内容
<span>这是div里的span
</span>
</div>

点击b1后：在这里插入图片描述
若有子元素则不保留标签：JQuery对象的text()方法

<script src="https://how2j.cn/study/jquery.min.js"></script>
   
<script>
$(function(){
   $("#b1").click(function(){
      alert($("#d1").text());
   });
});
   
</script>
   
<button id="b1">获取文本内容</button>
    
<br>
<br>
   
<div id="d1">
这是div的内容
<span>这是div里的span
</span>
</div>

点击b1后：在这里插入图片描述
6.对CSS样式的操作
①增加class:addClass();
和删除class:removeClass();

<script src="jquery.min.js"></script>
 
<script>
$(function(){
   $("#b1").click(function(){
      $("#d").addClass("pink");
   });
  $("#b2").click(function(){
      $("#d").removeClass("pink");
  })
});
  
</script>
  <button id="b1">增加背景色</button>
  <button id="b2">删除背景色</button>
<br>
<br>
 
<style>
.pink{
   background-color:pink;
}
</style>
  
<div id="d">
  
Hello JQuery
  
</div>

在这里插入图片描述
②切换class：如果存在则删除，如果不存在则添加：toggleClass();
③通过css函数直接设置样式：css(“property”,“value”);或
更多：css({“p1”:“v1”,“p2”:“v2”});

<script src="https://how2j.cn/study/jquery.min.js"></script>
  
<script>
$(function(){
   $("#b1").click(function(){
      $("#d1").css("background-color","pink");
   });
   
   $("#b2").click(function(){
      $("#d2").css({"background-color":"pink","color":"green"});
   });
 
});
   
</script>
  <button id="b1">设置单一样式</button>
  <button id="b2">设置多种样式</button>
<br>
<br>
  
<div id="d1" >
   
单一样式，只设置背景色
   
</div>
 
<div id="d2" >
   
多种样式，不仅设置背景色，还设置字体颜色
   
</div>

二、选择器

1.元素：$(“tagName”);根据标签名选择所有该标签的元素
2.id:$("#id");根据id选择元素
3.类：$(".className")根据类名选择元素
4.层级：$(“selector1 selector2”);选择selector1下的selector2元素

<script src="https://how2j.cn/study/jquery.min.js"></script>
    
<script>
$(function(){
   $("#b1").click(function(){
      $("div#d3 span").addClass("pink");
   });
     
});
     
</script>
  <button id="b1">给id='d3'的div 下的 span 增加背景色</button>
<br>
<br>
    
<style>
.pink{
   background-color:pink;
}
</style>
     
<div class="d">
  <span>Hello JQuery</span>
    
</div>
   
<div class="d" >
  <span>Hello JQuery</span>
</div>
   
<div id="d3" >
  <span>Hello JQuery</span>
</div>

在这里插入图片描述
5.最先：$(“selector:first)”;和最后：$(“selector:last”);
满足选择器条件的第一个/最后一个元素

<script src="https://how2j.cn/study/jquery.min.js"></script>
     
<script>
$(function(){
   $("#b1").click(function(){
      $("div:first").addClass("pink");
   });
      
   $("#b2").click(function(){
      $("div:last").addClass("pink");
   });
 
});
      
</script>
  <button id="b1">第一个增加背景色</button>
  <button id="b2">最后一个增加背景色</button>
<br>
<br>
     
<style>
.pink{
   background-color:pink;
}
</style>
      
<div>
  <span>Hello JQuery</span>
     
</div>
    
<div >
  <span>Hello JQuery</span>
</div>
    
<div >
  <span>Hello JQuery</span>
</div>

在这里插入图片描述
6.奇：$(“selector:odd”);偶：$(“selector:even”);
注：元素下标是基零的

7.可见性：$("selector:hidden");满足选择器条件的不可见元素

$(“selector:visible”);满足选择器条件的不可见元素
注：div:visible表示选中可见的div
div ：visible表示选中div下可见的元素

<script src="https://how2j.cn/study/jquery.min.js"></script>
        
<script>
$(function(){
   $("#b1").click(function(){
     $("div:visible").hide();
   });
   $("#b2").click(function(){
      $("div:hidden").show();     
   });
});
         
</script>
  <button id="b1">隐藏可见的</button>
  <button id="b2">显示不可见的</button>
  
<br>
<br>
        
<style>
.pink{
   background-color:pink;
}
  
</style>
         
<div>
  <span>Hello JQuery 1</span>
        
</div>
       
<div >
  <span>Hello JQuery 2</span>
</div>
       
<div >
  <span>Hello JQuery 3</span>
</div>
   
<div >
  <span >Hello JQuery 4</span>
</div>
   
</div>
       
<div >
  <span>Hello JQuery 5</span>
</div>
       
<div >
  <span>Hello JQuery 6</span>
</div>

8.属性：

①$(“selector[attribute]”);满足选择器条件的具有某属性的元素
②$(“selector[attribute=value]”);
$(“selector[attribute!=value]”); 满足选择器条件的属性等于/不等于value的元素
③$(“selector[attribute^=value]”);满足选择器条件的属性以value开头的元素
④$(“selector[attribute$=value]”);满足选择器条件的属性以value结尾的元素
⑤$(“selector[attribute*=value]”);满足选择器条件的属性包含value的元素

<script src="https://how2j.cn/study/jquery.min.js"></script>
       
<script>
$(function(){
   $("#b1").click(function(){
      $("div[id]").toggleClass("border");
   });
   $("#b2").click(function(){
      $("div[id='pink']").toggleClass("border");
   });
   $("#b3").click(function(){
      $("div[id!='pink']").toggleClass("border");
   });
   $("#b4").click(function(){
      $("div[id^='p']").toggleClass("border");
   });
   $("#b5").click(function(){
      $("div[id$='k']").toggleClass("border");
   });
   $("#b6").click(function(){
      $("div[id*='ee']").toggleClass("border");
   });
 
});
        
</script>
  <button id="b1">给有id属性的div切换边框</button>
  <button id="b2">给id=pink的div切换边框</button>
  <button id="b3">给有id!=pink属性的div切换边框</button>
  <button id="b4">给有id以p开头的div切换边框</button>
  <button id="b5">给有id以k结尾的div切换边框</button>
  <button id="b6">给有id包含ee的div切换边框</button>
 
<br>
<br>
       
<style>
.pink{
   background-color:pink;
}
.green{
   background-color:green;
}
.border{
   border: 1px blue solid;
    
}
 
button{
   margin-top:10px;
   display:block;
}
 
div{
  margin:10px;
}
</style>
        
<div id="pink">
    id=pink的div
</div>
      
<div id="green">
  id=green的div
</div>
      
<div >
   没有id的div
</div>

在这里插入图片描述
9.表单对象
:input 会选择所有的输入元素，不仅仅是input标签开始的那些，还包括textarea,select和button
:button 会选择type=button的input元素和button元素
:radio 会选择单选框
:checkbox会选择复选框
:text会选择文本框，但是不会选择文本域
:submit会选择提交按钮
:image会选择图片型提交按钮
:reset会选择重置按钮

<script src="https://how2j.cn/study/jquery.min.js"></script>
 
<script>
$(function(){
   $(".b").click(function(){
      var value = $(this).val();
      $("td[rowspan!=13] "+value).toggle(500);
   });
        
});
        
</script>
 
<style>
table{
    border-collapse:collapse;
        table-layout:fixed;
    width:80%;
}
table td{
    border-bottom: 1px solid #ddd;
    padding-bottom: 5px;
    padding-top: 5px;
}
 
div button{
    display:block;
}
 
</style>
 
<table>
    <tr>
         
        <td rowspan="13" valign="top" width="150px">
            <div >
                <button value=":input" class="b">切换所有的:input</button>
                <button value=":button" class="b">切换:button</button>
                <button value=":radio" class="b">切换:radio</button>     
                <button value=":checkbox" class="b">切换:checkbox</button>       
                <button value=":text" class="b">切换:text</button>       
                <button value=":password" class="b">切换:password</button>       
                <button value=":file" class="b">切换:file</button>       
                <button value=":submit" class="b">切换:submit</button>       
                <button value=":image" class="b">切换:image</button>     
                <button value=":reset" class="b">切换:reset</button>         
            </div>           
        </td>
        <td width="120px">说明</td>
        <td width="120px">表单对象</td>
        <td width="">示例</td>
    </tr>
<tr>
  <td >input按钮</td>
  <td >:button</td>
  <td><input type="button" value="input按钮"/></td>
</tr>
 
<tr>
  <td>button按钮</td>
  <td >:button</td>
  <td><button>Button按钮</button></td>
</tr>
<tr>
  <td>单选框</td>
  <td >:radio</td>
  <td><input type="radio" ></td>
</tr>
<tr>
  <td>复选框</td>
  <td >:checkbox</td>
  <td><input type="checkbox"  ></td>
</tr>
 
<tr>
  <td>文本框</td>
  <td >:text</td>
  <td><input type="text" /></td>
</tr>
<tr>
  <td>文本域</td>
  <td ></td>
  <td><textarea></textarea></td>
</tr>
<tr>
  <td>密码框</td>
  <td >:password</td>
  <td><input type="password" /></td>
</tr>
<tr>
  <td>下拉框</td>
  <td ></td>
  <td><select><option>Option</option></select></td>
</tr>
 
<tr>
  <td>文件上传</td>
  <td >:file</td>
  <td> <input type="file" /></td>
</tr>
 
<tr>
  <td>提交按钮</td>
  <td >:submit</td>
  <td><input type="submit" /></td>
</tr>
<tr>
  <td>图片型提交按钮</td>
  <td >:image</td>
  <td><input type="image" src="https://how2j.cn/example.gif" /></td>
</tr>
 
<tr>
  <td>重置按钮</td>
  <td >:reset</td>
  <td><input type="reset" /></td>
</tr>
 
</table>

在这里插入图片描述
10.表单对象属性
:enabled会选择可用的输入元素注：输入元素的默认状态都是可用
:disabled会选择不可用的输入元素
:checked会选择被选中的单选框和复选框注： checked在部分浏览器上(火狐,chrome)也可以选中selected的option
:selected会选择被选中的option元素

<head>
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
   </head>
   <script src="https://how2j.cn/study/jquery.min.js"></script>
    
   <script>
   $(function(){
      $(".b").click(function(){
         var value = $(this).val();
         $("td[rowspan!=13] "+value).toggle(500);
      });
       
      $(".b2").click(function(){
         var value = $(this).val();
         var options = $("td[rowspan!=13] "+value);
         alert("选中了"+options.length+"条记录！");
      });
           
   });
           
   </script>
    
   <style>
   table{
       border-collapse:collapse;
           table-layout:fixed;
       width:80%;
   }
   table td{
       border-bottom: 1px solid #ddd;
       padding-bottom: 5px;
       padding-top: 5px;
   }
    
   div button{
       display:block;
   }
    
   .border{
      border: 1px blue solid;
        
   }
    
   </style>
    
   <table>
       <tr>
            
           <td rowspan="13" valign="top" width="120">
               <div >
                   <button value=":enabled" class="b">切换:enabled</button>
                   <button value=":disabled" class="b">切换:disabled</button>       
                   <button value=":checked" class="b">切换:checked</button>     
                   <button value=":selected" class="b2">:selected数量</button>      
               </div>           
           </td>
           <td width="120">说明</td>
           <td width="120">表单对象属性</td>
           <td width="100px">示例</td>
       </tr>
   <tr>
     <td >enabled的按钮</td>
     <td >:enabled</td>
     <td><input type="button" enabled="enabled" value="enabled的按钮"/></td>
   </tr>
    
   <tr>
     <td >disabled的按钮</td>
     <td >:disabled</td>
     <td><input type="button" disabled="disabled" value="disabled的按钮"/></td>
   </tr>
    
     <td >选中的复选框</td>
     <td >:checked</td>
     <td>
        
       <input type="radio" checked="checked" ><br>
       <input type="radio" ><br>
       <input type="checkbox" ><br>
       <input type="checkbox" checked="checked" >
     </td>
    
   <tr>
     <td>选中的下拉列表</td>
     <td >:selected</td>
     <td>
       <select size="3" multiple="multiple">
          <option selected="selected">ow</option>
          <option >lol</option>
          <option selected="selected">steam</option>
       </select>
     </td>
   </table>
    
   <form>
    
   </form>

在这里插入图片描述

三、筛选器

在已经通过选择器选中了元素后，在此基础上进一步选择。

1.第一个，最后几个，第几个
首先通过 $(“div”) 选择了多个div元素，接下来做进一步的筛选：first() 第1个元素，last() 最后一个元素，eq(num) 第num个元素
注: num基0

<script src="https://how2j.cn/study/jquery.min.js"></script>
       
<script>
$(function(){
   $("#b1").click(function(){
      $("div").first().toggleClass("pink");
   });
 
   $("#b2").click(function(){
      $("div").last().toggleClass("pink");
   });
 
   $("#b3").click(function(){
      $("div").eq(4).toggleClass("pink");
   });
        
});
        
</script>
  <button id="b1">切换第1个div背景色</button>
  <button id="b2">切换最后1个div背景色</button> 
  <button id="b3">切换第5个div背景色</button>
 
<br>
<br>
       
<style>
.pink{
   background-color:pink;
}
 
</style>
        
<div>
  <span>Hello JQuery 1</span>
       
</div>
      
<div >
  <span>Hello JQuery 2</span>
</div>
      
<div >
  <span>Hello JQuery 3</span>
</div>
  
<div >
  <span>Hello JQuery 4</span>
</div>
  
<div >
  <span>Hello JQuery 5</span>
</div>
      
<div >
  <span>Hello JQuery 6</span>
</div>

在这里插入图片描述
2.父和祖先：parent() 选取最近的一个父元素，parents() 选取所有的祖先元素

<script src="https://how2j.cn/study/jquery.min.js"></script>
        
<script>
$(function(){
  $("#b1").click(function(){
     $("#currentDiv").parent().toggleClass("b");
  });
  $("#b2").click(function(){
     $("#currentDiv").parents().toggleClass("b");
  });
 
});
</script>
 
<style>
div{
   padding:20px;
}
 
div#grandParentDiv{
 background-color:pink;
}
 
div#parentDiv{
 background-color:green;
}
 
div#currentDiv{
 background-color:red;
}
 
.b{
   border: 2px solid black;
}
 
</style>
 
<button id="b1">改变parent()的边框</button>
 
<button id="b2">改变parents()的边框</button>
 
<div id="grandParentDiv" >
  祖先元素
  <div id="parentDiv">
  父元素
    <div id="currentDiv">当前元素</div> 
  </div>
</div>

在这里插入图片描述
3.儿子和后代：children():筛选出儿子元素（紧挨着的子元素），find(selector):筛选出后代元素
注：find()必须使用参数selector

<script src="https://how2j.cn/study/jquery.min.js"></script>
          
<script>
$(function(){
  $("#b1").click(function(){
     $("#currentDiv").children().toggleClass("b");
  });
  $("#b2").click(function(){
     $("#currentDiv").find("div").toggleClass("b");
  });
   
});
</script>
   
<style>
div{
   padding:20px;
}
   
div.grandChildrenDiv{
 background-color:pink;
}
   
div.childrenDiv{
 background-color:green;
 margin:10px;
}
   
div#currentDiv{
 background-color:red;
}
   
.b{
   border: 2px solid black;
}
   
</style>
   
<button id="b1">改变children()的边框</button>
   
<button id="b2">改变find()的边框</button>
   
<div id="currentDiv" >
  当前元素
  <div class="childrenDiv">
  儿子元素1
    <div class="grandChildrenDiv">后代元素n</div> 
  </div>
  <div class="childrenDiv">
  儿子元素2
    <div class="grandChildrenDiv">后代元素n</div> 
  
  </div>
    
</div>

在这里插入图片描述
4.同胞元素：siblings()

<script src="https://how2j.cn/study/jquery.min.js"></script>
         
<script>
$(function(){
  $("#b1").click(function(){
     $("#currentDiv").siblings().toggleClass("b");
  });
  
});
</script>
  
<style>
div{
   padding:20px;
   background-color:pink;
   margin:10px;
}
  
div#parentDiv{
 background-color:green;
}
  
div#currentDiv{
 background-color:red;
}
  
.b{
   border: 2px solid black;
}
  
</style>
  
<button id="b1">给同级加上边框</button>
  
<div id="parentDiv" >
  父元素
  <div id="currentDiv">
    当前元素
  </div>
  <div >
    同级元素
  </div>
  <div >
    同级元素
  </div>
</div>

在这里插入图片描述

四、属性

1.获取：通过attr(attribute)获取一个元素的属性

<script src="https://how2j.cn/study/jquery.min.js"></script>
  
<script>
$(function(){
   $("#b1").click(function(){
      alert("align属性是:" + $("#h").attr("align") );
   });
   $("#b2").click(function(){
      alert("game属性是:" + $("#h").attr("game") );
   });
});
  
</script>
  
<button id="b1">获取align属性</button>
  
<button id="b2">获取自定义属性 game</button>
  
<br>
<br>
  
<h1 id="h" align="center" game="LOL">居中标题</h1>

在这里插入图片描述
2.修改：通过attr(attr,value)修改属性

<script src="https://how2j.cn/study/jquery.min.js"></script>
   
<script>
$(function(){
   $("#b1").click(function(){
      $("#h").attr("align","right") ;
   });
 
});
   
</script>
   
<button id="b1">修改align属性为right</button>
   
<br>
<br>
   
<h1 id="h" align="center" >居中标题</h1>

在这里插入图片描述
3.删除：removeAttr(attribute)

<script src="https://how2j.cn/study/jquery.min.js"></script>
   
<script>
$(function(){
   $("#b1").click(function(){
         $("#h").removeAttr("align");
   });
});
   
</script>
   
<button id="b1">删除align属性</button>
 
<br>
<br>
   
<h1 id="h" align="center" game="LOL">居中标题</h1>

在这里插入图片描述
4.prop和attr的区别：
与prop一样，attr也可以用来获取与设置元素的属性。区别在于，对于自定义属性和选中属性的处理。
选中属性指的是 checked,selected 这2种属性

对于自定义属性 attr能够获取，prop不能获取
对于选中属性
attr 只能获取初始值，无论是否变化
prop 能够访问变化后的值，并且以布尔型返回。
所以在访问表单对象属性的时候，应该采用prop而非attr

五、效果

1.显示、隐藏、切换：show(), hide(), toggle()，也可以在括号内加入毫秒数表示延时

<script src="https://how2j.cn/study/jquery.min.js"></script>
   
<script>
$(function(){
var div = $("#d");
   $("#b1").click(function(){
      div.hide();
   });
   $("#b2").click(function(){
      div.show();
   });
   $("#b3").click(function(){
      div.toggle();
   });
   $("#b4").click(function(){
      div.show(1000);
   });
   $("#b5").click(function(){
      div.hide(1000);
   });
   $("#b6").click(function(){
      div.toggle(1000);
   });
  
});
   
</script>
   
<style>
button{
  display:block;
}
div{
  border:solid 1px gray;
  background-color:pink;
  width:300px;
  height:100px;
}
</style>
 
<button id="b1">立即隐藏</button>
<button id="b2">立即显示</button>
<button id="b3">立即切换</button>
 
<button id="b4">延时显示</button>
<button id="b5">延时隐藏</button>
<button id="b6">延时切换</button>
 
<br>
<br>
   
<div id="d">
用于演示效果的DIV
</div>

在这里插入图片描述
2.滑动隐藏显示：slideUp()：向上滑动隐藏，slideDown():向下滑动显示，slideToggle()滑动切换

<script src="https://how2j.cn/study/jquery.min.js"></script>
    
<script>
$(function(){
var div = $("#d");
   $("#b1").click(function(){
      div.slideUp();
   });
   $("#b2").click(function(){
      div.slideDown();
   });
   $("#b3").click(function(){
      div.slideToggle();
   });
   $("#b4").click(function(){
      div.slideUp(2000);
   });
   $("#b5").click(function(){
      div.slideDown(2000);
   });
   $("#b6").click(function(){
      div.slideToggle(2000);
   });
   
});
    
</script>
    
<style>
button{
  display:block;
}
div{
  border:solid 1px gray;
  background-color:pink;
  width:300px;
  height:100px;
}
</style>
   
<button id="b1">向上滑动</button>
<button id="b2">向下滑动</button>
<button id="b3">滑动切换</button>
  
<button id="b4">延时向上滑动</button>
<button id="b5">延时向下滑动</button>
<button id="b6">延时滑动切换</button>
  
<br>
<br>
    
<div id="d">
用于演示效果的DIV
</div>

在这里插入图片描述
3.淡入淡出：fadeIn(), fadeOut(), fadeToggle()，指定淡入程度：fadeTo()
fadeTo()参数为0-1的小数，0表示不淡入，1表示全部淡入

<script src="https://how2j.cn/study/jquery.min.js"></script>
    
<script>
$(function(){
var div = $("#d");
   $("#b1").click(function(){
      div.fadeIn();
   });
   $("#b2").click(function(){
      div.fadeOut();
   });
   $("#b3").click(function(){
      div.fadeToggle();
   });
   $("#b4").click(function(){
      div.fadeIn(2000);
   });
   $("#b5").click(function(){
      div.fadeOut(2000);
   });
   $("#b6").click(function(){
      div.fadeToggle(2000);
   });
 
   $("#b7").click(function(){
      $("#d1").fadeTo("slow",0.2);
      $("#d2").fadeTo("slow",0.5);
      $("#d3").fadeTo("slow",0.8);
   });
   
});
    
</script>
    
<style>
button{
  display:block;
}
table div{
    border:solid px gray;
  background-color:pink;
  width:80px;
  height:50px;
}
div{
  border:solid 1px gray;
  background-color:pink;
  width:300px;
  height:100px;
}
</style>
<button id="b2">淡出</button> 
<button id="b1">淡入</button>
<button id="b3">淡入淡出切换</button>
<button id="b5">延时淡出</button>
<button id="b4">延时淡入</button>
<button id="b6">延时淡入淡出切换</button>
 
<button id="b7">fadeTo</button>
 
<br>
<br>
    
<div id="d">
用于演示效果的DIV
</div>
 
<table>
<tr>
   <td>
      <div id="d1">
       用于演示fadeTo 20%
      </div>
   </td>
   <td>
     <div id="d2">
       用于演示fadeTo 50%
     </div>  
   </td>
 
   <td>
     <div id="d3">
      用于演示fadeTo 80%
     </div>  
   </td>
 
</tr>
 
</table>

在这里插入图片描述
4.自定义动画效果：animate()
animate()第一个参数为css样式，animate()第二个参数为延时毫秒。
注：默认情况下，html中的元素都是固定，并且无法改变的位置的。为了使用animate()自定义动画效果，需要通过css把元素的position设置为relative、absolute或者fixed。

<script src="https://how2j.cn/study/jquery.min.js"></script>
    
<script>
$(function(){
var div = $("#d");
   $("#b1").click(function(){
    div.animate({left:'100px'},2000);
    div.animate({left:'0px',top:'50px',height:'50px'},2000);
   });
});
    
</script>
    
<style>
button{
  display:block;
}
 
div{
  background-color:pink;
  width:200px;
  height:80px;
  font-size:12px;
  position:relative;
}
</style>
   
<button id="b1">自定义动画</button>
 
<br>
<br>
    
<div id="d">
<p>1. 向右移动100px</p>
<p>2. 向左下移动50px，同时高度变小</p>
</div>

在这里插入图片描述
点击后：
5.回调函数：
效果一般需要一定的时间，并且这个时间可长可短，所以就无法精确的确定该效果何时结束。
但只需要在调用效果方法的最后一个参数传入一个function，当效果结束的时候，就会自动调用该function了。

<script src="https://how2j.cn/study/jquery.min.js"></script>
    
<script>
$(function(){
var div = $("#d");
   $("#b1").click(function(){
    div.animate({left:'100px'},2000);
    div.animate({left:'0px',top:'50px',height:'50px'},2000,function(){
     alert("动画演示结束");
    });
   });
});
    
</script>
    
<style>
button{
  display:block;
}
 
div{
  background-color:pink;
  width:200px;
  height:80px;
  font-size:12px;
  position:relative;
}
</style>
   
<button id="b1">自定义动画结束时，会有提示框</button>
 
<br>
<br>
    
<div id="d">
<p>1. 向右移动100px</p>
<p>2. 向左下移动50px，同时高度变小</p>
</div>

六、事件

1.加载
页面加载有两种方式表示
$(document).ready();
$(); 这种比较常用
图片加载用load()函数

<script src="https://how2j.cn/study/jquery.min.js"></script>
 
<script>
  $(document).ready(function(){
    $("#message1").html("页面加载成功");
   
  });
  $(function(){
    $("#img").load(function(){
      $("#message2").html("图片加载成功");
    });
  });
 
</script>
  
<div id="message1"></div>
<div id="message2"></div>
 
<img id="img" src="https://how2j.cn/example.gif">

在这里插入图片描述
2.点击
click() 表示单击
dblclick() 表示双击
注: 空白键和回车键也可以造成click事件，但是只有双击鼠标才能造成dblclick事件

<script src="https://how2j.cn/study/jquery.min.js"></script>
  
<script>
  $(function(){
      $("#b").click(function(){
          $("#message").html("单击按钮");
      });
      $("#b").dblclick(function(){
          $("#message").html("双击按钮");
      });
  });
</script>
   
<div id="message"></div>
 
<button id="b">测试单击和双击</button>

在这里插入图片描述
3.键盘
keydown 表示按下键盘
keypress 表示按住键盘
keyup 表示键盘弹起
这三者的区别表现在发生的先后顺序，获取到的键盘按钮值，对输入框的文本取值这三方面
先后顺序：按照 keydown keypress keyup 顺序发生
键盘按钮值：
通过event对象的which属性获取键盘的值
keydown和keyup 能获取所有按键，不能识别大小写
keypress 不能获取功能键，如F1 SHIFT等，能够识别大小写
文本取值：
keydown和keypress：不能获取最后一个字符
keyup：获取所有字符

<script src="https://how2j.cn/study/jquery.min.js"></script>
   
<script>
var order = 0;
var clearTimer=null;
$(function(){
  $("#i").keydown(function(e){
     var selector = "keydown";
  
     show(selector,e,$(this).val());
  });
  
  $("#i").keypress(function(e){
     var selector = "keypress";
     show(selector,e,$(this).val());
  });
  
  $("#i").keyup(function(e){
     var selector = "keyup";
     show(selector,e,$(this).val());
  });
    
});
  
function show(selector,e,inputvalue){
     clearTimeout(clearTimer);
     action(selector);
     key(selector,e);
     value(selector,inputvalue);
     clearTimer= setTimeout(clear,4000);
}
  
function action(selector){
    $("#"+selector+"Action").css("background-color","green");
    $("#"+selector+"Action").html("顺序: " + (++order ) );
}
  
function value(selector,value){
    $("#"+selector+"Value").html(value);
}
  
function key(selector,e){
    $("#"+selector+"Key").html(e.which);
}
 
function clear(){
  order = 0;
  $("tr#action div").css("background-color","red");
  $("tr div").html("");
}
  
</script>
<style>
tr#action div{
  border: 1px solid black;
  height:50px;
  background-color:red;
}
 
tr#value div,tr#key div{
  
  height:50px;
  background-color:#d1d1d1;
}
  
td{
 width:25%;
}
</style>
输入框：<input id="i">
<table width="100%">
<tr>
  <td></td>
  <td>keydown</td>
  <td>keypress</td>
  <td>keyup</td>
</tr>
<tr id="action">
  <td>行为</td>
  <td><div id="keydownAction"></div></td>
  <td><div id="keypressAction"></div></td>
  <td><div id="keyupAction"></div></td>
</tr>
  
<tr id="key">
  <td>按键</td>
  <td><div id="keydownKey"></div></td>
  <td><div id="keypressKey"></div></td>
  <td><div id="keyupKey"></div></td>
</tr>
  
<tr id="value">
  <td>取值</td>
  <td><div id="keydownValue"></div></td>
  <td><div id="keypressValue"></div></td>
  <td><div id="keyupValue"></div></td>
</tr>
  
</table>

在这里插入图片描述
如图所例，敲入ab
发生的先后顺序是 keydown,keypress,keyup
keydown和keyup取到大写B的ASCII码表 66,keypress取到小写b的ASCII码表 98.
keydown和keypress只能取到文本值a, keyup可以取到ab

4.鼠标
mousedown 表示鼠标按下
mouseup表示鼠标弹起

进入事件有3个 mousemove mouseenter mouseover
mousemove ：当鼠标进入元素，每移动一下都会被调用
mouseenter ：当鼠标进入元素，调用一下，在其中移动，不调用
mouseover：当鼠标进入元素，调用一下，在其中移动，不调用
mouseenter 和 mouseover的区别：
mouseenter: 当鼠标经过其子元素不会被调用
mouseover：当鼠标经过其子元素会被调用

离开事件有两个：mouseleave mouseout
mouseleave 和 mouseout的区别
mouseleave: 当鼠标经过其子元素不会被调用
mouseout：当鼠标经过其子元素会被调用

<script src="https://how2j.cn/study/jquery.min.js"></script>
 
<script>
$(function(){
$("#downup").mousedown(function(){
   $(this).html("鼠标按下");
});
$("#downup").mouseup(function(){
   $(this).html("鼠标弹起");
});
var moveNumber  =0;
var enterNumber  =0;
var leaveNumber  =0;
var overNumber  =0;
var outNumber  =0;
 
var enterNumber1  =0;
var overNumber1  =0;
 
var leaveNumber1  =0;
var outNumber1  =0;
 
$("#move").mousemove(function(){
  $("#move span.number" ).html(++moveNumber);
});
$("#enter").mouseenter(function(){
  $("#enter span.number" ).html(++enterNumber);
});
$("#leave").mouseleave(function(){
  $("#leave span.number" ).html(++leaveNumber);
});
$("#over").mouseover(function(){
  $("#over span.number" ).html(++overNumber);
});
$("#out").mouseout(function(){
  $("#out span.number" ).html(++outNumber);
});
 
$("#enter1").mouseenter(function(){
  $("#enter1 span.number" ).html(++enterNumber1);
});
$("#over1").mouseover(function(){
  $("#over1 span.number" ).html(++overNumber1);
});
 
$("#leave1").mouseleave(function(){
  $("#leave1 span.number" ).html(++leaveNumber1);
});
 
$("#out1").mouseout(function(){
  $("#out1 span.number" ).html(++outNumber1);
});
 
});
 
</script> 
 
<style>
div{
  background-color:pink;
  margin:20px;
  padding:10px;
}
 
.subDiv{
  background-color:green;
  margin:10px;
}
 
.parentDiv{
  background-color:pink;
  height:80px;
}
 
table{
 width:100%;
 border-collapse:collapse;
  table-layout:fixed;
}
td{
  border: 1.5px solid #d1d1d1;
  vertical-align:top;
  padding:20 0;
}
 
</style>
<table >
  <tr>
    <td width="100px">事件</td>
    <td>效果演示</td>
  </tr>
  <tr>
    <td>mousedown <br />
    mouseup<br /></td>
    <td>
      <button id="downup" style="margin-left:20px">鼠标按下弹起测试</button>    </td>
  </tr>
  <tr>
    <td>mousemove<br />
      mouseenter<br />
      mouseover<br />
      mouseleave<br />
    mouseout</td>
    <td>
        <div id="move">mousemove 当鼠标进入元素，每移动一下都会被调用 次数<span class="number">0</span></div>
        <div id="enter">mouseenter 当鼠标进入元素，调用一下，在其中移动，不调用 次数<span class="number">0</span></div>
        <div id="over">mouseover 当鼠标进入元素，调用一下，在其中移动，不调用 次数<span class="number">0</span></div>
        <div id="leave">mouseleave 当鼠标离开元素，调用一下 次数<span class="number">0</span></div>
  <div id="out">mouseout 当鼠标离开元素，调用一下 <span class="number">0</span></div>  </tr>
  <tr>
    <td>mouseenter<br />
    mouseover</td>
    <td>
     
    <div id="enter1" class="parentDiv">
    mouseenter 经过其子元素不会被调用 次数<span class="number">0</span>
     
       <div class="subDiv">div中的子元素      </div>
    </div>
     
        <div id="over1" class="parentDiv">
    mouseover  经过其子元素会被调用 次数<span class="number">0</span>
     
       <div class="subDiv">div中的子元素      </div>
    </div>    </td>
  </tr>
  <tr>
    <td>mouseleave<br />
      mouseout    </td>
    <td>
    <div id="leave1" class="parentDiv">
    mouseleave 经过其子元素不会被调用 次数<span class="number">0</span>
     
       <div class="subDiv">div中的子元素      </div>
    </div>
     
    <div id="out1" class="parentDiv">
 
    mouseout 经过其子元素会被调用 次数<span class="number">0</span>
     
       <div class="subDiv">div中的子元素      </div>
    </div>    </td>
  </tr>
</table>

5.焦点
focus()获取焦点，blur()失去焦点

<script src="https://how2j.cn/study/jquery.min.js"></script>
 
<script>
$(function(){
 $("input").focus(function(){
    $(this).val("获取了焦点");
 });
  
  $("input").blur(function(){
    $(this).val("失去了焦点");
 });
 
});
 
</script> 
 
<style>
 
</style>
 
<input type="text" >
 
<input type="text" >

在这里插入图片描述
6.内容改变：change()
注：对于文本框，只有当该文本失去焦点的时候，才会触发change事件

<script src="https://how2j.cn/study/jquery.min.js"></script>
 
<script>
$(function(){
 $("#input1").change(function(){
    var text = $(this).val();
    $("#message").html("input1的内容变为了"+text);
 });
  
});
 
</script> 
 
<style>
 
</style>
 
<div id="message"></div>
 
<input id="input1" type="text" >
<br>
<input size="50" id="input2"type="text" value="只有当input1失去焦点的时候，才会触发change事件" >

在这里插入图片描述
7.提交form表单：submit()

<script src="https://how2j.cn/study/jquery.min.js"></script>
  
<form id="form" action="https://how2j.cn/study/login.jsp">
账号 : <input name="name" type=""> <br>
密码: <input name="password" type=""><br>
<input type="submit" value="登陆">
  
</form>
   
<script>
$(function(){
 
   $("#form").submit(function(){
      alert("提交账号密码");
   });
});
  
</script>

在这里插入图片描述
8.绑定事件
以上所有的事件处理，都可以通过on() 绑定事件来处理

$("selector").on("event",function);

<script src="https://how2j.cn/study/jquery.min.js"></script>
   
<script>
  $(function(){
      $("#b").on("click",function(){
          $("#message").html("单击按钮");
      });
      $("#b").on("dblclick",function(){
          $("#message").html("双击按钮");
      });
 
  });
</script>
    
<div id="message"></div>
  
<button id="b">测试单击和双击</button>

在这里插入图片描述
9.触发事件

$("selector").trigger("event");

在本例中，文档加载好之后，就触发dblclick双击事件，而不是通过去手动双击。

<script src="https://how2j.cn/study/jquery.min.js"></script>
   
<script>
  $(function(){
      $("#b").on("click",function(){
          $("#message").html("单击按钮");
      });
      $("#b").on("dblclick",function(){
          $("#message").html("双击按钮");
      });
     $("#b").trigger("dblclick");
  });
</script>
    
<div id="message"></div>
  
<button id="b">测试单击和双击</button>

在这里插入图片描述

七、数组/字符串操作

1.遍历:$.each(数组名,回调函数(下标,内容))

<script src="https://how2j.cn/study/jquery.min.js"></script>
 
<script>
var a = new Array(1,2,3);
$.each( a, function(i, n){
  document.write( "元素[" + i + "] : " + n + "<br>" );
})
document.close();
 
</script>

在这里插入图片描述
2.去除重复：$.unique(数组)
去掉重复的元素
注意：执行前要先用sort对数组内容进行排序

<script src="https://how2j.cn/study/jquery.min.js"></script>
  
<script>
var a = new Array(5,2,4,2,3,3,1,4,2,5);
a.sort();
$.unique(a);
$.each( a, function(i, n){
  document.write( "元素[" + i + "] : " + n + "<br>" );
})
document.close();
  
</script>

在这里插入图片描述
3.是否存在：$.inArray
返回元素在数组中的位置，不存在则返回1

<script src="https://how2j.cn/study/jquery.min.js"></script>
  
<script>
var a = new Array(1,2,3,4,5,6,7,8);
document.write($.inArray(9,a));
document.close();
  
</script>

-1

4.去除字符串首尾空白：$.trim(字符串)

<script src="https://how2j.cn/study/jquery.min.js"></script>
   
<script>
 
document.write($.trim(" Hello JQuery    "));
document.close();
   
</script>

Hello JQuery
注意：$.unique()使用后，数组内容会变化
但$.trim()不改变原字符串内容

5.将JSON格式字符串转换为JSON对象
$.parseJSON(字符串)

<script src="https://how2j.cn/study/jquery.min.js"></script>
    
<script>
  
var s1 = "{\"name\":\"盖伦\"";
var s2 = ",\"hp\":616}";
var s3 = s1+s2;
  
document.write("这是一个JSON格式的字符串:" + s3);
document.write("<br>");
var gareen = $.parseJSON(s3);
  
document.write("这是一个JSON对象: " + gareen);
   
</script>

这是一个JSON格式的字符串:{“name”:“盖伦”,“hp”:616}
这是一个JSON对象: [object Object]

6.JQuery转DOM
通过get(0)或者[0] 把JQuery对象转为DOM对象

<script src="https://how2j.cn/study/jquery.min.js"></script>
    
<script>
$(function(){
   $("#b1").click(function(){
      var div= $("#d");
      var d = div[0];
      var s ="JQuery对象是 " + div;
      s +="\n对应的DOM对象是 " + d
      alert(s);
   });
});
     
</script>
  <button id="b1">JQuery对象div转为DOM对象d</button>
<br>
<br>
    
<style>
.pink{
   background-color:pink;
}
</style>
     
<div id="d">
Hello JQuery
</div>

在这里插入图片描述

7.DOM转JQuery
通过$() 把DOM对象转为JQuery对象

<script src="https://how2j.cn/study/jquery.min.js"></script>
    
<script>
$(function(){
   $("#b1").click(function(){
      var div= document.getElementById("d");
      var d = $(div);
      var s ="DOM对象是 " + div;
      s +="\n对应的JQuery对象是 " + d
      alert(s);
   });
});
     
</script>
  <button id="b1">DOM对象div转为JQuery对象d</button>
<br>
<br>
    
<style>
.pink{
   background-color:pink;
}
</style>
     
<div id="d">
Hello JQuery
</div>

在这里插入图片描述

Vkerei

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
JQuery笔记

JQuery是一个JavaScript的框架，是对JavaScript的一种封装。通过JQuery可以很方便的操作html元素一、基本操作1.例：使用JQuery进行隐藏和显示<script src="https://how2j.cn/study/jquery.min.js"></script> <script>$(function(){ $("#b1").click(function(){ $("#d").hide(); });
复制链接

扫一扫