jQuery Miscellaneous

来源：互联网发布：linux安装telnet服务编辑：程序博客网时间：2024/05/21 15:35

jQuery Miscellaneous

jQuery Misc Reference

jQuery 同其他 javascript 框架混合

jQuery 使用 $ 符號作為 jQuery 標記。

若其他 javascript 框架也使用 $ 符號作為標記該怎麼辦呢？

jQuery 使用 noConflict() 方法來解決衝突。

noConflict()

此方法釋放 $ 標識符的保留，此時其他框架就可以使用此標識符。

$.noConflict();jQuery(document).ready(function(){    jQuery("button").click(function(){        jQuery("p").text("jQuery is still working!");    });});

同時也可創建自定義的快捷標識符，放入變量中，以備後期使用。

var jq = $.noConflict();jq(document).ready(function(){    jq("button").click(function(){        jq("p").text("jQuery is still working!");    });});

$.noConflict();jQuery(document).ready(function($){    $("button").click(function(){        $("p").text("jQuery is still working!");    });});//ready 方法中使用 $//ready 方法之外不能使用 $ 恢復使用 jQuery 標識符

Filters

<!DOCTYPE html><html><head><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script><script>$(document).ready(function(){  $("#myInput").on("keyup", function() {    var value = $(this).val().toLowerCase();    $("#myTable tr").each(function() {      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)    });  });});</script><style>table {    font-family: arial, sans-serif;    border-collapse: collapse;    width: 100%;}td, th {    border: 1px solid #dddddd;    text-align: left;    padding: 8px;}tr:nth-child(even) {    background-color: #dddddd;}</style></head><body><h2>Filterable Table</h2><p>Type something in the input field to search the table for first names, last names or emails:</p><input id="myInput" type="text" placeholder="Search.."><br><br><table>  <thead>    <tr>      <th>Firstname</th>      <th>Lastname</th>      <th>Email</th>    </tr>  </thead>  <tbody id="myTable">    <tr>      <td>John</td>      <td>Doe</td>      <td>john@example.com</td>    </tr>    <tr>      <td>Mary</td>      <td>Moe</td>      <td>mary@mail.com</td>    </tr>    <tr>      <td>July</td>      <td>Dooley</td>      <td>july@greatstuff.com</td>    </tr>    <tr>      <td>Anja</td>      <td>Ravendale</td>      <td>a_r@test.com</td>    </tr>  </tbody></table><p>Note that we start the search in tbody, to prevent filtering the table headers.</p></body></html>

<!DOCTYPE html><html><head><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script><script>$(document).ready(function(){  $("#myInput").on("keyup", function() {    var value = $(this).val().toLowerCase();    $("#myList li").each(function() {      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)    });  });});</script></head><body><h2>Filterable List</h2><p>Type something in the input field to search the list for specific items:</p><input id="myInput" type="text" placeholder="Search.."><br><ul id="myList">  <li>First item</li>  <li>Second item</li>  <li>Third item</li>  <li>Fourth</li></ul></body></html>

<!DOCTYPE html><html><head><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script><script>$(document).ready(function(){  $("#myInput").on("keyup", function() {    var value = $(this).val().toLowerCase();    $("#myDIV *").each(function() {      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)    });  });});</script></head><body><h2>Filter Anything</h2><p>Type something in the input field to search for a specific text inside the div element with id="myDIV":</p><input id="myInput" type="text" placeholder="Search.."><div id="myDIV">  <p>I am a paragraph.</p>  <div>I am a div element inside div.</div>  <button>I am a button</button>  <button>Another button</button>  <p>Another paragraph.</p></div></body></html>

阅读全文

0 0