jQuery基础

最新推荐文章于 2025-04-20 17:56:16 发布

原创最新推荐文章于 2025-04-20 17:56:16 发布 · 175 阅读

0 ·

CC 4.0 BY-SA版权

jQuery基础专栏收录该内容

1 篇文章

订阅专栏

jQuery基础操作

<script type="text/javascript" src = "jquery-3.3.1.js"></script>
    <script type="text/javascript">
        // jQuery

        // 获取元素
        // $("选择器") 获取和选择器相匹配的所有元素
        $(".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) * 200;
        });
        // 获取元素属性 只能获取到第一个
        // 设置元素属性 是对所有元素生效
        console.log($(".item").css("width"));
        // 修改内容
        $(".item").text("asd");

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

        // JQ里获取第几个元素 eq获取到的是JQ对象
        $(".item").eq(0).html("这是第一个");
        // 破坏性操作和回到破坏性操作之前
        $(".item").css("background-color","pink").parent().css("border","5px red solid").end().css("height", "200px");

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

        // 创建元素 
        $("<div></div>").html("新的JQ对象").appendTo($("body")); 
        // 添加元素
        // A.append(B) A里面添加B A是父级
        // A.appendTo(B) 把A加到B里面 B是父级

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

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

        // JQ对象怎么设置属性
        // attr设置的属性都会被添加到标签上 也能读取到标签上的自定义属性 prop则不能
        // prop可以读取到原生对象的一些自带属性和自定义属性
        $(".item").attr("title","这时提示");
        // $(".item").prop("title","这时提示");
    </script>

jQuery事件绑定

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>jQuery</title>
        <style type="text/css">
            .redDiv{
                width: 100px;
                height: 100px;
                background-color: red;
                /*display: none;*/
                /*不透明度 0-1 1代表完全不透明*/
                /*opacity: 0.1;*/
                /*可见性 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.js"></script>
    <script type="text/javascript">
        $(":button").click(function(){
            $(".redDiv").show(3000,function(){
                $(".redDiv").css("margin-left",100)
            });
        })
        //  元素可以直接绑定某个时间(必须是JQ支持的)
        //  $("div").reset(function(){
        //          
        //  })
        //  对于不能直接绑定的使用on来绑定
        //  on 4 个参数
        $("from").on("click", f1);
        $("from").on("click", f2);

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

        function f1(){

        }
        function f2(){

        }

    </script>
</html>