jQuery中操作类的相关方法,操作位置和尺寸的方法,操作文本值的相关方法,以及操作样式的css()方法,操作滚动条的scrollTop方法

操作类的三个方法

   //    1,addClass(class|fn)
            // z作用  添加一个类  如果要添加多个,多个类名之间用空格隔开



            //     2,removeClass([class|fn])
            //      删除一个类  删除多个之间用空格隔开

            //     3,toggleCLass(class|fn.[,sw])
            //     切换类

            var btns = document.getElementsByTagName("button");
            btns[0].onclick = function () {

                $("div").addClass("class1  class2");
            }

            btns[1].onclick = function () {

                $("div").removeClass("class2 class1");
            }

            btns[2].onclick = function () {

                $("div").toggleClass("class2 class1");
            }

操作位置和尺寸

 var btns=document.getElementsByTagName("button");

            btns[0].onclick=function(){
                console.log($(".father").width());
                // height()方法和次类似


                // offset([coordinates])
                // 作用:获取元素距离窗口的偏移位置
                console.log($(".son").offset().left);


                // position()
                // 作用 获取元素距离定位元素的位置  只能获取不能设置
                console.log($(".son").position().left);

            }

            btns[1].onclick=function(){
              $(".father").width("500px");

              $(".son").offset({
                  left:10
              })

            
            }

操作位置和尺寸

 // 1,html
            // 和原生的innerHTML一模一样

            // 2,text
            // 和innerText一样

            // 3,val

            var btns=document.getElementsByTagName("button");
            btns[0].onclick=function(){
                
                $("div").html("<p>我是段落<p>");
            }

            btns[1].onclick=function(){
                console.log($("div").html());
            }

            btns[4].onclick=function(){
                console.log($("input").val("去输入"));
            }

操作样式

 $(function () {
        //   逐个设置
        //   $("div").css("width","100px");
        //   $("div").css("height","100px");

        // //   2,链式设置
        // $("div").css("width","100px").css("height","100px")

        // // 3批量设置

        $("div").css({
            width:"100px",
            height:"50px",
            backgroundColor:"red"

        })
  // 4获取
        console.log($("div").css("width"));
        })

操作滚轮

 var btns = document.getElementsByTagName("button");

            btns[0].onclick = function () {
                // 获取滚动的偏移位
                console.log($(".scrollTop").scrollTop());
                // 获取网页的滚动位置

                console.log($("body").scrollTop()+("html").scrollTop())

            }

            btns[1].onclick=function(){
                $(".scrollTop").scrollTop("300");
            }
发布了100 篇原创文章 · 获赞 6 · 访问量 3380

猜你喜欢

转载自blog.csdn.net/weixin_43342105/article/details/104472609