jQueryDay03:ajax,商品数量加减demo,全选全不选demo,选择切换demo

最新推荐文章于 2021-08-06 09:19:30 发布

'"<>{{7*7}}

最新推荐文章于 2021-08-06 09:19:30 发布

阅读量271

点赞数

分类专栏：前端 # JavaScript

本文链接：https://blog.csdn.net/weixin_43415644/article/details/104588979

版权

前端同时被 2 个专栏收录

24 篇文章 0 订阅

订阅专栏

JavaScript

16 篇文章 0 订阅

订阅专栏

0x00 ajax

1.$.get/post(往哪里发请求url[,请求携带什么参数json格式,成功后调用什么函数,返回类型是什么格式])

响应报文的数据默认会赋值给回调函数的第一个参数;

如果最后一个参数是'json'，那么返回的json字符串会被解析成json对象

例如：index.php

<?php
 echo "hello world";
 echo json_encode($_GET);
 var_dump($_GET);

index.html 中请求它

<script>    
$.get('index.php',{"usename":"liudehua","age":36},function(date){
    console.log(date);
})

</script>

2.$.ajax(json对象) 效果同上

$.ajax({
    "type":"POST",
    "url":"index.php",
    "dataType":"json",
    "data":{"username":"liudehua","age":23},
    "success":function(data){
        console.log(data);
    },
    "error":function(){
        console.log("发送失败");
    },
    "complete":function(){
        console.log("请求完成后执行的操作")
    }
})

3.jsonp 用于跨域数据请求

jsonp字段定义传参的键名

jsonpCallback 定义回调函数名

$.ajax({
    "type":"GET",
    "url":"index.php",
    "dataType":"jsonp",
    "data":{"username":"liudehua","age":23},
    "jsonp":"callback",
    "jsonpCallback":"back",
    "success":function(data){
        console.log(data);
    },
    "error":function(){
        console.log("发送失败");
    },
    "complete":function(){
        console.log("请求完成后执行的操作")
    }
})

index.php:相当于back("hello world");

back函数的定义就是"suceess" function的定义

<?php
echo $_GET["callback"]."('hello world')"

0x01 商品数量加减demo

效果：

代码：

<input type="submit" value="+" id="inc">
<input type="text" name="" value="0" id="count">
<input type="submit" value="-" id="dec">
<script>
$('#inc').click(function(){
    var val=Number($('#count').val())+1;
    $('#count').val(val);
    
})
$('#dec').click(function(){
    var val=Number($('#count').val())-1;
    if(val<=0){
        val=1;
    }
    $('#count').val(val);
})
</script>

0x02 全选全不选demo

效果：

代码：

<p id="all">全选</p>
<p id="notAll">全不选</p>
<div>
        <input type="checkbox" name="" id="" checked>
        <input type="checkbox" name="" id="">
        <input type="checkbox" name="" id="">
        <input type="checkbox" name="" id="">
</div>
<script>
$('#all').click(function(){
    $('div').children().attr("checked",true);
})
$('#notAll').click(function(){
    $('div').children().attr("checked",false);
})
</script>

0x03 选择切换demo

效果：

代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!-- <script src="jquery.min.js"></script> -->
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>

    <title>shop_demo</title>
    <style>
    *{
        padding:0;
        margin:0;
    }
    .select{
        width:300px;
        height:auto;
        border:1px solid orange;
        padding:10px;
        margin:10px;
    }
    ul{
        margin-bottom:10px;
    }
    li{
        display:inline;
        border-right:1px solid black;
        padding:5px 10px;
        cursor:pointer;
    }

    </style>
</head>
<body>
<div class="select">
        <ul id="uu">
                <li data-id="p1">充话费</li>
                <li data-id="p2">车险</li>
                <li data-id="p3">旅行</li>
        </ul>
        <div>
                <p id="p1">这里是充话费</p>
                <p id="p2" style="display:none">这里是车险</p>
                <p id="p3" style="display:none">这里是旅行的位置</p>
        </div>
</div>
</body>
<script>
$('#uu').children().click(function(){
    var id = '#'+$(this).attr("data-id");
    $(id).show().siblings().hide();
})
</script>
</html>