中软Day10——JQuery使用（链式编程、JQuery动画、递归、正则表达式）

qq_43542290

于 2019-10-21 20:45:46 发布

阅读量239

点赞数

文章标签：中软学习笔记 jquery

本文链接：https://blog.csdn.net/qq_43542290/article/details/102671558

版权

本文详细介绍了jQuery的链式编程原理，指出链式编程通过return this实现对象连续调用方法。接着讨论了jQuery动画，包括animate方法的使用和自定义动画。此外，文章还探讨了递归概念，如函数自我调用的实现方式，以及在严格模式下的处理。接着讲解了正则表达式的概念、作用和常见符号，提供了在线测试工具链接。最后，通过案例展示了正则表达式的应用，如表单验证，并介绍了JavaScript中的正则表达式方法。

摘要由CSDN通过智能技术生成

中软Day10

链式编程

在jQuery中，如果一直对同一个元素或元素的其他关系元素（兄弟元素，父子元素）进行操作，那么可以使用 .语法(点语法)，一直写下去。

——将多行代码合并到一行

注意：返回值为对象时可以采用链式编程，当是一个字符串时则不能使用链式编程
- 写法
  
  原始写法：
```
$('#box1').html('<p>这是一个p标签</p>');
$('#box1').css('background-color', 'green');
```
  链式写法：
```
 $('#box1').html('<p>这是一个p标签</p>').css('background-color', 'green');
```
- 链式操作
  
  jQuery可以让我们开发者一直使用点语法调用自身方法的原理，是通过对象上的方法最后 return this ，把对象再返回回来，对象就可以继续调用方法。
  
  JS写法：
```
    //js中，声明一个对象
       var obj = {
         
         name:"姓名", 
        desc: function(){
          
        console.log(this); // 打印当前自身对象  
        console.log(this.name); // 调用自身对象的属性   
        return this;  // 实现链式编程的原理，就是在调用方法后，方法本身返回对象。
},  
      read: function(){
         
        console.log("hello!");    
        return this; 
    }}
```
  实现链式编程jQuery选择器本身是一个jquery对象。jQuery内部利用this返回了自己本身。
- 为什么使用链式编程
  - 为了更好的异步体验
  - 节省代码量，代码看起来更优雅
  - 链式写法，操作简单
- 总结
  1. 实现链式编程的核心，是对象中的每一个方法都会返回当前对象。
```
var 对象 = {
         
方法名:function(){
         
// …
return this; // 实现链式编程的核心this
}
}
```
  2. 在方法中，js提供一个this的关键字，表示当前对象。

Jquery动画

初始状态结束状态中间过渡

animate方法（）

执行CSS属性集的自定义动画，该方法会将一个属性在指定或者默认的时间内从一个属性值变化到另一个属性值，由于属性值是逐渐变化的，所以就形成了所谓的动画效果。

animate可以操作的属性很多，但是它不能操作颜色，如对象背景颜色，字体颜色等，如果想要操作颜色，需要导入官方提供的js文件才可以。

数值的属性可以改，颜色不可以改
- 方法参数
```
$(selector).animate(styles,speed,easing,callback)
//$(this).animate({width:"300px",height:"300px"},2000,'linear',function(){alert(123)});
```
  （键值对[属性名：属性值]，动画事件，回调函数）
  - speed
    speed就是速度、多快的意思，就是对象属性值从当前的状态转换到你设置的另一个状态的变化时间，支持数字类型和字符串两种类型，数字类型可以不用引号，直接写数字，单位是毫秒。字符串是固定值’fast’、’normail’、’slow’，如果不写，默认就是’normal’。
  - easing
    
    easing是描述这个动画设一个怎样的运行过程，’linear’ 就是匀速的意思，即对象属性值从当前值变化到另一个值在固定的时间内是匀速变化的，而默认’swing’这个参数表示曲线形的运动模式，刚开始会慢慢运动，然后加速，最后减速。
  - callback
    
    callback是一个回调函数表示在动画执行完毕以后去调用的一个函数，用了这个回调函数，我们可以实现让动画往复运行，即在回调函数里面再把对象属性值设置为初始状态，再利用循环定时器，可以完成，下面会给大家附带一个动画代码，就是用这种思想实现的。

自定义动画

// 语法:
    $(selector).animate({
       params}, speed, callback);
 
//参数解释
/*
作用：执行一组CSS属性的自定义动画。
    第一个参数表示：要执行动画的CSS属性（必选）
    第二个参数表示：执行动画时长（可选）
    
    第三个参数表示：动画执行完后，立即执行的回调函数（可选）
*/

停止动画

// 语法:
    $(selector).stop(true, false);
 
/*
第一个参数：
true：后续动画不执行。
false：后续动画会执行。
第二个参数：
true：立即执行完成当前动画。
false：立即停止当前动画。

运动前加stop()可以清除运动队列(不总是重复)。(鼠标移入移除 mouseover、out)
*/

案例：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		#box1 {
      
			background-color: pink;
		}
	</style>
	<script src="js/jquery.min.js"></script>
		
	<script type="text/javascript">
		//点击按钮   出现动画
		$(function() {
      
			$('#btn').click(function() {
      
				//获取div产生动画效果
				// $('box1').animate(键值对，时间（默认豪秒值），回调函数)
				$('#box1').animate({
      'width':'300px','height':'300px','left':'300px'},1000,function(){
      
						$('#box1').animate({
      'width':'50px','height':'50px','left':'800px'},2000)
				});
			})
		})
		
	</script>
</head>
<body>
	<input type="button" value="显示效果" id="btn">
	<div id="box1"></div>
</body>
</html>

递归

自己调用自己

fn(8);

fn(8*fn(7));

fn(8* 7 * fn(6));

递归函数：递归函数是在通过名字调用自身的情况下构成的。

<!DOCTYPE html> 
<html> 
    <head> 
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
        <title>js中递归函数的使用</title> 
        <script type="text/javascript"> 
            function f(num){
      
                if(num<1){
      
                    return 1; 
                }else{
      
                    return f(num-1)*num; 
                } 
            } 
        </script> 
    </head> 
    <body> 
        <script type="text/javascript"> 
            alert("10!的结果为："+f(10)); 
        </script> 
    </body> 
</html>

通过使用函数的名字**

 function factorial(num){
       
        if(num<=1){
       
            return 1;
        }else{
       
            return num*factorial(num-1);
        }
    }
    console.log(factorial(4));

结果报错

这是因为：
我们定义的函数名，其实是指向函数的一个指针，定义的anotherFactorial 也指向了那个函数，所以调用anotherFactorial (4)可以成功的输出24
当 factorial = null时，执行

最低0.47元/天解锁文章

qq_43542290

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
中软Day10——JQuery使用（链式编程、JQuery动画、递归、正则表达式）

中软Day15链式编程在jQuery中，如果一直对同一个元素或元素的其他关系元素（兄弟元素，父子元素）进行操作，那么可以使用 .语法(点语法)，一直写下去。 ——将多行代码合并到一行注意：返回值为对象时可以采用链式编程，当是一个字符串时则不能使用链式编程写法原始写法：$('#box1').html('<p&g...
复制链接

扫一扫