jQuery基础–CSS操作、class操作、attr操作、prop操作
- 2019 年 10 月 10 日
- 筆記
1.1.1 css操作
功能：设置或者修改样式，操作的是style属性。
- 设置单个样式
//name：需要设置的样式名称 //value：对应的样式值 css(name, value); //使用案例 $("#one").css("background","gray");//将背景色修改为灰色
- 设置多个样式
//参数是一个对象，对象中包含了需要设置的样式名和样式值 css(obj); //使用案例 $("#one").css({ "background":"gray", "width":"400px", "height":"200px" });
- 获取样式
//name:需要获取的样式名称 css(name); //案例 $("div").css("background-color");
注意：获取样式操作只会返回第一个元素对应的样式值。
隐式迭代：
- 设置操作的时候，如果是多个元素，那么给所有的元素设置相同的值
- 获取操作的时候，如果是多个元素，那么只会返回第一个元素的值。
1.1.1 class操作
- 添加样式类
//name：需要添加的样式类名，注意参数不要带点. addClass(name); //例子,给所有的div添加one的样式。 $(“div”).addClass(“one”);
- 移除样式类
//name:需要移除的样式类名 removeClass(“name”); //例子，移除div中one的样式类名 $(“div”).removeClass(“one”);
- 判断是否有样式类
//name:用于判断的样式类名，返回值为true false hasClass(name) //例子，判断第一个div是否有one的样式类 $(“div”).hasClass(“one”);
- 切换样式类
//name:需要切换的样式类名，如果有，移除该样式，如果没有，添加该样式。 toggleClass(name); //例子 $(“div”).toggleClass(“one”);
【案例：tab栏切换案例】
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style type="text/css"> * { margin: 0; padding: 0; } ul { list-style: none; } .wrapper { width: 1000px; height: 475px; margin: 0 auto; margin-top: 100px; } .tab { border: 1px solid #ddd; border-bottom: 0; height: 36px; width: 320px; } .tab li { position: relative; float: left; width: 80px; height: 34px; line-height: 34px; text-align: center; cursor: pointer; border-top: 4px solid #fff; } .tab span { position: absolute; right: 0; top: 10px; background: #ddd; width: 1px; height: 14px; overflow: hidden; } .products { width: 1002px; border: 1px solid #ddd; height: 476px; } .products .main { float: left; display: none; } .products .main.selected { display: block; } .tab li.active { border-color: red; border-bottom: 0; } </style> <script src="../jquery-1.12.4.js"></script> <script> $(function () { $(".tab-item").mouseenter(function () { //两件事件 $(this).addClass("active").siblings().removeClass("active"); var idx = $(this).index(); $(".main").eq(idx).addClass("selected").siblings().removeClass("selected"); }); }); </script> </head> <body> <div class="wrapper"> <ul class="tab"> <li class="tab-item active">国际大牌<span>◆</span></li> <li class="tab-item">国妆名牌<span>◆</span></li> <li class="tab-item">清洁用品<span>◆</span></li> <li class="tab-item">男士精品</li> </ul> <div class="products"> <div class="main selected"> <a href="###"><img src="imgs/guojidapai.jpg" alt=""/></a> </div> <div class="main"> <a href="###"><img src="imgs/guozhuangmingpin.jpg" alt=""/></a> </div> <div class="main"> <a href="###"><img src="imgs/qingjieyongpin.jpg" alt=""/></a> </div> <div class="main"> <a href="###"><img src="imgs/nanshijingpin.jpg" alt=""/></a> </div> </div> </div> </body> </html>
属性attr操作
设置属性
//用法和css一样 //设置单个属性 //attr(name, value) //$("img").attr("alt", "图破了"); //$("img").attr("title", "错错错错"); //设置多个属性 /*$("img").attr({ alt:"图破了", title:"错错错", aa:"bb" })*/
获取属性简单
prop操作
//对于布尔类型的属性，不要attr方法，应该用prop方法 prop用法跟attr方法一样。 $(function () { $("input").eq(0).click(function () { $("#ck").prop("checked", true); }); $("input").eq(1).click(function () { $("#ck").prop("checked", false); }); });
案例
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> * { padding: 0; margin: 0; } .wrap { width: 300px; margin: 100px auto 0; } table { border-collapse: collapse; border-spacing: 0; border: 1px solid #c0c0c0; width: 300px; } th, td { border: 1px solid #d0d0d0; color: #404060; padding: 10px; } th { background-color: #09c; font: bold 16px "微软雅黑"; color: #fff; } td { font: 14px "微软雅黑"; } tbody tr { background-color: #f0f0f0; text-align: center; } tbody tr:hover { cursor: pointer; background-color: #fafafa; } </style> </head> <body> <div class="wrap"> <table> <thead> <tr> <th> <input type="checkbox" id="j_cbAll"/> </th> <th>菜名</th> <th>饭店</th> </tr> </thead> <tbody id="j_tb"> <tr> <td> <input type="checkbox"/> </td> <td>红烧肉</td> <td>田老师</td> </tr> <tr> <td> <input type="checkbox"/> </td> <td>西红柿鸡蛋</td> <td>田老师</td> </tr> <tr> <td> <input type="checkbox"/> </td> <td>红烧狮子头</td> <td>田老师</td> </tr> <tr> <td> <input type="checkbox"/> </td> <td>日式肥牛</td> <td>田老师</td> </tr> </tbody> </table> </div> <script src="jquery-1.12.4.js"></script> <script> $(function () { $("#j_cbAll").click(function () { //修改下面的哪些checkbox $("#j_tb input").prop("checked", $(this).prop("checked")); }); $("#j_tb input").click(function () { if($("#j_tb input:checked").length == $("#j_tb input").length){ $("#j_cbAll").prop("checked", true) }else { $("#j_cbAll").prop("checked", false) } }); }); </script> </body> </html>
