脚本宝典收集整理的这篇文章主要介绍了js實例教程-JavaScript常用的命令, JQuery框架, Ajax異步IO技術等知識詳解，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

小寶典致力於為廣大程序猿（媛）提供高品質的代碼服務，請大家多多光顧小站，小寶典在此謝過。

JS常用的命令, JQuery框架, Ajax異步IO技術

瀏覽器對象模型-BOM(Browser Object Model)

文檔對象模型-DOM(Document Object Model)

語法規範 ECMScripts - 主要使用 ES 5.1 (最新是ES 8)

1.JavaScript常用的命令

windonw

alert / promote / confirm

location href / reload() / replace()

history go() / forward() / back()

setTimeout()/setInterval()

clearTiameout()/clearInterval()

document

getElementById() / TagName() / classname()

querySelector() / querySelectorAll()

textContent (文本)/ innerHTML(文本+標籤) / nodeValue(節點)

圖片處理, 摳圖 

  

  background: url(img/url.jpg) norepeat -95px -15px;位置

事件冒泡和事件捕獲

事件冒泡: child --> parent 從下往上傳播 (IE)

事件捕獲: parent --> child 從上往下傳播

阻止事件的傳播

evt.stop.Propagation(), 事件到此為止, 不再繼續傳播

evt參數

evt參數表示的是時間對象, 綁定了和事件有關的所有信息, 如果事件回調函數中要用到事件相關的屬性和方法, 最好就是指定evt參數

this 時間源, 誰調用函數誰就是事件源

J S 中的三元條件運算

  

  function getStyle(elem) {

      return window.getComputedStyle ? window.getComputedStyle(elem) : elem.currentStyle

  }

2.JQuery框架

基本命令

  在window.jQuery = function () {}綁定

  var $ = window.jQuary;

  jQuary('#id') = $('#id')

  jQuery.noConflict();   //將 $ 函數不用  用 jQuery 代替   解決引入多個庫的 $ 衝突,   將原來使用 $ 的地方換為 jQuery

  $('#id')  選擇elem 轉化為 jqelem

  jqelem.fadeIn(1000)   淡入

  jqelem.fadeOut(1000)   淡出

  jqelem.on('click', function () {})   綁定事件

  jqelem.attr('class/type/', '設置值');  設置 屬性

  jqelem.css('', '')  設置 css  style

  $('#id').one('click', function () {}) 只點擊一次  執行函數

  $('#id').each(function (){}) 對選中的p 的每一個執行操作

  $("#id").text('abc')  將字符串作為 #id 標籤的的內容寫入

          .html('') 加標籤 

  $("id").val()    讀取該標籤裡面的值

  // 鏈式編程開火車式編程    可以對一個 elem 進行多種方法一次順序操作  元素還是原來的這個元素

  事件傳播

  ???????????????????????????????????

  jQuary對象

      不需要考慮瀏覽器兼容性問題

      jQuary 的本質是一個數組 包含着所有的獲得的元素

      如果需要將jQuary 還原成原生的JS對象  - 下標運算可以得到   或  get(index)      

  $(item)

  1. $(function())  綁定該函數是頁面加載完成後進行的回調函數

  2. $(selector)   傳入的參數是一個選擇器  通過選擇器獲得對應的元素,並將其處理成 3. $(elem)   傳入的參數是一個原生 JS 對象   event.target / this 

              將原生 JS 對象轉變為 jQyary 對象  jQuary 有更多的屬性和方法

  4. $(tag)  傳入的是標籤   創建標籤對應的元素 並處理成 jQuary 對象

  查找元素

  - 選擇器

    - * / element / #id / .class / selector1, selector2

    - ancestor descendant / parent>child / previous+next / previous~siblings 

  - 篩選器

    - 基本篩選器：:not(selector) / :first / :last / :even / :odd / :eq(index) / :gt(index) / :lt(index) / :animated / :focus

    - 內容篩選器：:contains('…') / :empty / :parent / :has(selector)

    - 可見性篩選器：:hidden / :visible

    - 子節點篩選器：:nth-child(expr) / :first-child / :last-child / :only-child

    - 屬性篩選器：[attribute] / [attribute='value'] / [attribute!='value'] / [attribute^='value'] / [attribute$='value'] / [attribute|='value'] / [attribute~='value']

  - 表單：:input / :text / :password / :radio / :checkbox / :submit / :image / :reset / :button / :file / :selected / :enabled / :disabled / :checked

  執行操作

  - 內容操作

    - 獲取/修改內容：html() / text() / replaceWith() / remove()

    - 獲取/設置元素：before() / after() / prepend() / append() / remove() / clone() / unwrap() / detach() / empty() / add()

    - 獲取/修改屬性：attr() / removeAttr() / addClass() / removeClass() / css()

    - 獲取/設置表單值：val()

  - 查找操作

    - 查找方法：find() /  parent() / children() / siblings() / next() / nextAll() / prev() / prevAll()

    - 篩選器：filter() / not() / has() / is() / contains()

    - 索引編號：eq()

  - 尺寸和位置

    - 尺寸相關：height() / width() / innerHeight() / innerWidth() / outerWidth() / outerHeight()

    - 位置相關：offset() / position() / scrollLeft() / scrollTop()

  - 特效和動畫

    - 基本動畫：show() / hide() / toggle()

    - 消失出現：fadeIn() / fadeOut() / fadeTo() / fadeToggle()

    - 滑動效果：slideDown() / slideUp() / slideToggle()

    - 自定義：delay() / stop() / animate()

  - 事件

    - 文檔加載：ready() / load()

    - 用戶交互：on() / off()

css() 和 attr() 區別

但css()是用來操縱元素style{}的，而attr()是用來操作元素固有的屬性的，且attr()的權重比css()要大，它會覆蓋css()的樣式。

  

  $("#txt").css("display","none")

  $("#txt").css({"display":"none","width":"5px",....})   $("#txt").attr("title","zz")

3.Ajax異步IO技術

異步獲取服務器數據   

( 異步 -不阻塞 ) (同步 - 阻塞  排隊等待)

服務器取得相應數據 (Json/XML) , 就可以對頁面進行局部刷新,就可以在不中斷用戶體驗的前提下刷新頁面

瀑布式加載

JavaScript 發送HTTP請求默認只支持同源策略, 只能取自己網站的數據

如果要跨域取數據 是需要對方提供數據的服務器是支持的

如果對方支持模式   JSONP 

服務器設置 Cross-Origin: * ; 支持跨域取數據

代碼示例, 原生, 無JQuary

  

      <body>

          <p id="mm"></p>

          <button id="loadBtn">加載</button>

          <script src="js/jquery1.12.min.js"></script>

          <script>            

              //JavaScript 發送HTTP請求默認只支持同源策略

              $(function() {

                  $('#loadBtn').on('click', function() {

                      var url = 'https://api.tianapi.com/meinv/?key=30cb00f0e0f6c2f605ba1ebca41c3282&num=2';

                      $.getJSON(url, function(obj) {

                          for(var i = 0; i < obj.newslist.length; i += 1) {

                              // $ 就是 jQuary 

                              $('#mm').append(

                                  $('<img>').attr('src', obj.newslist[i].picUrl).attr('width', '300')

                                  );

                          };

                      });

                  });

              });

          </script>

      </body>

jQuery-Ajax代碼

  

  1. $.getJSON(url, function() {}) // 請求成功執行function函數

  2. $.Ajax({

      'url':'',

      'type': '' ,

      'data': {

          'key': '',

          'num': ''

      },

      'dataType': 'json',  //默認為json  也可以使用 XML 其他格式

      'success': function(){}  //請求成功 進行的函數

      'error': function(){}  //失拜  執行的函數

      

  })

  Ajax 加載圖片  瀑布式

  <!DOCTYPE html>

  <html>

      <head>

          <meta charset="UTF-8">

          <title></title>

      </head>

      <body>

          <p id="mm"></p>

          <button id="loadBtn">加載</button>

          <script src="js/jquery1.12.min.js"></script>

          <script>

              $(function() {

                  $('#loadBtn').on('click', function() {

                      var url = 'https://api.tianapi.com/meinv/?key=30cb00f0e0f6c2f605ba1ebca41c3282&num=2';

                      $.getJSON(url, function(obj) {   // obj 通過url 是得到的 jQuery對象數組

                          for(var i = 0; i < obj.newslist.length; i += 1) {

                              $('#mm').append(

                                  $('<img>').attr('src', obj.newslist[i].picUrl).attr('width', '300')

                                  );

                          };

                      });

                  });

              });

          </script>

      </body>

  </html>

覺得可用，就經常來吧！Javascript技巧 腳本寶典 歡迎評論哦！ js技巧，巧奪天工，精雕玉琢。小寶典獻醜了！

脚本宝典总结

以上是脚本宝典为你收集整理的js實例教程-JavaScript常用的命令, JQuery框架, Ajax異步IO技術等知識詳解全部内容，希望文章能够帮你解决js實例教程-JavaScript常用的命令, JQuery框架, Ajax異步IO技術等知識詳解所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。