JQuery学习笔记

1.JQuery是一个JavaScript框架；

2.jQuery的 $(function(){})：将这个拆解：第一步：$()；第二步：function(){} //这是个匿名函数；第三步：组合

$(function(){

});

再说一下，jQuery这样写的目的:这是为了防止文档在完全加载（就绪）之前运行jQuery的代码。换句话说，写在这里面的Jquery的代码时在文档加载好之后执行的，就不会有类似获取一个还没加载好的图片这种问题了

这个还有一个等价写法：

$(document).ready(function(){

});

拆解的话，也是三步：$(document).ready(); function(){}; 组合；

3.通过document.getElementById 获取到的是 DOM里的元素节点，而通过$("#id") 获取到的是一个 JQuery 对象，二者是不一样的，尤其是后者，获取的是一个jQuery对象，这点切记

4.jQuery增加click事件的监听：

$("#b1").click(function(){

alert("点击了按钮");

});

这种也要做样式的拆解：第一步：点击事件： $("#b1").click()；第二步：function(){alert("xxx")} 匿名函数

这里需要说明的是：与原生JavaScript需要在html元素上增加监听事件不同的是，jQuery不需要再html元素上操作，这样的好处是， html只需要显示内容，特别是业务复杂起来之后维护js代码会更加容易：

举例：先看一下jQuery代码（不需要在html元素上操作，指的就是不用再button上再绑定onclick事件）

<script src="https://how2j.cn/study/jquery.min.js"></script>
 
<script >
 
$(function(){
     $("#b1").click(function(){
        alert("点击了按钮");
     });
});
 
</script>
 
<button id="b1">按钮</button>

如果是原生的JavaScript，那么久需要在button上增加onclick事件，然后在，JavaScript中写上onclick对应的函数

5.jQuery常用函数总结：

5.1 val()方法获取值：$("#input1").val() ，这种方式等价于原生的JavaScript：document.getElementById("input1").value;

5.2 获取元素内容，如果有子元素，保留标签：html()

<script>
$(function(){
   $("#b1").click(function(){
      alert($("#d1").html());
   });
});
  
</script>
  
<button id="b1">获取文本内容</button>
   
<br>
<br>
  
<div id="d1">
这是div的内容
<span>这是div里的span
</span>
</div>

返回的结果：这里是div的内容<span>这里是div里的span</span> 也就是说把div里的子元素也返回了，并且保留了标签

如果不包含子元素的标签，那么应该用函数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>

这样返回的结果是：这是div的内容，这是div里的span

5.3 增加class样式：addClass()

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

删除class：通过removeClass() 删除一个样式中的class，类似上面的例子：$("#d").removeClass("pink");

切换class ：通过toggleClass() 切换一个样式中的class ，这里切换的意思就是如果存在就删除，如果不存在，就添加 $("#d").toggleClass("pink");

5.4 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>

5.5 jQuery选择器：

元素： $("tagName") //举例 $("div").addClass("pink"); 这个就是选择所有的div元素

id: $("#id")

类class: $(".className")

层级：$("selector1 selector2") 选择 selector1下的selector2元素。举例：选择id=d3的div下的span元素 $("div#d3 span").addClass("pink");

最先最后：$(selector:first) 满足选择器条件的第一个元素 //$("div:first").addClass("pink"); $(selector:last) 满足选择器条件的最后一个元素 //$("div:last").addClass("pink");

奇偶：$(selector:odd) 满足选择器条件的奇数元素// $("div:odd").toggleClass("pink"); $(selector:even) 满足选择器条件的偶数元素// $("div:even").toggleClass("green"); 注意:是基0的，所以第一排的序号是0

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

div:visible 表示选中可见的div
div :visible(有空格) 表示选中div下可见的元素

表单对象选择器：指的是选中form下会出现的输入元素； :input会选择所有的输入元素，不仅仅是input标签开始的那些，还包括textarea,select和button

:button 会选择type=button的input元素和button元素

:radio 会选择单选框

:checkbox 会选择复选框

:text 会选择文本框，但是不会选择文本域

:submit 会选择提交按钮

:image 会选择图片型提交按钮

:reset 会选择重置按钮

一个知识点：$("td[rowspan!=13] "+value).toggle(500); //$("td[rowspan!=13] 后面有一个空格，表示层级选择器；toggle(500) 表示在显示与隐藏之间来回切换，生效时间是500毫秒

在监听函数中使用 $(this)，即表示触发该事件的组件

5.6 $(this)，即表示触发该事件的组件

5.7 $("#id").toggle(500) //500指的是毫秒这个函数的作用是：在显示与隐藏之间来回切换，生效时间是500毫秒 // 里面也可以不加毫秒数字

5.8 $(this).hide(); 隐藏组件/元素的函数里面也可以加毫秒数字

5.9 $("#d").show() show中也可加入毫秒时间数，表示延迟时间后开始显示

延展1：

向上滑动向下滑动滑动切换分别通过slideUp(), slideDown(),slideToggle()实现
也可以加上毫秒数，表示延时操作，比如slideUp(2000)

延展2：

淡入淡出淡入淡出切换指定淡入程度分别通过fadeIn(), fadeOut(),fadeToggle() fadeTo()实现
也可以加上毫秒数，表示延时操作，比如fadeIn(2000)
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>

6.筛选器：筛选器指的是在已经通过选择器选中了元素之后，在此基础上进一步选择

首先通过 $("div") 选择了多个div元素，接下来做进一步的筛选
first() 第1个元素
last() 最后一个元素
eq(num) 第num个元素

parent() 选取最近的一个父元素

parents() 选取所有的祖先元素

children(): 筛选出儿子元素 (紧挨着的子元素)

find(selector): 筛选出后代元素
注: find() 必须使用参数 selector //比如div $("#currentDiv").find("div").toggleClass("b");

siblings(): 同级(同胞)元素

<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>

7.属性通过attr()获取一个元素的属性举例： $("#h").attr("align") //获取align属性

通过attr(attr,value)修改属性 $("#h").attr("align","right") ; //将align属性由center改为了right

通过removeAttr(attr)删除属性 $("#h").removeAttr("align");

prop与attr的区别例子

<script src="https://how2j.cn/study/jquery.min.js"></script>
  
<script>
$(function(){
   $("#b1").click(function(){
      alert("game属性是:" + $("#c").attr("game") );
   });
 
   $("#b2").click(function(){
      alert("game属性是:" + $("#c").prop("game") );
   });
 
   $("#b3").click(function(){
      alert("checked属性是:" + $("#c").attr("checked") );
   });
 
   $("#b4").click(function(){
      alert("checked属性是:" + $("#c").prop("checked") );
   });
 
});
  
</script>
  
<style>
button{
  display:block;
}
</style>
 
<button id="b1">通过attr获取自定义属性 game</button>
<button id="b2">通过prop获取自定义属性 game</button>
<button id="b3">通过attr获取 checked属性</button>
<button id="b4">通过prop获取 checked属性</button>
  
<br>
<br>
  
<input type="checkbox"  id="c" game="LOL" checked="checked"> 选中的复选框

8.动画效果：

通过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>

效果一般需要一定的时间，并且这个时间可长可短，所以就无法精确的确定该效果何时结束。
好在，效果方法都提供对回调函数callback()的支持。
只需要在调用效果方法的最后一个参数传入一个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>

9. jQuery中的事件：

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

绑定事件：

图片上的所有事件处理，都可以通过on()绑定事件来处理：$("selector").on("event",function);

$("#b").on("click",function(){

$("#message").html("单击按钮");

});

之前是这样写的：
$("#b").click(function(){
          $("#message").html("单击按钮");
      });
二者对比一目了然。
 
触发事件：
举例：触发事件，在文档加载好之后，就触发点击事件，而不是通过按钮去点击
$("selector").trigger("event");  说白了就是在JavaScript代码层面触发事件，由代码触发，而不是外界触发

<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>
 10.jQuery 的ajax：
 
 

10.1 格式化form下的输入数据： serialize() ,有的时候form下的输入内容比较多，一个一个的取比较麻烦，就可以使用serialize() 把输入数据格式化成字符串

<script src="https://how2j.cn/study/jquery.min.js"></script>
    
<div id="checkResult"></div>
<div id="data"></div>
<a href="https://how2j.cn/study/checkName.jsp">https://how2j.cn/study/checkName.jsp</a>
 
<form id="form">   
输入账号 :<input id="name" type="text" name="name"> <br>
输入年龄 :<input id="age" type="text" name="age"> <br>
输入手机号码 :<input id="mobile" type="text" name="mobile"> <br>
     
</form>
 
<script>
$(function(){
   $("input").keyup(function(){
      var data = $("#form").serialize();
      var url = "https://how2j.cn/study/checkName.jsp";
      var link = url+"?"+ data;
      $("a").html(link);
      $("a").attr("href",link);
   });
});
    
</script>

其实可以在控制台 console.log($("#form").serialize()) 看看格式化之后是什么样的

11.jQuery的数组操作：

11.1遍历：

$.each 遍历一个数组
第一个参数是数组
第二个参数是回调函数 i是下标，n是内容

<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>

11.2去重：注意：执行unique之前，要先调用sort对数组的内容进行排序。

$.unique() 去掉重复的元素

<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>

11.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>

12.字符串操作

去掉首尾空白 $.trim()

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

去掉之后的结果为：Hello JQuery 中间的空格是存在的，这里仅是去掉首尾的空格

13.将JSON格式的字符串，转换为JSON对象

$.parseJSON 将JSON格式的字符串，转换为JSON对象

<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>

14. jQuery对象和DOM对象相互转换：

JQuery对象的方法，比如show() 、toggle()等等，这些方法都是属于JQuery对象的，而原生的DOM对象不具备这些方法。
同样的DOM对象也具备JQuery对象所没有的属性和方法，比如checked属性。
在某些场景下，需要对JQuery对象和DOM节点对象进行互相转换

14.1 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];//通过的是[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>

14.2 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); //通过$()这种方式将dom对象转换成了jQuery
      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>

posted on 2020-06-27 21:21 南开小巷阅读(220) 评论(0) 编辑收藏举报

刷新页面返回顶部

南开小巷

导航

公告

JQuery学习笔记