元素。 + +- [$(".test").hide()](https://www.w3school.com.cn/tiy/t.asp?f=jquery_hide_class) + + 演示 jQuery hide() 函数，隐藏所有 class="test" 的元素。 + +## jQuery 语法 + +jQuery 语法是为 HTML 元素的选取编制的，可以对元素执行某些操作。 + +基础语法是：*$(selector).action()* + +- 美元符号定义 jQuery +- 选择符（selector）“查询”和“查找” HTML 元素 +- jQuery 的 action() 执行对元素的操作 + +### 示例 + +$(this).hide() - 隐藏当前元素 + +$("p").hide() - 隐藏所有段落 + +$(".test").hide() - 隐藏所有 class="test" 的所有元素 + +$("#test").hide() - 隐藏所有 id="test" 的元素 + +**提示：**jQuery 使用的语法是 XPath 与 CSS 选择器语法的组合。在本教程接下来的章节，您将学习到更多有关选择器的语法。 + +关键点是学习 jQuery 选择器是如何准确地选取您希望应用效果的元素。 + +jQuery 元素选择器和属性选择器允许您通过标签名、属性名或内容对 HTML 元素进行选择。 + +选择器允许您对 HTML 元素组或单个元素进行操作。 + +在 HTML DOM 术语中： + +选择器允许您对 DOM 元素组或单个 DOM 节点进行操作。 + +## jQuery 元素选择器 + +jQuery 使用 CSS 选择器来选取 HTML 元素。 + +$("p") 选取
元素。 + +$("p.intro") 选取所有 class="intro" 的
元素。 + +$("p#demo") 选取所有 id="demo" 的
元素。 + +## jQuery 事件函数 + +jQuery 事件处理方法是 jQuery 中的核心函数。 + +事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。术语由事件“触发”（或“激发”）经常会被使用。 + +通常会把 jQuery 代码放到
部分的事件处理方法中： + +### 实例 + +```html + + + + + + + +This is a paragraph.
+This is another paragraph.
+ + + + +``` + +## 单独文件中的函数 + +如果您的网站包含许多页面，并且您希望您的 jQuery 函数易于维护，那么请把您的 jQuery 函数放到独立的 .js 文件中。 + +当我们在教程中演示 jQuery 时，会将函数直接添加到 部分中。不过，把它们放到一个单独的文件中会更好，就像这样（通过 src 属性来引用文件）： + +### 实例 + +``` + + + + +``` + +## jQuery 名称冲突 + +jQuery 使用 $ 符号作为 jQuery 的简介方式。 + +某些其他 JavaScript 库中的函数（比如 Prototype）同样使用 $ 符号。 + +jQuery 使用名为 noConflict() 的方法来解决该问题。 + +*var jq=jQuery.noConflict()*，帮助您使用自己的名称（比如 jq）来代替 $ 符号。 + +## axios 封装 + +~~~js +/** + * 目标：封装_简易axios函数_获取省份列表_ + * 1. 定义myAxios函数，接收配置对象，返回Promise对象 + * 2. 发起XHR请求，默认请求方法为GET + * 3. 调用成功/失败的处理程序 + * 4. 使用myAxios函数，获取省份列表展示 +*/ +// 1. 定义myAxios函数，接收配置对象，返回Promise对象 +function myAxios(config) { + return new Promise((resolve, reject) => { + // 2. 发起XHR请求，默认请求方法为GET + const xhr = new XMLHttpRequest() + xhr.open(config.method || 'GET', config.url) + xhr.addEventListener('loadend', () => { + // 3. 调用成功/失败的处理程序 + if (xhr.status >= 200 && xhr.status < 300) { + resolve(JSON.parse(xhr.response)) + } else { + reject(new Error(xhr.response)) + } + }) + xhr.send() + }) +} + +// 4. 使用myAxios函数，获取省份列表展示 +myAxios({ + url: 'http://hmajax.itheima.net/api/province' +}).then(result => { + console.log(result) + document.querySelector('.my-p').innerHTML = result.list.join('