简介

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

  1. [每日一题jQuery] jQuery选择器总结：进一步过滤、同级操作、后代操作

    jQuery选择器继承自CSS的风格,可以通过jQuery选择器找出特定的DOM元素,在此基础上对该元素做相应处理.jQuery不仅支持简单的标签选择器.类选择器.id选择器,还针对表单状态.子元素. ...

  2. jquery 选择器(name,属性,元素)大全

    jQuery 选择器大体上可分为:基本选择器.层次选择器.过滤选择器.表单选择器. 其中过滤选择器可以分为:简单过滤选择器.内容过滤选择器.可见性过滤选择器.属性过滤选择器.子元素过滤选择器.表单对象 ...

  3. 使用jQuery匹配文档中所有的li元素，返回一个jQuery对象，然后通过数组下标的方式读取jQuery集合中第1个DOM元素，此时返回的是DOM对象，然后调用DOM属性innerHTML,读取该元素 包含的文本信息

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. 深度解析JQuery Dom元素操作技巧

    深度解析JQuery Dom元素操作技巧 DOM是一种与浏览器.平台.语言无关的接口,使用该接口可以轻松访问页面中所有的标准组件,这篇文章给大家介绍了JQuery dom元素操作方法,写的十分的全面细 ...

  5. 获取jQuery对象的第N个DOM元素 && table常用css样式

    获取jQuery对象的第N个DOM元素 1.$(selector).get(N-1) 2.$(selector)[N-1] 注意:.index()方法返回的是一个数,相当于C#中的IndexOf() ...

  6. dom元素操作（动态事件绑定）

    遇到的问题:动态生成的内容,事件绑定会出错. 例子:http://snowinmay.net/jqm/dom-learn2.html 1.绑定事件对动态生成的新元素无效. 问题描述:bind事件绑定后 ...

  7. event.target 属性返回哪个 DOM 元素触发了事件。

    <ul> <li>list <strong>item 1</strong></li> <li><span>list ...

  8. jquery选择器和属性

    jQuery的选择器 <html lang="en"> <head> <meta charset="UTF-8"> < ...

  9. jquery学习笔记(二)：DOM元素操作

    内容来自[汇智网]jquery学习课程 2.1 元素属性操作 1.获取元素的属性 语法:attr(name) 参数name表示属性的名称 2.设置元素的属性 单个属性设置语法:attr(key,val ...

  10. jQuery操作得到DOM元素

    jQuery再DOM操作方面提供了一些函数及其用法,这里就对DOM元素的包装简单说明一下,怎样使用会了,对其它方法也能灵活的使用.以下是一个小样例及其效果图. 代码例如以下: <html xml ...

随机推荐

  1. kubectl插件管理工具krew

    文章转载自:https://blog.51cto.com/loong576/2452592 一.k8s核心组件 Kubernetes 主要由以下几个核心组件组成: etcd 保存了整个集群的状态: a ...

  2. Elasticsearch: rollover API

    rollover使您可以根据索引大小,文档数或使用期限自动过渡到新索引. 当rollover触发后,将创建新索引,写别名(write alias)将更新为指向新索引,所有后续更新都将写入新索引. 对于 ...

  3. logstash知识点

    Logstash是位于Data和Elasticsearch之间的一个中间件.Logstash是一个功能强大的工具,可与各种部署集成. 它提供了大量插件. 它从数据源实时地把数据进行采集,可帮助您解析, ...

  4. Elasticsearch Top10 监控指标

    文章转载自: https://mp.weixin.qq.com/s?__biz=MzI2NDY1MTA3OQ==&mid=2247484441&idx=1&sn=8292f50 ...

  5. C++自学笔记 Composition:对象组合

    继承是实现软件重用的一种方式. 在C++中拥有另一种实现软件重用的方式----- Composition:对象组合 用已经有的对象制造新的对象 (设计一个类的时候它的成员变量可以是另一个类的对象) 对 ...

  6. 在Linux/redhat中安装amazon-ssm-agent及注意事项

    操作系统:Red Hat Enterprise Linux Server release 7.9 (Maipo) 首先说明一下SSM是什么.引用官网的说明: AWS Systems Manager A ...

  7. you-get安装及使用

    you-get安装及使用 1.安装python 下载地址:https://www.python.org/downloads/ 配置环境变量:我的电脑 --> 属性 --> 高级系统设置 - ...

  8. 4.RabbitMQ系列之发布/订阅模式

    我们把一个消息转发给多个消费者,这种模式称之为发布-订阅模式 1.交换器(Exchange) RabbitMq消息模式的核心思想是:一个生产者并不会直接往一个队列中发送消息,事实上,生产者根本不知道它 ...

  9. 齐博x1背景图如何设置标签

    背景图非常特殊,由于不能点击,所以他不能直接添加标签,需要添加一个辅助标签,比如类似下面的代码 {qb:hy name="xxa001" type="image" ...

  10. 驱动开发：内核运用LoadImage屏蔽驱动

    在笔者上一篇文章<驱动开发:内核监视LoadImage映像回调>中LyShark简单介绍了如何通过PsSetLoadImageNotifyRoutine函数注册回调来监视驱动模块的加载,注 ...