jQuery _$ 工具方法

$ 工具方法

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

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

3、 $.type(obj): 判断是否是数组

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

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

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

  // 1、 $.each()： 遍历数组或对象中的数据
​
  var arr = [1, 2, 34, 45, 21, 67, 677, 12];
​
  $.each(arr, function(index, content) {
​
•    console.log(index, content);
​
  })
​
  var obj = {
​
•    name: 'Tom',
​
•    age: 20,
​
•    setName: (function(name) {
​
•      this.name = name
​
•    })
​
  }
​
  $.each(obj, function(key, value) {
​
•      console.log(key, value); //属性名  属性值
​
•    })
​
•    // 2、 $.trim(): 去除字符串两边空格
​
  var str = "  hello   "
​
  console.log("---" + $.trim(str) + "---");
​
  // 3、 $.type(obj): 判断是否是数组
​
  console.log($.type($));
​
  // 4、 $.isArray(obj): 判断是否是数组
​
  console.log($.isArray($)); //false
​
  //5、$.isFunction(obj):判断是否是函数
​
  console.log($.isFunction($)); //true
​
  //6、 $.parseJSON(json)： 解析json字符串转换为js对象 / 数组
var json = '{"name":"Tom","age":12}'     //json对象
//json对象 ===>  js对象
    console.log(JSON.parse(json));
    console.log($.parseJSON(json));

JSON: 有特定格式，特定语法规则的字符串

JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。

jQuery Dom 操作

   // attr()------------------操作属性值为非布尔值的属性
    // prop()-------------------操作属性值为布尔值的属性
​
    // 1、 读取第一个div的title属性
    console.log($("div:first").attr('title'))
        // 2、 给所有的div设置name属性（ value为atguigu）
    $("div").attr("name", "atguigu")
        // 3、 移除所有div的title属性
    $("div").removeAttr('title')
        // 4、 给所有的div设置class = "abc"
    $("div").attr("class", "abc");
    //5、给所有div添加class="Class"
    $("div").addClass("Class")
        // 6、 移除所有div的guiguClass的class
    $("div").removeClass("guiguClass");
    // 7、 得到最后一个li的标签体文本
    console.log($("li:last").html());
    // 8、 设置第一个li的标签体 "<h1>mmmmmmmmmm</h1>"
    $("li:first").html('<h1>mmmmmmmmmm</h1>');
    // 9、 得到输入框的value值
    console.log($(":text").val());
    // 10、 将输入框的值设为atguigu
    $(":text").val("atguigu"); //设置   读写合一
    // 11、 点击 全选 按钮实现全选
    $("button:first").click(function() {
            $(":checkbox").prop("checked", true)
        })
        // 12、 点击 全不选 按钮实现全不选
    $("button:last").click(function() {
        $(":checkbox").prop("checked", false);
    })

属性的分类：

【1】固有属性（id , name , class , style）

【2】返回值是Boolean的属性 : checked , selected , disabled

【3】自定义属性，用户自己定义的属性

1.操作元素属性

【1】获取属性

attr("属性名") ----返回属性值或者undefined

prop("属性名")

区别：

1、如果是固有属性，attr（）和prop（）方法均可操作

2、如果是自定义属性，attr（）可操作，prop（）不可操作

3、如果返回值是Boolean类型的属性

若设置了属性：

attr（）返回具体的值

prop返回true

若未设置属性：

attr（）返回undefined

prop返回false

【2】设置属性

attr("属性名"，"属性值")

prop("属性名" ，"属性值")

【3】移除属性

removeAttr("属性名")

总结：若属性的类型是Boolean，则使用prop（）的方法，否则使用attr（）方法

2.操作元素样式

【1】attr( "class" ) ----------------获取元素的class属性值

【2】attr("class" ,"样式名“) ---------------设置元素的样式（原本的样式会被覆盖）

【3】addClass("样式名") ------------------添加样式 ( 在原来的样式基础上添加样式，原本的样式会保留，如果出现相同的样式，则以样式中后定义的为准。)

【4】css( ) -------------------------------------添加具体的样式（添加行内样式）

【5】css("具体样式名","样式值")   - ----设置单个样式 ​ css({"具体样式名":"样式值","具体样式名":"样式值"});---设置多个样式 ​

【6】removeClass("样式名") -----------移除样式

3.操作元素内容(重点)

【1】html( ) --------------获取元素内容，包括html标签（非表单元素）

【2】html("内容") --------设置元素的内容，包括html标签（非表单元素）

【3】text( ) -----------------获取元素的纯文本内容，不识别html标签（非表单元素）

【4】text("内容") --------设置元素的纯文本内容，不识别html标签（非表单元素）

【5】val（）---------------获取元素的值（表单元素）

【6】val（）--------------设置元素的值（表单元素）

常见的表单元素：

文本框 text 、密码框 password 、单选框radio、复选框checkbox、隐藏域hidden、文本域textarea、下拉框select

常见的非表单元素：

div 、span 、 h1~h6 、table、 tr、 td 、li 、p 等

4.创建元素

$('元素内容')

$('< p> this is a paragraph </ p>')

5.添加元素

 

【1】、前追加子元素 (prepend)

指定元素.prepend(内容) ; 在指定元素的内部的最前面追加内容，内容可以是字符串，html元素或者jQuery对象

$(内容).prependTo（指定元素）; 把内容增加到指定元素最前边，内容可以是字符串，html元素或者jQuery对象

【2】、后追加子元素(append)

指定元素.append(内容) ; 在指定元素的内部的最后面追加内容，内容可以是字符串，html元素或者jQuery对象

$(内容).appendTo（指定元素）; 把内容增加到指定元素最后边，内容可以是字符串，html元素或者jQuery对象

【3】、前追加同级元素(before)

before() 在指定元素的前面追加内容

【4】、后追加同级元素（after)

after() 在指定元素的后面追加内容