jquery学习笔记

• jQuery简介:
  jQuery 是一个快速、小且功能丰富的 JavaScript 库
  jquery是一个JavaScript库,就是一个js文件,里面封装了大量的函数,最终返回对象

• jQuery特点:
  写的少,做的多(Write Less,Do More)
  链式编程,隐式迭代,插件丰富,开源,免费

• jQuery核心对象：jQuery()或者$() 函数也是对象。jQuery.属性 或者jQuery.方法() 或者 $.属性 $.方法()
  jQuery中的核心对象就是jQuery(简称为:$),实际上jQuery就是$,他们都是函数(函数也是对象)。

• jQuery核心函数: $(param)

1. 作为函数调用
   参数是字符串(选择器)： $('字符串') -> $('button') 查找并匹配标签,封装成jQuery对象
   参数是DOM对象: $(DOM对象)-> $(document)将DOM对象封装成jQuery独享
   参数是html标签: $(html标签) -> $(<p></p>) 创建标签对象,封装成jQuery对象
   切记:jQuery中this是DOM对象,如果要使用则需要转jQuery对象

2. 作为对象使用
   $.each()：遍历数组及对象的
   $.trim() ： 去除字符串两端空格的

• HTML部分

<style type="text/css">
  div {
    width: 300px;
    height: 200px;
    border: 1px solid red;
  }
</style>
<button id="btn">按钮</button>
<div id="dv"></div>

// 点击按钮显示当前按钮中的文字内容,同时创建一个文本框,
// jQuery对象.html()--->相当于DOM中innerHTML

$(function(){
  // 获取按钮,调用点击事件
  $('#btn').click(function(){
    console.log($(this).html());
    // 主动向目标元素插入inuput标签
    $('<input type="text" />').appendTo($('#dv'));
    // 目标元素被动插入inuput标签
    $('#dv').append($('<input type="text" />'));
  })
})

// 遍历数组,jQuery中的对象下的方法来进行遍历
let arr=[1,2,3,3,4]
$.each(arr,function(index,item){
  console.log(index,item);
})

// 遍历对象
var obj = {
  name: '小明'
}
$.each(obj, function (key, value) {
  console.log(key, value)
})

// 干掉字符串两边的空格
console.log('===='+$.trim(' 我的天 ')+'======');