jQuery选择器

JQueryjquery.com什么是jQueryjQuery是一个快速，小巧，功能丰富的JavaScript库。它通过易于使用的API在大量浏览器中运行，使得HTML文档遍历和操作，事件处理，动画和Ajax变得更加简单。通过多功能性和可扩展性的结合，jQuery改变了数百万人编写JavaScript的方式。为什么要使用jQueryDOM API难用存在兼容性问题功能太少，不...

Frank.Yi

311人浏览 · 2019-05-01 14:15:53

Frank.Yi · 2019-05-01 14:15:53 发布

JQuery

jquery.com

什么是jQuery

jQuery是一个快速，小巧，功能丰富的JavaScript库。它通过易于使用的API在大量浏览器中运行，使得HTML文档遍历和操作，事件处理，动画和Ajax变得更加简单。通过多功能性和可扩展性的结合，jQuery改变了数百万人编写JavaScript的方式。

为什么要使用jQuery

DOM API

难用
存在兼容性问题
功能太少，不能与时俱进

jQuery

兼容性好
API友好
功能强大，与时俱进

什么时候使用jquery

DOM操作较多
简单的Ajax
需要多款浏览器兼容

什么时候不用jquery

页面交互简单
页面对流量又苛刻的要求
上级要求

jQueryAPI库存

jquery选择器详解

.eq(index),.get([index])

$('div').eq(3);结果集中的第四个jQuery对象

兄弟元素获取

.next([selector]),.prev([selector])

next取得匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合。如果提供一个选择器，那么只有紧跟着的兄弟元素满足选择器的时候，才会返回此元素。prev正好相反，获取之前的同辈元素

sibling

获得所有元素的邻居

父子元素获取

.parent([selector])

获得匹配元素几集合中，每个元素的父亲，可以提供一个可选择的选择器

.parents([selector])

.children([selector])

.find([selector])

筛选当前结果集合

.first()

获取当前集合的第一个对象

.last()

获取当前结果集的最后一个对象

.filter(selector),.filter(function(index))

筛选当前结果集重符合条件的对象，参数可以是一个选择器或者是一个函数

.not(selector),not(function(index))

从匹配的元素集合中一处指定的元素，和filter相反

.is(selector),is(function(index)),is(dom/jqObj)

判断当前匹配的元素集合中的元素，是否是一个选择器，DOM元素，或者jQuery对象，如果这些元素至少一个匹配固定的参数，那么返回true

.has(selector),.has(dom)

匹配元素集合中的那些有相匹配的选择器或DOM元素的后代元素

$

选择的不是原声js对象，而是经过jQuery对象选择的

.完之后又可以再.

这是一个链式的调用

jQuey实现tab切换

removeClass

里面的（）内容不可以加.

jQuery 1.x 版本和 2.x 版本有什么区别?

1.X:兼容IE678,使用最为广泛，官网只做BUG维护，功能不再新增。因此一般项目来说，使用1.X版本就可以了，最终版本：1.12.4 (2016年5月20日)
2.X不兼容ie678，很少有人使用，官方只做BUG维护，功能不再新增。如果不考虑兼容低版本的浏览器可以使用2.x，最终版本：2.2.4 (2016年5月20日)

介绍 jQuery 常见的选择器，以及以下 api 的用法，给出范例

.eq
.next / .prev
.nextAll / .prevAll
.siblings
.parent / .parents
.children / .find
.filter
.has
.is

<!DOCTYPE html>
<html lang="en">
<head>
	<script src="https://cdn.bootcss.com/jquery/3.4.0/jquery.min.js"></script>
	<meta charset="UTF-8">
	<title>1</title>
</head>
<body>
	<div id="header">
		<div class="container">
			<div class="child">1</div>
			<div class="child">2 hello</div>
			<div class="child">3</div>
			<div class="child">4</div>
			<p class="ok">ok</p>
		</div>
	</div>
</body>
</html>

<!--
### eq()

$(’#header .child’).eq(2)
\3


### next()

$(’#header .child’).eq(0).next()
//2
$(’#header .child’).eq(0).nextAll()
//2,3,4,ok

### prev()

$(’#header .child’).eq(2).prev()
//2
$(’#header .child’).eq(2).prevAll()
//1，2


### siblings()

$(’#header .child’).eq(2).sibings()
//1,2,4,ok



###　parent()

$(’.ok’).parent()
//div.container

$(’.ok’).parents()
//div.container,div#header,body,html


### children

$(’#header .container’).children()
// 选中1，2，3，4，ok


### find()

$(’#header ‘).find(’.child’)
//选中1，2，3，4


### filter()

$(’.child’).filter(function(index,node){
return node.innerText.search(‘hello’) > -1
})
\选中 2 hello


### is()

$(’.ok’).is(’.ok’)
\truen

$(’.ok’).is(document.querySelector(’.ok’))
\ true


### has()

$(’.container’).has(’.ok’)
\返回一个dom对象

-->

使用 jQuery 实现 Tab 切换效果

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="https://cdn.bootcss.com/jquery/3.4.0/jquery.min.js"></script>
	<style>
		.mod-tab .header .tab {
			float: left;
			border-left: 1px solid #ccc;
			border-top: 1px solid #ccc;
			background: #ddd;
			padding: 5px 20px;
			cursor: pointer;
		}
		.mod-tab .header:after{
			content: '';
			display: block;
			clear: both;
		}
		.mod-tab .header .tab.active{
			background: #fff;
		}
		.mod-tab .header .tab:last-child{
			border-right: 1px solid #ccc;
		}
		.mod-tab .content {
			border: 1px solid #ccc;
			width: 300px;
			height: 200px;
			background: #fff;
		}
		.mod-tab .panel {
			padding: 30px;
			background: #fff;
			display: none;
		}
		.mod-tab .panel.active{
			display: block;
		}
	</style>
</head>
<body>
	<div class="mod-tab">
		<div class="header">
			<div class="tab">1</div>
			<div class="tab">2</div>
			<div class="tab">3</div>
			<div class="tab">4</div>
		</div>
		<div class="content">
			<div class="panel">panel1</div>
			<div class="panel">panel2</div>
			<div class="panel">panel3</div>
			<div class="panel">panel4</div>
		</div>
	</div>

	<div class="mod-tab">
		<div class="header">
			<div class="tab">1</div>
			<div class="tab">2</div>
			<div class="tab">3</div>
			<div class="tab">4</div>
		</div>
		<div class="content">
			<div class="panel">panel1</div>
			<div class="panel">panel2</div>
			<div class="panel">panel3</div>
			<div class="panel">panel4</div>
		</div>
	</div>
	<script>
		$('.mod-tab .tab').on('click',function(){
			$(this).addClass('active')
				   .siblings()
				   .removeClass('active')
			console.log($(this).index())
			$(this).parents('.mod-tab')
				   .find('.panel')
				   .eq($(this).index())
				   .addClass('active')
				   .siblings()
				   .removeClass('active')
		})
	</script>
</body>
</html>

使用原生 js 实现 Tab 切换效果

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="https://cdn.bootcss.com/jquery/3.4.0/jquery.min.js"></script>
	<style>
		.mod-tab .header .tab {
			float: left;
			border-left: 1px solid #ccc;
			border-top: 1px solid #ccc;
			background: #ddd;
			padding: 5px 20px;
			cursor: pointer;
		}
		.mod-tab .header:after{
			content: '';
			display: block;
			clear: both;
		}
		.mod-tab .header .tab.active{
			background: #fff;
		}
		.mod-tab .header .tab:last-child{
			border-right: 1px solid #ccc;
		}
		.mod-tab .content {
			border: 1px solid #ccc;
			width: 300px;
			height: 200px;
			background: #fff;
		}
		.mod-tab .panel {
			padding: 30px;
			background: #fff;
			display: none;
		}
		.mod-tab .panel.active{
			display: block;
		}
	</style>
</head>
<body>
	<div class="mod-tab">
		<div class="header">
			<div class="tab">1</div>
			<div class="tab">2</div>
			<div class="tab">3</div>
			<div class="tab">4</div>
		</div>
		<div class="content">
			<div class="panel">panel1</div>
			<div class="panel">panel2</div>
			<div class="panel">panel3</div>
			<div class="panel">panel4</div>
		</div>
	</div>

	<div class="mod-tab">
		<div class="header">
			<div class="tab">1</div>
			<div class="tab">2</div>
			<div class="tab">3</div>
			<div class="tab">4</div>
		</div>
		<div class="content">
			<div class="panel">panel1</div>
			<div class="panel">panel2</div>
			<div class="panel">panel3</div>
			<div class="panel">panel4</div>
		</div>
	</div>
	<script>
		// $('.mod-tab .tab').on('click',function(){
		// 	$(this).addClass('active')
		// 		   .siblings()
		// 		   .removeClass('active')
		// 	console.log($(this).index())
		// 	$(this).parents('.mod-tab')
		// 		   .find('.panel')
		// 		   .eq($(this).index())
		// 		   .addClass('active')
		// 		   .siblings()
		// 		   .removeClass('active')
		// })
		document.querySelectorAll('.mod-tab .tab').forEach(function(node){
			node.addEventListener('click',function(){
				var index
				this.parentElement.querySelectorAll('.tab').forEach(function(tab,idx){
					tab.classList.remove('active')
					if(node === tab){
						index = idx
					}
				})
				this.classList.add('active')
				
				this.parentElement.nextElementSibling.querySelectorAll('.panel').forEach(function(panel){
					panel.classList.remove('active')
				})
				this.parentElement.nextElementSibling.querySelectorAll('.panel')[index].classList.add('active')
			})
		})
	</script>
</body>
</html>

CSDN学习社区

CSDN联合极客时间，共同打造面向开发者的精品内容学习社区，助力成长！

更多推荐