JQuery总结2

1.JQ的综合使用案例

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>JQ综合案例</title>
        <script src="js/jquery-1.8.3.js"></script>

        <style type="text/css">
            body {
                padding-left: 15px;
                font-size: 20px;
            }

            table {
                border: 1px solid #0099FF;
                width: 70%;
                border-collapse: collapse;
            }

            table td {
                border: #0099FF 1px solid;
                padding: 10px 20px 3px 1px;
            }
        </style>
        <script>
            //创建一个单行单列的列表
            var method1 = function(){
                //创建一个表格
                var $tab = $("<table></table>");
                var $tr = $("<tr></tr>");
                var $td = $("<td></td>");
                //插入表格内容
                $td.html("这是一个单行单列的表格");
                $tr.append($td);
                $tab.append($tr);
                $("body").append($tab);
            }
            //添加一个5行6列的表格
            var method2 = function(){
                //创建一个表格
                var $tab = $("<table></table>");
                for (var i = 0; i < 5; i++) {
                    var $tr = $("<tr></tr>");
                    for (var j = 0; j < 6; j++) {
                        var $td = $("<td></td>");
                        $td.html(j);
                        $tr.append($td);
                    }
                    $tab.append($tr);
                }
                $("body").append($tab);
            }
        </script>

    </head>
    <body>
        <input type="button" value="点击添加一个单行单列表格" onclick="method1()" />
        <br />
        <input type="button" value="点击添加一个5行6列的表格" onclick="method2()" />
    </body>
</html>

2.JQ基本操作总结

创建标签

$("<table></table>")

添加标签

//向body中添加一个table
$("body").append($("<table></table>"));

html值的操作

1.html()函数，对应JS中的innerHTML
*获取第一个元素的内容
2.text()函数
*获取元素的文本内容
3.val()函数
*获取元素的value标签的内容
4.prop()函数
*用于获取或设置元素的属性值
5.css()函数
*用于获取或设置元素的css属性值
6.show()/hide()函数
*隐藏和显示函数
7.toggle()函数
*切换元素的显示状态，如果是显示，改为不现实，反之亦然。

3.为元素绑定点击事件

方式1：JS

<script>
function fn(){
    alert("点击事件");
}
</script>
<body>
    <input type="button" value="点我" onclick="fu()"/>
</body>

方式2：JS

<script>
window.onload = function(){
    alert("点击事件");
};
</script>
<body>
    <input type="button" value="点我"/>
</body>

方式3：JQ

<script>
// 事件就绪函数
$(function(){
    //点击id为btn的元素执行
    $("#btn").onclick(function(){
        alert("点击事件");
    });
};
</script>
<body>
    <input id="btn" type="button" value="点我" />
</body>

JQuery总结2

JQuery总结2

1.JQ的综合使用案例

2.JQ基本操作总结

3.为元素绑定点击事件

流浪成疯

引用和评论

在linux上部署项目