前端学习： jQuery学习--Day01

最新推荐文章于 2024-09-27 15:27:45 发布

魔法少女轩酱

最新推荐文章于 2024-09-27 15:27:45 发布

阅读量94

点赞数

分类专栏： jQuery 文章标签： js jquery javascript

本文链接：https://blog.csdn.net/weixin_44417826/article/details/109900918

版权

jQuery 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

前端学习： jQuery学习–Day01

创建了获取jQuery模板快捷键：jq+ Tab
网页调试快捷键：Alt+R

学习内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery.js"></script>
    <script>
        // 后面的window.onload会覆盖前面的
        window.onload=function(){

        }
        /*
            静态方法holdReady方法
             */
        /*暂停ready执行*/
        // $.holdReady(true)
        /*取消暂停*/
        // $.holdReady(false)

        /*
        jquery的入口函数不会被覆盖
         第一种写法
         */
        // $(document).ready(function(){
        //     alert("hello, Jquery");
        // })


        // 第二种写法，推荐
        $(function(){
            let $box1=$(".box1");
            //$可以直接创建一个标签并使用append方法添加到dom中
            let $p=$("<p>我是p</p>");
            $box1.append($p);

            /*
            jquery对象是一个伪数组
             */

            let arr=[1,3,5,7,9];
            let obj={0:1,1:3,2:5,3:7,4:9,length:5};
            //jquery中的each方法可以用来遍历伪数组
            //index：索引
            //value:索引值
            $.each(obj,function (index,value){
                console.log(index,value);
            })


            //map方法遍历伪数组
            /*
            和each方法的区别是
            1.each静态方法默认的返回值：遍历谁就返回谁
              map静态方法默认的返回值是一个空数组
            2.each静态方法不支持在回调函数中队遍历的数组进行处理
              map静态方法可以在回调函数中通过return对遍历的数组进行处理，然后生成一个新的数组返回
             */
            let res=$.map(obj,function(value,index){
                console.log(index,value);
                return value+index;
            })
            console.log(res);

            /*
            trim方法去除字符串空格
            不能直接调用，需要用一个变量去接收返回值
             */
            let str="   str    ";
            let rest=$.trim(str);
            console.log("---"+rest+"----");

            /*
            $.isWindow()
            判断传入对象是否为window
            $.isArray()
            判断传入对象是否为真数组
            $.isFunction()
            判断传入对象是否为一个函数
             */
            let resj=$.isFunction(jQuery);//jQuery框架本质上是一个匿名函数
            console.log(resj);

            /*
            选择器

            :empty 找到既没有文本也没有子元素的指定元素
            用法：$("div:empty");
            :parent 找到有文本内容或者有子元素的指定元素
            用法：$("div:parent");
            :contains 找到包含指定文本内容的指定元素
            用法：$("div:contains('文本内容')");
            :has 找到包含指定子元素的指定元素
            用法：$("div:has('子元素')");

             */

            /*
            属性节点
            HTML标签中添加的属性就是属性节点
             */

           /*
           js中属性节点的操作
           */
            let span=document.getElementsByTagName('span')[0];
            /*
            设置属性节点的值
             */
            span.setAttribute("name","zbx");
            /*
            获取属性节点的值
             */
            console.log(span.getAttribute("name"));

            /*
            jQuery中属性节点的操作
             */
            /*
            获取属性节点的值  一个参数
            注意：无论找到多少个元素，只会返回第一个元素的指定属性节点的值
             */
            console.log($("span").attr("name"));
            /*
            设置属性节点的值  两个参数
            如果设置的属性节点不存在，系统会自动新增
             */
            $("span").attr("abc","123");

            /*
            删除属性节点
            如果想删除多个，在参数中空格输入即可
             */
            $("span").removeAttr("class name");
            /*
            prop方法:和attr方法类似
            什么时候用prop？  当属性的返回值是true或false时用prop，如：checked，selected，disabled；其余的都用attr()
             */
            // $("span").eq(0)：获取第一个span
            $("span").eq(0).prop("demo","666");

            /*
            prop和attr练习：输入路径点击按钮切换图片
             */
            $("button").click(function(){
                let content=document.getElementsByTagName("input")[0];
                var text=content.value;
                $("img").attr("src",text);
            });
            /*
            添加类 addClass
            如果要添加多个类，用空格隔开
            删除类 removeClass
            如果要删除多个类，用空格隔开
            切换类 toggleClass
            有就删除，没有就添加
             */
            $("span").toggleClass("class1 class2");

        });
    </script>
</head>
<body>
<div class="box1"></div>
<span class="zbx" name="666"></span>
<!--prop和attr练习：点击按钮切换图片-->
<input type="text">
<button>切换图片</button><br>
<img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png">
</body>
</html>