简介

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元素操作与遍历的更多相关文章

[每日一题jQuery] jQuery选择器总结：进一步过滤、同级操作、后代操作
jQuery选择器继承自CSS的风格,可以通过jQuery选择器找出特定的DOM元素,在此基础上对该元素做相应处理.jQuery不仅支持简单的标签选择器.类选择器.id选择器,还针对表单状态.子元素. ...
jquery 选择器(name,属性,元素)大全
jQuery 选择器大体上可分为:基本选择器.层次选择器.过滤选择器.表单选择器. 其中过滤选择器可以分为:简单过滤选择器.内容过滤选择器.可见性过滤选择器.属性过滤选择器.子元素过滤选择器.表单对象 ...
使用jQuery匹配文档中所有的li元素，返回一个jQuery对象，然后通过数组下标的方式读取jQuery集合中第1个DOM元素，此时返回的是DOM对象，然后调用DOM属性innerHTML,读取该元素包含的文本信息
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
深度解析JQuery Dom元素操作技巧
深度解析JQuery Dom元素操作技巧 DOM是一种与浏览器.平台.语言无关的接口,使用该接口可以轻松访问页面中所有的标准组件,这篇文章给大家介绍了JQuery dom元素操作方法,写的十分的全面细 ...
获取jQuery对象的第N个DOM元素 && table常用css样式
获取jQuery对象的第N个DOM元素 1.$(selector).get(N-1) 2.$(selector)[N-1] 注意:.index()方法返回的是一个数,相当于C#中的IndexOf() ...
dom元素操作（动态事件绑定）
遇到的问题:动态生成的内容,事件绑定会出错. 例子:http://snowinmay.net/jqm/dom-learn2.html 1.绑定事件对动态生成的新元素无效. 问题描述:bind事件绑定后 ...
event.target 属性返回哪个 DOM 元素触发了事件。
<ul> <li>list <strong>item 1</strong></li> <li><span>list ...
jquery选择器和属性
jQuery的选择器 <html lang="en"> <head> <meta charset="UTF-8"> < ...
jquery学习笔记(二)：DOM元素操作
内容来自[汇智网]jquery学习课程 2.1 元素属性操作 1.获取元素的属性语法:attr(name) 参数name表示属性的名称 2.设置元素的属性单个属性设置语法:attr(key,val ...
jQuery操作得到DOM元素
jQuery再DOM操作方面提供了一些函数及其用法,这里就对DOM元素的包装简单说明一下,怎样使用会了,对其它方法也能灵活的使用.以下是一个小样例及其效果图. 代码例如以下: <html xml ...

随机推荐

C语言大作业---学生信息管理系统
xxxx信息管理系统简介因为大作业规定的踩分项就那么多,为了不浪费时间 + 得分,就写成这样.现在看看,命名不规范,书写风格糟糕,全塞在一个源代码中······ 不过,应付大作业是没问题的实验报 ...
Kubernetes实践技巧：Windows 系统最佳实践
有部分同学是使用的 Windows 系统,我们的直播课程也是在 Windows 系统下面进行的,然后通过 SSH 方式连接到服务器上面操作 Kubernetes,由于对 vim 不是很熟悉,所以又通 ...
ProxySQL(9)：ProxySQL的查询缓存功能
文章转载自: https://www.cnblogs.com/f-ck-need-u/p/9314459.html ProxySQL支持查询缓存的功能,可以将后端返回的结果集缓存在自己的内存中,在某查 ...
EasyExcel实现文件导出
官网:https://www.yuque.com/easyexcel/doc/easyexcel 导出准备工作引入依赖  <depende ...
Java复制Word文档
Microsoft Word 提供了许多易于使用的文档操作工具,同时也提供了丰富的功能集供创建复杂的文档使用.在使用的时候,你可能需要复制一个文档里面的内容到另一个文档.本文介绍使用Spire.Doc ...
C#-01 关于C#中传入参数的一些用法
实验环境实验所处环境位于vs2019环境中学习内容一.最基础的参数传入:值参数对于这种传入,和其他的c,c++编程语言参数传入一样,没有太大差别,在这里给如下例子: 虽然这里并没有进行传参但是 ...
vulnhub靶场之THE PLANETS: EARTH
准备: 攻击机:虚拟机kali.本机win10. 靶机:THE PLANETS: EARTH,网段地址我这里设置的桥接,所以与本机电脑在同一网段,下载地址:https://download.vulnh ...
WiresShark
WireShark 分析数据包技巧确定WireShark的位置[是否在公网上] 选择捕获接口,一般都是internet网络接口使用捕获过滤器使用显示过滤器[捕获后的数据包还是很复杂,用显示过滤器 ...
JUC（3）
文章目录 1.集合类不安全 2.在高并发情况下arraylist()并不安全 3.高并发下set并不安全 3.测试map(高并发情况下出现问题) 1.集合类不安全 2.在高并发情况下arraylist ...
如何在IDEA中自定义模板、快速生成完整的代码？
文章目录 1.修改现有的模板 2.自定义模板 3.在代码中测试自定义模板 1.修改现有的模板打开设置面板- settings 2.自定义模板选择定义模板组选择创建模板 define 代表应用的范 ...

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

简介