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