前言:做Web开发的我们,需要对页面进行美化,我们不仅要学会如何设计页面布局页面,还要学会给页面标签添加各种各样样式让用户有极好的体验感。
一,jquery对样式的操作。
1.设置获取样式css()。
<html> <body> <input type="button" value="获取" id="get"/> <input type="button" value="设置" id="set"/> <div id="div1" style="200px"></div> <div id="div2" style="300px"></div> <div id="div3" style="400px"></div> </body> </html> //引入jquery jar包 <script src="jquyer-1.12.4.js"></script> <script> //函数入口 $(function(){ 1.获取样式 $("get").click(function(){ //获取div1的样式:css()参数设置为要获取值的样式名, console.log($("div1").css('width')) console.log($("div1").css('heigth')) console.log($("div1").css('border')) //在ie浏览器中要获取边框这样的样式值需要给一个准确边框, console.log($("div1").css('border-top-width')) 1.2获取为div的元素们。 console.log($("div").css('width'))//注意:获取包含了多个domy元素的jquery对象的样式,它将会返回第一个元素对应的样式值 }) 2.设置样式 $("set").click(function(){ //设置样式需要给css()方法样式名和样式值, 这里设置的是行内样式。 2.1为id为div1的元素设置样式 $(div1).css('width':'100px")(两种写法1:直接写100不需要单引号,2:100px需要加上单引号) 2.2设置多样式。 //是对象属性名可以不带引号如果带'—'需要加上引号 $('div1').css({ 100, 'background-color':'red' }) }) }) </scrpit>
二,选择器。
1.基本选择器 -- 和css里的选择器一样的。
id选择器: $('#id'),
类选择器: $('.class'),
标签选择器: $('标签'),
并集选择器: $('.id,.div'),
交集选择器: $('li.div'),
2.层次选择器。
3.过滤选择器
这类选择器都带 ":"