【JQuery—前端快速入门】JQuery 操作元素
JQuery 操作元素
1. 获取/修改元素内容
三个简单的获取元素的方法：
这三个方法即可以获取元素的内容，又可以设置元素的内容.
有参数时，就进行元素的值设置，没有参数时，就进行元素内容的获取.
接下来，我们需要操作页面元素；
| 获取页面元素 |
我们写出如上代码，保存后，打开浏览器页面，按F12打开调试界面：
发现 console 什么都没有显示，这是因为没有触发 click() 方法，我们需要点击 id="id_01"的标签在页面中的内容，也就是页面中的 div 小盒子：
此时就能触发 click() 方法，执行 function() 中的操作，也就是在控制台打印 id = “id01” 的内容，我们也能直观地观察到 text() 和 html() 这两个获取元素的方法的区别；
如果我们获取的是表单元素的值，那么使用 text() 或者 html() 并不能获取到表单元素对应的值：
我们可以看到，再点击输入框后，console 并没有打印 id = “input” 标签对应的 value；
要想获取表单元素中的 value ，我们需要用 val() 方法：
| 修改页面元素 |
如果 text() ，html()，val() 没有传参，就是获取标签的值，如果有传参，就是修改调用该方法的元素的值：
保存代码，打开页面，观察效果：
说明：
-
点击第一次，触发 click 方法，console 打印 div 调用 text() 和 html() 的内容，并且把 div 中的内容赋值为"我是点击后的内容"；
-
点击第二次，打印的就是 div 被赋值后的内容，同时重复赋值；
text 修改元素时，不会解析内容中的标签，而 html() 修改元素时，会先解析内容中的标签，再把内容进行修改，根据实际需求选择合适的方法即可：
修改表单元素的值，就需要调用 val()：
可以看到，虽然 val() 确实修改了元素的值，但是却并没有解析赋值的标签；
2. 获取/设置元素属性
JQuery attr() 方法用于获取属性值；
| 示例一：使用 attr() 获取超链接标签中的网址 |
说明：代码中使用 JQuery 的标签选择器，选择 a 标签，并且通过调用 attr() 方法，来获取 a 标签的 href ；
| 示例二：使用 attr() 设置超链接标签中的网址 |
我们可以发现，如果对 attr() 方法传一个参数，表示获取标签中的属性的值；如果传两个参数，就是修改标签中的属性的值；
3. 获取/返回 css 属性
css() 方法设置或返回被选元素的一个或多个样式属性；
| 示例一：使用 css() 获取标签中的样式 |
说明：通过 JQuery 标签选择器，选择 div 标签，通过调用 css() 方法来获取 div 标签里， style 属性中的字体大小样式；
| 示例二：使用 css() 修改标签中的样式 |
和 attr() 方法同理，对 css() 传一个参数是获取样式，传两个参数则是修改样式；
4. 添加元素
添加 HTML 内容
append()：在被选元素的结尾插入内容prepend()：在被选元素的开头插入内容after()：在被选元素之后插入内容before()：在被选元素之前插入内容
有序列表快捷键：
我们写出上面的代码，保存后打开页面：
5. 删除元素
删除元素和内容，一般使用以下两个 jQuery 方法:
remove()：删除被选元素(及其子元素)empty()：删除被选元素的子元素。
说明：如果我们调用 remove 方法，会将选择的标签，及其里面的内容全部清除；
说明：调用 empty() 方法，会清空选中标签中的所有内容，但是会保留该标签；