- 修改元素属性
$(".class").attr("src","Imgs/login.gif");
- 修改元素属性
$("#id").css("display","none");
- 判断元素是否隐藏
$(".list-inline").is(":visible");
- 获取元素的text
$("#id").text();
- chang() 方法的定义
当元素的值发生改变时，会发生 change 事件。
该事件仅适用于文本域（text field），以及 textarea 和 select 元素。
change() 函数触发 change 事件，或规定当发生 change 事件时运行的函数。
注释：当用于 select 元素时，change 事件会在选择某个选项时发生。当用于 text field 或 text area 时，该事件会在元素失去焦点时发生。
- 一个小demo，实现隔行换色，图片放大阅览，删除节点。
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <script src="../Scripts/jquery-3.1.1.min.js"></script> <script src="../Scripts/bootstrap.min.js"></script> <link href="../Content/bootstrap.css" rel="stylesheet" /> <meta charset="utf-8" /> <style type="text/css"> body { font-size:13px;text-align:center; } table { margin-top:100px } table thead tr { background-color:#d8d5a4; } img { width:45px;height:56px;border:1px solid #000000;margin:5px 10px; } .trCss { background-color:#8edde0; } .clsImg { position:absolute;border:1px solid #000000;padding:3px;background-color:#f8f8f3;display:none; } </style> <script type="text/javascript"> $(function () { //隔行变色 $("tbody tr:even").addClass("trCss"); $("#selectAll").click(function () { if (this.checked) { $("input[name=selectRow]").attr("checked", true); } else { $("input[name=selectRow]").attr("checked", false); } }) //删除 $("input[type=button]").click(function () { var selectRow = $("input[name=selectRow]"); selectRow.each(function (index) { if (this.checked) { $("table tr[id=" + this.value + "]").remove(); } }); }) //预览图片生成 $("img").mousemove(function (e) { $("#imgTemp").attr("src", this.src) .css({ "width": "300px", "height": "200px", "top": (e.pageY + 15) + "px", "left": (e.pageX + 5) + "px" }).show(300); }) //鼠标移除 $("img").mouseout(function () { $("#imgTemp").hide(100); }) }) </script> </head> <body> <div class="container"> <table class="table table-bordered"> <thead> <tr> <td>选项</td> <td>编号</td> <td>封面</td> <td>购书人</td> <td>性别</td> <td>购书价</td> </tr> </thead> <tbody> <tr id="1001"> <td> <input type="checkbox" value="1001" name="selectRow"/> </td> <td>1001</td> <td><img alt="封面图片" src="../Image/5670d8646a4b6.jpg"/></td> <td>李晓明</td> <td>男</td> <td>35.56元</td> </tr> <tr id="1002"> <td> <input type="checkbox" value="1002" name="selectRow"/> </td> <td>1002</td> <td><img alt="封面图片" src="../Image/Desert.jpg" /></td> <td>李晓明</td> <td>男</td> <td>35.56元</td> </tr> <tr id="1003"> <td> <input type="checkbox" value="1003" name="selectRow"/> </td> <td>1003</td> <td><img alt="封面图片" src="../Image/5670d8646a4b6.jpg" /></td> <td>李晓明</td> <td>男</td> <td>35.56元</td> </tr> <tr id="1004"> <td> <input type="checkbox" value="1004" name="selectRow"/> </td> <td>1004</td> <td><img alt="封面图片" src="../Image/Desert.jpg" /></td> <td>李晓明</td> <td>男</td> <td>35.56元</td> </tr> <tr id="1005"> <td> <input type="checkbox" value="1005" name="selectRow"/> </td> <td>1005</td> <td><img alt="封面图片" src="../Image/5670d8646a4b6.jpg" /></td> <td>李晓明</td> <td>男</td> <td>35.56元</td> </tr> </tbody> <tfoot> <tr> <td colspan="6"> <div style="150px;margin-left:50px"> <input type="checkbox" id="selectAll"/>全选 <input type="button" value="删除" style="margin-left:20px"/> </div> </td> </tr> </tfoot> </table> <img id="imgTemp" class="clsImg" src=""/> </div> </body> </html>
- jQuery中的offset() 与 position()
offset() 获取或者设置元素的绝对位置
position() 获取或者设置元素的相对位置
- CSS opacity属性
opacity属性：表示元素的不透明性