$()的四种参数类型" class="reference-link">`$()`的四种参数类型

1.选择器
2.原生js对象（包装功能）
3.html字符串（创建dom元素）
4.回调函数（在页面加载完成，dom树创建成功后自动调用）

<!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="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
    <script>
        // 5.$(callback回调函数):传一个回调当函数，当页面加载完成后会自动执行
        // 例如4中生成dom元素时，放在顶部将不会生效，因为页面还未加载完成，获取不到#two，此时需要用回调函数进行操作
        $("<li>hello2~</li>").appendTo(document.querySelector("#two"))
        $(function(){
            $("<li>hello3~</li>").appendTo(document.querySelector("#two"))
        })
    </script>
</head>
<body>
    <ul id="one">
        <li>item1</li>
        <li>item2</li>
        <li>item3</li>
    </ul>
    <ul id="two">
        <li>item-two1</li>
        <li>item-two2</li>
        <li>item-two3</li>
    </ul>
    <script>
        // 1.$(选择器，上下文)：获取元素；
        // 1.1原生方法 
        document.querySelectorAll("li").forEach(li=>(li.style.color="red"));
        // jquery写法
        // $("li","#one").css("color","blue");//不建议这么写
        // 推荐jquery写法
        $("#one li").css("color","green");
        // 2.$(js对象)：jQuery包装器，js对象是原生的js对象，将原生的js对象转为jQuery对象；目的是使用jQuery对象上丰富的方法或属性
        document.body.style.backgroundColor="green";
        // 转为JQuery对象
        $(document.body).css("backgroundColor","lightgreen");
        // 3.get(n)、[n]:将jQuery集合中的第n个对象还原成原生的js对象
        $(document.querySelectorAll("li")).get(2).style.backgroundColor="yellow";//添加样式为了方便查看
        $(document.querySelectorAll("li"))[5].style.backgroundColor="yellow";
        // 4.$(html文本)：生成dom元素
        $("<li>hello~</li>").appendTo(document.querySelector("#two"))
        //原生写法
        document.querySelector("#one").insertAdjacentHTML("beforeend","<li>hi~</li>");
        function User(name,email){
            this.name2=name;
            this.email2=email;
            //实例方法
            this.get=function(){
                return "name:"+this.name2+";"+"email:"+this.email2;
            }
        }
        //原型方法
        User.prototype.hello=function(name3){
            return "name:"+name3;
        }
        //静态方法
        User.say=function(){
            return "static function";
        }
        const obj=new User("Jy","jy@php.cn");
        console.log(obj.get());//访问实例方法
        console.log(obj.hello("Jy2"));//访问原型方法
        console.log(User.say());//访问静态方法
        //1.页面中所以元素只要经过`$()`包装，一定返回 JQuery对象；
        // 2.只有JQuery对象才可以调用定义在JQuery上的方法；
        // 3.静态方法直接使用JQuery调用，将JQuery想象成构造函数
    </script>
</body>
</html>

JQuery初学习之`$()`的参数类型

$()的四种参数类型" class="reference-link">`$()`的四种参数类型

更多相关文章

随机推荐

JQuery初学习之`$()`的参数类型

$()的四种参数类型" class="reference-link">$()的四种参数类型

更多相关文章

随机推荐

$()的四种参数类型" class="reference-link">`$()`的四种参数类型