十七.什么是jQuery
<!--1.什么是jQuery
jQuery就是JavaScript的一个第三方库，主要针对标签操作进行封装(包括节点操作,属性操作,样式操作,事件等等)
目的是为了让js写起来更快更方便
2.怎么写jQuery代码
a.通过script标签导入jQuery文件
b.在jQuery中所有的内容都是封装到jQuery对象中，jQuery对象可以用'$'代替
3.节点操作
window.onload - 当网络中的内容全部加载成功后触发的事件(如果有网络图片，会等图片加载成功)
$(函数) - 函数中的函数体会等标签全部添加成功后执行
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--导入jQuery本地文件-->
<script type="text/javascript" src="js/jquery.min.js"></script>
<!--企业开发的时候，通过cdn加速，去服务器直接导入jQuery文件-->
<!--<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>-->
<script type="text/javascript">
//1.等待加载完成
// window.onload = function(){
//
// }
//等待页面中所有的标签添加成功，就会触发
// $(document).ready(function(){
// console.log(document.getElementsByTagName('p')[0])
// })
//简写版
$(function(){
console.log(document.getElementsByTagName('p')[0])
//2.获取节点操作(选择器)
//a.选择器直接选中相应的标签
//$(选择器) - 选择器是在css中怎么写这儿就怎么写
//$('标签选择器') - 选择网页中所有的指定标签，返回的是jQuery对象，不是数组
//注意：如果选择器同时选中了多个，返回值和选中一个的时候的类型是一样的。
// 可以通过结果直接对选中的所有标签一起操作
var divNodes = $('div')
console.log('==========',divNodes)
divNodes.css('color','red')
var div11Node = $('#div11')
console.log(div11Node)
console.log($('.cdiv1'))
console.log($('a,p'))
console.log($('#div2 a'))
//父子选择器
console.log($('#div2>a')) //和后代选择器效果一样
console.log($('p+a')) //获取紧跟着p标签的a标签
console.log($('#p1~*')) //获取和id是p1的标签的后面的所有同级的标签
console.log($('div:first')) //第一个div标签
console.log($('p:last')) //最后一个p标签
console.log($('div *:first-child')) //找到所有div标签中的第一个子标签
//3.创建标签
//$('HTML标签语法')，例如：$('<div style="color:red">我是div</div>')
var imgNode = $('<img src="img/01.jpg"/>')
var divNode = $('<div style="background-color: yellow;width: 100px;height: 200px;"></div>')
//4.添加标签
/*
* 父标签.append(子标签) - 在父标签的最后添加子标签
* 父标签.prepend(子标签) - 在父标签的最前添加子标签
*/
$('body').append(imgNode)
$('body').prepend(divNode)
$('h1').before($('<h1 style="color: pink;">我是标题0</h1>'))
$('h1').after($('<h2 style="color: blue;">我是标题2</h2>'))
//5.删除标签
//标签.empty() - 清空指定标签
//标签.remove() - 删除指定标签
$('#div2').empty()
$('h1').remove()
//6.拷贝和替换(见手册)
})
</script>
</head>
<body>
<div id="">
你好
</div>
<p id="p0">我是段落0</p>
<a href="">百度0</a>
<div id="div1" class="cdiv1">
<p id="p1">我是段落</p>
<a href="">百度1</a>
<div id="div11">
我是div11
</div>
<h1>我是标题1</h1>
<a href="">百度11</a>
</div>
<div id="div2">
<a href="">百度2</a>
我是div2
<p id="p2">我是段落2</p>
</div>
</body>
</html>
十八.jQuery属性操作和样式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
//1.普通属性的获取和修改 - 除了innerHTML,innerText和value
//标签.attr(属性名) - 获取指定的属性值
//标签.attr(属性名,值) - 修改/添加属性
var text1 = $('img:gt(1)').attr('src') //获取属性的值的时候只获取被选中标签中的第一个
console.log(text1)
console.log($('a').attr('href'))
$('img').attr('title','图片1')//修改和添加会针对所有选中的标签
//2.标签内容属性
//双标签.html()
//双标签.text()
//单标签.val()
//注意:上面的函数不传参就是获取值，传参就是修改值
console.log($('p').html()) //全完整代码
console.log($('p').text()) //只取文字
console.log($('input').val()) //单标签中的val值
$('p').html('我是新的段落')
$('input').val('请输入账号')
//3.class属性 - HTML中一个标签可以有多个class值，多个值用空格隔开
//标签.addClas(class值) - 给目标签添加class值
//标签.removeClass(class值) - 移出标签中指定的class值
$('div').addClass('w')
$('#div1').removeClass('c')
//4.样式属性
//a.获取属性值
//标签.css(样式属性名)-获取样式属性值
var height = $('p').css('height')
console.log(height)
//b.修改和添加
//标签.css(样式属性名,值) - 修改属性值
$('p').css('background-color','red')
//标签.css({属性名:值,属性名2:值2...}) - 同时设置多个属性
$('p').css({
"color":"yellow",
"font-size":"30px"
})
// var pNode = document.getElementsByTagName('p')[0]
// pNode.style.height = '500px'
// console.log('高度:',pNode.style.height)
// console.log('宽度:',pNode.style.width)
//5.事件
//标签.on(事件名,回调函数) - 给标签绑定指定的事件(和js中的addEventLinsenner一样)
//事件名不需要on
var ddf = true
$('button:first').on('mouseover',function(){
console.log(this)
//注意：this - js对象,可以直接只有js的属性和方法
//$(this) - jQuery对象，可以使用jQuery对象的属性和方法
//$(js对象) - 将js对象转换成jQuery对象
//this.innerText = '进入!'
if(ddf){
$(this).text('进入~')
ddf = false
}
else{
$(this).text('修改')
ddf = true
}
})
//b.父标签.on(事件名,选择器,回调函数) - 在父标签上添加事件，传递给选择器对应的子标签
//选择器 - 前面标签的后代标签(子标签/子标签的子标签)
//事件是由子标签影响的 前面父标签点不了
$('#v01').on('click','.v011 .v0111',function(){
console.log(this)
})
})
</script>
<style type="text/css">
.b{
background-color: green;
}
.c{
color: red;
}
.h{
height: 100px;
}
.w{
width: 200px;
/*background-color: skyblue;*/
}
p{
height: 50px;
}
#v01,#v02{
width: 800px;
height: 200px;
background-color: orange;
}
#v02{
background-color: gold;
}
.v011{
width: 100px;
height: 100px;
background-color: saddlebrown;
margin-right: 10px;
float: left;
}
</style>
</head>
<body>
<div id="v01" class="">
<div id="v011" class="v011">
div1
<div class="v0111" style="width: 50px;height: 50px;background-color: grey;">
</div>
</div>
<div id="v012" class="v011">
div2
</div>
<div id="v013" class="v011">
div3
</div>
</div>
<div id="v02"></div>
<button>修改</button>
<div id="div1" class="b c">
div1
</div>
<div id="" class="c h">
div2
</div>
<div id="" class="b h">
div3
</div>
<p style="width: 300px;">我是段落<a href="">哈哈</a></p>
<a href="http://www.baidu.com">我是超链接</a>
<img src="img/02.jpg"/ id="img1">
<input type="text" id="" value="请输入..." />
<img src="img/03.jpg"/>
<img src="img/04.jpg"/>
<input type="text" id="" value="" />
</body>
</html>
十九.jQuery的动态添加和删除
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery.min.js"></script>
<style type="text/css">
.fruit{
width: 150px;
height: 50px;
background-color: violet;
margin-bottom: 10px;
text-align: center;
line-height: 50px;
position: relative;
}
.fruit font{
position: absolute;
right: 10px;
color: white;
}
</style>
</head>
<body>
<div id="top">
</div>
<!--添加默认显示的结果-->
<script type="text/javascript">
var fruitArray = ['苹果','菠萝','西瓜','火龙果']
for(var x in fruitArray){
//去水果名
var fruitName = fruitArray[x]
//创建标检对象
var fruitNode = $("<div class='ruit'>"+fruitName+"</div>")
fruitNode.append($('<font>x</font>'))
$('#top').append(fruitNode)
}
</script>
<div id="bottom">
<input type="text" placeholder="水果"/>
<button>添加</button>
</div>
<!--添加新水果-->
<script type="text/javascript">
$('#bottom button').on('click',function(){
//获取输入框中的内容
var newName = $('#bottom input').val()
//创建新标签
var newNode = $('<div class="fruit"></div>').text(newName)
newNode.append($('<font>x</font>'))
//添加
$('#top').prepend(newNode)
})
//删除水果
$('#top').on('click','font',function(){
$(this).parent().remove()
})
//下面删除的是默认的 新添加的删不了
// $('#top font').on('click',function(){
// $(this).parent().remove()
// })
</script>
</body>
</html>
20.Ajax
<!--
Ajax(由jQuery封装的) - Asynchronous Javascript And XML(异步js+xml)
一般用来做网络数据请求，类似python中requests库(http请求)
语法：
1.get请求
$.get(url,data,回调函数,返回数据类型)
-url:请求地址(字符串)
-data:参数列表(对象)
-回调函数:请求成功后自动调用的函数(函数名,匿名函数)
-返回数据类型:请求到的数据的格式(字符串,例如:'json')
2.post请求
$.post(url,data,回调函数,返回数据类型)
-url:请求地址(字符串)
-data:参数列表(对象)
-回调函数:请求成功后自动调用的函数(函数名,匿名函数)
-返回数据类型:请求到的数据的格式(字符串,例如:'json')
3.ajax
$.ajax({
'url':请求地址,
'data':{参数名1:值1,参数名2:值2},
'type':'get'/'post',
'dataType':返回数据类型,
'success':function(结果){
请求成功后要做的事情
}
})
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery.min.js"></script>
</head>
<body>
<button>刷新</button><br />
<!--1.get请求-->
<script type="text/javascript">
//1.请求数据
function getData(){
var url = 'https://www.apiopen.top/satinApi'
$.get(url,{'type':'1','page':'1'},function(re){
//re就是请求结果
console.log(re)
var allData = re.data
for(var x in allData){
var data = allData[x]
// console.log(data)
var bimageuri = data.profile_image
var imgNode = $('<img style="width: 100px;height: 100px;"/>').attr('src',bimageuri)
$('body').append(imgNode)
}
})
}
//2.刷新
$('button').on('click',getData)
</script>
</body>
</html>
网友评论