jQuery从入门0开始到精通复盘属性元素滚动事件(下篇)

116 阅读2分钟

jQuery上篇juejin.cn/post/710120…

属性操作

固有属性prop()

获取属性值: $('div'). prop('属性名')

设置属性值: $('div'). prop('属性名','属性值')

注意:固有(内置)属性,元素本身自带的,比如a中的href,img中的src,更适合操作表单属性:disabled / checked / selected 

示例

<body>
   <a href="https://juejin.cn/post/7101200697546244104" title="啦啦啦">哈哈哈</a>
    <input type="checkbox" name="" id="" checked>
    <script>
        $(function() {
            //1. element.prop("属性名") 获取元素固有的属性值
            console.log($("a").prop("href"));//https://juejin.cn/post/7101200697546244104
       //设置属性值(给title设置值)           
        $("a").prop("title", "我们都挺好");
            $("input").change(function() {
            //获取复选框的属性值
                console.log($(this).prop("checked"));
            });
        })
    </script>
</body>

 

自定义属性attr()

获取属性值: $('div'). attr('属性名')

设置属性值: $('div'). attr('属性名','属性值')

注意: attr() 除了普通属性操作,更适合操作自定义属性。(该方法也可以获取 H5 自定义属性)

示例

<body>
  
  <div index="0" data-index="8">我是div</div>
  <span>123</span> 
  <script>
      $(function() {
          console.log($("div").prop("index"));//underfined
          //  元素的自定义属性 attr()
           //1、获取div属性index的值
          console.log($("div").attr("index"))//0
            //2、设置div属性index的值
          $("div").attr("index", 4)//4
           //3、获取 H5 自定义属性
          console.log($("div").attr("data-index"))//8
      })
  </script>
</body>

数据缓存data()

获取数据: data('属性名')

设置数据: data('属性名','属性值') ,存在内存中,我们实际看不到

注意: 可以读取 H5 自定义属性  data-index ,第一个不用写data-,返回的是数字型

示例

<body>
  <div data-index="6"></div>
  <span>567</span> 
  <script>
      $(function() {
          //1、设置数据,这个里面的数据存放在元素的内存中,实际看不懂
          $("span").data("uname", "lili");
          console.log($("span").data("uname"))//uname lili
          // 2、获取data-index h5自定义属性 不用写data- , 且返回的是数字型
          console.log($("div").data("index"))//6
      })
  </script>
</body>

文本属性

普通元素内容html()

获取元素的内容:html( )

设置元素的内容: html("内容”)

注意: 识别标签,将标签、内容一起打印出来(有父级情况),若没有父级,只有一个单独标签(即jQuery)打印出来只有内容jQuery,无标签,此时也可用text()

示例

<body>
    <div>
        <span>jQuery</span>
    </div>
    <input type="text" value="请输入内容">
    <script>
        // 获取设置元素内容 html()
        console.log($("div").html());//<span>jQuery</span>
          //给div设置值123,页面上就会显示出123
        $("div").html("123");//123
    </script>
</body>

元素文本内容text()

获取元素的内容:text( )

设置元素的内容: text("内容”)

注意: 不识别标签,

示例

 <div>
      <span>jQuery</span>
  </div>
  <input type="text" value="请输入内容">
  <script>
      // 获取设置元素文本内容 text()
      console.log($("div").text())//jQuery
    //给div设置值123,页面上就会显示出123
      $("div").text("123");//123
  </script>

表单的值val()

获取元素的内容:val( )

设置元素的内容: val("内容”)

示例

 <body>
  <input type="text" value="请输入内容">
  <script>
      //  获取表单值 val()
      console.log($("input").val())//请输入内容
        //  设置表单值 
      $("input").val("123");//123
  </script>
</body>

元素操作

遍历元素each()

语法一

$('div').each(function(index,domEle){
 //执行语句,index是索引,domEle是元素(即打印出标签+标签里的内容)
})

注意:

  • each()方法遍历匹配的每一个元素,主要用DOM处理
  • 里面的回调函数有2个参数,index是每个元素的索引,demEle是每个DOM元素对象,不是jquery对象
  • 要想使用jquery方法,需要给这个dom元素转换为Jquery对象 $(domEle)

示例

<body>
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <script>
      $(function() {
          var sum = 0;
          var arr = ["red", "blue", "pink"];
          $("div").each(function(i, domEle) {
                // 0   <div style="color: red;">1</div>
                // 1   <div style="color: blue;">2</div>
                // 2   <div style="color: pink;">3</div>
              console.log(i,domEle)//索引及当前dom元素
            // 使用jquery方法,需要给这个dom元素转换为Jquery对象$(domEle)
              $(domEle).css("color", arr[i]);
              sum += parseInt($(domEle).text());
          })
          console.log(sum);//6
       
      })
  </script>
</body>

 

语法二

$.each(Obj,function(index,element){
 //执行代码index是索引,element是元素
})

注意

  • $.each()方法可用于遍历任何对象,主要用于数据处理,比如数组对象
  • 里面的函数有2个参数,index索引,elment遍历内容
  • 用于遍历JQuery对象中的每一项,回调函数中元素为DOM对象,想要使用Jquery方法需要转换

 

示例

<body>
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <script>
      $(function() {


         var sum = 0;
          var arr = ["red", "blue", "pink"]
          //  $.each() 方法遍历元素 主要用于遍历数据,处理数据
          // $.each($("div"), function(i, ele) {
          //     console.log(i);//索引
          //     console.log(ele);//dom元素
          // });
          // $.each(arr, function(i, ele) {
          //     console.log(i);//索引
          //     console.log(ele);//对应的值
          // })
     var obj={ 
            name: "yy",
              age: 18
              }
          $.each(obj, function(i, ele) {
              console.log(i); // 输出的是 name age 属性名
              console.log(ele); // 输出的是 yy  18 属性值
          })
      })
  </script>
</body>

创删改除元素

创建元素

var li=$('<li></li>')

添加元素

内部添加

1、把内容放在匹配元素后面,类似原生appendChild

元素.append'内容'

2、把内容放在匹配元素前面

元素.prepend'内容'

注意: 内部添加,父子关系

外部添加

1、把元素放在目标元素后面

元素.after('内容')

2、把元素放在目标元素前面

元素.before('内容')

注意: 外部添加,兄弟关系

删除元素

1、删除匹配元素本身

元素.remove()

2、删除匹配的元素中所有的子节点

元素.empty()

3、清空匹配的元素内容

元素.html('')

注意:empty()、html()两者作用等价,只不过html还可以设置内容

获取索引

元素.index()//注意:必须是亲兄弟

滚动操作

尺寸操作

语法

image.png

 

位置操作

offset()

offset( )方法设置或获取元素偏移;

  1. offset()方法设置或返回被选元素相对于文档的偏移坐标,跟父级没有关系;
  2. 该方法有两个属性left 、top, ****offset().top用于获取距离文档顶部的距离,offset().left用于获取距离文档左侧的距离;
  3. 可以设置元素的偏移:offset( { left:10,left:30})。

position()

  1. position( )方法用于返回被选元素相对于带有定位父级偏移坐标,如果父级没有定位,则以文档为准;
  2. 该方法有两个属性left 、top, offset().top用于获取距离定位父级顶部的距离,offset().left用于获取距离定位父级左侧的距离;
  3. 该方法只能获取。

scrollTop()/scrollLeft()

scrollTop( )/scrollLeft( ) 设置或获取元素被卷去的头部和左侧

  1. scrollTop( )方法设置或返回被选元素被卷去的头部;
  2. 不跟参数是获取,参数为不带单位的数组则是设置被卷去的头部。

jQuery 事件

jQuery 事件注册

语法

元素.事件(function(){})//$("div").click(function(){})

比如:mouseover、mouseout、blur、change、keydown、keyup 、resize、scroll等

jQuery 事件处理

on() 绑定事件

1、on可以绑定1个或者多个事件处理程序

绑定1个事件

  $('div').on('mouseover', function () {
                $(this).css('background', 'red')
            })

绑定多个事件

 $('div').on({
                mouseenter: function () {
                    $(this).css('background', 'skyblue')
                },
                click:function(){
                    $(this).css('background','blue')
                },
                mouseleave:function(){
                    $(this).css('background','red')
                }


            })

2、on可以实现事件委托(冒泡)【重点】

    $("ul").on("click", "li", function() {
                alert(11);
            });

3、on给未来动态创建的元素绑定事件【重点】

 $("ol").on("click", "li", function() {
                alert(11);
            })
            var li = $("<li>我是后创建的</li>");
            $("ol").append(li);;

off() 事件解绑

off() 方法可以移除通过on()方法添加的事件处理程序

$('p').off()//解绑p元素所有事件处理程序
$('p').off('click')//解绑p元素上的点击事件
$('ul).off('click','li')//解绑事件委托

one()只触发一次

$("p").one("click", function() {
                alert(11);
            })

trigger() / triggerHandler()事件触发

语法

第一种trigger()

 元素.click() //第一种简写形式
 元素.trigger("type")//第二种自动触发模式

提示

<body>
  <div></div>
  <input type="text">
    
  <script>
  $(function() {
    // 绑定事件
     $("div").on("click", function() {
      alert(11);
    });


    // 自动触发事件
    // 1. 元素.事件()
    // $("div").click();//会触发元素的默认行为
    
    // 2. 元素.trigger("事件")
    $("div").trigger("click");//会触发元素的默认行为
  


    $("input").on("focus", function() {
     $(this).val("how are you");
    }); 
    //表单自动聚焦,并显示how are you
    $("input").trigger("focus");
  });
  </script>
</body>

第二种 triggerHandler()

 元素.triggerHandler("type")//第三种自动触发模式

triggerHandler模式不会触发元素的默认行为,这是和前面两种的区别

提示

<body>
    <div></div>
    <input type="text">
      
    <script>
    $(function() {
      // 绑定事件
      $("div").on("click", function() {
        alert(11);
      });
      
      // 3. 元素.triggerHandler("事件") 就是不会触发元素的默认行为
      $("input").on("focus", function() {
        $(this).val("how are you ");
      });
 
      $("div").triggerHandler("click");//触发点击事件
      // $("input").triggerHandler("focus");未获取焦点,但显示了表单值how are you 
    });
    </script>
</body>

jQuery 事件对象

语法

元素.on(events,[selector],function(event){})

阻止默认行为:event.preventDefault( )或者return false

阻止冒泡: event.stopPropagation( )

jQuery 拷贝对象

语法

$.extend([deep],target,object1,[objectN])
  • deep:如果设置为true为深拷贝,默认为false浅拷贝
  • target: 要拷贝的目标对象
  • object1: 待拷贝到第一个对象的对象
  • objectN:待拷贝到第N个对象的对象
  • 浅拷贝目标对象引用的被拷贝的对象地址,修改目标对象会影响拷贝对象
  • 深拷贝,前面加true,完全克隆,修改目标不会影响被拷贝对象
 <script>
    $(function() {
     // 1.合并数据
        var targetObj = {};
        var obj = {
            id: 1,
            name: "yy"
        };
        // $.extend(target, obj);
        $.extend(targetObj, obj);
        console.log(targetObj);//{id: 1, name: "andy"}


     // 2. 会覆盖 targetObj 里面原来的数据
        var targetObj = {
            id: 0
        };
        var obj = {
            id: 1,
            name: "andy"
        };
        // $.extend(target, obj);
        $.extend(targetObj, obj);
        console.log(targetObj); //{id: 1, name: "andy"}
    })
</script>

 

jQuery 多库共存

概念:保证旧有版本正常运行的情况下,新的功能使用新的jQuery版本实现

语法

1:把里面的$符统一改成jQuery,比如jQuery(‘div’)

<button>点击</button>
<p></p>
//jQuery使用$符号,作为jQuery的简写
jQuery(document).ready(function(){
 jQuery("button").click(function(){
  jQuery("p").text("jQuery 仍然在工作!");
 });
});

2:jQuery变量规定新的名称:$.noConfict( )

<button>点击</button>
<p></p>
var jq = $.noConflict();//会释放对$标识符的控制
jq(document).ready(function(){
 jq("button").click(function(){
  jq("p").text("jQuery 仍然在工作!");
 });
});

参数传递

可以把$符号作为变量,传递给ready方法

可以在函数内使用符号,在函数外,不能使用符号,在函数外,不能使用

$.noConflict();
jQuery(document).ready(function($){
 $("button").click(function(){
  $("p").text("jQuery 仍然在工作!");
 });
});

jQuery 插件

jQuery 插件常用的网站

jQuery 插件库 www.jq22.com/

jQuery 之家 www.htmleaf.com/

jQuery 自定义插件

自定义插件链接:juejin.cn/post/710077…

---------------------------------完成-------------------------------------------