迪丽热-BUG

jquery快速入门

视频介绍

练习基本模版

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>练习模版</title>
	<!-- 学习环境版本 -->
	<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
</head>
<body>
	....
</body>
<script>
	// 在此练习
	// 在此练习
	// 在此练习
</script>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

jquery的入口函数

方法一

$(document).ready(function (){
  ....
})
1
2
3

方法二

jQuery(document).ready(function (){ ... })
1

方法三

$(function(){ ... });
1

方法四

jQuery(function(){ ... })
1

冲突问题

解决$符使用问题，在多个框架库时产生的冲突

方法一：

var 自定义 = jQuery.noConflict();//自定义符代替$使用
1

方法二：

直接把$替换成jQuery使用

核心函数

<script>
	  $(function(){
  		let $a = $('.a'); //获取class标签元素
  		let $b = $('#b'); //获取Id元素
  
let $c = $("<h1>hello world</h1>"); //接收字符串代码片段
$b.append(c);	//插入
  
  var h1 = dcoument.getElementByTagName('h1')[0];
  console.log(h1);
  var $h1 = $(h1);
  console.log($h1);
		})
</script>
<div class="a"></div>
<div id="b"></div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

什么是jquery对象

jquery对象是一个伪数组

什么是伪数组？

有0-lenght-1的属性，并且有length属性

实例方法和静态方法

<script>
	$(function(){
  //静态方法
  a.staticMethod = function(){
    ....
  };
  a.staticeMethod();
  //实例方法
  b.prototype.instanceMethod = function(){
    ...
  };
  
  var c = new b();
    a.instanceMethod();
  
})
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

jQuery的each()方法

在原生JavaScript中的forEach只能便利数组而不能便利伪数组，而jQuery的$each()便是可以两者都能便利

JavaScript

<script>
  var arry = [1,2,3,4,5,6];
	arry.forEach(function(value,index){
    console.log(value,index)
  })
 //1 0
 //2 1
 //3 2
 //4 3
 //5 4

	var arry1 = {0:1,1:2,2:3,3:4,length:4};
	arry1.forEach(function(value,index){
    console.log(value,index)
  })
//VM476:1 Uncaught TypeError: arryw.forEach is not a function at <anonymous>:1:7
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

JQuery

<script>
  var arry = [1,2,3,4,5,6];
	$.each(arry,function(index,value){
    console.log(index,value);
  })
//0 1
//1 2
//2 3
//3 4
//4 5
//5 6
var arry1 = {0:1,1:2,2:3,3:4,length:4};
	$.each(arry1,function(index,value){
    console.log(index,value);
  })
//0 1
//1 2
//2 3
//3 4
//length 5
	
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

jQuery的map()方法

map() 把每个元素通过函数传递到当前匹配集合中，生成包含返回值的新的 jQuery 对象。

Javascript 使用方法

var arry = [1,2,3,4,5];
arry.map((value,index)=>{console.log(value,index)});
//循环数组
//没有返回新数组
//返回数组内容undefined;

//对比forEach
arry.forEach((value,index)=>{console.log(value,index)});
//循环数组
//返回值undefined;
arry.map((value,index)=>{return value+index});
(5) [1, 3, 5, 7, 9]
arry.forEach((value,index)=>{return value+index});
undefined
1
2
3
4
5
6
7
8
9
10
11
12
13
14

jQuery 使用方法

var arry = [1,2,3,4,5];
$.map(arry,function(index,value){console.log(index,value)});
//循环数组
//返回一个空数组
$.map(arry,function(index,value){return index+value});
(5) [1, 3, 5, 7, 9]
//可以操作数组

$.each(arry,function(index,value){return index+value});
(5) [1, 2, 3, 4, 5]
//无法操作数组
1
2
3
4
5
6
7
8
9
10
11

$.holdReady()暂停

在有些情况下我们不想让这个方法那么快运行时就可以使用holdReady这个方法了，它必须放在要阻止运行的函数的前面才会有效果。每一个holdReady都会有一个对应的解开方法

<script>
$(function(){
  $.holdReady(true)
  $('#btn').click(function(e){
    alert('hi')
  });
  $('#btn1').click(function(e){
    $.holdReady(false)
  })
})
</script>
<body>
	<button id="btn">测试</button>
	<button id="btn1">解开</button>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

fadeIn()与fadeOut()淡出淡入

这个是jquery的动态效果函数需要配合使用才有效果

<body>
 	<p>hello</p>
	<button id="a">fadein</button>
	<button id="b">fadeout</button>
</body>
<script>
	$(document).ready(function(){
    $('#a').click(function(){
      $('p').fadeIn();
    });
    $('#b').click(function(){
      $('p').fadeOut();
    })
  })    
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

设置属性和读取属性值

Document.getElementsByTagName(tagName)

返回带有指定标签名的对象

Const.setAttribute('type','content')

设置标签属性

Const.getAttribute(type)

获取标签属性

实例

<body>
<span>hello world</span>
</body>
<script type="text/javascript">
$(document).ready(function(){
	var span = document.getElementsByTagName('span')[0];
	span.setAttribute('name','rangar');
	console.log(span.getAttribute('name'))
})
</script>
1
2
3
4
5
6
7
8
9
10

attr方法

可以返回文档中属性值，也可以为标签设置属性值。传一个参数时是返回值，传两个参数时是设置属性值

注意：无论找到多少个元素，都只会返回第一个元素指定的属性节点值

<body>
	<p class="test">hello world</P>  
</body>
<script>
	$(document).ready(function(){
	  var test1 = $('p').attr('class');
		$('p').attr('class','yes');
    console.log($('p'));
  })    
</script>
1
2
3
4
5
6
7
8
9
10

removeAttr(name)方法

注意它会删除所有找到的标签属性值

$('name').removeAttr('name');
$('name').removeAttr('name class');//删除多个
1
2

prop()方法

当该方法用于返回属性值时，则返回第一个匹配元素的值。

当该方法用于设置属性值时，则为匹配元素集合设置一个或多个属性/值对。

<p id='666' class='hhh'></p>
<p id='999' class='lll'></p>

$(document).ready(function(){
  $('p').eq(0).prop('demo','hello');
  $('p').eq(1).prop('demo','world');
  $('p').prop('demo');//hello
})
1
2
3
4
5
6
7
8

removeProp()方法

和removeAttr效果一致，用于删除属性并且是删除查找到元素标签的所有的标签属性进行删除；可以使用空格进行多个属性删除

$('p').removeProp('demo');
$('p').removeProp('demo class');//删除多个
1
2

输入点击换图片小练习

要求

  1. 使用props 或 attr
  2. 输入图片链接进行换图

答案

<body>
	<input type="text" id="urlInput" value="123">
	<button id="btn">点击</button>
	<img src="http://imgs.xueui.cn/wp-content/uploads/2019/03/420x270-220x150.png">
</body>
<script>
	$(document).ready(function(){
		$('#btn').click(function(){
			var text = $('#urlInput').val();
			$('img').attr('src',text);
		})
	})
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13

补充：可以尝试通过输入进行修改图片宽度/高度

Size()已经被弃用使用length()代替

.size()方法从jQuery 1.8开始被废弃。使用.length属性代替。

.size()方法功能上等价于.length属性。但是**.length 属性是首选的**，因为它没有函数调用时的额外开销。

<body>
	<button>输出 li 元素的数目</button>
	<ul>
	<li>Coffee</li>
	<li>Milk</li>
	<li>Soda</li>
	</ul>

</body>
<script>
$(document).ready(function(){
  $("button").click(function(){
    alert($("li").length);
  });
});
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

css()方法

获取匹配元素集合中的第一个元素的样式属性的值 或 设置每个匹配元素的一个或多个CSS属性

获取多个时请使用['width','color','...']的形式获取

<body>
	<div style="background-color: red">red</div>
	<div style="background-color: green">green</div>
	<div style="background-color: yellowgreen">yellow</div>
	<div></div>
</body>
<script type="text/javascript">
	$(document).ready(function(){
		$('div').click(function(){
			 var color = $(this).css( "background-color" );
			 $('div:last').html(`<span>${color}</span>`);
			 $('div:first').css("background-color","orange")
			 var moreStyle = $(this).css( ["background-color","width"] );
			 console.log(moreStyle)
		})
	})
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

更多操作CSS的属性

<body>
	<ul>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
	</ul>
	<div></div>
</body>
<script type="text/javascript">

//$('document').height(value)获取元素的高度也可以设置元素高度
//$('document').innerHeight()获取元素高度包括padding不接受传参
//$('document').innerWidth()获取元素宽度包括padding不接受传参
//$('document').offset()获取元素坐标，如果获取集合标签它只获取第一个元素的坐标
//$('document').scrollTop();获取匹配的元素集合中第一个元素的当前垂直滚动条的位置或设置每个匹配元素的垂直滚动条位置


	$(document).ready(function(){
		$('li').click(function(){
			let height = $('li').height();
			let innerHeight = $('li').innerHeight();
			let innerWidth = $('li').innerWidth();
			let outerHeight = $('li:last').outerHeight();
			let outerWidth = $('li').outerWidth();
			let offset = $('li').offset();
		})
		let scroll = $('li:last').scrollTop();
			console.log(scroll)
	})
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

jquery的事件绑定

第一种

click是其中一个方法还有mousedown,mouseenter,mouseleave等等

$('name').click(function(){
  ....
})

function test(){
  ....
}
$('name').click(test);
1
2
3
4
5
6
7
8

**on()**事件

我们还可以使用on来进行事件绑定，委托绑定等作用,除此外on还可以做自定义事件通过trigger()来调用

$('name').on('click',function(){
  ....
})
1
2
3

自定义事件

$('button').on('myClick',function(){
  ...
})
$('button').trigger('myClick')
1
2
3
4

委托绑定

通过上级元素给未出现的事件绑定事件叫委托绑定

$('ul').on('click','li',function(){
			alert('ok')
})
1
2
3

为元素绑定同一事件

$('ul li').on('click',function(){
			alert('ok')
 })
1
2
3

命名空间

删除绑定到相应元素的Click事件处理程序，而不会干扰其他绑定在该元素上的“click（点击）” 事件。命名空间类似CSS类，因为它们是不分层次的;只需要有一个名字相匹配即可

$('name').on('click.test1',function(){
  ....
})
$('name').on('click.test2',function(){
  ....
})
1
2
3
4
5
6

面试题：同一命名的事件通过trigger调用会起作用，同一功能的也会，不带命名空间的也会被触发

委托绑定【官网例子】

$("#dataTable tbody").on("click", "tr", function(event){
  alert($(this).text());
});
1
2
3

bind()

为一个元素绑定一个事件处理程序。

$('name').bind('click',function(){
	...
})
1
2
3

为多个事件类型进行绑定

$('name').bind('mouseenter mouseleave',function(){
  ...
})
1
2
3
$('name').bind({
  click:function(){
  	...  
  },
  mouseenter:function(){
    ...
  }
})
1
2
3
4
5
6
7
8

jquery的事件解绑

off()

移除一个事件处理函数。

$('name').off()//移除所有事件
1

阻止事件冒泡和取消默认行为

在一般情况下我们希望在哪里点击就在哪里触发而不会触发到别的事件时，我们就需要阻止事件的冒泡行为

通过返回false来取消默认行为和阻止事件冒泡

$('name').click(function(){
	...
	return false
})
1
2
3
4

通过event.stopPropagation()防止事件冒泡

注意，这不会阻止同一个元素上的其它事件处理函数的运行。

$('name').click(function(event){
	...
	event.stopPropagation()
})
1
2
3
4

通过event.preventDefault

如果调用这个方法默认行为就不会触发

$('a').click(function(event){
	event.preventDefault();
	alert('不跳转页面')
})
1
2
3
4

Trigger ()和triggerhandler()的区别

trigger是自动触发事件但是也会触发默认事件如果要阻止默认行为就要返回false来阻止默认行为，triggerhandler的话是不会触发到默认行为的

面试题：a标签使用了trigger为什么不会自动跳转

<a>go go go</a>
$('a').trigger();//自动触发但是不会跳转
<a><span>go go go</span></a>
$('span').trigger();//通过冒泡来触发默认事件
1
2
3
4

a标签是特殊的需要在里面添加一层标记通过冒泡来触发默认事件

鼠标移入移除方法对比

.mouseenter() 鼠标进入触发事件 （不支持冒泡）

​ — .mouseout() （支持冒泡）

.mouseleave() 鼠标离开事件（支持冒泡）

​ — .mouseover() （不支持冒泡）

同时监听进入进出的有.hover() 接收两个函数

$('name').hover(
	function(){
  	...//进入  
  },
  funciton(){
  	...//离开
  }
)
1
2
3
4
5
6
7
8

Bootstrap快速使用 →