jQuery基础

目录

jQuery简介

jQuery能做什么

jQuery的优势

获取jQuery

 jQuery库文件

 jQuery的使用方式

jQuery选择器 

jQuery基本选择器

jQuery层次选择器 

jQuery属性选择器 

 过滤选择器

    基本过滤选择器

 可见性过滤选择器

jQuery由美国人John Resig于2006年创建

jQuery是目前最流行的JavaScript程序库，它是对JavaScript对象和函数的封装

它的设计思想是write less,do more

学会jQuery能够： 制作网页特效、实现表单验证、实现酷炫动画

        访问和操作DOM元素

        控制页面样式

        对页面事件进行处理

        扩展新的jQuery插件

        与Ajax技术完美结合

        体积小，压缩后只有100KB左右

        强大的选择器

        出色的DOM封装

        可靠的事件处理机制

        出色的浏览器兼容性

        使用隐式迭代简化编程

        丰富的插件支持

进入jQuery官网：http://jquery.com

jQuery库分开发版和发布版

名称

大小

说      明

        jquery-3.版本号.js（开发版）

        约286KB

完整无压缩版本，主要用于测试、学习和开发

        jquery-3.版本号.min.js（发布版）

       约94.8KB

经过工具压缩或经过服务器开启Gzip压缩，

主要应用于发布的产品和项目

 在页面中引入jQuery

	
		
		
		
		
	
	
		
	
	
	
		$(document).ready(function(){
				//编写JavaScript代码或者jQuery代码
		});
		
		//上面代码的简写方式
		$(function(){
			//编写JavaScript代码或者jQuery代码
		});
	

 $(document).ready()

$(document).ready()与window.onload类似，但也有区别

window.onload

                $(document).ready()

执行时机

必须等待网页中所有的内容加载完毕后（包括图片、flash、视频等）才能执行

网页中所有DOM文档结构绘制完毕后即刻执行，

可能与DOM元素关联的内容（

图片、flash、视频等）并没有加载完

编写个数

同一页面不能同时编写多个

同一页面能同时编写多个

简化写法

无

$(function(){

  //执行代码

}) ;

jQuery 语法

        jQuery 语法是为 HTML 元素的选取编制的，可以对元素执行某些操作

        基础语法是：$(selector).action()

基本选择器包括标签选择器、类选择器、ID选择器、并集选择器和全局选择器

名称

语法构成

描述

示例

标签选择器

element

根据给定的标签名匹配元素

$("h2" )选取所有h2元素

类选择器

.class

根据给定的class匹配元素

$(" .title")选取所有class

为title的元素

ID选择器

#id

根据给定的id匹配元素

$(" #title")选取id为title

的元素

并集选择器

selector1,selector2,...,selectorN

将每一个选择器匹配的元素合并后一起返回

$("div,p,.title" )选取所有div、

p和拥有class为title的元素

全局选择器

*

匹配所有元素

$("*" )选取所有元素

 标签选择器根据给定的标签名匹配元素

类选择器根据给定的class匹配元素

ID选择器根据给定的id匹配元素

并集选择器用来合并元素集合

全局选择器可以获取所有元素

	
		
		
		
	
	
		我是2级标题标签
		我是3级标题标签
		

			
列表
			
列表
			
列表
			
列表
			
列表
		
		
我是段落标签
	
	
	
		$(function(){
			//jQuery的语法： $(选择器).函数()
			//标签选择器：通过标签名称获取元素，获取的元素可能有一个或者多个，都存储在一个类似数组的集合中
			var h2Eles=$('h2');
			console.log(h2Eles);
			
			var liEles = $('li');
			console.log(liEles);
			
			//class选择器:class属性可以被不同的标签重复使用，所以获取的元素可能是一个或者多个，存储在类似数组的集合中
			// $('.demo').css('color','#f00');
			
			//id选择器
			// $('#test').css('color','#f00');
			
			//并集选择器:同时选择多个不同的元素
			// $('li#test,p.demo').css('color','#f00');
			
			//全局选择器：选择所有的元素
			$('*').css('color','#f00');
		});
		
	

层次选择器通过DOM 元素之间的层次关系来获取元素

名称

语法构成

描述

                        示例

后代选择器

ancestor descendant

选取ancestor元素里的所有descendant（后代）元素

$("#menu span" )选取#menu

下的元素

子选择器

parent>child

选取parent元素下的child（子）元素

$(" #menu>span" )选取#menu

的子元素

相邻元素选择器

prev+next

选取紧邻prev元素之后的next元素

$(" h2+dl " )选取紧邻元素

之后的同辈元素

同辈元素选择器

prev~sibings

选取prev元素之后的所有siblings元素

$(" h2~dl " )选取元素

之后所有的同辈元素

后代选择器用来获取元素的后代元素 

子选择器用来获取元素的子元素

相邻选择器用来选取紧邻目标元素的下一个元素

同辈选择器用来选取目标元素之后的所有同辈元素

	
		
		
		
		
			ul,p{
				border: 1px solid #f00;
			}
		
	
	
		
0
		
1
		
2
		

			

				
4
			
			

				
5
			
			

				
6
			
		
		
3
	
	
	
		$(function(){
			//后代选择器 E F
			// $('body p').css('background-color','#ccc');
			// $('ul p').css('background-color','#ccc');
			
			//子代选择器 E>F
			// $('body>p').css('background-color','#ccc');
			
			//相邻兄弟选择器 E+F :选择紧跟在E元素后面的那一个兄弟元素
			// $('.demo+p').css('background-color','#ccc');
			
			//通用兄弟选择器E~F：选择跟在E后面的所有兄弟元素F
			$('.demo~p').css('background-color','#ccc');
		});
	

属性选择器通过HTML元素的属性来选择元素

语法构成

描述

示例

[attribute^=value]

选取给定属性是以某些特定值开始的元素

$(" [href^='en']" )选取href属性值

以en开头的元素

[attribute$=value]

选取给定属性是以某些特定值结尾的元素

$(" [href$='.jpg']" )选取href属性值

以.jpg结尾的元素

[attribute*=value]

选取给定属性是以包含某些值的元素

$(" [href* ='txt']" )选取href属性值中

含有txt的元素

根据属性值包含特定的值获取元素： 

属性选择器可以根据是否包含某属性来选取元素

属性选择器可以根据属性的值来选取元素

属性选择器可以指定选取不等于属性是某个特定值的元素

属性选择器可以指定属性值以指定值开头的元素

属性选择器可以指定属性值以指定值结尾的元素

属性选择器可以指定属性值包含指定值的元素 

	
		
		
		
			/*此段代码只是让结构更美观，后续会详细讲解*/
			.demo a {
				float: left;
				display: block;
				height: 50px;
				width: 50px;
				border-radius: 10px;
				text-align: center;
				background: #aac;
				color: blue;
				font: bold 20px/50px Arial;
				margin-right: 5px;
				text-decoration: none;
				margin: 5px;
			}
		
		
	
	
		

			1
			2
			3
			 4
			5
			6
			7
			8
			9
			10
		
	
	
		$(document).ready(function(){
			//选择具有id属性的a标签
			//$('a[id]').css('background-color','#f00');
			
			//选择具有id属性并且id属性值为first的a标签
			// $('a[id=first]').css('background-color','#f00');
			
			//选择具有class属性并且class属性值是以inks开头的a标签
			// $('a[class^=inks]').css('background-color','#f00');
			
			//选择具有href属性并且href属性值是以pdf结尾的a标签
			// $('a[href$=pdf]').css('background-color','#f00');
			
			//选择具有class属性并且class属性值中包含links的a标签
			// $('a[class*=links]').css('background-color','#f00');
			
			//选择具有class属性并且属性值不是links item的a标签
			$('a[class!="links item"]').css('background-color','#f00');
			
		});
	

通过特定的过滤规则来筛选出所需的元素

主要分类

        基本过滤选择器

        可见性过滤选择器

        表单对象过滤选择器

        内容过滤选择器、子元素过滤选择器……

语法

描述

                        示例

:first

选取第一个元素

$(" li:first" )选取所有

	
		
		
		
	
	
		

			
大湖名城创新高地1
			
大湖名城创新高地2
			
大湖名城创新高地3
			
大湖名城创新高地4
			
大湖名城创新高地5
			
大湖名城创新高地6
			
大湖名城创新高地7
			
大湖名城创新高地8
			
大湖名城创新高地9
			
大湖名城创新高地10
		
	
	
	
		$(document).ready(function(){
			//获取第3个li元素并设置样式
			$('li:eq(2)').css('color','#f00');
			
			//获取最后的5个li元素，并设置文本颜色为#00f
			// var liEles = document.querySelectorAll('li');
			// for(var i = 0;i4){
			// 		liEles[i].style.color = '#00f';
			// 	}
			// }
			
			$('li:gt(4)').css('color','#00f');
			
			//获取前面2个里元素，并设置文本颜色为#ff0
			$('li:lt(2)').css('color','#ff0');
			
			//获取下标值为偶数的li元素，设置其背景色为#ccc
			$('li:even').css('background-color','#ccc');
		});
		
	

	
		
		
		
		
	
	
		
我是段落标签
		隐藏段落元素
		显示隐藏的段落元素
		
	
	
		$(function(){
			//获取button元素，并添加点击事件
			$('#btn').click(function(){
				//获取p标签，并将其隐藏
				$('p:visible').hide();
			});
			
			//获取第二个button元素，并添加点击事件
			$('#btn2').click(function(){
				$('p:hidden').show();
			});
			
		});