1. jQuery基础扩展
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<style type="text/css">
.c1{
color: red;
}
.c2{
background-color: yellow;
font-size: 20px;
}
</style>
</head>
<body>
<!--=========1.节点操作===========-->
<div id="box1" style="background-color: yellowgreen;">
<p id="p1">我是段落</p>
</div>
<!--========2.属性操作==========-->
<div id="box2">
<h1 class="c1" id="h1">我是标题0</h1>
<div id="div1">
<h1 class="c1">我是标题1</h1>
</div>
<div id="div2"></div>
<input class="c1" type="text" name="" id="" value="" />
</div>
<!--========3.事件绑定=========-->
<button>暂停</button>
<div id="box3">
<input type="button" name="" id="" value="按钮1" />
<input type="button" name="" id="" value="按钮2" />
</div>
<script type="text/javascript">
//1.创建节点(标签)
/*
1)语法:
$(HTML代码) - 返回标签对应的jQuery对象
例如: $("<p id='p1'>我是一个段落</p>")
*/
aNode = $("<a href='https://www.baidu.com'>百度一下</a>")
//2.添加节点
//1)jq节点1.append(jq节点2) - 在节点1中的最后添加节点2
$('#box1').append(aNode)
$('#box1').append($('<img src="img/luffy.jpg"/>'))
//2)节点1.prepend(节点2) - 在节点1的最前面插入节点2
$('#box1').prepend($('<h1>我是标题1</h1>'))
//3)节点1.before(节点2) - 在节点1的前面插入节点2
$('#p1').before($('<p>我是段落0</p>'))
//4)节点1.after(节点2) - 在节点1的后面插入节点2
$('#p1').after($('<p>我是段落2</p>'))
//3.删除标签
//1)jq对象.remove() - 删除指定节点
$('#box1 p').remove()
//2)jq对象.empty() - 清空指定节点
$('#box1').empty()
//$('#box1 *').remove() # '#box1 *' 选中id是box1中所有的后代
//2.=============属性操作===============
//1)标签内容属性: innerHTML、innerText、value
//a.html方法(相当于innerHTML)
//节点.html() - 获取节点内容
//节点.html(值) - 给节点内容赋值
//b.text()方法(相当于innerText)
console.log($('#box2 #div1').html())
$('#box2 #div1').html('<a href="https://www.baidu.com">我是超链接</a>')
//c.val()方法(相当于value)
$('#box2 input').val('小明')
//2)普通属性
//节点.attr(属性名) - 获取指定节点指定属性的值
//节点.attr(属性名,值) - 修改指定节点直接属性的值
console.log($('#box2 input').attr('type'))
$('#box2 input').attr('type', 'password')
//3)class属性
//节点.addClass(值) - 添加class属性值
$('#h1').addClass('c2')
//节点.removeClass(值) - 移除指定的class值
$('#h1').removeClass('c1')
//3.==========样式属性=============
//1)获取样式属性的值
//节点.css(样式属性名)
console.log($('#h1').css('color'))
//2)修改样式属性的值
//节点.css(样式属性名,值)
$('#h1').css('color', 'deeppink')
$('#h1').css('font-size', '30px')
//节点.css(对象) - 同时设置多种样式
$('#h1').css({
'width':'300px',
'color':'blue',
'text-decoration': 'underline'
})
console.log($('#h1'))
//4.============事件绑定============
//方法一：直接绑定
//节点.on(事件名,函数) - (和js中的addEventLinsenner功能一样)
//注意: this是js对象，evt是jQuery对象
$('button').on('click', function(evt){
console.log(this)
console.log(evt)
//1）this是js对象
//====js代码
// if(this.innerText == '暂停'){
// this.innerText = '播放'
// }else{
// this.innerText = '暂停'
// }
//====jQuery代码
if($(this).text() == '暂停'){
$(this).text('播放')
}else{
$(this).text('暂停')
}
// 2)evt是事件对象不是节点对象，所以获取属性的时候以对象获取属性的方式来获取
console.log(evt.clientX, evt.clientY)
})
//方式二:
//节点.on(事件名,选择器,函数) - 给指定节点绑定指定事件，
// 并且让节点中选择器对应的子标签对事件做出反应
//错误示范:新添加的标签没有绑定上对应的事件
/*
$('#box3 input').on('click', function(){
console.log(this)
alert(this.value+'被点击')
})
$('#box3').append($('<input type="button" value="按钮3"/>'))
*/
//#box3 选择器
$('#box3').on('click','input', function(){
console.log(this)
alert(this.value+'被点击')
})
$('#box3').append($('<input type="button" value="按钮3"/>'))
</script>
</body>
</html>
2. Ajax请求
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery.min.js"></script>
</head>
<body>
<script type="text/javascript">
//1.什么是Ajax
//Ajax就是异步js，专门用来提供异步网络请求操作
/*
$.ajax({
type:请求方式(get/post),
url:请求地址,
data:请求参数,
async:是否异步,
dataType:返回的数据类型
success:请求成功后调用的函数,函数的参数就是请求结果
})
*/
/*
$.ajax({
type:"get",
url:"https://www.apiopen.top/satinApi",
data:{type:1,page:1},
async:true,
dataType:'json',
success:function(result){
console.log(typeof(result))
console.log(result)
}
});*/
$.ajax({
type:"get",
url:"http://rap2api.taobao.org/app/mock/177073/getShoppingCartList",
async:true,
dataType:'json',
success:function(result){
console.log(typeof(result))
console.log(result)
}
});
</script>
</body>
</html>
3. 周公解梦
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery.min.js"></script>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#box1{
height: 250px;
/*background-color: lightblue;*/
border-bottom: 1px solid rgb(150,150,150);
position: relative;
}
/*盒子*/
#box1 div{
position: absolute;
bottom: 5px;
width: 100%;
text-align: center;
}
/*输入框*/
#box1 input{
border: 0;
border-bottom: 1px dotted rgb(200,200,200);
width: 300px;
height: 60px;
font-size: 25px;
text-align: center;
vertical-align: bottom;
}
#box1 input:focus{
outline: 0;
}
/*按钮*/
#box1 button{
width: 100px;
height: 40px;
background-color: orangered;
color: white;
font-size: 20px;
vertical-align: bottom;
}
#box2 p{
/*background-color: yellow;*/
width: 400px;
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>
<div id="box1">
<div id="">
<input type="" name="" id="" value="" />
<button>查询</button>
</div>
</div>
<div id="box2">
<p></p>
</div>
<script type="text/javascript">
//===查询事件
$('#box1 button').on('click', function(evt){
//1.获取输入框中的内容
const value = $('#box1 input').val()
//2.网络请求
$.ajax({
type:"get",
url:"http://api.tianapi.com/txapi/dream/",
data:{
key:'772a81a51ae5c780251b1f98ea431b84',
word:value
},
async:true,
success:function(result){
let message = result['newslist'][0]['result']
//console.log('===:',message)
$('#box2 p').html(message)
}
});
})
</script>
</body>
</html>
