Javascript

From LemonWiki共筆
Revision as of 11:38, 8 July 2013 by Planetoid (talk | contribs)
Jump to navigation Jump to search

Javascript approaches to do the same task

Get the document by id

  • document.getElementById('abcId')
  • alternative: (1) Get the id attribute by using jQuery .attr(): $("selector").attr("id"); (example) and (2) go to the first step
  • parallel naming rules for html elemnt tags ex: (1)<input id='checkbox_id1' > & <select id="select_id1"> (2)Replace the input id to select id. Code snippet as follows:
var selectId = inputId.replace("checkbox_", "select_");

Changing HTML Content

input selector

  • jQuery :input Selector "Selects all input box, textarea, select and button elements" Cited from :input Selector
  • jQuery $("form#formID input[type=text]") Selects all input box belonging to the form with id: formID[2]

Create HTML select option

HTML select form Attribute

HTML DOM selected

  • HTML[3]
  • jQuery: .prop()[4]
  • jQuery .attr() ex: $("#myDropDown option:text=" + myText +"").attr("selected", "selected"); [5]

Display or hide the element by id

  • HTML DOM Style object
    • document.getElementById( selector_id ).style.display = "none";
  • Using jQuery .show() or .hide():
    • $("#selector_id").show(); or
    • $("#selector_id").hide();
  • Using jQuery .css():
    • $("#selector_id").css("display", ""); or $("#selector_id").css("display", "block");
    • $("#selector_id").css("display", "none");

Count the number of visible table rows

  • $('#selector_id:visible').length; jQuery v.1.9.1[6]
  • $('#selector_id:not([style*="display: none"])').length; Icon_exclaim.gif jQuery v.1.9.1 + IE Browser msie.png v.8 not work

count the number of all table rows (includes visible and invisible rows)

  • document.getElementById( table_id ).rows.length;

compression tools

troubleshooting steps

  1. Using the javascript library?
    • Is the function was supported by the version of javascript library? Deprecated?
    • Try to upgrade or downgrade the version of javascript library. Easy to switch the version: JSFiddle or JS Bin
  2. Checking browser compatibility
  3. Javascript location: (1)JavaScript in <head> or <body> ex: .click(), (2)JavaScript in <input> tag or other DOM elements' tag ex: <button type="button" onclick="myFunction()" id="buttonId">Try it</button>[7]


more on Javascript debug

references

further reading

  1. Microsoft - Scripting Guidelines