当前位置：首页 > 资讯 >

jQuery从入门到熟练(12)

2023-04-24 来源:飞速影视

练习表格隔行变色改进--->odd 样式类

2、CSS

(1) style 样式（设置CSS样式/读取CSS值）
css(styleName): 根据样式名得到对应的值css(styleName, value): 设置一个样式css({多个样式对}): 设置多个样式
<p style="color: blue;">HTML</p><p style="color: green;">CSS</p><script src="js/jquery-1.10.1.js" type="text/javascript"></script><script type="text/javascript"> //1. 得到第一个p标签的颜色 //console.log($("p:first").css("color")) //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 })</script>
(2) 位置坐标（获取/设置标签的位置数据）
offset(): 读/写当前元素坐标(原点是页面左上角)position(): 读当前元素坐标(原点是父元素左上角)scrollTop()/scrollLeft(): 读/写元素/页面的滚动条坐标
<style type="text/css"> * { margin: 0px; } .div1 { position: absolute; width: 200px; height: 200px; top: 20px; left: 10px; background: blue; } .div2 { position: absolute; width: 100px; height: 100px; top: 50px; background: red; } .div3 { position: absolute; top: 250px; }</style><body style="height: 2000px;"><div class="div1"> <div class="div2">测试offset</div></div><div class="div3"> <button>读取offset和position</button> <button>设置offset</button></div><script src="js/jquery-1.10.1.js" type="text/javascript"></script><script type="text/javascript"> $("#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 }) $("#btn2").click(function () { // 设置 div2 相对于页面的左上角的位置 $(".div2").offset({ left: 50, top: 100 }) })</script>

1 ...10 11 12 13 14 ...33 查看全文

jQuery从入门到熟练(12)

2、CSS

石榴熟了之一拍到底

从宫本到你

从民工到明星

从爱情到幸福

从零到一的爱情

入地无门

破门而入

嫁入豪门