JQuery笔记

最新推荐文章于 2022-02-14 01:05:42 发布
最新推荐文章于 2022-02-14 01:05:42 发布
阅读量193 收藏 1
点赞数 1
分类专栏： 笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46517301/article/details/106033202
版权

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种属性

  1. 对于自定义属性 attr能够获取，prop不能获取
  2. 对于选中属性
    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笔记
01-24
jquery笔记，多年前端开发积累。
jquery一些事件
fishegg07的博客
09-13 143
$("#abc").unbind('click'); 移除单击事件 $("#abc").one('click',function(){ $("def").hide() }); 只执行一次的单击事件 $("#abc").click(function(){ $("def").toggle() }) 显示与隐藏的点击切换 ...
jQuery中的.click()方法代码实例
weixin_55626132的博客
02-14 600
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>jQuery的 .click()方法</title> <style> p{ color: red; margin: 5px; cursor: pointer; } p:hover{ background: yellow; } ...
click和onclick的区别
weixin_33725722的博客
02-12 224
onclick是绑定事件，click本身是方法作用是触发onclick事件，只要执行了元素的click()方法，下面有个示例，大家可以看看 Html代码 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 <script type="text/javascript"> $(function(){ ...
$().click()和$().on(‘click‘,function(){})的区别
Tommy
09-09 2059
在处理js追加元素点击事件时 遇到点问题 当你用$().click() 触发的时候 你追击的元素会无法触发 也就是 不在页面内的元素 on方法包含很多事件，点击，双击等等事件。和$().click()的用法一样，最大的区别即优点是如果动态创建的元素在该选择器选中范围内是能触发回调函数。 e.stopPropagation(); 这个也是个知识点 阻止事件冒泡到父级元素 比如说 在多层嵌套li 的时候 点击事件触发 $(this) 输出是他的父级 加上e.stopPropagation(); 这一有效的解决
jQuery中$.click()没有触发
彭世瑜的博客
03-06 3442
在控制台调试的时候，直接点击元素是可以触发的，到了页面代码中却没有触发点击事件 $("#btn").click(); 看了别人的两种处理方式： （1）点击的是“A标签”本身 （2）点击的是“A标签”子元素 给a标签添加一个子元素，通过点击子元素触发 let span = document.createElement("span"); $("#btn").append(span); span.cl...
jQuery笔记
01-14
学习jQuery解决选择器和事件方法 jQuery 是一个“写的更少，但做的更多”的轻量级 JavaScript 函数库。 1.2.jQuery的优势  可以简化JavaScript代码  可以像css那样获取元素  可以修改css来控制页面效果  ...
jquery 笔记 事件
10-28
写js已经有很久了，但是对js的详细了解还是很肤浅的，这几天在看jquery，在其中有一些新的发现和体会，记录下来
JavaScript $("#ID").click(function () {｝点击没反应
weixin_42288430的博客
07-22 5961
&lt;a class="btn btn-primary" id="registerVari"&gt;&lt;i class="fa fa-plus"&gt;&lt;/i&gt;&amp;nbsp;XXX&lt;/a&gt; $("#registerVari").click(function () { alert("1");
$().click()和$().on('click',function(){})的区别
diebaiying3731的博客
03-19 506
1. $(选择器).click(fn)　　　　当选中的选择器被点击时触发回调函数fn。只针对与页面已存在的选择器。 HTML代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document&lt...
$("#xx").click()的点击事件无效问题解决
热门推荐
CodingAnHour
11-07 1万+
$(document).ready(function(){ $("#clicke").click(function(){ }); }); 放在ready中就好用了  全文加载完毕后加载
$("#btn").click(function(){ });只有在页面加载的时候才会有效触发
weixin_34255055的博客
03-29 2268
例： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="js/jquery-2.0.0.j...
Jquery学习笔记分享
最新发布
11-24
在这里，我们将分享一些 Jquery 学习笔记，希望能够帮助广大开发者更好地掌握和运用 JQuery。 在第一章中，我们首先了解了 JQuery 的概述。JQuery 的基本作用主要是简化 JavaScript 编程，提高开发效率，减少代码量...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值