第五章 jQuery

发布于：2022-11-28 ⋅ 阅读:(235) ⋅ 点赞:(0)

第五章 jQuery

  • 异步的js编写的框架
  • 使用这个异步框架的时候，可以用jQuery或者$
  • $相当于一个工厂

5.1 页面使用

5.1.1 三种编写jquery代码的方式

<script>
        $().ready(function(){})
        $(document).ready(function(){})
        $(function(){})
</script>
  • 是事件机制的，事件使用的时候不需要添加"on"

5.1.2 案例

  • 获取数据
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/jquery-3.5.1.min.js"></script>
    <script>
        $(function(){
          //按钮的事件
          $('#btn').click(function(){
            //获取组件的值
            var res = jQuery('#username').val()
            alert(res)
          })
        })
    </script>
</head>
<body>
   <input name="username" id="username">      
   <button id="btn">按 钮</button>
</body>
</html>
  • 修改组件属性
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/jquery-3.5.1.min.js"></script>
    <script>
        $(function(){
          //按钮的事件
          $('#btn').click(function(){
            //获取组件的值
            $('#username').attr('value',12345)
            //修改属性的值
            $('#username').attr('name','abc')
          })
        })
    </script>
</head>
<body>
   <input name="username" id="username">      
   <button id="btn">按 钮</button>
</body>
</html>

5.2 添加数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/jquery-3.5.1.min.js"></script>
    <script>
       $(function(){
          //按钮的事件
          $('#show').click(function(){
             $.post('demo.json',null,function(res){//回调函数
                $.each(res,function(index,item){//循环
                    var row = '<tr><td>'+item.id+'</td>'+
                        '<td>'+item.name+'</td><td><button οnclick="del(this)">del</button></td></tr>'
                   $(row).appendTo('#tid')
                })
             })
          })
        })

        function del(obj){
            $(obj).parent().parent().remove()
        }
    </script>
</head>
<body>
  <div align="center">
    <button id="add">添加数据</button>
    <table id="tid" border="1">
      <tr>
        <td>序号</td>
        <td>姓名</td>
        <td>操作</td>
      </tr>
    </table>
  </div>
</body>
</html>

5.2.1 显示数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/jquery-3.5.1.min.js"></script>
    <script>
    
        $(function(){
          //按钮的事件
          $('#show').click(function(){
             $.post('demo.json',null,function(res){//回调函数
                $.each(res,function(index,item){//循环
                    var row = '<tr><td>'+item.id+'</td>'+
                        '<td>'+item.name+'</td><td>abc</td></tr>'
                   $(row).appendTo('#tid')
                })
             })
          })
        })
    </script>
</head>
<body>
  <div align="center">
    <button id="add">添加数据</button>
    <button id="show">显示数据</button>
    <table id="tid" border="1">
      <tr>
        <td>序号</td>
        <td>姓名</td>
        <td>操作</td>
      </tr>
    </table>
  </div>
</body>
</html>

5.3 正则表达式

5.3.1 修饰符

修饰符 描述
i 匹配内容不区分大小写
g 全局匹配
m 表示多行

5.3.1.1 案例 /i

<!DOCTYPE html>
<html lang="en">
<head>
    <title>登录</title>
    <script src="js/jquery-3.5.1.min.js"></script>  
    <script>
        var res = 'hello IS hadoop';
        $(function(){
            $('#btn').click(function(){
               var index = res.search(/is/i)
               alert(index)
            })
        })
    </script> 
</head>
<body>   
    <button id="btn">按钮</button>
</body>
</html>

5.3.1.2 案例 /g

<!DOCTYPE html>
<html lang="en">
<head>
    <title>登录</title>
    <script src="js/jquery-3.5.1.min.js"></script>  
    <script>
        var res = 'hello is hadoop is hbase is a';
        $(function(){
            $('#btn').click(function(){
               var index = res.replace(/is/g,'好')
               alert(index)
            })
        })
    </script> 
</head>
<body>   
    <button id="btn">按钮</button>
</body>
</html>

5.3.1.3 案例 /m

<!DOCTYPE html>
<html lang="en">
<head>
    <title>登录</title>
    <script src="js/jquery-3.5.1.min.js"></script>  
    <script>
        var res = 'hello is hadoop he \n hbase is a';
        $(function(){
            $('#btn').click(function(){
               var index = res.replace(/he $/m,'好')
               alert(index)
            })
        })
    </script> 
</head>
<body>   
    <button id="btn">按钮</button>
</body>
</html>

5.3.2 正则表达式模式

表达式 描述
[abc] 查询方括号内的字符
[0-9] 查找0-9的数字
(x|y) 查找任意 | 分隔的值

5.3.2.1 案例[abc]

<!DOCTYPE html>
<html lang="en">
<head>
    <title>登录</title>
    <script src="js/jquery-3.5.1.min.js"></script>  
    <script>
        var res = 'hello is hadoop he hbase is a';
        $(function(){
            $('#btn').click(function(){
               var index = res.search(/[abc]/)
               alert(index)
            })
        })
    </script> 
</head>
<body>   
    <button id="btn">按钮</button>
</body>
</html>

5.3.2.2 案例[0-9]

<!DOCTYPE html>
<html lang="en">
<head>
    <title>登录</title>
    <script src="js/jquery-3.5.1.min.js"></script>  
    <script>
        var res = 'hello is hadoop 123 hbase is a';
        $(function(){
            $('#btn').click(function(){
               var index = res.search(/[0-9]/)
               alert(index)
            })
        })
    </script> 
</head>
<body>   
    <button id="btn">按钮</button>
</body>
</html>

5.3.2.3 案例：(x|y)

<!DOCTYPE html>
<html lang="en">
<head>
    <title>登录</title>
    <script src="js/jquery-3.5.1.min.js"></script>  
    <script>
        var res = 'hello is hadoop 123 hbase is a';
        $(function(){
            $('#btn').click(function(){
               var index = res.search(/^[0-9]|[a-k] $/)
               alert(index)
            })
        })
    </script> 
</head>
<body>   
    <button id="btn">按钮</button>
</body>
</html>

5.3.3 特殊函数的字符

字符 描述
\d 匹配数字
\s 空格
\b 边界

5.3.3.1 案例

<!DOCTYPE html>
<html lang="en">
<head>
    <title>登录</title>
    <script src="js/jquery-3.5.1.min.js"></script>  
    <script>
        var res = ' hello is hadoop 123 hbase is a ';
        $(function(){
            $('#btn').click(function(){
               alert(res.length) 
               var index = res.replace(/s/g,'')
               alert(index.length)
            })
        })
    </script> 
</head>
<body>   
    <button id="btn">按钮</button>
</body>
</html>
  • 数字
<!DOCTYPE html>
<html lang="en">
<head>
    <title>登录</title>
    <script src="js/jquery-3.5.1.min.js"></script>  
    <script>
        var res = ' hello is hadoop 123 hbase is a ';
        $(function(){
            $('#btn').click(function(){
               var index = res.replace(/\d/g,'好')
               alert(index)
            })
        })
    </script> 
</head>
<body>   
    <button id="btn">按钮</button>
</body>
</html>

5.3.4 量词

量词 描述
n+ 匹配至少出现一次的n
n* 匹配0次货多个n的结果
n? 0个或者一个n的结果

5.3.4.1 案例

<!DOCTYPE html>
<html lang="en">
<head>
    <title>登录</title>
    <script src="js/jquery-3.5.1.min.js"></script>  
    <script>
        var res = ' hello is hadoop 123 hbase is a ';
        $(function(){
            $('#btn').click(function(){
               var index = res.replace(/h+/g,'好')
               alert(index)
            })
        })
    </script> 
</head>
<body>   
    <button id="btn">按钮</button>
</body>
</html>
//可以调整
var index = res.replace(/h*/g,'好')
var index = res.replace(/h？/g,'好')
本文含有隐藏内容，请 开通VIP 后查看

网站公告

今日签到

点亮在社区的每一天
去签到

热门文章

最新发布