jQuery 进阶

一、常用核心函数
（1） $(selector)
选择器，可以用于选择页面中的标签对象，等价于jQuery()；查看源代码

    // Expose jQuery and $ identifiers, even in AMD
    // (#7102#comment:10, https://github.com/jquery/jquery/pull/557)
    // and CommonJS for browser emulators (#13566)
    if (!noGlobal) {
        window.jQuery = window.$ = jQuery;
    }

<script src="./js/jquery-2.2.4.js"></script>
<script>
  // $() 等价于 jQuery()
  console.log(   $("#box")        )
  console.log(   jQuery("#box")   )
</script>

（2） each()
Query`选择了页面标签对象之后，可以针对选择的标签进行遍历处理，包含隐式迭代和显式迭代两种情况

// each() 隐式和显式迭代
const $ps = $("p")
// 设置样式:隐式迭代
// 尽管我们没有编写循环语法，但是jQuery底层对选择器选择的标签
// 进行了循环遍历完成了样式处理；
// 不由开发人员编写循环，而是`jQuery`自身循环处理的过程：隐式迭代
// $ps.css("border-bottom", "solid 2px orangered")
// 设置样式：显示迭代
for (let i = 0; i < $ps.size(); i++) {
  console.log(getRandColor())
  $ps.eq(i).css("border-bottom", "solid 2px " + getRandColor())
}
// jQuery提供了一个可以直接遍历选择器标签的函数each()
// $ps.each(function (index, ele) {
$ps.each( (index, ele) => {
  $(ele).css("border-bottom", "solid 2px " + getRandColor())
})
// jQuery提供了一个通用的迭代函数
// $.each($ps, function (index, ele) {
$.each($ps, (index, ele) => {
  $(ele).css("border-bottom", "solid 2px " + getRandColor())
})
function getRandColor() {
  return "#" + Math.random().toString(16).substr(2, 6)
}

（3） 插件封装
jQuery本身虽然提供了大量插件，但是项目中的需求千变万化的，不可能满足所有情况；jQuery提供了扩展自己功能函数的方法，让开发人员可以制作JQuery插件

• jQuery.fn.extend()：函数级插件
• jQuery.extend()：应用级插件

/** 自定义插件 */
// 函数插件
jQuery.fn.extend({
  trim: function () {
    console.log(this.text().trim(), " 插件中的this")
    return this.text().trim()
  }
})
// 应用插件
jQuery.extend({
  globalTrim: function (value) {
    return value.toString().trim()
  }
})

二、jQuery Ajax*
回顾原生js异步请求

const _http = new XMLHttpRequest()
_http.open("GET", "http://www.example.com")
_http.send()
_http.onreadystatechange = function() {
  if(_http.readyState === 4 && _http.status === 200) {
    // 获取数据
    const txt = _http.responseText
    // DOM...
  }
}

jQuery封装了原生JS提供了异步请求操作

// 通用函数
$.ajax({
  url: "http://www.baidu.com",
  methods: "GET",
  data: {参数数据},
  success: function(res) {
    console.log(res, "服务器返回的数据")
  },
  error: function(err) {
    console.log("请求失败")
  }
})

// GET请求
$.get('http://www.baidu.com', {参数}, function(res) => {
      console.log(res, "返回的数据")
 })

// POST请求
$.post('http://www.baidu.com', {参数}, function(res) => {
       console.log(res, "请求到的数据")
})