前端JQuery

古城微笑少年丶 2021-09-25 09:54 341阅读 0赞

### 文章目录 ###

*  简介
 *  常用正则表达式
 *  blur:元素失去焦点时触发目标函数，不支持冒泡
 *  focusout:元素失去焦点时触发目标函数，支持冒泡
 *  change:当下拉框、单选框，文本框的值发生变化时调用
 *  submit:当表单提交时触发，return false不提交；return true提交
 *  event.currentTarget:获取绑定事件的DOM元素，相当于this
 *  event.data:传递给执行函数的参数
 *  练习1
 *  练习2
 *  children(‘selector’)
 *  find(‘selector’)
 *  next()
 *  nextAll()
 *  prev():获得当前元素的前一个兄弟元素。
 *  parent():找爸爸
 *  parents()
 *  基本的隐藏和显示
 *  淡入
 *  淡出
 *  滑动显示:slideDown
 *  $.ajax(\{ 
 *  $.get( "user.json", \{\}, function(data)\{中软国际(ETC)天津卓越信息技术有限公司
 *  $.post( "user.json", \{\}, function(data)\{ 
 *  $.getJSON( "user.json", \{\}, function(data)\{ 
 *  $("\#ul li").each(function(index)\{ 
 *  form 的数据 name 的值作为 name,value 的值作为 value 形成 json 数组
 *  将数组转换成请求参数串:username=zs&age=20&password=123
 *  bootStrap
 *   *  引入bootStrap
     *  栅格系统12列
     *   *  偏移
     *  文本对齐方式
     *  按钮样式
     *  table样式

# 简介 #

本文是2021/05/31整理的笔记  
赘述可能有点多，还请各位朋友耐心阅读  
本人的内容和答案不一定是最好最正确的，欢迎各位朋友评论区指正改进

# 常用正则表达式 #

//手机号验证
    /^1[35789]\d{ 9}$/
    
    //邮箱验证
    /^\w+@\w+(\.\w+){ 1,2}$/
    
    //用户名验证:5~8位的字母数字下划线组成
    /^[a-z,\d,_]{ 5,8}$/

# blur:元素失去焦点时触发目标函数，不支持冒泡 #

# focusout:元素失去焦点时触发目标函数，支持冒泡 #

# change:当下拉框、单选框，文本框的值发生变化时调用 #

# submit:当表单提交时触发，return false不提交；return true提交 #

# event.currentTarget:获取绑定事件的DOM元素，相当于this #

# event.data:传递给执行函数的参数 #

# 练习1 #

写一个表单，验证用户名密码邮箱手机号格式是否正确  
//手机号验证11位，第一位为1，第二位为35789中的一个

//邮箱验证 数字字母@数字字母.com.cn

//用户名验证:5~8位的字母数字下划线组成

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="js/jquery-1.9.1.js"></script>
        <script> $(function () { $("#form1").submit(function () { var username = /^[a-z,\d,_]{5,8}$/; var password = /^\w{3,8}$/; var email = /^\w+@\w+(\.\w+){1,2}$/; var phone = /^1[35789]\d{9}$/; //用户名 if(!username.test($("#username").val())){ alert("用户名错误"); return false; } if(!password.test($("#password").val())){ alert("密码错误"); return false; } if(!email.test($("#email").val())){ alert("邮箱错误"); return false; } if(!phone.test($("#phone").val())){ alert("手机号错误"); return false; } alert("正确"); return true; }) }) </script>
    </head>
    <body>
    <form action="" id="form1">
        用户名:<input type="text" name="username" id="username"> <br>
        密码:<input type="password" name="password" id="password"> <br>
        email:<input type="text" name="email" id="email"> <br>
        手机:<input type="text" name="phone" id="phone"> <br>
        <input type="submit" value="注册">
    </form>
    </body>
    </html>

# 练习2 #

1.user.json:数组\[\{“username”:“zs”,“age”: 22,“password”: “123”\},\{“username”:“lisi”,“age”: 23,“password”: “567”\},\{“username”:“zhaoliu”,“age”: 21,“password”: “678”\}\]

2.发ajax取得数组数据

3.循环遍历数组得到每一项放到表格中去.  
(1)html页面写一个table,给定th:用户名 年龄 密码  
(2)按钮 点击发送ajax请求  
(3)回调函数得到数组数据循环遍历数组得到每一项组成tr td ,把他追加到append表格中去.

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="js/jquery-1.9.1.js"></script>
        <script> $(function () { $("#btn").click(function () { //清空表格的行数据 $("#tb tr:gt(0)").remove(); $.ajax( { url:"user.json", data:{ }, success:function (arr) { //遍历数组 for(var i = 0;i <arr.length;i++){ //得到每一项 var d = arr[i]; //拼接行 var row = "<tr><td>"+d.username+"</td><td>"+d.age+"</td><td>"+d.password+"</td></tr>"; $("#tb").append(row); } }, dataType:"json" }); }); }) </script>
    </head>
    <body>
        <table id="tb" cellspacing="1" cellpadding="1" border="1">
            <tr>
                <td>用户名</td>
                <td>年龄</td>
                <td>密码</td>
            </tr>
    
        </table>
    <button id="btn">测试</button>
    </body>
    </html>

# children(‘selector’) #

获得当前元素的全部直接子元素(集合)，可以在参数中使用选择器过滤。

# find(‘selector’) #

获得当前元素的全部后代元素，可以在参数中使用选择器过滤。

# next() #

获得当前元素的下一个兄弟元素。

# nextAll() #

获得当前元素之后的全部兄弟元素。

# prev():获得当前元素的前一个兄弟元素。 #

prevAll()：获得当前元素之前的全部兄弟元素。

# parent():找爸爸 #

获得当前元素的直接父元素

# parents() #

获得当前元素的所有父元素。

# 基本的隐藏和显示 #

hide():隐藏匹配的元素。  
示例： $(‘img’).hide();  
show():显示匹配的元素. 示例： $(‘img’).show();  
toggle()：显示或隐藏匹配元素。  
示例： $(‘img’).toggle();  
$(‘img’).toggle(3000,function() \{  
alert(‘操作成功’);\});

# 淡入 #

fadeIn();

# 淡出 #

fadeOut()

# 滑动显示:slideDown #

滑动隐藏:slideUp  
滑动切换:slideToggle()

# $.ajax(\{ #

url:"user.json", data:{}, type:"post”, success:function(data){
    clog(data);
    }
    dataType:"text" "json"
    })

# $.get( “user.json”, \{\}, function(data)\{中软国际(ETC)天津卓越信息技术有限公司 #

clog(data);
    }"text" "json"
    )

# $.post( “user.json”, \{\}, function(data)\{ #

clog(data);
    }"text" "json"
    )