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 變體：?&lt;?和?&gt;。

讓我們來看看下面的實例：

實例

<p><code><header></code> 作為內聯元素被包圍。</p> <p>如果需要把代碼顯示為一個獨立的塊元素，請使用 <pre> 標簽：</p> <pre><article><h1>Article Heading</h1></article> </pre>

?

實例展示如下圖：

?

?

轉載于:https://www.cnblogs.com/hugoyao/p/7777551.html

《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀

總結

以上是生活随笔為你收集整理的jquery和bottstrap的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。