Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序，Get更优阅读体验！
立即前往
文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
文章/答案/技术大牛
发布
首页
学习
活动
专区
圈层
工具
返回腾讯云官网
社区首页 >专栏 >JSON基础、原生的ajax及JQuery.ajax

JSON基础、原生的ajax及JQuery.ajax

原创
作者头像
申小兮
发布于 2023-04-19 13:21:33
发布于 2023-04-19 13:21:33
92900
代码可运行
举报
文章被收录于专栏：前端开发基础前端开发基础
运行总次数：0
代码可运行
关联问题
换一批

一、JSON

1、什么是JSON

一种轻量级的数据交换格式，主要用于跟服务器进行交换数据

（1）从服务器上读取JSON数据，将json数据转化成js对象，然后在网页中使用数据

（2）json数据结构：对象+数组

代码语言：javascript
代码运行次数：0
运行
AI代码解释
复制
<body>
<script>
    var json = {
        data:{
            students:[
                {
                    name:'tom',
                    age:18,
                    skill:['sing','run']
                },
                {
                    name:'bob',
                    age:19,
                    skill:['study','swim']
                }
            ]
        }
    }
    //获取数组内容，可以用for遍历或each
    console.log($.each(json.data.students,function(index,item){
        console.log(index,item);
        console.log(item.name);
    }));
</script>
</body>

2、JSON.stringify()

json对象转成字符串

3、JSON.parse()

字符串【注意需要是标准的json字符串格式转成json】

代码语言：javascript
代码运行次数：0
运行
AI代码解释
复制
<script>
    var json = {
        data:{
            students:[
                {
                    name:'tom',
                    age:18,
                    skill:['sing','run']
                },
                {
                    name:'bob',
                    age:19,
                    skill:['study','swim']
                }
            ]
        }
    }
    var str = JSON.stringify(json)
    console.log(str);
    var obj = JSON.parse(str)
    console.log(obj);
</script>

 二、AJAX（用户登录 - 天行数据TianAPI）

1、open(method,url,async)

method：请求类型（GET、POST）

url：接口地址

async:true（异步）、false（同步）

【接口基本上都是异步（可以同时进行）的】

2、请求类型：get和post

（1）相同：都可以跟服务器进行数据交互

（2）不同：

①传送方式：get是通过地址栏进行传输，post是通过报文传输

②传送长度：get的长度会被限制，post不限长度

③安全性：get安全性低，参数会暴露在地址栏，一般用于获取，post安全性高，一般可以传输数据

3、send(string)

发送请求【post情况下string写参数的地方】

4、参数传递

（1）get：在地址栏上，url后面拼接?key=value&key=value

（2）post：send(key=value)

5、响应

responseText属性：获取以字符串形式返回的数据

（1）Jscript的get写法：（天行的舔狗日记为例）

代码语言：javascript
代码运行次数：0
运行
AI代码解释
复制
<script>
    //创建
    var xhr = new XMLHttpRequest()
    xhr.open(
        'GET',
        'http://api.tianapi.com/tiangou/index?key=a3828b7efb833ce8c26d05f10ed40e04',
        true
    )
    //发送
    xhr.send()
    //响应
    xhr.onload = function(){
        console.log(xhr.responseText);
        var data = JSON.parse(xhr.responseText)
        console.log(data);
    }
</script>

（2）Jscript的post写法：

代码语言：javascript
代码运行次数：0
运行
AI代码解释
复制
<script>
    var xhr = new XMLHttpRequest();
      xhr.open(
        "POST",
        "http://120.78.172.212:7789/students/sys/loginWeb",
        true
      );
      // 配置Content-Type： application/x-www-form-urlencoded
      xhr.setRequestHeader(
        "Content-Type",
        "application/x-www-form-urlencoded",
        "charset=UTF-8"
      );
      // 发送
      xhr.send("username=lyx&password=888888");
      // 响应
      xhr.onload = function () {
        console.log(xhr.responseText);
        var data = JSON.parse(xhr.responseText);
        console.log(data);
      };
</script>

 （3）JQ的get写法：

代码语言：javascript
代码运行次数：0
运行
AI代码解释
复制
<script>
    $.ajax({
        async:true,
        type:'GET',
        url:'http://api.tianapi.com/tianqi/index?key=408065bffbb866c9782f501d3ff046bf&city=福州市',
        success:function(res){
            console.log(res);
        }
    })
</script>

 （4）JQ的post写法：

代码语言：javascript
代码运行次数：0
运行
AI代码解释
复制
<script>
    $.ajax({
        async:true,
        type:'POST',
        data:{
            key:'a3828b7efb833ce8c26d05f10ed40e04'
        },
        url:'http://api.tianapi.com/tiangou/index',
        success:function(res){
            console.log(res);
        }
    })
</script>

三、回顾JS、JQ，代码例子

1、简单的添加、删除、编辑表格（具体效果，小伙伴可以复制代码自己操作一下哦🧐）

代码语言：javascript
代码运行次数：0
运行
AI代码解释
复制
<!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="../jquery-3.6.0.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
 
        input {
            width: 400px;
            height: 30px;
            padding-left: 10px;
            outline: none;
        }
 
        .all {
            margin-top: 10px;
            text-align: center;
            margin-bottom: 30px;
        }
 
        table {
            margin: auto;
        }
 
        th {
            width: 300px;
            height: 20px;
            border: 2px solid rgba(134, 131, 131, 0.216);
            box-sizing: border-box;
            background-color: skyblue;
            color: #fff;
        }
 
        .btn1 {
            padding: 5px 10px;
            box-sizing: border-box;
            background-color: skyblue;
            color: #fff;
            border: 1px solid skyblue;
            border-radius: 3px;
        }
 
        td {
            text-align: center;
            height: 30px;
            border: 2px solid rgba(134, 131, 131, 0.216);
            box-sizing: border-box;
        }
 
        .btn2 {
            padding: 2px 4px;
            box-sizing: border-box;
        }
 
        .btn3 {
            padding: 2px 4px;
            box-sizing: border-box;
        }
    </style>
</head>
 
<body>
    <!-- <form action=""> -->
        <div class="all">
        <span style="font-weight: bold;">姓名：</span>
        <input type="text" id="user" placeholder="请输入姓名">
        <span style="font-weight: bold;">年龄：</span>
        <input type="text" id="age" placeholder="请输入年龄">
        <button class="btn1">添加</button>
        </div>
    <!-- </form> -->
    <div class="main">
        <table border="1" cellspacing="0">
            <tr>
                <th>ID</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>操作</th>
            </tr>
            <!-- <tr>
                <td>1</td>
                <td>张三</td>
                <td>18</td>
                <td>
                    <button class="btn2">编辑</button>
                    <button class="btn3">删除</button>
                </td>
            </tr> -->
        </table>
    </div>
    <script>
        var table = document.querySelector('table')
 
        var arr = [
            {
                name: '张三',
                age: 17
            },
            {
                name: '李四',
                age: 20
            },
            {
                name: '王五',
                age: 23
            }
        ]
 
        //添加
        var add = document.querySelector('.btn1')
        add.onclick = function(){
            var userName = document.querySelector('#user')
            var userAge = document.querySelector('#age')
            //去掉首尾空格trim()
            if(userName.value.trim().length != 0 & isNaN(parseInt(userAge.value.trim()))==false){
                var newObj = 
                {
                    name : userName.value,
                    age : userAge.value
                }
            arr.push(newObj)
            userName.value = ''
            userAge.value = ''
            console.log(arr);
            create()
            }else{
                alert('添加失败，请输入正确的名字和年龄')
            }
            
        }
 
        //创建
        function create() {
            //清除
            table.innerHTML = ''
            //创建表头
            var trTh = document.createElement('tr')
            trTh.innerHTML = `
                <th>ID</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>操作</th>
                `
            table.appendChild(trTh)
 
            //创建节点
            for (var i = 0; i < arr.length; i++) {
                // console.log(arr[i]);
                var newTr = document.createElement('tr');
                console.log(newTr);
                newTr.innerHTML = `
                <td>${i+1}</td>
                <td>${arr[i].name}</td>
                <td>${arr[i].age}</td>
                <td>
                    <button class="btn2">编辑</button>
                    <button class="btn3">删除</button>
                </td>
            `
            table.appendChild(newTr);
 
            //编辑
            var editArr = document.querySelectorAll('.btn2')
            for(var j = 0;j<editArr.length;j++){
                (function(j){
                    editArr[j].onclick = function(){
                        // console.log(j);
                        //修改
                        var editName = prompt('请输入姓名')
                        if(editName.trim().length != 0){
                            // console.log(editName.length);
                            arr[j].name = editName              
                        }else{
                            alert('请输入正确的姓名')
                        }
 
                        var editAge = parseInt(prompt('请输入年龄'))
                        if(isNaN(editAge)==false){
                            arr[j].age = editAge             
                        }else{
                            alert('请输入正确的年龄')
                        }
 
                        // console.log(arr);
                        create()
                    }
                })(j)
            }
 
            //删除
            var delArr = document.querySelectorAll('.btn3')
            for(z = 0;z<delArr.length;z++){
                (function(z){
                    delArr[z].onclick = function(){
                        // console.log(z);
                        arr.splice(z,1)
                        // console.log(arr);
                        create()
                    }
                })(z)
            }
        }
    }
        create()
 
    </script>
</body>
</html>

2、实现简单界面的转换（具体效果，小伙伴可以复制代码自己操作一下哦🧐）

代码语言：javascript
代码运行次数：0
运行
AI代码解释
复制
<!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="../jquery-3.6.0.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            height: 50px;
            background-color: #ccc;
            text-align: center;
            line-height: 50px;
        }
        ul{
            display: flex;
            justify-content: center;
        }
        li{
            width: 200px;
            height: 50px;
            list-style: none;
            color: #fff;
        }
        .active{
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="box">
        <ul>
            <li>商品介绍</li>
            <li>规格与包装</li>
            <li>售后保障</li>
            <li>商品评价</li>
            <li>本店好评商品</li>
        </ul>
    </div>
    <div class="main">
        <div>商品介绍</div>
        <div>规格与包装</div>
        <div>售后保障</div>
        <div>商品评价</div>
        <div>本店好评商品</div>
    </div>
    <script>
        $('li').eq(0).addClass('active')
        $('.main div').eq(0).show().siblings().hide()
 
        $('li').click(function(){
            $(this).addClass('active').siblings().removeClass('active')
            $('.main div').eq($(this).index()).show().siblings().hide()
        })
    </script>
</body>
</html>

 3、实现无限左拉或右拉（具体效果，小伙伴可以复制代码自己操作一下哦🧐）

代码语言：javascript
代码运行次数：0
运行
AI代码解释
复制
<!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="../jquery-3.6.0.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .all {
            margin: auto;
            width: 687px;
            height: 186px;
            border: 1px solid #d3d3d3;
            position: relative;
            top: 20px;
            background-color: #f5f5f5;
        }
        .banner{
            width: 645px;
            height: 186px;
            position: absolute;
            left: 21px;
            overflow-x: hidden;
            /* background-color: #f5f5f5; */
        }
        .move {
            width: 2580px;
            height: 186px;
            position: absolute;
            left: 0;
            /* background-color: red; */
            /* transition: 500ms; */
        }
        .left {
            position: absolute;
            top: 71px;
            width: 17px;
            height: 17px;
            left: 4px;
            cursor: pointer;
            background-position: -260px -75px;
            background-image: url('https://s2.music.126.net/style/web2/img/index/index.png?d8ca63df648aafce67216aba5d1c2588');
        }
        .left:hover{
            background-position: -280px -75px;
        }
        .right {
            position: absolute;
            top: 71px;
            width: 17px;
            cursor: pointer;
            height: 17px;
            right: 4px;
            background-position: -300px -75px;
            background-image: url('https://s2.music.126.net/style/web2/img/index/index.png?d8ca63df648aafce67216aba5d1c2588');
        }
        .right:hover{
            background-position: -320px -75px;
        }
        ul{
            position: absolute;
            /* left: 0; */
            /* background-color: blue; */
            margin-top: 28px;
            width: 645px;
            transition: 500ms;
            display: flex;
            justify-content: space-between;
        }
        li{
            width: 118px;
            height: 150px;
            list-style: none;
            /* margin-left: 11px; */
        }
        .img{
            margin-bottom: 7px;
            display: flex;
        }
        .img img{
            width: 100px;
            height: 100px;
            display: block;
        }
        .background{
            width: 118px;
            height: 100px;
            background-image: url('https://s2.music.126.net/style/web2/img/coverall.png?07ddd97c068cca474df796099520491e');
            background-position: 0 -570px;
            position: absolute;
            /* top: 0; */
            /* left: 0; */
        }
        .text{
            white-space: nowrap;
            width: 90%;
            font-size: 13px;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    </style>
</head>
 
<body>
    <div class="all">
        <div class="left"></div>
        <div class="right"></div>
        <div class="banner">
            <div class="move">
                <ul class="ul1" style="left: -645px;">
                    <li>
                        <div class="img">
                            <img src="https://p4.music.126.net/11QDr3X3ZsJmyBHG_UM0-A==/109951167692927327.jpg?param=100y100" alt="">
                            <div class="background"></div>
                        </div>
                        <div class="text" style="color: #000;">Humble Swag GT Mixtape</div>
                        <div class="text" style="color: #666;">马思唯 / A Few Good Kids Records</div>
                    </li>
                    <li>
                        <div class="img">
                            <img src="https://p3.music.126.net/z-8Yi3OrLXpDFWP4YNQhNQ==/109951167596578985.jpg?param=100y100" alt="">
                            <div class="background"></div>
                        </div>
                        <div class="text" style="color: #000;">Humble Swag GT Mixtape</div>
                        <div class="text" style="color: #666;">马思唯 / A Few Good Kids Records</div>
                    </li>
                    <li>
                        <div class="img">
                            <img src="https://p3.music.126.net/XG8DFES67eGr-l4xcmu2Yg==/109951167695926471.jpg?param=100y100" alt="">
                            <div class="background"></div>
                        </div>
                        <div class="text" style="color: #000;">Humble Swag GT Mixtape</div>
                        <div class="text" style="color: #666;">马思唯 / A Few Good Kids Records</div>
                    </li>
                    <li>
                        <div class="img">
                            <img src="https://p4.music.126.net/c_2UDiBs-3CmnaqYXLJi-A==/109951167677420073.jpg?param=100y100" alt="">
                            <div class="background"></div>
                        </div>
                        <div class="text" style="color: #000;">Humble Swag GT Mixtape</div>
                        <div class="text" style="color: #666;">马思唯 / A Few Good Kids Records</div>
                    </li>
                    <li>
                        <div class="img">
                            <img src="https://p4.music.126.net/H2eXxMzVtAGlKYOgDxD-wQ==/109951167655105219.jpg?param=100y100" alt="">
                            <div class="background"></div>
                        </div>
                        <div class="text" style="color: #000;">Humble Swag GT Mixtape</div>
                        <div class="text" style="color: #666;">马思唯 / A Few Good Kids Records</div>
                    </li>
                </ul>
                <ul class="ul2" style="left: 0;">
                    <li>
                        <div class="img">
                            <img src="https://p4.music.126.net/CrVEXgg6EK_8xTJNxobsJA==/109951167674088453.jpg?param=100y100" alt="">
                            <div class="background"></div>
                        </div>
                        <div class="text" style="color: #000;">Humble Swag GT Mixtape</div>
                        <div class="text" style="color: #666;">马思唯 / A Few Good Kids Records</div>
                    </li>
                    <li>
                        <div class="img">
                            <img src="https://p4.music.126.net/Z2qKcAdS0eAYrJuJMwa3VA==/109951167611690026.jpg?param=100y100" alt="">
                            <div class="background"></div>
                        </div>
                        <div class="text" style="color: #000;">Humble Swag GT Mixtape</div>
                        <div class="text" style="color: #666;">马思唯 / A Few Good Kids Records</div>
                    </li>
                    <li>
                        <div class="img">
                            <img src="https://p3.music.126.net/mBWkuKXTHjme6pV26GNd4w==/109951167604112526.jpg?param=100y100" alt="">
                            <div class="background"></div>
                        </div>
                        <div class="text" style="color: #000;">Humble Swag GT Mixtape</div>
                        <div class="text" style="color: #666;">马思唯 / A Few Good Kids Records</div>
                    </li>
                    <li>
                        <div class="img">
                            <img src="https://p4.music.126.net/tMylvOQj12OZDW46EeZt5w==/109951167607647677.jpg?param=100y100" alt="">
                            <div class="background"></div>
                        </div>
                        <div class="text" style="color: #000;">Humble Swag GT Mixtape</div>
                        <div class="text" style="color: #666;">马思唯 / A Few Good Kids Records</div>
                    </li>
                    <li>
                        <div class="img">
                            <img src="https://p3.music.126.net/LkwTIyU7Zo853W6LUfYpag==/109951167574776183.jpg?param=100y100" alt="">
                            <div class="background"></div>
                        </div>
                        <div class="text" style="color: #000;">Humble Swag GT Mixtape</div>
                        <div class="text" style="color: #666;">马思唯 / A Few Good Kids Records</div>
                    </li>
                </ul>
                <ul class="ul3" style="left: 645px;">
                    <li>
                        <div class="img">
                            <img src="https://p4.music.126.net/11QDr3X3ZsJmyBHG_UM0-A==/109951167692927327.jpg?param=100y100" alt="">
                            <div class="background"></div>
                        </div>
                        <div class="text" style="color: #000;">Humble Swag GT Mixtape</div>
                        <div class="text" style="color: #666;">马思唯 / A Few Good Kids Records</div>
                    </li>
                    <li>
                        <div class="img">
                            <img src="https://p3.music.126.net/z-8Yi3OrLXpDFWP4YNQhNQ==/109951167596578985.jpg?param=100y100" alt="">
                            <div class="background"></div>
                        </div>
                        <div class="text" style="color: #000;">Humble Swag GT Mixtape</div>
                        <div class="text" style="color: #666;">马思唯 / A Few Good Kids Records</div>
                    </li>
                    <li>
                        <div class="img">
                            <img src="https://p3.music.126.net/XG8DFES67eGr-l4xcmu2Yg==/109951167695926471.jpg?param=100y100" alt="">
                            <div class="background"></div>
                        </div>
                        <div class="text" style="color: #000;">Humble Swag GT Mixtape</div>
                        <div class="text" style="color: #666;">马思唯 / A Few Good Kids Records</div>
                    </li>
                    <li>
                        <div class="img">
                            <img src="https://p4.music.126.net/c_2UDiBs-3CmnaqYXLJi-A==/109951167677420073.jpg?param=100y100" alt="">
                            <div class="background"></div>
                        </div>
                        <div class="text" style="color: #000;">Humble Swag GT Mixtape</div>
                        <div class="text" style="color: #666;">马思唯 / A Few Good Kids Records</div>
                    </li>
                    <li>
                        <div class="img">
                            <img src="https://p4.music.126.net/H2eXxMzVtAGlKYOgDxD-wQ==/109951167655105219.jpg?param=100y100" alt="">
                            <div class="background"></div>
                        </div>
                        <div class="text" style="color: #000;">Humble Swag GT Mixtape</div>
                        <div class="text" style="color: #666;">马思唯 / A Few Good Kids Records</div>
                    </li>
                </ul>
                <ul class="ul4" style="left: 1290px;">
                    <li>
                        <div class="img">
                            <img src="https://p4.music.126.net/CrVEXgg6EK_8xTJNxobsJA==/109951167674088453.jpg?param=100y100" alt="">
                            <div class="background"></div>
                        </div>
                        <div class="text" style="color: #000;">Humble Swag GT Mixtape</div>
                        <div class="text" style="color: #666;">马思唯 / A Few Good Kids Records</div>
                    </li>
                    <li>
                        <div class="img">
                            <img src="https://p3.music.126.net/Z2qKcAdS0eAYrJuJMwa3VA==/109951167611690026.jpg?param=100y100" alt="">
                            <div class="background"></div>
                        </div>
                        <div class="text" style="color: #000;">Humble Swag GT Mixtape</div>
                        <div class="text" style="color: #666;">马思唯 / A Few Good Kids Records</div>
                    </li>
                    <li>
                        <div class="img">
                            <img src="https://p3.music.126.net/mBWkuKXTHjme6pV26GNd4w==/109951167604112526.jpg?param=100y100" alt="">
                            <div class="background"></div>
                        </div>
                        <div class="text" style="color: #000;">Humble Swag GT Mixtape</div>
                        <div class="text" style="color: #666;">马思唯 / A Few Good Kids Records</div>
                    </li>
                    <li>
                        <div class="img">
                            <img src="https://p4.music.126.net/tMylvOQj12OZDW46EeZt5w==/109951167607647677.jpg?param=100y100" alt="">
                            <div class="background"></div>
                        </div>
                        <div class="text" style="color: #000;">Humble Swag GT Mixtape</div>
                        <div class="text" style="color: #666;">马思唯 / A Few Good Kids Records</div>
                    </li>
                    <li>
                        <div class="img">
                            <img src="https://p3.music.126.net/LkwTIyU7Zo853W6LUfYpag==/109951167574776183.jpg?param=100y100" alt="">
                            <div class="background"></div>
                        </div>
                        <div class="text" style="color: #000;">Humble Swag GT Mixtape</div>
                        <div class="text" style="color: #666;">马思唯 / A Few Good Kids Records</div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
 
    <script>
        $('.right').click(function(){
            console.log($('.ul2').css('left'));
            if($('.move').css('left')=='0px'){
                $('.move').animate({left:'-645px'},1000,'linear',function(){})
            }else{
                $('.move').animate({left:'-1290px'},1000,'linear',function(){
                    $('.move').css('left','0px')
                })
            }
                
        })
        $('.left').click(function(){
            if($('.move').css('left')=='-645px'){
                $('.move').animate({left:'0px'},1000,'linear',function(){})
            }else{
                $('.move').animate({left:'645px'},1000,'linear',function(){
                    $('.move').css('left','-645px')
                })
            }
                
        })
    </script>
</body>
</html>

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

前端
json
ajax
jquery

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

前端
json
ajax
jquery
#请求类型
#编辑表格
#参数传递
评论
登录后参与评论
暂无评论
登录 后参与评论
推荐阅读
编辑精选文章
换一批
万字详解高可用架构设计
1452
Go 开发者必备：Protocol Buffers 入门指南
704
10分钟带你彻底搞懂分布式链路跟踪
378
多租户的 4 种常用方案
843
亿级月活的社交 APP，陌陌如何做到 3 分钟定位故障？
634
60页PPT全解：DeepSeek系列论文技术要点整理
1305
JQuery 入门 - 附案例代码
jqueryjquery uijavascripthtml
HTML入门与进阶以及HTML5 CSS JS-上 JS-下 jQuery Node.js + Gulp 知识点汇总 MongoDB + Express 入门及案例代码 Vue项目开发-仿蘑菇街电商APP
Twcat_tree
2023/02/20
14K0
JQuery 入门 - 附案例代码
jQuery基础--动画操作
动画队列
三组基本动画 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Title</title>
eadela
2019/09/29
4.2K0
jQuery基础--动画操作
jQuery基础系列
编程算法
jquery的入口函数是在html所有标签都加载后才执行，而JavaScript的window.onload事件是等到所有内容加载完后才执行。
达达前端
2019/07/03
2.7K0
jQuery基础系列
jQuery基础--CSS操作、class操作、attr操作、prop操作
cssattrclass
1.1.1 css操作 功能：设置或者修改样式，操作的是style属性。 设置单个样式 //name：需要设置的样式名称 //value：对应的样式值 css(name, value); //使用案例 $("#one").css("background","gray");//将背景色修改为灰色 设置多个样式 //参数是一个对象，对象中包含了需要设置的样式名和样式值 css(obj); //使用案例 $("#one").css({ "background":"gray",
eadela
2019/09/29
1.1K0
jQuery基础--CSS操作、class操作、attr操作、prop操作
jQuery基础
jqueryhtmlhtml5
使用jQuery快速高效制作网页交互特效 第一章-JavaScript基础 上机练习1 练习——统计包含“a”或“A”的字符串的个数 需求说明：使用数组存储一组字符串，并统计包含“a”或“A”的字符串的个数 关键代码： <script type="text/javascript"> var a = ["America","Greece","Britain","Canada","China","Egypt"]; var count = 0; for(var i in a) {
星辰xc
2022/04/09
7.6K0
jQuery基础
《数据采集与分析》综合模拟测验
heightwidth数据数据采集class
1、如果要使用Requests库爬取网址为http://www.jou.edu.cn/的网页内容，请按如下要求写出主要的操作语句：
Francek Chen
2025/01/23
550
《数据采集与分析》综合模拟测验
JQuery的属性操作及事件
前端学习笔记jquery
①data()：在元素本身是看不到设置的属性（不会更改DOM结构），但是该属性是存在的，且可以获取输出
申小兮
2023/04/18
1.7K0
JQuery的属性操作及事件
22.jQuery(实例)
jquery
1.开关灯效果 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .hide{ display: none; } </style> </head> <body> <input id="i1" type="button" value="开关" /> <div class="c
zhang_derek
2018/04/11
1.7K0
腾讯QQ音乐点歌系统
<!DOCTYPE html> <html>     <head>         <meta http-equiv="Content-Type" content="text/html;charset=utf-8">         <title>腾讯QQ音乐点歌系统---eagle天堂盲鹰</title>         <meta name="Keywords" content="关键字,关键字">         <meta name="description" content
山海散人
2021/03/03
9730
图片轮播(左右切换)--JS原生和jQuery实现
jqueryhtml
左右切换的做法基本步骤跟 上一篇文章  淡入淡出 类似，只不过修改了一些特定的部分
书童小二
2018/09/03
81.8K1
图片轮播(左右切换)--JS原生和jQuery实现
jQuery基础--选择器
jquerycss
jQuery选择器是jQuery为我们提供的一组方法，让我们更加方便的获取到页面中的元素。注意：jQuery选择器返回的是jQuery对象。
eadela
2019/09/29
8820
基于html+css+javascript+jquery制作北京景点介绍7页 WEB静态旅游景点区主题网页设计与制作
javascripthtmlcssjqueryjava
家乡旅游景点网页作业制作 网页代码运用了DIV盒子的使用方法，如盒子的嵌套、浮动、margin、border、background等属性的使用，外部大盒子设定居中，内部左中右布局，下方横向浮动排列，大学学习的前端知识点和布局方式都有运用，CSS的代码量也很足、很细致，使用hover来完成过渡效果、鼠标滑过效果等，使用表格、表单补充模块，为方便新手学习页面中没有使用js有需要的可以自行添加。 <font color='#b44846' size='4px'> ❤</font> 【作者主页——🔥获取更多优质
IT司马青衫
2022/08/16
8020
基于html+css+javascript+jquery制作北京景点介绍7页 WEB静态旅游景点区主题网页设计与制作
jQuery基础图文系列
jqueryhtmljavascriptcssphp
jquery的入口函数是在html所有标签都加载后才执行，而JavaScript的window.onload事件是等到所有内容加载完后才执行。
菲宇
2019/07/31
4.5K0
jQuery基础图文系列
前端基础：jQuery
jqueryjavascriptcss
jQuery 能做的 JavaScript 也都能做，但使用 jQuery 能大幅提高开发效率
RendaZhang
2020/09/08
13.6K0
前端基础：jQuery
杨校老师课堂之Web前端JS类库_JQuery案例[效果图与代码齐全]
https网络安全jquerycss
下载：https://files.cnblogs.com/files/xiaoxiao5016/font-awesome.min.css  或者官方下载：https://fontawesome.com/download
杨校
2019/06/14
8270
电商项目（中）
电商
感谢你学习今天的内容，如果你觉得这篇文章对你有帮助的话，也欢迎把它分享给更多的朋友，感谢。
达达前端
2019/07/03
2.5K0
HTML, CSS学习笔记（完整版）[通俗易懂]
c++html5httphttps网络安全
.htm是早期的后缀。由于那时仅仅能支持长度为3的后缀。因此html与htm是一样的。
全栈程序员站长
2022/07/10
8480
BootStrap响应式项目实战之世界杯网页设计
系统响应式bootstrapclass设计
c)在index.html里面做下引用；引用顺序bootstrap.css->jquery 3.3.1.js–>bootstrap.js
张哥编程
2024/12/13
1780
BootStrap响应式项目实战之世界杯网页设计
CSS绝对定位7大应用场景实战案例分享
cssgit
今天我们来分享web前端CSS定位中的position：absolute绝对定位的应用场景案例的相关场景！
艾编程
2022/12/09
9750
CSS绝对定位7大应用场景实战案例分享
JavaWeb——JQuery之基础案例实战（实现表格隔行换色、实现全选全不选、QQ表情选择、下拉列表选中条目左右选择功能）
checkboxclonedom
【需求】：将数据行的奇数行背景色设置为 pink，偶数行背景色设置为 yellow
Winter_world
2020/09/25
2.7K0
JavaWeb——JQuery之基础案例实战（实现表格隔行换色、实现全选全不选、QQ表情选择、下拉列表选中条目左右选择功能）
推荐阅读
编辑精选文章
万字详解高可用架构设计Go 开发者必备：Protocol Buffers 入门指南10分钟带你彻底搞懂分布式链路跟踪
相关讨论
营业执照识别及核验（基础版）？后来已购服务器及域名，原生产环境写错了，如何更改？域名及建站？
相关课程
微信小程序应用实践_《锋运票务系统》云原生数据库TDSQL-C学习路径课TDSQL for PG训练营
JQuery 入门 - 附案例代码
14K0
jQuery基础--动画操作
4.2K0
jQuery基础系列
2.7K0
jQuery基础--CSS操作、class操作、attr操作、prop操作
1.1K0
jQuery基础
7.6K0
《数据采集与分析》综合模拟测验
550
JQuery的属性操作及事件
1.7K0
22.jQuery(实例)
1.7K0
腾讯QQ音乐点歌系统
9730
图片轮播(左右切换)--JS原生和jQuery实现
81.8K1
jQuery基础--选择器
8820
基于html+css+javascript+jquery制作北京景点介绍7页 WEB静态旅游景点区主题网页设计与制作
8020
jQuery基础图文系列
4.5K0
前端基础：jQuery
13.6K0
杨校老师课堂之Web前端JS类库_JQuery案例[效果图与代码齐全]
8270
电商项目（中）
2.5K0
HTML, CSS学习笔记（完整版）[通俗易懂]
8480
BootStrap响应式项目实战之世界杯网页设计
1780
CSS绝对定位7大应用场景实战案例分享
9750
JavaWeb——JQuery之基础案例实战（实现表格隔行换色、实现全选全不选、QQ表情选择、下拉列表选中条目左右选择功能）
2.7K0
相关推荐
JQuery 入门 - 附案例代码
更多 >
申小兮0
LV.2
这个人很懒，什么都没有留下～
文章
25
获赞
87
专栏
1
作者相关精选
换一批
加入讨论
的问答专区 >
漫谈测试0
相关课程
一站式学习中心 >
微信小程序应用实践_《锋运票务系统》
318人在学
云托管 CloudBase Run
Serverless 容器服务
对象存储
云数据库 MySQL
云原生数据库TDSQL-C学习路径课
273人在学
云原生数据库 TDSQL-C
TDSQL for PG训练营
179人在学
分布式数据库 TDSQL
数据库
云数据库 PostgreSQL
领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2025 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号 | 京公网安备号11010802020287

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档

Copyright © 2013 - 2025 Tencent Cloud.

All Rights Reserved. 腾讯云 版权所有

登录 后参与评论
3
目录
本文部分代码块支持一键运行，欢迎体验
本文部分代码块支持一键运行，欢迎体验