jQuery-jQuery元素尺寸&offset,position&筛选

最新推荐文章于 2021-12-24 16:57:19 发布

轻小說控

最新推荐文章于 2021-12-24 16:57:19 发布

阅读量160

点赞数

分类专栏：前端 jQuery 文章标签： jQuery-jQuery元素尺寸&offset position&筛

本文链接：https://blog.csdn.net/Aqours/article/details/100856386

版权

前端同时被 2 个专栏收录

18 篇文章 0 订阅

订阅专栏

jQuery

7 篇文章 0 订阅

订阅专栏

jQuery

CSS

设置css样式/读取css值
css()

<p style="color: blue;">尚硅谷的后裔</p>
<p style="color: green;">太阳的后裔</p>

1.得到第一个p标签的颜色

console.log($('p:first').css('color'));//rgb(0, 0, 255)

2.设置所有p标签的文本颜色为red
```
$('p').css('color','red');
```

3.设置第2个p的字体颜色(#ff0011),背景(blue),宽(300px), 高(30px)

$('p:eq(1)').css({
  color: '#ff0011',
  background : 'blue',
  width: 300,
  height: 30
});

offset和position

                <div class="div1">
                  <div class="div2">测试offset</div>
                </div>

                <div class='div3'>
                  <button id="btn1">读取offset和position</button>
                  <button id="btn2">设置offset</button>
                </div>

获取/设置标签的位置数据

offset(): 相对页面左上角的坐标

$('#btn1').click(function(){
 //打印 div1 相对于页面左上角的位置
  var offset=$('.div1').offset();
  console.log(offset.left,offset.top);//10 20
 // 打印 div2 相对于页面左上角的位置
  offset=$('.div2').offset();
  console.log(offset.left,offset.top);//10 70
  //打印 div1 相对于父元素左上角的位置
  var position=$('.div1').position();
  console.log(position.left,position.top);//10 20
  //打印 div2 相对于父元素左上角的位置
  position=$('.div2').position();
  console.log(position.left,position.top);//0 50
});

position(): 相对于父元素左上角的坐标

$('#btn2').click(function () {
  $('.div2').offset({
    left:50,
    top:100
  });
});

scroll

        <div style="border:1px solid black;width:100px;height:150px;overflow:auto">
          This is some text. This is some text. This is some text. This is some text.
          This is some text. This is some text. This is some text. This is some text.
          This is some text. This is some text. This is some text. This is some text.
          This is some text. This is some text. This is some text. This is some text.
          This is some text. This is some text. This is some text. This is some text.
          This is some text. This is some text. This is some text. This is some text.
          his is some text.
        </div>
        <br>
        <br>
        <br>
        <button id="btn1">得到scrollTop</button>
        <button id="btn2">设置scrollTop</button>

在这里插入图片描述

1.scrollTop(): 读取/设置滚动条的Y坐标
2.$(document.body).scrollTop()+$(document.documentElement).scrollTop()
读取页面滚动条的Y坐标(兼容chrome和IE)

3.$(‘body,html’).scrollTop(60);
滚动到指定位置(兼容chrome和IE)

/*
 需求:
 1. 得到div或页面滚动条的坐标
 */
  $('#btn1').click(function(){
    console.log($('div').scrollTop());//0
    console.log($(document.body).scrollTop()+$(document.documentElement).scrollTop());
    //document.body支持IE Edge 不支持Chrome和FireFox
    //document.documentElement支持Chrome和FireFox 不支持IE Edge
  });
/*
   2. 让div或页面的滚动条滚动到指定位置
   */
  $('#btn2').click(function(){
    $('div').scrollTop(200);
    $('html,body').scrollTop(300)
  });

效果：回到顶部

            $('#to_top').click(function(){
              //瞬间回到顶部
             // $('html,body').scrollTop(0);
              var $page=$('html,body');
              var distance=$('html').scrollTop()+$('body').scrollTop();
              var time=500;//500毫秒  总时间
              var intervalTime =50; //间隔时间
              var itemDistance=distance/(time/intervalTime);
              //使用循环定时器不断滚动
              var intervalid=setInterval(function () {
                  distance-=itemDistance;
                  //到达顶部,停止定时器
                if(distance<=0){
                  distance=0;//修正
                  clearInterval(intervalid);
                }
                  $page.scrollTop(distance);
              },intervalTime);
            });

元素的尺寸

在这里插入图片描述

1.内容尺寸
height(): height
width(): width
2.内部尺寸
innerHeight(): height+padding
innerWidth(): width+padding

3.外部尺寸
outerHeight(false/true): height+padding+border 如果是true, 加上margin
outerWidth(false/true): width+padding+border 如果是true, 加上margin

  var $div=$('div');
  //1.内容尺寸
  console.log($div.width(),$div.height());//100 150
  //2.内部尺寸
  console.log($div.innerWidth(),$div.innerHeight());//120 170
  //3.外部尺寸
  console.log($div.outerWidth(),$div.outerHeight());//140 190
  console.log($div.outerWidth(true),$div.outerHeight(true));//160 210

删选_过滤

            <ul>
              <li>AAAAA</li>
              <li title="hello" class="box2">BBBBB</li>
              <li class="box">CCCCC</li>
              <li title="hello">DDDDDD</li>
              <li title="two"><span>BBBBB</span></li>
            </ul>
            <li>eeeee</li>
            <li>EEEEE</li>

在jQuery对象中的元素对象数组中过滤出一部分元素来

var $lis=$('ul>li');

first()

/*
 需求:
 1. ul下li标签第一个
 */
$lis.first().css('background','red');//$lis.first()-->jQuery对象
$lis[0].style.background='red';//$lis[0]-->dom对象

last()

/*
 2. ul下li标签的最后一个
 */
 $lis.last().css('background','red');

eq(index|-index)

/*
 3. ul下li标签的第二个
 */
$lis.eq(1).css('background','red');

filter(selector)

/*
 4. ul下li标签中title属性为hello的
 */
 $lis.filter('[title=hello]').css('background','blue');

not(selector)

/*
 5. ul下li标签中title属性不为hello的
 */
  $lis.not('[title=hello]').css('background','yellow');
  $lis.filter('[title!=hello').css('background','yellow');
  /*
  6.ul下li标签有title属性但是title属性不为hello
  */
  $lis.filter('[title]').not('[title=hello]').css('background','red');
  $lis.filter('[title][title!=hello]').css('background','red');
  $lis.filter('[title!=hello]').filter('[title]').css('background','red');

has(selector)

/*
7.. ul下li标签中有span子标签的
*/
 $lis.has('span').css('background','black');

筛选_查找孩子-父母-兄弟标签

            <div>
              <ul>
                <span>span文本1</span>
                <li>AAAAA</li>
                <li title="hello" class="box2">BBBBB</li>
                <li class="box" id='cc'>CCCCC</li>
                <li title="hello">DDDDDD</li>
                <li title="two"><span>span文本2</span></li>
                <span>span文本3</span>
              </ul>
              <span>span文本444</span><br>
              <li>eeeee</li>
              <li>EEEEE</li>
              <br>
            </div>

在已经匹配出的元素集合中根据选择器查找孩子/父母/兄弟标签

var $ul=$('ul');

children(): 子标签中找

/*
 需求:
 1. ul标签的第2个span子标签
 */
$ul.children('span:eq(1)').css('background','red');

find() : 后代标签中找

/*
 2. ul标签的第2个span后代标签
 */
 $ul.find('span:eq(1)').css('background','red');

parent() : 父标签

/*
 3. ul标签的父标签
 */
 $ul.parent().css('background','red');

prevAll() : 前面所有的兄弟标签

/*
 4. id为cc的li标签的前面的所有li标签
 */
var $li=$('#cc');
$li.prevAll('li').css('background','red');

nextAll() : 后面所有的兄弟标签

/*
 5. id为cc的li标签的后面的兄弟li标签
 */
$li.nextAll('li').css('background','red');

siblings() : 前后所有的兄弟标签

/*
 6. id为cc的li标签的所有兄弟li标签
 */
$li.siblings('li').css('background','red');
 */
var $li=$('#cc');
$li.prevAll('li').css('background','red');

nextAll() : 后面所有的兄弟标签

/*
 5. id为cc的li标签的后面的兄弟li标签
 */
$li.nextAll('li').css('background','red');

siblings() : 前后所有的兄弟标签

/*
 6. id为cc的li标签的所有兄弟li标签
 */
$li.siblings('li').css('background','red');

轻小說控

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery-jQuery元素尺寸&offset,position&筛选

jQueryCSS设置css样式/读取css值css()<p style="color: blue;">尚硅谷的后裔</p><p style="color: green;">太阳的后裔</p>1.得到第一个p标签的颜色console.log($('p:first').css('color'));//rgb(0, 0, 255)...
复制链接

扫一扫