jQuery和ajax案例练习
jQuery和ajax案例练习
- 1.使用jquery修改div元素的背景色(随意颜色)
- 2.使用jquery修改div的子元素p的内容为"我是子元素"
- 3.使用jquery修改第二个p元素的背景色为"orange"
- 4.使用jQuery添加文本的方式将“添加的文本”追加到p标签的后方
- 5.删除列表元素中最后一个li元素里的内容
- 6.使用ajax方法对网址：http://www.liulongbin.top:3006/api/getbooks 发送请求；并使用循环的方式将作者展示在id为box1的标签里面
- 7.实现清空所有效果重置按钮
根据jQuery和ajax的学习，现有如下需求:
1.使用jquery修改div元素的背景色(随意颜色)
2.使用jquery修改div的子元素p的内容为"我是子元素"
3.使用jquery修改第二个p元素的背景色为"orange"
4.使用jQuery添加文本的方式将“添加的文本”追加到p标签的后方
5.删除列表元素中最后一个li元素里的内容
6.使用ajax方法对网址：http://www.liulongbin.top:3006/api/getbooks 发送请求；并使用循环的方式将作者展示在id为box1的标签里面
基本代码如下
7.实现清空所有效果重置按钮
关关雎鸠，在河之洲。
窈窕淑女，君子好逑。
参差荇菜，左右流之。
窈窕淑女，寤寐求之。
求之不得，寤寐思服。
悠哉悠哉，辗转反侧。
- 《西游记》
- 《红楼梦》
- 《水浒传》
- 《三国演义》
- 《金瓶梅》
网页格式如下
1.使用jquery修改div元素的背景色(随意颜色)
实现代码如下
通过创建变量button1选择第一个按钮，创建一个div变量选中所有的div标签，再创建一个点击事件再点击按钮后修改div标签的样式将背景颜色修改。
实现效果如下：
2.使用jquery修改div的子元素p的内容为"我是子元素"
这题我们可以使用JQuery中的选择集转移操作。
选择集转移就是以选择的标签为参照，然后获取转移后的标签。示例如下：
- $(‘#box’).prev(); 表示选择id是box元素的上一个的同级元素
- $(‘#box’).prevAll(); 表示选择id是box元素的上面所有的同级元素
- $(‘#box’).next(); 表示选择id是box元素的下一个的同级元素
- $(‘#box’).nextAll(); 表示选择id是box元素的下面所有的同级元素
- $(‘#box’).parent(); 表示选择id是box元素的父元素
- $(‘#box’).children(); 表示选择id是box元素的所有子元素
- $(‘#box’).siblings(); 表示选择id是box元素的其它同级元素
- $(‘#box’).find(‘.myClass’); 表示选择id是box元素的class等于myClass的元素
实现代码如下
通过创建变量button1选择第一个按钮，创建一个div变量选中所有的div标签，再创建一个点击事件再点击按钮后修改div标签下的所有子元素，并选中子元素p标签的内容修改为.html()中的内容。
实现效果如下：
3.使用jquery修改第二个p元素的背景色为"orange"
这里有两种方式选择div下的第几个p元素
方法1：可以利用:nth-child()选择器来选择div下的第几个p元素。
:nth-child(n) 选择器匹配属于其父元素的第 N 个子元素，不论元素的类型。
n 可以是数字、关键词或公式。
示例代码如下：
方法2：通过使用JQuery的eq(索引)方法，表示选取指定索引的标签
示例代码如下：
实现效果如下：
4.使用jQuery添加文本的方式将“添加的文本”追加到p标签的后方
通过JQuery中给指定元素追加html内容使用: append方法
示例代码如下：
通过选中button4标签和p标签，然后通过点击button按钮后给p标签后添加内容。
实现效果如下：
5.删除列表元素中最后一个li元素里的内容
可以通过jQuery的last()和html()方法来实现。last()方法返回匹配元素集合中的最后一个元素，html()方法用于获取或设置元素的HTML内容。
示例代码如下：
实现效果如下：
6.使用ajax方法对网址：http://www.liulongbin.top:3006/api/getbooks 发送请求；并使用循环的方式将作者展示在id为box1的标签里面
首先查看目标网址中内容，内容如下
可以使用 jQuery 中的 $.ajax() 方法来发送 AJAX 请求，并使用 for 循环或 jQuery 中的 $.each() 方法来遍历作者列表并将其添加到指定的 HTML 元素中。
示例代码如下：
实现效果如下：
如果对js中的遍历不是很了解可以查看
链接: javascript中的each遍历
如果对ajax传值不是很清楚的话可以查看
链接: Ajax学习笔记
链接: 数据请求之ajax详解
7.实现清空所有效果重置按钮
这里我实现的方法是通过点击按钮后刷新页面达到重置页面的效果。还有一个方法是将每个按钮前的初始状态保存下来，点击按钮后变成初始状态。但这个方法没有实现成功。所以目前认为理论可行。
示例代码如下：