2021-07-26 jQuery基础

jquey基础整理

1. jquery入口函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery</title>
</head>
<script src="public/jquery-1.9.1.min.js"></script>
<script>
    $(function () {
        alert("hello");
    })
</script>
<body>
    hello
</body>
</html>

2. jquery冲突问题解决

如果引入了自定义的jquery文件,并且都是使用$符号定义jquery,那么后引入的会覆盖掉前面引入的

image-20210729164755415

这个时候我们可以自定义一个使用符号,来释放$符号的使用权

var fuhao = jQuery.noConflict();

3. jquery核心函数

  • $();就代表jquery的核心函数
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery</title>
</head>
<script src="public/jquery-1.9.1.min.js"></script>
<script>
    //$();就代表jquery的核心函数
    //1.接受一个函数
    $(function () {
        alert("hello,world");
        //2.接受一个字符串
        //2.1接受一个字符串选择器
        //返回一个jquery对象,对象中保存了找到的DOM元素
        var box1 = $(".box1");
        var box2 = $("#box2");
        console.log(box1);
        console.log(box2);
        //2.2接受一个代码片段
        //返回一个jquery对象,对象中保存了创建的DOM元素
        var p = $("<p>我是段落</p>");
        console.log(p);
        box1.append(p);
        //3.接受一个DOM元素
        //会被包装成一个jquery对象返回给我们
        var span = document.getElementsByTagName("span");
        console.log(span);
        var $span = $(span)
        console.log($span);
    });


</script>
<body>
    <div class="box1"></div>
    <div id="box2"></div>
    <span>我是span</span>
</body>
</html>

4. jQuery对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery</title>
</head>
<script src="public/jquery-1.9.1.min.js"></script>
<script>

    $(function () {
        /**
         * 1.什么是jquery对象
         * jquery对象是一个伪数组
         *
         * 2.什么是伪数组
         * 有0到length-1的属性,并且有length属性
         *
         */
        var $div = $("div");
        console.log($div);

        var arr = [1,3,5];
        console.log(arr);
    })

</script>
<body>
    <div>div1</div>
    <div>div2</div>
    <div>div3</div>
</body>
</html>

5. 静态方法和实例方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery</title>
</head>
<script src="public/jquery-1.9.1.min.js"></script>
<script>
    //1.定义一个类
    function AClass() {

    }
    //2.给类添加一个静态方法
    //直接添加给类的就是静态方法
    AClass.statiaMethod = function () {
        alert("statiaMethod");
    }
    //静态方法通过类名调用
    AClass.statiaMethod();

    //3.给类添加一个实例方法
    AClass.prototype.instanceMethod = function () {
        alert("instanceMethod");
    }
    //实例方法通过类的实例调用
    //创建一个实例(创建一个对象)
    var a = new AClass();
    //通过实例调用实例方法
    a.instanceMethod();

</script>
<body>
</body>
</html>

6. jQuery - each方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery</title>
</head>
<script src="public/jquery-1.9.1.min.js"></script>
<script>

    var arr = [1,3,5,7,9];
    var obj = {0:1, 1:2, 2:3, 3:4, 4:5, length:6};
    /*
    第一个参数是遍历到的元素
    第二个参数是当前遍历到的索引
    注意:原生的forEach方法只能遍历数组,不能遍历伪数组
     */
    arr.forEach(function (value,index) {
        console.log(index,value);
    });

    //1.利用jQuery的静态方法遍历数组
    $.each(arr,function (index,value) {
        console.log(index,value);
    });
    //jQuery的each方法可以遍历伪数组
    $.each(obj,function (index,value) {
        console.log(index,value);
    });
</script>
<body>
</body>
</html>

7. jQuery map方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery</title>
</head>
<script src="public/jquery-1.9.1.min.js"></script>
<script>

    var arr = [1,3,5,7,9];
    var obj = {0:1, 1:2, 2:3, 3:4, 4:5, length:6};
   //利用原生JS的map方法进行遍历
    /*
    第一个参数:当前遍历到的元素
    第二个参数:当前遍历到的索引
    第三个参数;当前遍历到的数组
     */
    arr.map(function (value ,index ,array) {
        //console.log(index,value,array);
    });
    //注意点:和原生的forEach一样 不能遍历伪数组
    // obj.map(function (value ,index ,array) {
    //     console.log(index,value,array);
    // });

    /*
    第一个参数:要遍历的数组
    第二个参数:每遍历一个参数要执行的回调函数
    回调函数的参数
    第一个参数:遍历到的元素的值
    第二个参数:遍历到的索引
     */
    $.map(arr,function (value,index) {
        //console.log(index,value);
    });
    //注意:和jquery的each方法一样,map静态方法也可以遍历伪数组
    var res = $.map(obj,function (value,index) {
        //console.log(index,value);
        return index+value;
    });

    var res1 = $.each(obj,function (index,value) {
        //console.log(index,value);
    });
    /*
    jQuery中的each静态方法和map静态方法的区别
    ecah静态方法的默认返回值是,遍历谁就返回谁
    map静态方法的默认返回值是,一个空数组

    each静态方法不支持在回调函数中对遍历的数组进行处理
    map静态方法可以在回调函数中通过return对遍历的数组进行处理
     */
     console.log(res);
    // console.log(res1);
</script>
<body>
</body>
</html>

8. jQuery其它静态方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery</title>
</head>
<script src="public/jquery-1.9.1.min.js"></script>
<script>
    /*
    $.trim(str);
    作用:去除字符串两端的空格
    参数:需要去除空格的字符串
    返回值:去除空格之后的字符串
     */
   var str = "    good    ";
   var res = $.trim(str);
   console.log("----"+str+"----");
   console.log("----"+res+"----");

   //真数组
    var arr = [1,3,5,7,9];
    //伪数组
    var arrLike = {0:1, 1:2, 2:3, 3:4, 4:5, length:6};
    //对象
    var obj = {"name":"xiaoli", age:25};
    //函数
    var fn = function () {};
    //window对象
    var w = window;
    /*
    $.isWindow(arr);
    作用:判断传入的对象是不是window对象
    返回值:true/false
     */
    var res = $.isWindow(arr);
    console.log(res);

    /*
    $.isArray(arr);
    作用:判断传入的对象是不是真数组
    返回值:true/false
     */
    var res1 = $.isArray(arr);
    console.log(res1);

    /*
   $.isFunction();
   作用:判断传入的对象是不是一个函数
   返回值:true/false
   注意:jQuery框架本质上是一个函数
   (function(window , undefined){
    })(window)
    */
    var res2 = $.isFunction(jQuery);
    console.log(res2);

</script>
<body>
</body>
</html>

9. jQuery holdReady方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery</title>
</head>
<script src="public/jquery-1.9.1.min.js"></script>
<script>
    /*
    $.holdReady(true);
    作用:暂停ready执行
     */
    $.holdReady(true);
    $(document).ready(function () {
        alert("ready");
    });
</script>
<body>
    <button>回复ready事件</button>
    <script>
        var btn = document.getElementsByTagName("button")[0];
        btn.onclick = function () {
            //alert("btn");
            $.holdReady(false);
        }
    </script>
</body>
</html>

10. jQuery 内容选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery</title>
</head>
<script src="public/jquery-1.9.1.min.js"></script>
<style>
    div{
        width: 50px;
        height: 100px;
        background: red;
        margin-top: 5px;
    }
</style>
<script>
    $(function () {
        //:contains(text) 作用:找到包含指定文本内容的指定元素
        // var $div = $("div:contains('我是div')");
        // console.log($div);

        //:empty 作用:找到既没有文本内容也没有子元素的指定元素
        // var $div = $("div:empty");
        // console.log($div);

        //:has(selector) 作用:找到包含指定子元素的指定元素
        var $div = $("div:has('span')");
        console.log($div);

        //:parent 作用:找到有文本内容或有子元素的指定元素
        // var $div = $("div:parent");
        // console.log($div);
    });

</script>
<body>
    <div></div>
    <div>我是div</div>
    <div>div123我是div</div>
    <div><span></span></div>
    <div><p></p></div>
</body>
</html>

11. 属性和属性节点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery</title>
</head>
<script src="public/jquery-1.9.1.min.js"></script>
<script>
    $(function () {
        /*
        1.什么是属性?
        对象身上保存的变量就是属性

        2.如何操作属性
        对象.属性名称 = 值;  p.name = "oop";
        对象.属性名称;

        对象.["属性名称"] = 值;  p["name"] = "zs";
        对象.["属性名称"];

        3.什么是属性节点
        <span name = "it666"></span>
        在编写HTML代码时,在HTML标签中添加的属性就是属性节点
        在浏览器中找到span这个Dom元素后,展开看到的都是属性
        在attributes属性中保存的所有内容都是属性节点

        4.如何操作属性节点
         Dom元素.setAttribute("属性名称" , "属性值"); span.setAttribute("name" , "ppp");
         Dom元素.getAttribute("属性名称")          span.getAttribute("name")

        5.属性和属性节点有什么区别
        任何对象都有属性
        只有Dom元素才有属性节点
         */
        /*
        function Person() {

        }
        var p = new Person();
        //p.name = "oop";
        p["name"] = "zs";
        //console.log(p.name);
        console.log(p["name"]);
         */
        var span = document.getElementsByTagName("span")[0];
        span.setAttribute("name" , "ppp");
        console.log(span.getAttribute("name"));
    });



</script>
<body>
    <span name = "it666"></span>
</body>
</html>

12. jQuery attr方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery</title>
</head>
<script src="public/jquery-1.9.1.min.js"></script>
<script>
    $(function () {
       /*
        1.attr(name|pro|key,val|fn)
        作用:获取或者设置属性节点的值
        可以传递一个参数,也可以传递两个参数
        如果传递一个参数,代表获取属性节点的值
        如果传递两个参数,代表设置属性节点的值

        注意点:
        如果是获取:无论找到多少个元素,都只会返回第一个元素指定的属性节点的值
        如果是设置:找到多少个元素就会设置多少个元素,如果设置的属性节点不存在,那么系统会自动新增

        2.removeAttr(name)
        删除属性节点
        $("span").removeAttr("class");
        删除多个属性节点
        $("span").removeAttr("class name");
        */
        // console.log($("span").attr("class"));
        // $("span").attr("class" , "box");
        // $("span").attr("aaa" , "123");

        //$("span").removeAttr("class");
        $("span").removeAttr("class name");
    });

</script>
<body>
    <span class="span1"  name = "it666"></span>
    <span class="span2"  name = "hahah"></span>
</body>
</html>

13. jQuery prop 方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery</title>
</head>
<script src="public/jquery-1.9.1.min.js"></script>
<script>
    $(function () {
       /*
       1.prop方法
       特点和attr方法一样
       2.removeProp方法
       特点和removeAttr方法一样
        */
       $("span").eq(0).prop("demo" , "it666");
       $("span").eq(1).prop("demo" , "lalal");
        console.log($("span").prop("demo"));

        $("span").removeProp("demo");
        /*
        注意点:
        prop不仅能操作属性,还能操作属性节点

        官方推荐在操作属性节点时,具有true和flase两个属性的属性节点,
        如checked,selected或者disabled使用prop(),其他的使用attr()
         */
        console.log($("span").prop("class"));
        $("span").prop("class" , "box");

        console.log($("input").prop("checked"));//true/false
        console.log($("input").attr("checked"));//checked/undefined
    });

</script>
<body>
    <span class="span1"  name = "it666"></span>
    <span class="span2"  name = "hahah"></span>
    <input type="checkbox" checked>
</body>
</html>

14. attr和prop小练习(实现点击按钮切换图片的效果)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery</title>
</head>
<script src="public/jquery-1.9.1.min.js"></script>
<script>
    $(function () {
        //1.给按钮添加点击事件
        var btn = document.getElementsByTagName("button")[0];
        btn.onclick = function () {
            //2.获取输入框输入的内容
            var input = document.getElementsByTagName("input")[0];
            var text = input.value;
            console.log(text);
            //3.修改img中src属性节点的值
            $("img").attr("src" , text);
            // $("img").prop("src" , text);
        }
    });

</script>
<body>
    <input type="text">
    <button>切换图片</button><br>
    <img src="https://img0.baidu.com/it/u=2994744999,4030387909&fm=26&fmt=auto&gp=0.jpg" alt="">
<!--    <img src="https://ss1.baidu.com/-4o3dSag_xI4khGko9WTAnF6hhy/zhidao/pic/item/78310a55b319ebc4cbd4c3e68226cffc1e171624.jpg">-->
</body>
</html>

15. jQuery 类操作相关方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery</title>
</head>
<script src="public/jquery-1.9.1.min.js"></script>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    .class1{
        width: 100px;
        height: 100px;
        background: red;
    }
    .class2{
        border: 10px  solid #000;
    }
</style>
<script>
    $(function () {
       /*
         1.addClass(class|fn)
         作用:添加一个类
         如果要添加多个,多个类名之间用空格隔开

         2.removeClass([class|fn])
         作用:删除一个类
         如果要删除多个,多个类名之间用空格隔开

         3.toggleClass(class|fn[,sw])
         作用:切换
         有就删除,没有就添加
        */
       var btn = document.getElementsByTagName("button");
       btn[0].onclick = function () {
            //$("div").addClass("class1")
           $("div").addClass("class1 class2")
       }
        btn[1].onclick = function () {
            //$("div").removeClass("class1");
            $("div").removeClass("class1 class2")
        }
        btn[2].onclick = function () {
            $("div").toggleClass("class1 class2")
        }
    });
</script>
<body>
    <button>添加类</button>
    <button>删除类</button>
    <button>切换类</button>
    <div></div>
</body>
</html>

16. jQuery 文本值相关操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery</title>
</head>
<script src="public/jquery-1.9.1.min.js"></script>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    div{
        width: 100px;
        height: 100px;
        border: 10px solid #000;
    }
</style>
<script>
    $(function () {
       /*
       1.html([val|fn])
       和原生JS中的innerHtml一摸一样
       2.text([val|fn])
       和原生JS中的innerText一摸一样
       3.val([val|fn|arr])
        */
        var btn = document.getElementsByTagName("button");
        btn[0].onclick = function () {
            $("div").html("<p>我是段落<span>我是span</span></p>")
        }
        btn[1].onclick = function () {
            console.log($("div").html());
        }
        btn[2].onclick = function () {
            $("div").text("<p>我是段落<span>我是span</span></p>")
        }
        btn[3].onclick = function () {
            console.log($("div").text());
        }
        btn[4].onclick = function () {
            $("input").val("lalalla");
        }
        btn[5].onclick = function () {
            console.log($("input").val());
        }
    });
</script>
<body>
    <button>设置html</button>
    <button>获取html</button>
    <button>设置text</button>
    <button>获取text</button>
    <button>设置value</button>
    <button>获取value</button>
    <div></div>
    <input type="text">
</body>
</html>




  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值