JQ基础

最新推荐文章于 2021-08-08 18:37:19 发布

稳健de少年

最新推荐文章于 2021-08-08 18:37:19 发布

阅读量226

点赞数

文章标签： jquery

本文链接：https://blog.csdn.net/Ssssssue/article/details/79590867

版权

JQ

    <head>
        <meta charset="UTF-8">
        <title>jquery2</title>
        <style>
            .redDiv{
                width: 100px;
                height: 100px;
                background-color: red;
                display: block;
                /*不透明度 0 - 1 1 代表完全不透明*/
                /*opacity: 0.6;*/
                /*可见性 visible 可见的
                         hidden 隐藏
                */
                /*visibility: visible;*/
            }
        </style>
    </head>
    <body>
        <div class="redDiv"></div>
        <input type="button" value="显示">
    </body>
    <script type="text/javascript" src="jquery-3.3.1.min.js"></script>
    <script type="text/javascript">
        $(":button").click(function(){
            $(".redDiv").slideUp(1000);
        });
        $("div").click(function(){

        })
        // 元素可以直接绑定某个事件(必须是JQ支持的)
        $("div").reset(function(){

        })
        // 对于不能直接绑定的使用on来绑定
        // on 4个 参数
        $("from").on("click", f1);
        $("from").on("click", f2);

        $("form").off();// 移除所有事件
        $("form").off("click");// 移除所有点击事件
        $("form").off("click",f1);// 移除和f1绑定的点击事件
        function f1(){

        }
        function f2(){

        }
    </script>

    <head>
        <script type="text/javascript" src= "jquery-3.3.1.min.js"></script>
        <meta charset="UTF-8">
        <title>jQuery</title>
        <style type="text/css">
            .item{
                width: 100px;
                height: 100px;
                background-color: red;
            }
        </style>
    </head>
    <body>
        <div class="item">1</div>
        <div class="item">2</div>
    </body>
    <script type="text/javascript">
    // jQuery

    // DOM
    // 获取元素
    // $("选择器") 获取和选择器相匹配的所有元素
    $(".item")

    // 修改元素
    // 设置一个属性
    $(".item").css("color", "white");
    //设置多个属性 参数时对象
    $(".item").css({
        "background-color":"green",
        "margin-left":"50px",
        "border":"1px red solid"
    })
    $(".item").css("width",function(index,oldValue){
        console.log(index,oldValue);
        return (index + 1) * 100;
    });
    // 获取元素属性 只能获取到第一个
    // 设置元素属性 是对所有的元素生效
    console.log($(".item").css("width"));
    // 修改内容 innerText innerHTML value

    console.log($('.item').html());
    $(".item").eq(1).html("Ygs <b>sb</b>!");

    $(".item").html(function(n){
        return "这个class元素的index是:" + n;
    });

    // 通过JQ的选择器获取到的是JQ对象
    // 通过原生方法获取到的是原生对象
    // JQ对象 只能调用JQ的方法,原生对象只能调用原生的方法 但是JQ可以和JS混编
    // 原生 -> JQ对象
    var a = document.getElementsByClassName('item')[0];

    $(a).css("color","red");
    // JQ对象 -> 原生对象
    $(".item")[0].innerHTML = "JQ转原生";
    $(".item").get(0).innerHTML = "也是JQ转原生";

    //JQ里 获取第几个 eq获取到的是JQ对象
    $(".item").eq(1).html("这是第二个");

    // 破坏性操作 和 回到破坏性操作之前
    $(".item").css("background-color","pink").parent().css("border","2px red solid").end().css("height","200px");

    // 移交$的控制权
    // jQuery(".item") 等价于 $(".item")
    // var pp = jQuery.noConflict();// 从此以后 不再使用 $ 代表 JQ
    // pp(".item")

    //创建元素
    $("<div></div>").html("新的JQ对象").appendTo($('body'));


    //删除元素
    // remove()  同时清空绑定的事件 
    // empty() 删除元素内容 元素本身还在
    // detach() 删除元素 不清空绑定事件

    // 添加元素
    // A.append(B) A里面添加B A是父级
    // A.appendTo(B) 把A加到B里面 B是父级

    //A.after(B) A后面添加B A在前面
    //A.insertAfter(B) 把A插入到B后面 B在前面

    // DOM属性 childNodes children parentNode
    // className

    // JQ对象设置属性
    // attr设置的属性都会被添加到标签上,也能读取到标签上的自定义属性 prop不可以
    // $(".item").attr("title","这是提示");
    $(".item").prop("title","这是提示");

    //prop 可以读取到原生对象的一些自带属性和自定义属性 attr 不能

    // 事件 - 事件对象


    </script>

上传数据

    <body>
        <form action="">
            <input type="text" name="uName" />
            <input type="submit" />
        </form>
        <div id="first">点我请求数据</div>
    </body>
    <script type="text/javascript" src="jquery-3.3.1.js"></script>
    <script type="text/javascript">
        $("#first").click(function(){
            $.ajax({
                url:"http://10.80.8.123/ajax/help.php",
                success:function(res){
                    console.log(res);
                }
            })
        })
    </script>

ajax

    <script type="text/javascript" src="jquery-3.3.1.js"></script>
    <script type="text/javascript">
    // 原生对象 发送请求
    // 创建请求对象
        var request = new XMLHttpRequest();
        // 设置请求 并发送
        // true 异步请求
        request.open("GET","text.json", true);
        request.send();
        request.onreadystatechange = function(){
            if (request.readyState == 4 && request.status == 200) {
                //请求成功
                console.log(request.responseText)
            }
        }
</script>

    <script type="text/javascript" src="jquery-3.3.1.js"></script>
    <script type="text/javascript">
    // JQ对象 发送请求
        $.ajax({
            url:"text.json", // 请求目标
            type:"GET", // 请求类型 POST 或者 GET (默认)
            async:true, //true代表异步, false同步(基本上浏览器都不支持)
            beforeSend:function(obj){
                //在发送请求之前执行此函数
                //检查一下请求是否是想要的
                //如果return false 则 取消发送
                console.log(obj)
                // return false;
            },
            // 可以把success里面的this 改变指向
            context:document.getElementsByTagName("body")[0],
            timeout:5000,//设置超时时间
            // 设置请求对象
            // xhr:function(){
            //  var obj = new XMLHttpRequest()
            //  return obj;
            // },
            cache:true,//true 代表缓存 false 不缓存
            success:function(res){
                this.innerHTML += res;
            }
        });

    </script>

稳健de少年

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQ基础

JQ <head> <meta charset="UTF-8"> <title>jquery2</title> <style> .redDiv{ width: 100px; height: 100px; background-c
复制链接

扫一扫