简介

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() 排除指定元素

巴特西

day29 jQuery选择器 & jquery属性操作 & jquery DOM元素操作与遍历

简介

2 jQuery版本

3 文件引入

4 HTML元素选取-选择器

4.1 基础语法公式

4.2 基础选择器

4.3 伪类选择器

5 HTML元素操作

5.1 标签属性

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

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

5.2 样式属性

5.3 标签文本内容

DOM元素操作

DOM事件

8 DOM遍历节点元素

8.1 祖先

8.2 后代

8.3 同胞

8.4 过滤

最新文章

热门文章

巴特西

day29 jQuery选择器 & jquery属性操作 & jquery DOM元素 操作与遍历

简介

2 jQuery版本

3 文件引入

4 HTML元素选取-选择器

4.1 基础语法公式

4.2 基础选择器

4.3 伪类选择器

5 HTML元素操作

5.1 标签属性

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

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

5.2 样式属性

5.3 标签文本内容

DOM元素操作

DOM事件

8 DOM遍历节点元素

8.1 祖先

8.2 后代

8.3 同胞

8.4 过滤

最新文章

热门文章

day29 jQuery选择器 & jquery属性操作 & jquery DOM元素操作与遍历