课堂jQuery笔记
一.Dom操作
1.append()末尾插入
$('.box').append($('<h1>Hello World1</h1>'));
2.prepend()头部插入
$('.box').prepend($('<h1 style="color:red">Hello World1</h1>'));
3.内容HTML/内容Text/值value
var x =$('h1').html()
console.log(x)
$('h1').text('你好'.fontcolor('red'))
$('h1').html('你好'.fontcolor('red'))
console.log($('input[type=password]').val())
$('input[type=text]').val('qiku123456789')
4.is() 判断元素
console.log($('.box').is('p'))
5 之前插入
$('img').before($('<h1>hello world1</h1>'))
$('<h1>hello world2</h1>').insertBefore($('img'))
6.之后插入
$('img').after($('<h1>hello world1</h1>'))
$('<h1>hello world2</h1>').insertAfter($('img'))
7 删除数据
remove 彻底删除 不保留 事件链接
detach 删除后 保留事件链接
empty 清空子节点
$('img').remove()
$('img').click(function(e){
console.log(this)
})
var x = $('img').detach()
console.log(x)
$('body').append(x)
$('.box').empty() //清空子节点
8 替换元素
$('img').replaceWith($('<h1>Hello</h1>'))
$('<h1>Hello</h1>').replaceAll($('img'))
9.克隆元素
var x = $('h1').clone()
$('body').append(x)
10 包装 方法
wrap 单独包装
wrapAll 将满足条件的都包在一起
$('p').wrap($('<font color="red"></font>'))
var x=$('p').wrapAll($('<font color="red"></font>'))
$('body').append(x.parent())
unwrap 去除父节点
$('font').unwrap()
wrapInner 内部包裹
$('p').wrapInner($('<font color="blue"></font>'))
二:属性操作
1.获得属性attr()
var x = $('img').attr('qk');
console.log(x)
var x = $('#c3').prop('checked'); // 获得计算的结果
var x = $('#c3').attr('checked');
console.log(x)
2.设置属性attr()
$('img').attr('height','300px')
$('img').attr({'height':'300px','width':'300px'})
3.删除属性
removeAttr()
removeProp()
$('img').removeAttr('qk')
$('img').removeProp('width')
三:样式操作
1设置样式属性
$('img').css('border','10px solid blue')
$('img').css({'border':'10px solid blue',"width":"100%",'box-sizing':'border-box'})
2.获得样式属性
var x =$('img').css('width')
console.log(x)
四:类的操作
1.类属性的添加
$(':header').addClass('active second')
2.类属性 的移除
$(":header").removeClass('active')
3.类属性的 切换
$(':header').toggleClass('active')
4.类属性的 判断
var x= $(':header').hasClass('second')
console.log(x)
5.位置关系
1.相对文档的偏移
var x = $('img').offset();
console.log(x)
2.相对文档的偏移 的设置
$('img').offset({'top':0,'left':0})
3.【相对父节点的偏移】 父节点添加定位,未添加相对于文档
var x = $('img').position();
console.log(x)
$('img').position({'top':0,'left':0})
4.元素的滑动条位置
console.log($(window).scrollTop())
$(window).scrollTop(500)
$('.box').scrollTop(100)
5.元素的大小
console.log($('img').width()) // content
console.log($('img').innerWidth()) // content+padding
console.log($('img').outerWidth()) // content+padding+border
console.log($('img').outerWidth(true)) // content+padding+border+margin
6.Dom遍历
1.获得直接父节点
var x = $('img').parent();
console.log(x)
2.获得所有父节点
var x = $('img').parents();
console.log(x)
3.获得区间所有父节点
var x = $('img').parentsUntil($('html'));
console.log(x)
4.获得直接子节点
var x = $('.box').children()
console.log(x)
5.获得所有的后代节点
var x = $('.box').find('*')
console.log(x)
6.水平遍历
var x = $('#p2').siblings(); // 除自已以外的其他兄弟节点
console.log(x)
7.下一个相邻兄弟
$('#p2').next().css('backgroundColor','red')
8.后面所有相邻兄弟
$('#p2').nextAll().css('backgroundColor','red')
9.后面区间所有相邻兄弟
$('#p2').nextUntil($('.box2')).css('backgroundColor','red')
10.上一个相邻兄弟
$('#p2').prev().css('backgroundColor','red')
11.上面所有相邻兄弟
$('#p2').prevAll().css('backgroundColor', 'red')
12.上面区间所有相邻兄弟
$('#p2').prevUntil($('#p3')).css('backgroundColor','red')
13.选择第一个
console.log($('p').first())
14.选择最后一个
console.log($('p').last())
15.按索引找
console.log($('p').eq(1))
console.log($('p:eq(1)'))
16.过滤
console.log($('li').filter($('.active')))
console.log($('li').not($('.active')))
17.根据索引获得元素 get() eq()
var x = $('li').get(0)
console.log(x) // 返回Dom节点
var x = $('li').eq(0)
console.log(x) // 返回Jquery对象
18. Each() 遍历
var x =$('p').each(function(index,ele){
if($(ele).hasClass('active')){
$(ele).css('backgroundColor','red')
}
})
console.log(x)
7.事件
1.页面加载事件
$(document).ready(()=>{})
$(()=>{
// var x= $('img')
// console.log(x)
console.log('jquery ready')
})
window.onload=function(){
// var x = document.querySelector('img');
// console.log(x)
console.log('window onload')
}
2.页面加载
$(() => {
// $('img').click(()=>{
// console.log('鼠标单击A')
// })
// $('img').click(()=>{
// console.log('鼠标单击B')
// })
// $('img').dblclick(()=>{
// console.log('鼠标双击点击')
// })
// $('img').bind('click',(e)=>{
// console.log('bind点击事件A')
// })
// $('img').bind('click',B)
// function B(){
// console.log('bind点击事件B')
// }
// $('img').bind('click',(e)=>{
// console.log('bind点击事件C')
// })
// 【清除全部 方法】
// $('img').unbind('click')
// 【清除指定 方法】
// $('img').unbind('click',B)
// 【on绑定事件】
// $('img').on('click',(e)=>{
// console.log('on点击事件',e)
// })
// 【清除on事件】
// $('img').off('click')
})
8.模拟事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<!--
<img src="img/pic1.jpg" width="200">
<button>按钮</button>
-->
<input type="text" name="t1" id="t1" value="" />
<button type="button">按钮</button>
<script type="text/javascript">
// $('img').click(function() {
// console.log('鼠标点击了')
// $(this).attr('width', parseInt($(this).attr('width')) + 10)
// })
// $('img').bind('my', function(e,x='10px',y='solid',z='red') {
// $(this).css('border',`${x} ${y} ${z}`)
// })
// $('button').click(function() {
// // 模拟触发事件
// $('img').trigger('my',['5px','dashed','blue']).trigger('click')
// })
$('#t1').focus(function(){
console.log('获得焦点')
})
$('button').click(function() {
// 模拟触发事件
// $('#t1').trigger('focus')
// 模拟触发事件只执行方法,不执行默认事件
$('#t1').triggerHandler('focus')
})
</script>
</body>
</html>
9动画
// 停止动画,参数1停止所有
// $('.box').stop(true)
// 判断动画状态
// console.log($('.box').is(":animated"))
// 选择动画的元素
// $(':animated').stop(true)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.main {
width: 300px;
border: 1px solid red;
font-size: 0;
margin: 0 auto;
}
.main p {
text-align: center;
border: 1px solid blue;
font-size: 20px;
}
.main img {
display: none;
}
.box {
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<button class="bt1" type="button">显示隐藏</button>
<button class="bt2" type="button">淡入淡出</button>
<button class="bt3" type="button">划入划出</button>
<button class="bt4" type="button">自定义动画</button>
<button class="bt5" type="button">延迟动画</button>
<button class="bt6" type="button">红色盒子连续动画</button>
<button class="bt7" type="button">红色盒子停止</button>
<br>
<img src="img/pic1.jpg" width="300">
<div class="box">
</div>
<div class="main">
<p> 图片一</p>
<img src="img/pic2.jpg" width="300">
<p> 图片二</p>
<img src="img/pic3.jpg" width="300">
<p> 图片三</p>
<img src="img/pic4.jpg" width="300">
</div>
<script type="text/javascript">
$('.bt1').click(function() {
$('img:first').toggle()
})
let flag = true;
$('.bt2').click(function() {
// $('img').fadeToggle(1000)
if (flag) {
$('img:first').fadeTo(1000, 0.5)
} else {
$('img:first').fadeTo(1000, 1)
}
flag = !flag;
})
$('.bt3').click(function() {
$('img:first').slideToggle()
})
$('.bt4').click(function() {
if (flag) {
$('img:first').animate({
'width': '0',
'height': $('img:first').prop('height')
}, 1000, 'swing', function() {
console.log('动画结束了')
})
} else {
$('img:first').animate({
'width': '300',
'height': $('img:first').prop('height')
}, 1000, 'swing', function() {
console.log('动画结束了')
})
}
flag = !flag;
});
$('.bt5').click(function() {
// $('img:first').delay(2000).slideToggle()
$('img:first').delay(2000).animate({
'width': '0',
'height': $('img:first').prop('height')
}, 1000, 'swing', function() {
console.log('动画结束了')
})
})
$('.bt6').click(function() {
$('.box').animate({
'width': 300,
}, 1000).delay(1000).animate({
'height': 300
}, 1000).delay(1000).animate({
'width': 100
}, 1000).delay(1000).animate({
'height': 100
}, 1000)
})
$('.bt7').click(function(){
// 停止动画,参数1停止所有
// $('.box').stop(true)
// 判断动画状态
// console.log($('.box').is(":animated"))
// 选择动画的元素
// $(':animated').stop(true)
})
$('.main>p').on('click', function() {
$(this).next().slideDown().siblings().filter($('img')).slideUp();
})
</script>
</body>
</html>
10jquery_ajax
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<script type="text/javascript">
// 【原生js 】
// https://yesno.wtf/api
//1. 创建一个 XMLHttpRequest()
// var req = new XMLHttpRequest();
//2. 打开链接
// req.open('GET','https://apis.map.qq.com/ws/location/v1/ip?key=3BFBZ-ZKD3X-LW54A-ZT76D-E7AHO-4RBD5&output=jsonp',true)
//3. 监听
// req.onreadystatechange=function(){
// if(req.readyState==4 && req.status==200){
// console.log(req.response)
// }
// }
//4. 发送
// req.send()
// 【原生js fetch 】
// fetch('https://apis.map.qq.com/ws/location/v1/ip?key=3BFBZ-ZKD3X-LW54A-ZT76D-E7AHO-4RBD5&output=jsonp').then((res) => {
// return res.text()
// }).then((data) => {
// console.log(data)
// })
// 【Jquery 的 Ajax】
function AJAX(path) {
$.ajax({
type: 'get',
url: path,
dataType: 'jsonp',
success: function(data) {
console.log('请求成功!', data)
},
error: function() {
console.log('请求失败!')
}
})
}
AJAX('https://apis.map.qq.com/ws/location/v1/ip?key=3BFBZ-ZKD3X-LW54A-ZT76D-E7AHO-4RBD5&output=jsonp');
AJAX('http://wis.qq.com/weather/common?weather_type=observe|forecast_24h|air&source=pc&province=河南&city=郑州')
</script>
</body>
</html>