【原创】Jquery初体验二

2018-06-22 06:42:24来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

快速导航

一.传统方式生成Table

二.使用jquery.tmpl插件快速生成Table

三.Jquery中的操作class的几个方法

四:jq里面的克隆

五:属性过滤器

六:表单元素过滤器

一.传统方式生成Table

        var peopleArr = [
            { "name": "刘欢", "age": 50, "skill": "从头再来" },
            { "name": "杨坤", "age": 35, "skill": "32唱演唱会" },
            { "name": "那英", "age": 50, "skill": "白天不懂夜的黑" },
            { "name": "王菲", "age": 45, "skill": "复合" }
        ]
        $(function () {
            var $tbCreate = $("<table></table>")//生成table
            var $trTitle = $("<tr></tr>").append("<td>序号</td>").append("<td>姓名</td>").append("<td>年龄</td>").append("<td>技能</td>");
            $tbCreate.append($trTitle);//将标题加到tb中
            //循环数组,生成tr
            for (var i = 0; i < peopleArr.length; i++) {
                //每循环一次生成一个tr
                var $trCreate = $("<tr><td><input type='checkbox' class='chkOne'/>" + (i + 1) + "</td></tr>");
                //循环对象数组,生成其他td
                for (var item in peopleArr[i]) {
                    var $tdCreate = $("<td>" + peopleArr[i][item] + "</td>");
                    //加到tr里面
                    $trCreate.append($tdCreate);
                }
                //将tr加到table里面
                $tbCreate.append($trCreate);
            }
            //将table加到body里面
            $(document.body).append($tbCreate);

 

二.使用jquery.tmpl插件快速生成Table

    <script src="jquery/jquery-1.9.1.js"></script>
    <script src="jquery/jquery.tmpl.min.js"></script>首先要引入这个js

需要显示的字段在这里先占位 <script type="text/x-jquery-tmpl" id="tmpl01"> <!--//准备模板,使用占位符,属性名--> <tr> <td><input type="checkbox" class="chkOne" /></td> <td>${name}</td> <td>${age}</td> <td>${skill}</td> <td><a href="#">删除</a> <a href="#">编辑</a></td> </tr> </script> <script type="text/javascript"> var peopleArr = [ { "name": "刘欢", "age": 50, "skill": "从头再来" }, { "name": "杨坤", "age": 35, "skill": "32唱演唱会" }, { "name": "那英", "age": 50, "skill": "白天不懂夜的黑" }, { "name": "王菲", "age": 45, "skill": "复合" } ] //.tmpl方法,只有导入插件才有 //循环对象数组,数组里面的每一个对象,都会生成一个模板dom元素 var $tmplTr = $("#tmpl01").tmpl(peopleArr);//返回的是jq对象.这里是老师故意分开写 ohyeah $(function () { $tbCreate = $("<table></table>").append($tmplTr); //将table加到body里面去 $(document.body).append($tbCreate); }) </script>

 三.Jquery中的操作class的几个方法

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script src="jquery/jquery-1.9.1.js"></script>
    <style type="text/css">
        div {
            border: 1px solid #0094ff;
            height: 100px;
            width: 100px;
        }
        .red {
            background-color: red;
        }
        .black {
            background-color: black;
        }
    </style>
    <script type="text/javascript">
        $(function () {
            $("#btnChange").click(function () {
                //切换class//toggleClass 会判断 是否有这个class  如果有 删除,如果没有,就添加
API中的说明:如果存在(不存在)就删除(添加)一个类 $("div").toggleClass("black"); }) $("#btnRedAdd").click(function () { //增加class $("div").addClass("red"); }) $("#btnRedRemove").click(function () { //删除class $("div").removeClass("red"); }) }) </script> </head> <body> <input type="button" value="黑白切换" id="btnChange" /> <input type="button" value="增加redclass" id="btnRedAdd" /> <input type="button" value="移除redclass" id="btnRedRemove" /> <div></div> <div></div> <div></div> </body> </html>

 四:jq里面的克隆

jq里面的克隆,不管深浅,都会克隆子节点,jq里面的浅克隆,只是克隆元素,事件不克隆,jq里面的深克隆,事件一并克隆了

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script src="jquery/jquery-1.9.1.js"></script>
    <script type="text/javascript">
        var $button = $("<input type='button' value='点击删除自己' onclick='$(this).remove();'/>");
        //为button设置点击事件
        //使用jq的方法为dom元素增加事件,当这个dom元素从dom树里面移除,事件也没有了
        //如果要实现,将dom元素从dom树里面移除,事件还在,可以将事件写道dom元素的 事件属性里面
        $(function () {
            $("#btnAdd").click(function () {
                //将 按钮 追加到body里面去
                $(document.body).append($button);

            });
        })

    </script>
</head>
<body>
    <input type="button" id="btnAdd" value="增加按钮" />
</body>
</html>

 五:属性过滤器

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script src="jquery/jquery-1.9.1.js"></script>
    <script type="text/javascript">
        alert("稍等一会");
        $(function () {
            //表示拥有某种属性的元素
            $("li[skill]").css("backgroundColor", "orange");
            //表示属性等于某个值
            $("li[skill=noNice]").css("fontSize", "50px");
            //表示属性不等于某个值
            $("li[skill!=noNice]").css("color", "#0094ff");
            //属性过滤器,可以判断任意属性-包括id,class等
            //适用范围,就是对于元素的一个过滤
            $("li[class]").css("border", "5px solid #0094ff");
            $("li[class=vegetable][prize=10]").css("backgroundColor", "green");
        })
    </script>
</head>
<body>
    <ol>
        <li skill="noSwim">恶魔果实</li>
        <li class="noGoodLook">百香果</li>
        <li skill="noNice">榴莲</li>
        <li class="vegetable" prize="5">西兰花</li>
        <li class="vegetable" prize="10">秋葵</li>
        <li id="smile">开心果</li>
        <li class="noDelicious">韭菜月饼</li>
    </ol>
</body>
</html>

六:表单元素过滤器

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script src="jquery/jquery-1.9.1.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#btnShowNum").click(function () {
                //使用表单元素过滤器 获取选中的checkbox
                alert($("input[type=checkbox]:checked").length);
            })
        })
    </script>
</head>
<body>
    <input type="checkbox" /><label>篮球</label>
    <input type="checkbox" /><label>足球</label>
    <input type="checkbox" /><label>排球</label>
    <input type="checkbox" /><label>曲棍球</label>
    <br />
    <input type="radio" name="male" /><label>男</label>
    <input type="radio" name="male" /><label>女</label>
    <input type="button" value="显示选中个数" id="btnShowNum" />
</body>
</html>

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:五分钟搭建起一个包含CRUD功能的JqGrid表格

下一篇:【.NET深呼吸】清理对象引用,有一个问题容易被忽略