1.jQuery元素操作

代码块

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<ul>
    <li class="item">item1</li>
    <li class="item">item2</li>
    <li class="item">item3</li>
    <li class="item">item4</li>
    <li class="item">item5</li>
</ul>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<script >
    //增
    $('.item').eq(3).after('<li class="item">321</li>').next().css('color','red').prev().css('color','red');
    // 添加到兄弟节点
    $("<h1>hello</h1>").insertBefore('ul');
    $("<h1>hello</h1>").insertAfter('ul');
    //在原元素上操作replaceWith()
    $("h1").replaceWith("<h2>321</h2>");
    //替换所有选择的元素
    $("<h1>123</h1>").replaceAll('h2');
    // 在元素上执行删除操作
    $('h1').remove();
    //对元素进行克隆
    $('.item:first-of-type').clone().prependTo('.item:last-of-type');
</script>
</body>
</html>

效果

2.jQuery的ajax与跨域

代码块

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<button class="get">1. $.get(): 请求数据</button>
<button class="post">2. $.post(): 请求数据</button>
<button class="jsonp">3. $.ajax():JSONP: 跨域请求数据</button>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<script>
    $(".get").click(()=>{
        $.ajax({
            type: "get",
            url: "user.php",
            data: { id: 3 },
            dataType: "html",
            success: (data) => console.log(data),
        });
    })
    $('.jsonp').click((ev)=>{
        $.ajax({
            type :'get',
            url  : 'http://www.test1.com/test.php?id=2&callback=?',
            dataType: 'jsonp',
            jsonpCallback : "show",
        })
    })
    function show(data) {
        console.log(data);
    }
</script>
</body>
</html>

效果图

3.vue基础语法

代码块

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--v-bind:可简化为":",为元素绑定普通属性-->
<div class="app" >
    <p v-bind:style="['color:red','background:green']">{{site}}</p>
    <p v-bind:style="style1">{{site}}</p>
    <p>40 + 40 = {{40+40}}</p>
    <p>{{flag ? '高兴' : "睡觉"}}</p>
    <p>用户名：<span v-text="username"></span></p>
    <p>用户名：<span v-once="username"></span></p>
    <p>用户名：<span v-html="a"></span></p>
</div>
<div class="app" ></div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    const vm = new Vue({
        el: '.app',
        data:{
            site:"php.cn",
            style1 : 'color:red',
            flag : true,
            username : '聂哥',
            a : "<h1>555</h1>"
        }
    })
    console.log(vm.$data);
    console.log(vm.$el);
    console.log(vm.site);
    vm.site = 321;
</script>
</body>
</html>

效果

Correcting teacher：

天蓬老师

Correction status：qualified

Teacher's comments：

Statement of this Website

The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!

All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement

0 comments

Author's latest blog post

php之类与继承

2021-05-07 22:53:35