第6节：【jquery操作DOM】操作元素样式

操作元素样式

本节内容要求掌握：操作样式属性和操作元素类。

DOM在整个网页开发中都是很关键的，它可用于检索网页内任意元素或内容的索引目录，利用DOM提供的接口可以操作页面中的元素，还可以添加，删除及修改元素的属性，样式，内容等。

虽然传统的CSS样式表可以实现对元素的修饰，但如果可以任意操作元素现有的样式，或者为元素添加新的样式，web页面就会变得灵活多变

操作样式属性：css()方法

1）设置样式属性

$(‘选择器’).css(‘属性’,‘属性值’);     //设置单个样式属性

$('#one').css('color','red');

$(‘选择器’).css({‘属性1’:‘属性值’1,’属性2’:’属性值2’…});    //设置多个样式属性

$('#two').css({

                     'backgroundColor':'green',

                     'font-size':'30px'

                     })

需要注意的是符号变化，注意大括号和冒号

2）获取样式属性值

$(‘选择器’).css(‘属性’);            //获取单个样式属性值

var obj=$('#one').css('color');

            console.log(obj);  //控制台打印输出信息

$(‘选择器’).css([‘属性1’,’属性2’ ]);  //获取多个样式属性值

var obj2=$('#two').css(['backgroundColor','font-size']);//注意这里的符号是方括号

            console.log(obj2);

注意符号的变化，获取多个样式属性值是用方括号

点击事件

//$('选择器').click(function(){ 操作  })

            //当点击文本时，给div设置样式

            $('p').click(function(){ 

                     $('div').css({

                               'backgroundColor':'pink',

                               'width':'100px',

                               'height':'100px',

                               'border-radius':'50%'

                     })

            })

操作元素类

1. 追加（添加）类：addClass()方法

$(‘选择器’).addClass(‘类’)        //添加单个类

$(‘选择器’).addClass(‘类1  类2  类3’)       //添加多个类，多个类之间空格隔开

1. 移除类：removeClass()方法

$(‘选择器’).removeClass(‘类’)          //移除单个类

$(‘选择器’).removeClass(‘类1  类2  类3 …’)     //移除多个类

$(‘选择器’).removeClass( )       //移除全部类

1. 切换类：toggleClass()方法

$(‘选择器’).toggleClass(‘类’)   //切换单个类

$(‘选择器’).toggleClass(‘类1  类2  类3’)   //切换多个类

切换类是指当前选中的元素如果已经有了该类，则移除掉该类，如果没有该类，则添加该类。

1. hasClass()方法

判断元素的某个类是否存在

//hasClass()方法：判断元素的某个类是否存在,有则返回true，否则返回false

                     // var obj=$('div:eq(1)').hasClass('green');

                     // console.log(obj);

                     //点击第1个div，判断第1个div是否有red类，如果没有，则添加red类，否则移除red类

                     $('div:first').click(function(){

                               if($(this).hasClass('red')){  //这里的this表示的是当前的对象，也就是第1个div

                                        $(this).removeClass('red');

                               }else{

                                        $(this).addClass('red');

                               }

                     })

---

操作元素的尺寸

上节内容：

操作元素样式：css()

操作元素类：添加类，移除类，切换类，判断类是否存在

本节内容：操作元素尺寸和位置

1）、操作元素的宽度

Width()方法用于操作元素的宽度，包括设置元素的宽度和获取元素的宽度。

获取元素宽度：$(‘选择器’).width()

设置元素宽度：$(‘选择器’).width(值) 

注意：设置宽度时，参数的引号可以省略，但是如果不添加引号，只能传递数字，不能包含单位。

//$(‘选择器’).width(‘30px’)

//$(‘选择器’).width(30)

2）、操作元素的高度

Height()方法用于操作元素的高度，包括设置元素的高度和获取元素的高度。

获取元素宽度：$(‘选择器’).height()

设置元素宽度：$(‘选择器’).heig(值) 

3）、获取元素的内部宽度和高度

innerWidth():获取元素的宽度（包括内边距）  width+padding

innerHeight():获取元素的高度（包括内边距） height+padding

4）、获取元素的外部宽度和高度(驼峰命名法)

outerWidth():获取元素的宽度（包括内边距和边框）

outerHeight():获取元素的高度（包括内边距和边框）

outerWidth(true):获取元素的宽度（包括内边距、边框和外边距）

outerHeight(true):获取元素的高度（包括内边距、边框和外边距）

操作元素的位置

1）Offset()方法：获取匹配元素的第一个元素的坐标位置，或者设置每个元素的坐标

-----获取元素的坐标：$(‘选择器‘).offset() 

获取元素的左偏移量：$(‘选择器‘).offset().left

获取元素的上偏移量：$(‘选择器‘).offset().top

指定元素调用offset()方法后，会返回匹配到的第一个元素在整个页面中的偏移位置，返回值中包含两个属性left和top，分别表示元素距离浏览器的左偏移和上偏移

-----设置元素的坐标：$(‘选择器‘).offset({left:100,top:200}) 

$(‘选择器‘).offset({left:100}) 

2)position()方法 ：获取匹配元素相对父元素的偏移

1. offsetParent()方法

offsetParent()获取距离选中元素最近的含有定位信息的元素

1. scrollLeft()方法

获取滚动条相对左侧的偏移值：scrollLeft()

设置滚动条相对左侧的偏移值：scrollLeft(value)

1. scrollTop()方法

获取滚动条相对顶部的偏移值：scrollTop()

设置滚动条相对顶部的偏移值：scrollTop(value)

注意：在jquery中，很多方法都是同时实现获取与设置两种功能，即一个方法有两种用途，无参数时获取，带参数时设置作用。