jQuery笔记

最新推荐文章于 2022-11-12 16:12:59 发布

今天学习了没_

最新推荐文章于 2022-11-12 16:12:59 发布

阅读量102

点赞数

文章标签： jquery

本文链接：https://blog.csdn.net/weixin_44756893/article/details/117068438

版权

1. 内容文本

 <div>
        <span>我是span</span>
    </div>
    <input type="text" value="我是表单">
    
    <script>
        //1.设置元素内容 html()
        $("div").html();
        //2.获取设置元素文本内容text()
        $("div").text();
        //3.获取设置表单值 val()
        $("input").val();

    </script>

2.返回指定祖先元素

$("div").parents(".yeye")//返回div的祖先 类为yeye

淘宝购物车案例

只放js代码

$(function(){
    //1.全选 全不选模块
    //就是把全选按钮(checkall)状态赋值给三个小的按钮(j-checkbox)就可以了
    $(".checkall").change(function(){
        $(".j-checkbox,.checkall").prop("checked",$(this).prop("checked"));
    });

    //2.如果小复选框被选中的个数等于3，就应该把全选按钮选上 否则全选按钮不选
    $(".j-checkbox").change(function(){
        // :checked 被选中的复选框 返回true 和false
        if($(".j-checkbox:checked").length===$(".j-checkbox").length){
            $(".checkall").prop("checked",true);
        }else{
            $(".checkall").prop("checked",false);
        }
    });

    //3.增减商品数量模块 先声明一个变量 点击加号(increment) 后这个变量就++ 然后赋值给文本框
    $(".increment").click(function(){
        //得到当前兄弟文本框的值
        var n = $(this).siblings(".itxt").val();
        n++;
        $(this).siblings(".itxt").val(n);

        //计算小计模块 根据文本框的值 乘以 当前商品的价格 就是商品小计
        //难点是准确找到目标 当前小li爸爸的爸爸的兄弟 不能直接就选择p-price这个类不然会选择所有的这个类元素
        //(1)当前商品价格 p
        // var p = $(this).parent().parent().siblings(".p-price").html();
        var p = $(this).parents(".p-num").siblings(".p-price").html();
        //去掉前面的￥符号  substr()截取字符串
        p =p.substr(1);
        //(2)小计模块
        //结果保留两位小数
        var price = (p*n).toFixed(2);
        $(this).parents(".p-num").siblings(".p-sum").html("￥"+price);
        //(3)直接修改表单里面的值 商品小计也要改
    });
    $(".decrement").click(function(){
        var n=$(this).siblings(".itxt").val();
        if(n==1){
            return false;
        }
        n--;
        $(this).siblings(".itxt").val(n);
        //计算小计模块 根据文本框的值 乘以 当前商品的价格 就是商品小计
        //(1)当前商品价格 p
        var p = $(this).parents(".p-num").siblings(".p-price").html();
        //去掉前面的￥符号
        p =p.substr(1);
        //(2)小计模块
        var price = (p*n).toFixed(2);
        $(this).parents(".p-num").siblings(".p-sum").html("￥"+price);
    });

    //用户修改文本框的值 计算 小计模块
    $(".itxt").change(function(){
        //先得到文本框里面的值 乘以 当前商品的单价
        var n=$(this).val();
        //当前商品单价
        var p = $(this).parents(".p-num").siblings(".p-price").html();
        p = psubstr(1);
        $(this).parents(".p-num").siblings(".p-sum").html("￥"+(p*n).toFixed(2));
    })
})

3.jq元素操作

遍历、创建、添加、删除元素操作

(1)遍历
jq隐式迭代是对同一类元素做了同样的操作，如果想给同一类元素做不同操作就需要遍历

<body>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <script>
        $(function(){
            //对同一类元素做不同操作 需要遍历 
            var sum =0;
            var arr=["red","pink","blue"]; 
            //1. each()方法遍历元素
            $("div").each(function(index,domEle){
                //回调函数 第一个index一定是索引号 domEle是dom对象
                //将上面那几个div根据arr设置成不同的颜色
                $(domEle).css("color",arr[index]);
                sum+=parseInt($(domEle).text());//parseIn()转换成数值型
            });
            console.log(sum);
            //2.$.each() 更有利于处理数据
            $.each(arr,function(index,ele){
                console.log(index);
                console.log(ele);
            })
        })
    </script>
</body>

（2）创建元素$("<li></li>")
添加、删除元素

<ul>
        <li>原先的li</li>
    </ul>
    <div class="test">我是原先的div</div>
    <script>
        $(function(){
            //1.创建元素
            var li = $("<li>我是后来创建的li</li>");
            //2.添加元素
            //（1）内部添加
            // $("ul").append(li);  //把内容放到原来内容的最后面
            $("ul").prepend(li);//把内容放到原来内容的最前面
            //（2）外部添加
            var div = $("<div>我是后妈生的</div>");
            // $(".test").after(div); //把内容放在目标元素后面
            $(".test").before(div);//把内容放在目标元素前面

            //3.删除元素
            $("ul").remove();//可以删除匹配的元素
            $("ul").empty();//删除匹配元素的子节点 孩子 本身元素不删除
            $("ul").html("");
        })
    </script>

4.尺寸操作

<div></div>
    <script>
        //1.width() height()获取元素width 和height大小
        console.log($("div").width());
        $("div").width(300);
        //2. innerWidth() innerHeight()  获取设置元素width 和height+padding大小
        console.log($("div").innerWidth());
        //3.outerWidth() 获取设置元素 width+padding+border大小
        console.log($("div").outerWidth());
        //4.outerWidth(true)获取设置width+padding+border+margin大小
        console.log($("div").outerWidth(true));
    </script>

5.位置操作

$(function(){
            //1.获取设置距离文档的位置（偏移）offset
            console.log($(".son").offset());
            console.log($(".son").offset().top);

            //2.获取距离带有定位父级位置（偏移）position 如果没有带有定位的父级 则以文档为准 
            //这个方法只能获取 不能设置 
            console.log($(".son").position());

            //3. scrollTop()/scrollLeft()设置/获取元素被卷去的头部和左侧
            $(window).scroll(function(){
                $(document).scrollTop();
            });
            //返回顶部
            $(".back").click(function(){
                $(document).scrollTop(0);//可以直接返回顶部
                //设置带有动画效果的返回顶部  注意 animate 只能对元素做动画
                $("body,html").stop().animate({
                    scroll:0
                });
            })
        })

今天学习了没_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery笔记

1. 内容文本 <div> <span>我是span</span> </div> <input type="text" value="我是表单"> <script> //1.设置元素内容 html() $("div").html(); //2.获取设置元素文本内容text() $("div").text();
复制链接

扫一扫