简介

jQuery,顾名思义,就是javascript和query(查询),即辅助javascript开发的库,本质就是一个js文件;
jQuery是一个js函数库,是目前全球范围内最流行、用的最多的js函数库;
jQuery库包含以下功能:
1)HTML元素选取
2)HTML元素操作
3)CSS操作
4)HTML事件函数操作
5)js特效和动画
6)HTML DOM遍历和修改
7)AJAX发送HTTP请求

2 jQuery版本

jQuery-1.* 兼容性好,兼容IE6 IE7 IE8,体积稍大;
jquery-2.0以上版本不再支持IE 6/7/8;
jQuery-3.* 放弃早期浏览器,支持现代浏览器,兼容至IE9,轻量;
jQuery库有两种类型:
jQuery.js(开发版) 完整无压缩,用于测试和学习
jQuery.min.js(发布版) 高度压缩,用于实际项目运行

3 文件引入

1)jQuery文件要放在所有引入的js文件第一位,因为浏览器是顺序加载文件,方便后面的js文件引用jQuery库的方法;
2)所有CSS文件的引入要先于所有JS文件;

示例:

<head>
<!-- 引入CSS外部样式表 -->
<link rel="stylesheet" type="text/css" href="../css/main.css" />
<!-- 引入jquery文件:jquery文件要在所有引入的js文件第一位置 -->
<script type="text/javascript" src="../js/jquery-1.9.1.min.js"></script>
<!-- 引入外部自定义js文件 -->
<script type="text/javascript" src="../js/main.js"></script>
</head>

4 HTML元素选取-选择器

4.1 基础语法公式

$(selector).action
先选取HTML元素,后对选取的元素执行某些操作;
$符号代表jQuery的缩写;
selector是选择符,表示查找选择符代表的HTML元素;
action执行对元素的操作,包括修改样式属性、事件、动画等;

4.2 基础选择器

ID选择器			$("#idValue") 	根据id值选择标签元素
class选择器		$(".className")	根据class值选择标签元素
标签选择器		$("elementName")	根据标签名选择标签元素
属性选择器		$("elementName[type=?]")	根据标签名及指定属性值,选择标签元素
层次选择器		后代选择器$("M N")	选择M元素内部的所有后代元素N
子代选择器$("M>N")	选择M元素内部第一级的子代元素
兄选择器$("M~N")		选择M元素后所有同级的N元素
相邻选择器$("M+N")	选择M元素相邻的下一个平级元素N

4.3 伪类选择器

简单伪类选择器

:first 			选择某元素的第一个元素对象	$("input:first")
:last 			选择某元素的最后一个元素对象	
:odd 			选择某元素的索引值为奇数的元素(返回多个元素) 索引从0开始	
:even 			选择某元素的索引值为偶数的元素	
:eq(index) 		选择给定索引值的元素,索引值index是一个整数,从0开始	$("input:eq(4)")

可见性伪类选择器

:hidden		选取所有不可见的元素,包括input标签的disabled属性和其他普通标签的display	
:visible 	选取所有可见元素	$(":visible");

表单伪类选择器

:input 		选择所有input元素		$(":input")
:button 	选择所有普通按钮,		<input type="button">或<button>元素	
:submit 	选择所有提交按钮		<input type=”submit”>	
:reset 		选择所有重置按钮	
:text 		选择所有单行文本框,	<input type="text">	
:textarea 	选择所有多行文本框 	<textarea>	
:password 	选择所有密码框	
:radio 		选择所有单选按钮,		<input type="radio">	
:checkbox 	选择所有复选框,		<input type="checkbox">	
:image 		选择所有图像域,注意不是<img>标签	
:file 		选择所有文件域,		<input type="file" />	
:hidden 	选择所有隐藏域	

表单属性伪类选择器

:checked
			选择所有被选中的表单元素,一般用于radio和checkbox	$(":checkbox:checked");
option:selected 	选择所有被选中的option元素 	
:enabled 		选择所有可用元素,一般用于input/select/textarea	
:disabled 		选择所有不可用元素,一般用于input/select/textarea	
:read-only 		选择所有只读元素,一般用于input/textarea		$("input[type=text]:read-only");
:focus 			选择获得焦点的元素	$(":focus");

5 HTML元素操作

5.1 标签属性

一般jquery中的方法既能set也能get。

5.1.1 attr()常规标签属性操作方法

//获取指定属性值,如果没有该属性返回undefined
var a = $("#p1").attr("color");
//添加/更改属性值
$("#i1").attr("value","1");				
//获取标签对象的value属性值
var v = $("#i1").val();	

5.1.2 prop()表单属性操作方法

//获取表单元素属性值
var v = $("#i1").prop("value");
//表单元素属性赋值
$("#i1").prop("value", "你好");

5.2 样式属性

//添加class属性值,允许添加多个class属性值
$("#p1").addClass("p_class p_class2");	
//删除class属性值
$("#p1").removeClass("p_class2");
//查CSS属性值
var b = $("div").css("border");
//设置CSS样式
$("div").css("width","50%");
//设置多个CSS属性值
$("div").css({
	"width":"50%",
	"height":"100px",
	"background-color":"orange"
});

5.3 标签文本内容

//查询标签本文内容,只返回文本信息,不返回html标签
var tx = $("p").text();
//查询标签中的文本内容,返回文本信息和html标签,且html标签作为字符串返回
var ht = $("p").html();
//设置标签文本内容,文本中的html字符串会作为html标签被添加
$("p").html("123<br>abc");
//设置标签文本内容,文本中的html字符串仍然作为字符串被添加

$(“p”).text(“123
abc”);

DOM元素操作

//1 DOM操作:生成元素
var ele = $("<p>hello world</p>");
function f1(){
	var ele = $("<p>hello</p>");

	// $("#d1").append(ele);//内部尾部插入
	// $("#d1").prepend(ele);//内部头部插入
	// ele.insertBefore("#d1");//外部头部插入
	// ele.insertAfter("#d1");//外部尾部插入

	// $("#d1").empty();//删除除id=d1标签的所有子元素

	$("#d1").remove();//删除所有元素,包括d1

}

遍历(注意$(item))

//遍历1
var arr = $("input");
arr.each(function(index,item){
	console.log(index+"   "+$(item).val());
});
//遍历2
$.each(arr,function(index,item){
	console.log(index+"       "+$(item).val()); 
});

DOM事件

ready:是属于jQuery的方法,当DOM载入就绪时(不包括图片等非文字媒体文件)绑定一个要执行的函数,极大提高了web应用程序的响应速度;
示例:

$(document).ready(function(){
});

onload:是属于Javascript的方法,网页的所有标签元素、图片全部加载完毕之后才执行这个事件处理程序,速度相对较慢;
示例:

window.onload = function(){
}

事件绑定

$("").on("click",function(){});

事件解绑

$("").off("click");

8 DOM遍历节点元素

8.1 祖先

parent() 		方法返回被选元素的直接父元素。
parents()		 方法返回被选元素的所有祖先元素,它一路向上直到文档的根元素 (<html>)。
parentsUntil() 		方法返回介于两个给定元素之间的所有祖先元素。
示例:$("span").parentsUntil("div");

8.2 后代

children() 			方法返回被选元素的所有直接子元素。
$("div").children("p.p1");	//返回类名为 "p1" 的所有 <p> 元素,并且它们是 <div> 的直接子元素
find() 				方法返回被选元素的后代元素,一路向下直到最后一个后代。
$("div").find("span");		//返回div标签中的所有span标签

8.3 同胞

siblings()		 方法返回被选元素的所有同胞元素。
$("h2").siblings();
$("h2").siblings("p");	//返回属于 <h2> 的同胞元素的所有 <p> 元素

next()			 方法返回被选元素的下一个同胞元素。方法只返回一个元素。
nextAll() 		方法返回被选元素的所有跟随的同胞元素。
nextUntil() 		方法返回介于两个给定参数之间的所有跟随的同胞元素。
$("h2").nextUntil("h6");//返回介于 <h2> 与 <h6> 元素之间的所有同胞元素
prev(), prevAll() 	以及 prevUntil() 方法的工作方式与上面的方法类似,只不过方向相反而已:它们返回的是前面的同胞元素(在 DOM 树中沿着同胞之前元素遍历,而不是之后元素遍历)

8.4 过滤

first()		 	方法返回被选元素的首个元素。
$("div p").first();	//选取<div>元素内部的第一个<p>元素
last() 			方法返回被选元素的最后一个元素。
$("div p").last();	//选择<div>元素中的最后一个<p>元素
eq()			方法返回被选元素中带有指定索引号的元素。索引号从 0开始。
$("p").eq(1);		//选取第二个 <p> 元素(索引号 1)
not() 排除指定元素
版权声明:本文为小彤在努力原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://www.cnblogs.com/xiaoto9426/p/16873151.html