jQuery-jQuery工具&属性&多TAB栏切换

jQuery

jQuery工具方法

• 1.$.each(): 遍历数组或对象中的数据

  • var obj={
      name:'Tom',
      setName:function (name) {
        this.name=name;
      }
    }
    $.each(obj,function(key,value){
      console.log(key,value);
    })//name Tom   setName  f(name){this.name=name;}
    

• 2.$.trim(): 去除字符串两边的空格

• 3.$.type(obj): 得到数据的类型

  • console.log($.type($));//function
    

• 4.$.isArray(obj): 判断是否是数组

  • console.log($.isArray($('body')),$.isArray([1,2]));//false true
    

• 5.$.isFunction(obj): 判断是否是函数

  • console.log($.isFunction($));//true
    

• 6.$.parseJSON(json) : 解析json字符串转换为js对象/数组

  • var json='{"name":"Tom","age":12}'//json对象:{}
    console.log($.parseJSON(json));//{name: "Tom", age: 12}
    json='[{"name":"Tom","age":12},{"name":"Jerry","age":10}]';
    console.log($.parseJSON(json));//0: {name: "Tom", age: 12}
                            		// 1: {name: "Jerry", age: 10}
                            		//  length:
                              		// __proto__: Array(0)
    

• /*
  JSON.parse(jsonString)   json字符串--->js对象/数组
  JSON.stringify(jsObj/jsArr)  js对象/数组--->json字符串
  */
  

---

多TAB点击切换

                <h2>多Tab点击切换</h2>
                <ul id="tab">
                  <li id="tab1" value="1">10元套餐</li>
                  <li id="tab2" value="2">30元套餐</li>
                  <li id="tab3" value="3">50元包月</li>
                </ul>
                <div id="container">
                  <div id="content1">
                    10元套餐详情：<br/>&nbsp;每月套餐内拨打100分钟，超出部分2毛/分钟
                  </div>
                  <div id="content2" style="display: none">
                    30元套餐详情：<br/>&nbsp;每月套餐内拨打300分钟，超出部分1.5毛/分钟
                  </div>
                  <div id="content3" style="display: none">
                    50元包月详情：<br/>&nbsp;每月无限量随心打
                  </div>
                </div>

​

方法一：

             var $contents=$('#container>div');
             //给3个li都加上监听
             $('#tab>li').click(function(){//隐式遍历
               //隐藏所有内容div
                $contents.css('display','none');
               //显示对应的内容div
               var index=$(this).index();
               //找到对应的内容div并显示
               $contents[index].style.display='block';
               //$($contents[index]).css('display','block');
             });

方法二：

                var currIndex=0;//当前显示的内容div下标
                var $contents=$('#container>div');
                //给3个li都加上监听
                $('#tab>li').click(function(){//隐式遍历
                  //隐藏当前已经显示的内容div
                  $contents[currIndex].style.display='none';
                  //显示对应的内容div
                  var index=$(this).index();
                  //找到对应的内容div并显示
                  $contents[index].style.display='block';
                  //$($contents[index]).css('display','block');
                  //更新下标
                  currIndex=index;
                });

---

属性

                <div id="div1" class="box" title="one">class为box的div1</div>
                <div id="div2" class="box" title="two">class为box的div2</div>
                <div id="div3">div3</div>
                <span class="box">class为box的span</span>
                <br/>
                <ul>
                  <li>AAAAA</li>
                  <li title="hello" class="box2">BBBBB</li>
                  <li class="box">CCCCC</li>
                  <li title="hello">DDDDDD</li>
                  <li title="two"><span>BBBBB</span></li>
                </ul>

                <input type="text" name="username" value="guiguClass"/>
                <br>
                <input type="checkbox">
                <input type="checkbox">
                <br>
                <button>选中</button>
                <button>不选中</button>

• 1.操作任意属性

  • attr()
    removeAttr()
    prop()

  • /*
     需求:
     1. 读取第一个div的title属性
     */
    console.log($('div:first').attr('title'));//one
    /*
     2. 给所有的div设置name属性(value为xuefeng)
     */
      $('div').attr('name','xuefeng');
    /*
     3. 移除所有div的title属性
     */
      $('div').removeAttr('title');
    /*
     4. 给所有的div设置class='xuefengClass'
     */
      $('div').attr('class','xuefengClass');//覆盖了
    

  • /*
     11. 点击'全选'按钮实现全选
     */
      //attr() 操作属性值为非布尔值的属性
      //prop() 操作属性值为布尔值的属性
      var $checkboxs=$(':checkbox');
      $('button:first').click(function () {
        $checkboxs.prop('checked',true);
      });
    /*
     12. 点击'全不选'按钮实现全不选
     */
    $('button:last').click(function () {
      $checkboxs.prop('checked',false)
    });
    

• 2.操作class属性

  • addClass()
    removeClass()

  • /*
     5. 给所有的div添加class='abc'
     */
      $('div').addClass('abc');
    /*
     6. 移除所有div的xuefengClass的class
     */
      $('div').removeClass('xuefengClass');
    

• 3.操作HTML代码/文本/值

  • html()
    val()

  • /*
     7. 得到最后一个li的标签体文本
     */
      console.log($('li:last').html());//<span>BBBBB</span>
    /*
     8. 设置第一个li的标签体为"<h1>mmmmmmmmm</h1>"
     */
      $('li:first').html('<h1>mmmmmmmmm</h1>');
    /*
     9. 得到输入框中的value值
     */
      console.log($(':text').val());//guiguClass读取
    /*
     10. 将输入框的值设置为xuefeng
     */
      $(':text').val('xuefeng');//设置