<script type="text/javascript" src="js/jquery.min.js"></script>
        <!--企业开发的时候，通过cdn加速，去服务器直接到入jQuery文件-->
        <!--<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>--> 
        <script type="text/javascript">
            //1.等待加载完成
            //a.
//          window.onload = function(){
//              
//          }
            //b.等待页面中所有的标签添加成功,就会触发
            //完整版
//          $(document).ready(function(){
//              
//          })
            //简写版
            $(function(){
                
                var inter1;
                function timeAction(){
                    inter1 = window.setInterval(function(){
                        console.log('！！！！')
                    }, 1000);
                }
                timeAction()
                $('#aa').on('click',function(){
                    if(inter1){
                        window.clearInterval(inter1)
                        inter1 = null
                    }else{
                        timeAction()
                    }
                });
                
                console.log(document.getElementsByTagName('p')[0])
                //2.获取节点操作(选择器)
                //a.选择器直接选中相应的标签
                // $(选择器) - 选择器是在css中怎么写这儿就怎么写
                //$('标签选择器') - 选择网页中所有的指定标签,返回是jQuery对象不是数组
                //注意：如果选择器同时选中了多个，返回值和选中一个的时候的类型是一样的。
                //     可以通过结果直接对选中的所有标签一起操作
                var divNodes = $("div");
                console.log('====',divNodes);
                divNodes.css('color','red');
                
                var div11Node = $('#div11');
                console.log(div11Node);
                console.log($('.cdiv1'))
                console.log($('a,p'))
                console.log($('#div2 a'))
                
                //b.父子选择器
                console.log($('#div2>a'))   //和后代选择器效果一样
                console.log($('p + a'))   //获取紧跟着p标签的a标签
                console.log($('#p1~*'))   //获取和id是p1的标签的后面的所有同级标签
                console.log($('div:first'))   //第一个div标签
                console.log($('p:last'))     //最后一个p标签
                console.log($('div *:first-child'))   //找到所有div标签中的第一个子标签
                
                //3.创建标签
                //$('HTML标签语法') ,例如：$('<div style="color: red">我是div</div>')
                var imgNode = $('<img src="img/a1.jpg"/>')
                var divNode = $('<div style="background-color: #00BFFF; width: 100px; height: 100px;"></div>')
                //4.添加标签
                /*
                 * 父标签.append(子标签) - 在父标签的最后添加子标签
                 * 父标签.prepend(子标签) - 在父标签的最前面添加子标签
                 */
                $('body').append(imgNode)      
                $('body').prepend(divNode)  
                $('h1').before($('<h1 style="color:yellowgreen;">我是标题0</h1>'))
                $('h1').after($('<h2 style="color: slateblue;">我是标题22</h2>'))  
                //5.删除标签
                //标签.empty() - 清空指定标签
                //标签.remove() - 删除指定标签
                $('#div2').empty()
                $('h1').remove()
                //6.拷贝和替换(见手册)

属性样式
('img').attr('src') // 获取属性的值的时候只获取被选中标签中的第一个标签
console.log(text1)
console.log(('img').attr('title', '图片1') // 修改和添加会针对所有选中的标签

            //2.标签内容属性
            // 双标签.html()
            // 双标签.text()
            // 单标签.val()
            //注意：上面的函数不传参就是获取值，传参就是修改值
            console.log($('p').html())   // 取完整代码
            console.log($('p').text())   // 只取文字
            console.log($('input').val()) //单标签中的val属性
            $('p').html('我是新的段落')    //
            $('input').val('请输入账号')
            
            //3.class属性 - HTML中一个标签可以有多个class值，多个值用空格隔开
            //标签.addClass(class值) - 给标签添加class值
            //标签.removeClass(class值) - 移除标签中指定的class值
            $('div').addClass('w')
            $('#div1').removeClass('c')
            
            //4.样式属性
            //a.获取属性值
            //标签.css(样式属性名) - 获取样式属性值
            var height = $('p').css('height')
            console.log(height)
            //b.修改和添加
            //标签.css(样式属性名, 值) - 修改属性值
            $('p').css('background-color', 'cornflowerblue')
            //标签.css({属性名:值, 属性名2:值2...}) - 同时设置多个属性
            $('p').css({
                "color":"yellow",
                'font-size':'30px'
            })
            

            //5.事件
            //a.标签.on(事件名,回调函数) - 给标签绑定指定的事件（和js中的addEventLinsenner一样）
            //事件名不需要要on
            $('button:first').on('mouseover',function(){
                console.log(this)
                //注意: this - js对象, 可以直接js对象的属性和方法
                //     $(this) - jQuery对象，可以使用jQuery对象的属性和方法
                // $(js对象) - 将js对象转换成jQuery对象
                //this.innerText = '进入！'
                $(this).text('进入~')
            });
            
            //b.父标签.on(事件名,选择器,回调函数) - 在父标签上添加事件，传递给选择器对应的子标签
            //选择器 - 前面标签的后代标签(子标签/子标签的子标签)
            $('#v01').on('click','.v011 .v0111',function(){
                console.log(this)
            })
        })

juquery动态添加
<script type="text/javascript" src="js/jquery.min.js"></script>
<style type="text/css">
.fruit{
width: 150px;
height: 50px;
background-color: green;
margin-bottom: 10px;
text-align: center;
line-height: 50px;
position: relative;
}
.fruit font{
position: absolute;
right: 15px;
color: white;
}
</style>
</head>
<body>
<div id="top">
</div>

<script type="text/javascript">
var fruitArray = ['苹果','香蕉', '火龙果', '荔枝'];
for(var x in fruitArray){
//取水果名
var fruitName = fruitArray[x];
//创建标签对象
var fruitNode = ('<font>×</font>'))
//添加标签
$('#top').append(fruitNode)
}
</script>

    <div id="bottom">
        <input type="text" placeholder="水果" />
        <button>添加</button>
    </div>
    
    <!--添加新水果-->
    <script type="text/javascript">
        $('#bottom button').on('click',function(){
            //获取输入框中的内容
            var newName = $('#bottom input').val();
            //创建新标签
            var newNode = $('<div class="fruit"></div>').text(newName)
            newNode.append($('<font>×</font>'))
            
            //添加
            $('#top').prepend(newNode)
        });
        
        //删除水果
        $('#top').on('click', 'font',function(){
            $(this).parent().remove();
        })          
        
<script type="text/javascript" src="js/jquery.min.js"></script>
    <style type="text/css">
        .fruit{
            width: 150px;
            height: 50px;
            background-color: green;
            margin-bottom: 10px;
            text-align: center;
            line-height: 50px;
            position: relative;
        }
        .fruit font{
            position: absolute;
            right: 15px;
            color: white;
        }
    </style>
</head>
<body>
    <div id="top">
    </div>
    <!--添加默认显示的水果标签-->
    <script type="text/javascript">
        var fruitArray = ['苹果','香蕉', '火龙果', '荔枝'];
        for(var x in fruitArray){
            //取水果名
            var fruitName = fruitArray[x];
            //创建标签对象
            var fruitNode = $("<div class='fruit'>"+fruitName+"</div>")
            fruitNode.append($('<font>×</font>'))
            //添加标签
            $('#top').append(fruitNode)
        }
    </script>
    
    <div id="bottom">
        <input type="text" placeholder="水果" />
        <button>添加</button>
    </div>
    
    <!--添加新水果-->
    <script type="text/javascript">
        $('#bottom button').on('click',function(){
            //获取输入框中的内容
            var newName = $('#bottom input').val();
            //创建新标签
            var newNode = $('<div class="fruit"></div>').text(newName)
            newNode.append($('<font>×</font>'))
            
            //添加
            $('#top').prepend(newNode)
        });
        
        //删除水果
        $('#top').on('click', 'font',function(){
            $(this).parent().remove();
        })          

Ajax(由jQuery封装的) - asynchronous javascript + xml(异步js+xml)
一般用来做网络数据请求，类似python中requests库(http请求)

语法：
1.get请求
$.get(url,data,回调函数,返回数据类型)  
- url：请求地址（字符串）
- data：参数列表 (对象)
- 回调函数：请求成功后自动调用的函数(函数名，匿名函数)
- 返回数据类型：请求到的数据的格式(字符串，例如：'json')  

2.post请求
$.post(url,data,回调函数,返回数据类型)  
- url：请求地址（字符串）
- data：参数列表 (对象)
- 回调函数：请求成功后自动调用的函数(函数名，匿名函数)
- 返回数据类型：请求到的数据的格式(字符串，例如：'json')  

3.ajax
$.ajax({
    'url':请求地址,
    'data':{参数名1:值1, 参数名2:值2}，
    'type':'get'/'post',
    'dataType':返回数据类型,
    'success':function(结果){
        请求成功后要做的事情
    }
})

-->
<!DOCTYPE html>

<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery.min.js"></script>

</head>
<body>
    <button>刷新</button><br />
    <!--1.get请求-->
    <script type="text/javascript">
        //1.请求数据
        var page = 1;
        function getData(){
            var url = 'https://www.apiopen.top/satinApi'
            page++
            $.get(url, {'type':'2', 'page':page}, function(re){
                console.log(re)
                //re就是请求结果
//              
                var allData = re.data;
                for(var x in allData){
                    var data = allData[x];
                    var bimageuri = data.profile_image;
                    var imgNode = $('<img style="width: 100px; height: 100px;"/>').attr('src', bimageuri)
                    $('body').append(imgNode)
                }
            });
        }
        //2.刷新
        $('button').on('click',getData);
        
    </script>
</body>