jquery和bottstrap

jquery

jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的css选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。同时，jQuery兼容各种主流浏览器。

代码示例：

HTML代码：

<div id="main"〉
    <a href="#myModal" role="button" class="btn btn-info" data-toggle="modal">添加工具</a><!--点击添加工具按钮，弹出下面模态窗口-->
 <button class="btn btn-info" type="button" id="del">选择</button><!--点击该选择按钮，按钮能变颜色-->

    <form action="" method="post" id="listForm">
        <table class="table">
            <thead>
            <tr>
                <td><input type="hidden" name="id1" id="id1" value="此处输出id1"/></td>
            </tr>
            </thead>
            <tbody>
                <tr>
                    <td>
                        <input class="tool_id" type="checkbox" id="id2" name="id2" value="此处输出id2">
                    </td>
                </tr>
            </tbody>
        </table>
    </form>
</div>
<!--模态窗口，弹出一个添加窗口-->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h3 id="myModalLabel">添加工具</h3>
    </div>
    <div class="modal-body">
        <form class="form-horizontal" action="<?php echo site_url("tool/insert");?>" method="post" id="detailForm">
            <div class="control-group">
                <label class="control-label" for="link_name">工具分类：</label>
                <div class="controls">
                    <select name="type_id">
                            <option name="" value="" ></option>
                    </select>
                </div>
            </div>
            <div class="control-group">
                <label class="control-label" for="link_url">工具名称：</label>
                <div class="controls">
                    <input type="text" name="name" id="name" value="" size="80" placeholder="工具名称"/>
                </div>
            </div>
            <div class="control-group">
                <label class="control-label" for="userfile">工具地址：</label>
                <div class="controls">
                    <input type="text" name="url" id="url" value="" size="80" placeholder="工具地址"/>
                </div>
            </div>
            <div class="control-group">
                <label class="control-label" for="userfile">工具用户名：</label>
                <div class="controls">
                    <input type="text" name="user_name" id="user_name" value="" size="80" placeholder="工具用户名"/>
                </div>
            </div>
            <div class="control-group">
                <label class="control-label" for="userfile">工具密码：</label>
                <div class="controls">
                    <input type="text" name="user_password" id="user_password" value="" size="80" placeholder="工具密码"/>
                </div>
            </div>
            <div class="control-group">
                <div class="controls">
                    <button class="btn btn-info" type="submit" name="submit" id="submit">保存</button>
                </div>
            </div>
        </form>
    </div>
</div>

jquery代码：

<script type="text/javascript">
    <!--
    $(document).ready(function () {/*操作*/
        $('.id2').hide();//复选框隐藏
        var time = 0;
        $('#del').click(function () {//绑定选择/删除按钮
            if(time == 0){
                $(this).removeClass("btn btn-info");//通过移除id=del的class来隐藏按钮的颜色
                $(this).addClass("btn btn-warning");//通过添加id=del的class来实现改变按钮颜色
                $(this).text("删除");//改变按钮上的字
                $(".id2").show();//复选框显示
                time++;
            }else{
                var oldboy = '';//声明oldboy变量
                $('input[name="id2"]:checked').each(function() {
                    oldboy += ',' + $(this).val() ;//得到name为id2的所有选中的id
                });
                $.get('后台处理地址', {oldboy: oldboy}, function(data) {//将oldboy送到后台处理代码中，并得到返回数据data
                    data = eval("(" + data + ")");//将通过json返回的数据data进行解析
                    if(data == 1){
                        alert('删除成功！');
                        window.location.reload();//刷新页面
                    }
                });
            }
        });
    });
    //-->
</script>

选择器：

  id:$('#id')  class:$('.class')  标签选择器: $('标签名称')

基本选择器

   后代选择器:$('.outer p')  子代选择器:$('.outer>p')  多元素选择器:$('.outer,#d1')

组合选择器

   $("[属性名='值']")

属性选择器

    $("[type='text']") == $(':text')

表单选择器

    $('ul li').eq()  $('ul li').first()  $('ul li').last()  $("").hasclass('c1')

筛选器

        向下查找兄弟标签:  $().next()  $().nextAll()  $().nextUntil('.c1')    

        向上查找兄弟标签:  $().prev()  $().prevAll()  $().prevUntil('.c1') 

        查找所有兄弟标签:  $().sibilings()  

        查找子标签:  
            子代查找: $().children('')
            后代查找: $().find('')

        查找父级标签: $().parent()  $().parentUntil('')

导航查找方法

    文本操作: $().html()   $().text()  $().val()

    属性操作:  
        DOM:    ele.属性名=值    ele.setAttribute('属性名','值')
        jquery: $().attr('属性名')  $().attr('属性名','值')

    class属性操作:  $().addClass('c1')   $().removeClass('c1')

属性操作

        创建节点： $('<标签名>')
        父节点.append(子节点)
        子节点.appendTo(父节点)

节点操作

bootstrap

Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JavaScript 的，它简洁灵活，使得 Web 开发更加快捷。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发，是一个CSS/HTML框架。Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎，一直是GitHub上的热门开源项目，包括NASA的MSNBC（微软全国广播公司）的Breaking News都使用了该项目。国内一些移动开发者较为熟悉的框架，如WeX5前端开源框架等，也是基于Bootstrap源码进行性能优化而来。

bootstrap v3 官网：

http://v3.bootcss.com

Bootstrap中包含了丰富的Web组件，根据这些组件，可以快速的搭建一个漂亮、功能完备的网站。其中包括以下组件：
下拉菜单、按钮组、按钮下拉菜单、导航、导航条、路径导航、分页、排版、缩略图、警告对话框、进度条、媒体对象等。

Bootstrap 代码

Bootstrap 允许您以两种方式显示代码：

第一种是 <code> 标签。如果您想要内联显示代码，那么您应该使用 <code> 标签。
第二种是 <pre> 标签。如果代码需要被显示为一个独立的块元素或者代码有多行，那么您应该使用 <pre> 标签。

请确保当您使用 <pre> 和 <code> 标签时，开始和结束标签使用了 unicode 变体： < 和 >。

让我们来看看下面的实例：

实例

<p><code><header></code> 作为内联元素被包围。</p>
<p>如果需要把代码显示为一个独立的块元素，请使用 <pre> 标签：</p>
<pre>
    <article>
        <h1>Article Heading</h1>
    </article>
</pre>

实例展示如下图：

posted on 2017-11-03 11:57 HugoYao 阅读(252) 评论(0) 收藏举报