Ajax网络请求——jQuery
2020-08-24 20:35
1801 查看
一、jQuery动态删除
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>动态添加</title> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js" type="text/javascript" charset="utf-8"></script> <script src="js/tools.js" type="text/javascript" charset="utf-8"></script> <!-- ==================样式================== --> <style type="text/css"> *{ margin: 0; padding: 0; } #box1{ margin-left: 60px; margin-top: 20px; } .fruits{ width: 250px; height: 50px; background-color: cadetblue; margin-top: 3px; line-height: 50px; position: relative; color: white; font-size: 20px; } .add-fruits{ background-color: sandybrown; } .fruits-name{ float: left; width: 100%; text-align: center; } .delete-btn{ position: absolute; right: 10px; /* 修改光标样式 */ cursor: pointer; } #box2{ margin-left: 60px; margin-top: 20px; } #input-name{ border: 0; outline: 0; border-bottom: 1px solid lightgrey; width: 250px; text-align: center; font-size: 20px; vertical-align: bottom; } #box2>button{ border: 0; outline: 0; color: white; background-color: orangered; font-size: 20px; width: 80px; height: 35px; } </style> </head> <body> <div id="box1"> <div class="fruits"> <span class="fruits-name">苹果</span> <span class="delete-btn">×</span> </div> <div class="fruits"> <span class="fruits-name">香蕉</span> <span class="delete-btn">×</span> </div> <div class="fruits"> <span class="fruits-name">葡萄</span> <span class="delete-btn">×</span> </div> <div class="fruits"> <span class="fruits-name">火龙果</span> <span class="delete-btn">×</span> </div> </div> <div id="box2"> <input type="text" name="" id="input-name" value="" /> <button type="button" onclick="addAction()">确定</button> </div> <script type="text/javascript"> // ================添加水果============ input = $('#input-name') function addAction(){ // 获取输入的水果 // var fruitsName = input.val() // input.val('') fruitsName = input[0].value input[0].value = '' if(!fruitsName){ fruitsName = prompt('请输入水果名') } // 创建标签 // 方法一: fruitsBoxHtml = `<div class="fruits" style="background-color:${randomColor(0.5)}"><span class="fruits-name">${fruitsName}</span><span class="delete-btn">×</span></div>` var fruitsBox = $(fruitsBoxHtml) $('#box1').prepend(fruitsBox) // 方法二: // var fruitsBoxHtml = `<div class="fruits" style="background-color:${randomColor(0.5)}"><span class="fruits-name">${fruitsName}</span></div>` // var deleteSpan = $('<span class="delete-btn">×</span>') // deleteSpan.on('click', deleteAction) // var fruitsBox = $(fruitsBoxHtml) // fruitsBox.append(deleteSpan) // $('#box1').prepend(fruitsBox) } // ====================删除水果================== $('#box1').on('click', '.delete-btn', function(){ $(this).parent().remove() }) // 方法二:默认添加的删除绑定 // $('.delete-btn').on('click', deleteAction) // function deleteAction(){ // this.parentElement.remove() // } </script> </body> </html>
二、jQuery属性操作
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script> <style type="text/css"> .c1{ color: red; } </style> </head> <body> <!-- ===============1.获取父子节点 ================= 节点对象.parent() - 获取父节点 节点对象.children() - 获取所有的子节点 --> <h1>1.获取节点</h1> <div id="div1"> <a href="">超链接1</a> <p id="p1">我是段落1</p> <p>我是段落2</p> <h2>我是标题2 <a href="">百度</a></h2> <a href="">超链接2</a> </div> <script type="text/javascript"> // 1)获取父节点 p1 = $('#p1') console.log(p1.parent()) // 2)获取所有的子节点 div1 = $('#div1') div1Children = div1.children() console.log(div1Children) // 获取div1中的第一个子标签 console.log($('#div1>*:first-child')) </script> <!-- ===============2.属性操作 ================= 1)标签内容 节点对象.text()/节点对象.text(值) 节点对象.html()/节点对象.html(值) 2)value属性 节点对象.val()/节点对象.val(值) 3)class属性操作 节点对象.addClass(class值) 节点对象.removeClass(class值) 4)样式 a.节点对象.css(css的属性名, css属性值) - 单独设置一个属性(属性名和值要和css保持一致) b.节点对象.css({ 属性名1: css属性值1, 属性名2: css属性值2, 属性名3: css属性值3 ... }) 注意:属性名是驼峰式的css属性名,属性值和css属性值一样 5)普通属性 节点对象.attr(属性名)/节点对象.attr(属性名,属性值) --> <h1>2.属性操作</h1> <p id="p3" class="c0">我是段落3</p> <p class="c0 c3" id="p4">我是段落4</p> <input type="" name="" id="name" value="张三" /> <img src="img/bear.png" title="熊"> <script type="text/javascript"> // 1)标签内容 p3 = $('#p3') console.log(p3.text(), p3.html()) p3.html('你好:<a href="">我是超链接3</a>') // 2)value属性 input = $('#name') console.log(input.val()) // 3)class属性操作 p3.addClass('c1') $('#p4').removeClass('c0') // 4)样式 $('#p4').css('font-size', '25px') $('#p4').css({ color: 'red', fontSize: '30px', backgroundColor: 'yellow' }) // 普通属性 imgTitle = $('img').attr('title') console.log(imgTitle) imgTitle = $('img').attr('src', 'img/hat.png') </script> </body> </html>
三、事件绑定
1.绑定事件
- jQuery节点对象.on(事件名, 函数) - 直接给指定标签绑定事件
- jQuery节点对象.on(事件名, 选择器, 函数) - 给指定标签中通过选择器选中的子标签绑定事件
父节点.on(事件名, 子节点选择器, 函数)
<h1>1.绑定事件的第二种方法</h1> <button type="button">按钮1</button> <p class="c1">我是段落2</p> <div id="div1"> <button type="button">按钮3</button> </div> <script type="text/javascript"> $('body').on('click', 'button', function(){ // alert('按钮被点击') }) $('body').on('click', '.c1', function(){ // alert('p标签被点击') }) $('#div1').on('click', 'button', function(){ // alert('内部被点击') }) </script>
2.第二种绑定方式的作用
<div id="div2"> <button type="button">div2-btn1</button> <button type="button">div2-btn2</button> </div> <br> <button type="button" onclick="addButton()">添加</button> <script type="text/javascript"> count = 1 function addButton(){ newBtn = $(`<button>新增按钮${count}</button>`) $('#div2').append(newBtn) count ++ } // 1)第一种绑定方式 // $('#div2>button').on('click', function(){ // alert(this.innerText) // }) // 2)第二种绑定方式 $('#div2').on('click', 'button', function(){ alert(this.innerText) }) </script>
四、表格效果
<div id="top"> <p>数据统计表</p> <table cellspacing="1" id="tb"> <tr id="first-tr"> <td>姓名</td> <td>性别</td> <td>年龄</td> <td>身高</td> <td>体重</td> </tr> </table> </div> <div id="bottom"> <button type="button" onclick="changeColor()">隔行换色</button> <button type="button" onclick="clearData()">清除数据</button> <button type="button" onclick="deleteRow()">删除单元格</button> <button type="button" onclick="hideTable()">隐藏表格</button> <button type="button" onclick="showTable()">显示表格</button> </div>
<script type="text/javascript"> // 1.创建表格 // 自调用函数:(匿名函数)(实参列表) (function(){ var row = 6 var col = 5 for (let r=0;r<row;r++) { var html = '' for(let c=1; c<=col;c++){ html += `<td>Item${c}</td>` } html = `<tr>${html}</tr>` var tr = $(html) $('#tb').append(tr) } })() // 2.隔行换色 function changeColor(){ $('#tb tr:even').addClass('row-0') $('#tb tr:odd').addClass('row-1') } // 3.清除数据 function clearData(){ $('tr:not(#first-tr)>td').text('') } // 4.删除行 function deleteRow(){ $('tr:not(#first-tr):last').remove() } // 5.隐藏表格 function hideTable(){ // $('#top').hide(1000) $('#top').slideUp() } function showTable(){ // $('#top').show(1000) $('#top').slideDown() } </script>
五、Ajax网络请求
1.什么是Ajax
AJAX(Asynchronous JavaScript and XML) - 异步js
2.怎么使用Ajax
$.ajax({
url: 数据接口,
type: 接口类型(GET/POST),
data: 参数对象(参数是发送请求的时候客户端传输给服务器的数据),
success: 函数(数据请求成功后会自动调用函数,函数的参数就是请求到的数据)
})
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script> <style type="text/css"> *{ margin: 0; pause: 0; } a{ float: left; width: 300px; } img{ width: 300px; } p{ text-align: center; } </style> </head> <body> <div id="box"> </div> <script type="text/javascript"> // 1. 请求数据 (function(){ $.ajax({ url:'http://api.tianapi.com/meinv/index', type:'GET', data:{ key: 'c9d408fefd8ed4081a9079d0d6165d43', num: 20 }, success: function(result){ // console.log(result) showData(result) } }) })() // 2.展示数据 function showData(data){ var allBeauty = data.newslist allBeauty.forEach(function(item){ var beatyBox = $(`<a href="${item.url}"><img src="${item.picUrl}"><p>${item.title}</p></a>`) $('#box').append(beatyBox) }) } </script> </body> </html>
相关文章推荐
- 使用jQuery全局事件ajaxStart为特定请求实现提示效果的代码
- 对jQuery ajax请求成功(失败)回调执行前的统一处理(兼容较老版本jQuery)
- JQuery的Ajax跨域请求的解决方案
- jQuery中的Ajax几种请求方法
- jQuery jsonp跨域请求
- [jQuery]ajax同步请求在方法内问题
- jQuery取消ajax请求的方法
- Jquery连续两次相同AJAX请求时,默认不执行本次;不同时终止上一次未完成的AJAX请求
- Jquery通过jsonp请求方式判断URL是否有效(URL有效性检测)
- 分别使用FlyJSONP和JQuery实现跨域的异步请求
- jQuery实现监控页面所有ajax请求的方法
- Jquery之AJAX COOKIES跨域请求 - JSONP实现方法
- TP3.2.3和jQuery跨域请求源码。。。
- jQuery实现ajax的嵌套请求案例分析
- 用jQuery.ajaxSetup实现对请求和响应数据的过滤
- 利用Jsonp实现跨域请求,spring MVC+JQuery
- jquery解析JSON数据,异步请求,快速准确处理
- 对比jQuery与vue+axios,两者发送ajax请求的方法和不同
- JQuery的Ajax跨域请求的解决方案
- jQuery jsonp跨域请求