一、常用核心函数
（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, "请求到的数据")
})
