随性记

修改元素属性

$(".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>

Demo

jQuery中的offset() 与 position()

　　　　offset() 获取或者设置元素的绝对位置

　　　　position() 获取或者设置元素的相对位置

CSS opacity属性

　　　　opacity属性：表示元素的不透明性