前端JQuery

最新推荐文章于 2024-11-09 12:43:52 发布

香鱼嫩虾

最新推荐文章于 2024-11-09 12:43:52 发布

阅读量225

点赞数

分类专栏： HTML&CSS&JS 文章标签： java js jquery

本文链接：https://blog.csdn.net/hypertext123/article/details/117413844

版权

HTML&CSS&JS 专栏收录该内容

6 篇文章 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"
)

$.getJSON( “user.json”, {}, function(data){

clog(data);
}
)

$("#ul li").each(function(index){

console.log(this);
console.log(index);
$(this).css("background","red");
});

form 的数据 name 的值作为 name,value 的值作为 value 形成 json 数组

var data=$("#form").serializeArray();

将数组转换成请求参数串:username=zs&age=20&password=123

var data=$("#form").serializeArray();
console.log(data);
console.log($.param(data))

bootStrap

引入bootStrap

link.css

栅格系统12列

1.div container
div.row
div.col-md-1

偏移

class="col-md-8 col-md-offset-4"

文本对齐方式

text-left
text-right
text-center
text-justify
text-nowrap

按钮样式

<button class="btn btn-primary">超链接</button>
<button class="btn btn-success">按钮</button>
<button class="btn btn-info">按钮</button>
<button class="btn btn-warning">按钮</button>
<button class="btn btn-danger">按钮</button>

table样式

class="table table-striped table-bordered table-condensed table-hover"

香鱼嫩虾

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录