## jquery操作元素和样式 #### jQuery操作元素 - 属性操作 ```javascript $().attr("属性名") //获取属性 $().attr("属性" , "属性值") //设置属性 $().removeAttr("属性"); //删除属性 ``` - 内容操作 ```javascript $().html() //获取HTML内容 $().html("HTML内容"); //设置HTML内容 $().text() //获取文本内容 $().text("文本内容") //设置文本内容 $().val() //获取表单元素 $().val("表单元素的值") //设置表单元素 ``` #### jQuery样式操作 1、CSS属性操作 ```javascript $().css("属性") //获取CSS属性 $().css("属性","属性值") //设置单个CSS属性 $().css({"属性1":"属性值1","属性2":"属性值2",……}) //设置多个CSS属性 --------------------------------------------------- $("ul li:nth-child(odd)").css("color","red"); 等价于 $("ul li:nth-child(odd)").css({"color":"red"}); ``` 2、CSS类名操作 ```javascript $().addClass("类名") // 添加类名 $().removeClass("类名") $().toggleClass("类名") // 切换类名 toggleClass()方法用于检查元素是否具有某个类名。 如果类名不存在，则为该元素添加类名；如果类名已存在，则为该元素删除类名。 ``` 3，元素的宽度高度width()和height() ```javascript width() width innerWidth() width + padding outerWidth() width + padding + border $().width(); // 获取---返回数字，例如100--不带单位 $("#box2").width(50); //设置---元素的宽度 $().css("width"); //返回字符串，例如“100px”---带“px” height() height innerHeight () height + padding outerHeight () height + padding + border ``` 4，元素的位置offset()和position()----返回一个数字（不带单位） ```javascript $().offset() 返回的是一个坐标对象，该对象有2个属性：top和left。 $().offset().top 获取元素相对于浏览器窗口“顶部”的距离。 $().offset().left 获取元素相对于浏览器窗口“左部”的距离。 $().position() 返回的是一个坐标对象，该对象有2个属性：top和left。 $().position().top 元素相对于被定位的祖辈元素的顶部的垂直距离。 $().position().left 元素相对于被定位的祖辈元素的左部的水平距离。 父元素设置position:relative，子元素相对于父元素的定位position:absolute jQuery的offset()和position()的结合使用，快速获取元素坐标 ``` 5， 滚动条的距离scrollTop()和scrollLeft()----数字（不带单位） ```javascript $().scrollTop() //获取滚动距离 $().scrollTop(value) //设置滚动距离 ``` ```javascript <script type="text/javascript"> $(function () { var top = $("#box2").offset().top; $(window).scroll(function () { if ($(this).scrollTop() > top) { $("#box2").css({ "position": "fixed", "top": "0" }); } else { $("#box2").css({ "position": "relative" }); } }); }) </script> 滚动条距离大于box2距离顶部的距离时，设置固定定位； 当滚动条距离大于box2距离顶部的距离时，设置固定定位。 $(this).scrollTop()中的this指的是window， 等价于$(window).scrollTop()，表示获取滚动条距离浏览器窗口顶部的距离。 ```