您的位置:首页 > Web前端 > JQuery

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.绑定事件

  1. jQuery节点对象.on(事件名, 函数) - 直接给指定标签绑定事件
  2. 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>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: