课堂jQuery笔记

课堂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>