jQuery-jQuery函数&对象

jQuery

jQuery的基本使用

• 引用JQuery库

  • 本地引入

    <script type="text/javascript" src="js/jquery-1.10.1.js></script>

  • 远程引入

    <script src="https//cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>

• 绑定文档加载完成监听

  • $(function(){ 代码.... });

---

jQuery的2把利器

• 1.jQuery核心函数 :直接可用
  • console.log($===jQuery); //true
  • jQuery库向外直接暴露的就是$/jQuery
  • 引入jQuery库后, 直接使用$即可
    • 当函数用: $(xxx)
    • 当对象用: $.xxx()
• 2.jQuery核心对象 ：执行jQuery函数得到
  • console.log($() instanceof Object); //true
  • 得到jQuery对象: 执行jQuery函数返回的就是jQuery对象
  • 使用jQuery对象: $obj.xxx()

---

jQuery函数的使用

• 作为一般函数调用: $(param)

  • 1). 参数为函数 : 当DOM加载完成后，执行此回调函数

  • 2). 参数为选择器字符串: 查找所有匹配的标签, 并将它们封装成jQuery对象

  • 3). 参数为DOM对象: 将dom对象封装成jQuery对象

    • <button id="btn">测试</button>
      

      $(function () {
        $('#btn').click(function(){
          // alert(this.innerHTML);页面弹出   测试
          alert($(this).html());  //页面弹出   测试
        });
      });
      

  • 4). 参数为html标签字符串 (用得少): 创建标签对象并封装成jQuery对象

    • 如： 把<input type="text" name="msg2"/><br/>插入到div中

      $('<input type="text" name="msg2"/><br/>').appendTo('div');

• 作为对象使用: $.xxx()

  • 1). $.each() : 隐式遍历数组

    • var arr=[3,4,8];
      $.each(arr,function (index,item) {
        console.log(index,item);
      });
      

  • 2). $.trim() : 去除两端的空格

    • var str=' my xuefeng dear  ';
      // console.log(str.trim());
      console.log($.trim(str));//my xuefeng dear
      

---

jQuery对象的使用

• 1.jQuery对象是一个包含所有匹配的任意多个dom元素的伪数组对象

• 2.基本行为

              <button>测试一</button>
              <button>测试二</button>
              <button id="btn3">测试三</button>
              <button>测试四</button>
  

  • size()/length: 包含的DOM元素个数

    • /*
         需求:
         需求1. 统计一共有多少个按钮
         */
      var buttons=$('button');
      console.log(buttons.size(),buttons.length);//4 4
      

  • [index]/get(index): 得到对应位置的DOM元素

    • /*
       需求2. 取出第2个button的文本
       */
        console.log(buttons[1].innerHTML,buttons.get(1).innerHTML);//测试三 测试三
      

  • each(): 遍历包含的所有DOM元素

    • /*
       需求3. 输出所有button标签的文本
       */
        buttons.each(function(index,domEle){
          console.log(index,domEle.innerHTML);
        });//测试一 测试二 测试三 测试四
        buttons.each(function(){
          console.log(this.innerHTML);
        });//测试一 测试二 测试三 测试四
      

  • index(): 得到在所在兄弟元素中的下标

    • /*
       需求4. 输出'测试三'按钮是所有按钮中的第几个
       */
      console.log($('#btn3').index());//2  下标从0开始
      

• 伪数组

  • Object对象

  • length属性

  • 数值下标属性

  • 没有数组特别的方法： forEach() push() pop()

    console.log(buttons instanceof Array);//false
    var weiArr={};
    weiArr[0] ='xuefeng';
    weiArr[1]='daofeng';
    weiArr.length=2;//必须声明长度为2  否则值显示不出来
    for (var i=0;i<weiArr.length;i++){
      var obj=weiArr[i]; //0 xuefeng
      console.log(i,obj); //1 daofeng
    }
    console.log(weiArr.forEach,buttons.forEach);//undefined undefined