jQuery工具和方法

jQuery方法和工具

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

  var obj = {

    name: 'Tom',

    setName: function (name) {

      this.name = name

    }

  }

  $.each(obj, function (key, value) {

    console.log(key, value)

  })

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

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

  console.log($.type($)) // 'function'

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

  console.log($.isArray($('body')), $.isArray([])) // false true

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

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

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

  var json = '{"name":"Tom", "age":12}'  // json对象: {}

  // json对象===>JS对象

  console.log($.parseJSON(json))

  json = '[{"name":"Tom", "age":12}, {"name":"JACK", "age":13}]' // json数组: []

  // json数组===>JS数组

  console.log($.parseJSON(json))

  /*

  JSON.parse(jsonString)   json字符串--->js对象/数组

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

7：

    var $contents = $("#container>div")

       var currentindex = 0//当前显示的下标

        $("#tab>li").click(function () {

            //隐藏当前显示的DIV

           $contents[currentindex].style.display="none"

          //显示当前被点击元素

          //获取当前被点击元素的index

         var index=$(this).index()

           $contents[index].style.display="block"

          //更新当前显示的下标

          currentindex=index

        })

8：

   1. 操作任意属性

   attr()//对于属性值为非boolean的操作

   removeAttr()

   prop()//对于属性值为boolean的操作例如 checked

2. 操作class属性

   addClass()

   removeClass()

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

   html()

   val()

////////////////练习代码如下

     //1. 读取第一个div的title属性

  // console.log($('div:first').attr('title')) // one

  //2. 给所有的div设置name属性(value为atguigu)

  // $('div').attr('name', 'atguigu')

  //3. 移除所有div的title属性

  // $('div').removeAttr('title')

  //4. 给所有的div设置class='guiguClass'

  //$('div').attr('class', 'guiguClass')

  //5. 给所有的div添加class='abc'

  //$('div').addClass('abc')

  //6. 移除所有div的guiguClass的class

  //$('div').removeClass('guiguClass')

  //7. 得到最后一个li的标签体文本

  //console.log($('li:last').html())

  //8. 设置第一个li的标签体为"<h1>mmmmmmmmm</h1>"

  //$('li:first').html('<h1>mmmmmmmmm</h1>')

  //9. 得到输入框中的value值

  //console.log($(':text').val()) // 读取

  //10. 将输入框的值设置为atguigu

  //$(':text').val('atguigu') // 设置      读写合一

  //11. 点击'全选'按钮实现全选

    // attr(): 操作属性值为非布尔值的属性

    // prop(): 专门操作属性值为布尔值的属性

  var $checkboxs = $(':checkbox')

  $('button:first').click(function () {

    $checkboxs.prop('checked', true)

  })

  //12. 点击'全不选'按钮实现全不选

  $('button:last').click(function () {

    $checkboxs.prop('checked', false)

  })

13 设置css样式/读取css值

  css() $(“div”).css()//读写合一

$("p:eq(1)").css({

             "color" :"#ff0011",

             "background" : "blue",

             "width" : 300,

             "height"  :30

           })