目录
一、JQuery简介
1.JQuery是什么
- 一个优秀的JavaScript库
- .2006年1月由John Resig创建的开源项目
- 包括核心库、UI、插件等
- 凭借简洁的语法和跨平台的兼容性，极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax的操作
- 强调的理念是写得少，做得多(write Less，Do More )。
- jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的css选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等
2.JQuery的发展历程
javascript到jQuery：javascript是Netscape公司开发的一种脚本语言，其出现使得网页和用户之间实现了一种实时的，动态的和交互的关系使网页包含更多活跃的元素。
3.JQuery能做什么
- 取得文档中的元素
- 将我们页面的JS代码和HTML页面代码进行分离
- 修改页面外观
- 改变文档内容
- 响应用户的交互操作
- 为页面添加动态效果
- 无刷新从服务器获取信息
- 简化常见JavaScript任务(如迭代、数组操作)
4.JQuery的弊端
- 复杂的文档对象模型（DOM）
- 不一致的浏览器实现
- 缺乏便捷的开发调试工具
5.JQuery的优势
- 轻量级
- 强大的选择器
- 出色的DOM操作的封装
- 可靠的事件处理机制
- 完善的Ajax,$.ajax()无需关心复杂的浏览器兼容性和XMLHttpRequest对象的创建和使用
- 不污染顶级变量，只建立一个名为jQuery对象，其所有函数方法都在这个对象之下
- 出色的浏览器兼容性
- 链式操作方式，发生在同一个jquery对象上的一组动作，可以直接连写而不用重复获取对象
- 基于jquery可以开发出各种各样优秀的jquery插件
6.JQuery的使用
jQuery不需要安装，想要在某个页面上使用jQuery时，只需要在相关的html中引入jQuery的库文件即可。
注：jQuery库中只提供了一个【名字为jQuery】的对象,但是这个对象有很多方法以及属性,同时还提供了方法可以把我们平时使用的普通页面元素【转换】为jQuery类型的对象来使用,这样我们就可以在拿到页面元素后转成jQuery对象并使用jQuery使用的方法和属性了。
例如:
<script>
var d1 = document.getElementById("my_div");
//出错,因为d1是dom模型中的对象而不是jQuery的对象,而hide是jQuery中的函数
d1.hide();
//对的写法
d1.style.display="none";
//注:jQuery对象一般用$开头的变量接收,当然也使用一般的变量名字
var $d2 = jQuery("#my_div");
//正确的把div隐藏了,因为$d2是一个jQuery的对象,所以调用jQuery提供的方法
$d2.hide();
</script>注：$是jQuery的一个简写形式$("#y_div")等价于jQuery("#my_div")
- 如何判断一个对象是不是jQuery的对象?
<script>
var $d2 = jQuery("#my_div");
alert($d2 instanceof jQuery);//返回true则是jQuery对象
alert(typeof($d2));//Object 这个判断不出来
</script>7.DOM对象与JQuery对象
1.DOM(Document Object Model 文档对象模型) 每一份DOM都可以表示成一颗树。html中，<table> <h2> <p> <ul> 等都是DOM元素节点，可以通过javascript中的方法获取到DOM元素节点：
getElementById()
getElementsByTagName()
..
2.jQuery对象 就是通过jQuery包装DOM对象后产生的对象，jQuery对象是jQuery独有的，如果一个对象是jquery对象就可以使用jquery库文件中的方法，但是jquery对象中无法使用dom对象的任何方法。
例如:
$("#foo").html() 等价于 document.getElementById("foo").innerHTML;
但是不可以 $("#foo").innerHTML
3.对象之间的转化：
- 定义变量的风格：
（推荐使用）js中的变量名是可以使用$开头的，dom对象使用普通的变量名字，jQuery对象一般可以使用$开头的变量名。这样主要是用于区别jquery对象和dom对象的,没有其他别的作用.jQuery对象也可以使用一个普通的变量名。
- jquery对象 转换为 DOM对象：
jquery对象是一个数组对象，可以通过[index]方法得到相应的DOM对象 对象名[index],也可以通过get(index)方法获得，对象名.get(index)。其中index是jQuery对象中的下标(jquery可以看成一个数字/集合)。
如何理解理解这里收的【数组对象】:首先它是一个对象,同时这个对象里面也有像数组一样的下标,可以存值和取值.除了这以外还有这个对象的其他的一些属性.这个时候如果使用for-in的话可以看到这个对象中的属性及其值。
- DOM对象转换成jquery对象:
使用$将DOM对象包装起来即可,其实所有的jquery对象都是通过$()函数制造出来的，它就是一个jquery对象的制造工厂.
var cc = document.getElementById("cc");
var $cc = $(cc);
- JQ和JS(狭义的Dom对象)之间的转换
JQ对象,只能调用JQ的属性和方法
JS对象 只能调用JS的属性和方法
例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../../js/jquery-1.11.0.js" ></script>
<script>
function changeJS(){
var div = document.getElementById("div1");
//div.innerHTML = "JS成功修改了内容"
//将JS对象转成JQ对象
$(div).html("转成JQ对象来修改内容")
}
$(function(){
//给按钮绑定事件
$("#btn2").click(function(){
//找到div1
//$("#div1").html("JQ方式成功修改了内容");
//将JQ对象转成JS对象来调用
var $div = $("#div1");
//var jsDiv = $div.get(0);
var jsDiv = $div[0];
jsDiv.innerHTML="jq转成JS对象成功";
});
});
</script>
</head>
<body>
<input type="button" value="JS修改div内容" onclick="changeJS()" />
<input type="button" value="JQ方式修改div内容" id="btn2" />
<div id="div1">
这里的内容要被JS/JQ代码修改掉
</div>
<div id="div1">
这里的内容要被JS/JQ代码修改掉1111
</div>
</body>
</html>
- 获得一个jQuery对象的三种方式：
(1)把一个dom对象转换为jQuery对象
var cc = document.getElementById("cc");
var $cc = $(cc);
(2)通过选择器直接拿到一个jQuery对象
var d = $("#my_div");
(3)直接创造出一个jQuery对象
var v = $("<div>test</div>");
注：我们使出回身解数把一个对象变为jQuery对象的目的 就是我们想通过这个对象调用到jQuery库给我们提供的各种简单便捷的函数.从而达到上面所提供的jQuery的理念:write less,do more。
二，JQuery选择器
jquery中的选择器完全继承了CSS的风格。利用jQuery选择器可以方便快速地找出特定的DOM元素，然后对它们进行各种操作。jquery选择器找到元素后添加行为或者修改属性或者样式,css选择器找到元素后只能添加样式。
选择器特性：如果页面上有要选择的元素，选中，如果没有则获得一个空的jquery对象。
1.基本选择器
-
ID选择器 : #ID的名称
-
类选择器: 以 . 开头 .类名
-
元素选择器: 标签的名称
-
通配符选择器: *
-
选择器,选择器: 选择器1,选择器2
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="../../../css/style.css" />
<!--引入JQ的文件-->
<script type="text/javascript" src="../../../js/jquery-1.11.0.js" ></script>
<!--
- ID选择器 : #ID的名称
- 类选择器: 以 . 开头 .类名
- 元素选择器: 标签的名称
- 通配符选择器: *
- 选择器,选择器: 选择器1,选择器2
-->
<script>
//文档加载事件,页面初始化的操作
$(function(){
//初始化操作: 给按钮绑定事件
$("#btn1").click(function(){
$("#two").css("background-color","palegreen");
});
//找出mini类的所有元素
$("#btn2").click(function(){
$(".mini").css("background-color","palegreen");
});
$("#btn3").click(function(){
$("div").css("background-color","palegreen");
});
$("#btn4").click(function(){
$("*").css("background-color","palegreen");
});
/*选择器分组*/
//找出mini类 和 span元素
$("#btn5").click(function(){
$(".mini,span").css("background-color","palegreen");
});
});
</script>
</head>
<body>
<input type="button" value="找出ID为two的元素" id="btn1" />
<input type="button" value="找出mini类的所有元素" id="btn2" />
<input type="button" value="找出所有div元素" id="btn3" />
<input type="button" value="通配符选择器" id="btn4" />
<input type="button" value="找出mini类 和 span元素" id="btn5" />
<br />
<div id="one">
<div class="mini">1-1</div>
</div>
<div id="two">
<div class="mini">2-1</div>
<div class="mini">2-2</div>
</div>
<div id="three">
<div class="mini">3-1</div>
<div class="mini">3-2</div>
<div class="mini">3-3</div>
</div>
<span id="four">span</span>
</body>
</html>2.层次选择器
通过Dom元素之间的层次关系来获取特定元素，例如后代元素，子元素，相邻元素，兄弟元素等。
-
子元素选择器: 选择器1 > 选择器2
$("parent>child")
parent: 任何有效的选择器。child: 用来筛选子元素的选择器。
它只会选择第一级的后代
-
后代选择器: 选择器1 儿孙
$("ancestor descendant")
ancestor: 任何有效的选择器。
descendant: 一个用来筛选后代元素的选择器。选取ancestor元素中所有descendant元素，一个元素的后代可能是该元素的一个孩子，孙子，曾孙
注意:选择器中的空格 一定要有的
-
相邻兄弟选择器 : 选择器1 + 选择器2 : 找出紧挨着的一个弟弟
$("prev+next") 也可以是jquery对象的next()函数获得(属于jquery中的查找函数)
prev: 任何有效的选择器。next: 用于筛选紧跟在 "prev" 后面的元素的选择器。
所选择到的元素必须是同一个父元素下的元素(紧挨着的兄弟关系)
-
一般兄弟选择器: 选择器1~ 选择器2 : 找出所有的弟弟
$('prev~siblings')
prev: 任何有效的选择器。
siblings: 当前选中元素的后面的所有符合条件的兄弟元素。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="../../../css/style.css" />
<!--引入JQ的文件-->
<script type="text/javascript" src="../../../js/jquery-1.11.0.js" ></script>
<!--
-- 子元素选择器: 选择器1 > 选择器2
- 后代选择器: 选择器1 儿孙
- 相邻兄弟选择器 : 选择器1 + 选择器2 : 找出紧挨着的一个弟弟
- 找出所有弟弟: 选择器1~ 选择器2 : 找出所有的弟弟
-->
<script>
//文档加载事件,页面初始化的操作
$(function(){
//初始化操作: 给按钮绑定事件
//找出body下面的子div
$("#btn1").click(function(){
$("body > div").css("background-color","palegreen");
});
//找出body下面的所有div
$("#btn2").click(function(){
$("body div").css("background-color","palegreen");
});
$("#btn3").click(function(){
$("#one+div").css("background-color","palegreen");
});
$("#btn4").click(function(){
$("#two~div").css("background-color","palegreen");
});
});
</script>
</head>
<body>
<input type="button" value="找出body下面的子div" id="btn1" />
<input type="button" value="找出body下面的所有div" id="btn2" />
<input type="button" value="找出id为one的相邻兄弟div" id="btn3" />
<input type="button" value="找出id为two的所有弟弟div" id="btn4" />
<br />
<div id="one">
<div class="mini">1-1</div>
</div>
<div id="two">
<div class="mini">2-1</div>
<div class="mini">2-2</div>
</div>
<div id="three">
<div class="mini">3-1</div>
<div class="mini">3-2</div>
<div class="mini">3-3</div>
</div>
<span id="four">span</span>
</body>
</html>3.过滤选择器
通过特定的过滤规则来筛选所需的DOM元素，过滤选择器都以冒号：开头
- （1）基本过滤器
first
选取当前匹配成功的元素中的第1个元素
$("tr:first")
last
选取当前匹配成功的元素中的最后一个元素
$("tr:last")
not(selector)
去除所有与给定选择器匹配的元素:
$("input:not(.myclass)")
与索引有关的
even
选取索引是偶数的所有元素，索引从0开始，所以:even选择器是选择第一个元素，第三个元素，类推。
$("tr:even").css("background-color", "red");
推荐使用.filter(":even")方法，效率更高
$("tr").filter(":even").css("background-color", "red");
odd
选取索引是奇数的所有元素，索引从0开始
选取索引是奇数的所有元素，索引从1开始，所以:even选择器是选择第二个元素，第四个元素，类推。
$("tr:odd").css("background-color", "red");
$("tr").filter(":odd").css("background-color", "red");
eq(index)
选取索引等于index的元素（index从0开始）
推荐使用.eq(index)方法
$("td:eq(2)").css("background-color", "red");
$("td").eq(2).css("background-color", "red");
gt(index)
选取索引大于index的元素（index从0开始）
$("tr:gt(3)").css("background-color", "red");
推荐使用.slice(index)
$("tr").slice(3).css("background-color", "red");
lt(index)
选取索引小于Index的元素（index从0开始）
$("tr:lt(3)").css("background-color", "red");
推荐使用.slice(0, index)
$("tr").slice(0,3).css("background-color", "red");
其他特殊的情况
header
选取所有的标题元素，例如h1,h2,h3等
$(":header")
推荐使用.filter(":header")
$("*").filter(":header");
animated
选取当前正在执行动画的所有元素
$("div:animated").toggleClass("colored");
- （2）内容过滤选择器
contains(text)
选取含有文本内容为"text"的元素
匹配的文本可以直接出现在所选的元素中，或在该元素的任何后代中，或两者兼有。
$("div:contains(''abc'')").css("text-decoration", "underline");将含有"abc"的div加下划线
例如:
<div id="div5">456abc123</div>
<div id="div6">
<span>456abc123</span>
</div>empty
选取不包含子元素或者文本的 空元素
$("div:empty").text("Was empty!")或者$("div:empty").html("Was empty!")
has(selector)
选取含有某些指定元素的元素
如果表达式 $('div:has(p)') 匹配一个 <div>，那么应有一个<p>存在于 <div> 后代元素中的任何地方，不是直接的子元素也可以。
$("div:has('span')") 等价于 $("div:has(span)")
例如:$("div:has(#span1)")
parent
选取含有子元素或者文本的元素，这个正好和 :empty相反。
$(".divClass:parent").fadeTo(1500, 0.3);
所有包含子元素的div在1500毫秒内将其透明度变为0.3
- ( 3）可见性过滤选择器
hidden
选择所有隐藏的元素。
主要指的是:CSS display值是none； type="hidden"的表单元素 还有一些特殊情况:<head>中的所有元素（不同浏览器可能情况不一样 )宽度和高度都显式设置为0;祖先元素是隐藏的。特殊可见：元素visibility: hidden或opacity: 0 被认为是可见的，因为他们仍然占据布局空间。opacity是透明的意思。
例如：让一个隐藏的div在3000毫秒内显示出来
$("div:hidden").show(3000);
visible
选取所有可见的元素
如果元素中占据文档中一定的空间,元素被认为是可见的。可见元素的宽度或高度，都要是大于零。
$(":visible")
$("div:visible")
- （4）属性过滤器
<div name="" id="" class="" myAtr="">
[attribute]
选择所有具有指定属性的元素，该属性可以是任何值。
$("div[id]") 选取拥有属性Id的div元素
[attribute="value"]
选择属性值为value的元素
value:一个属性值，可以是一个不带引号的一个单词或带一个引号的字符串。
$('div[class="cc"]')
[attribute!=value]
属性不等于value的元素
$('input[name!="newsletter"]')
[attribute^=value]
属性值以value开始的元素,速度比较慢，不推荐使用
$('input[name^="news"]').val('test');
[attribute$=value]
属性值以value结束的元素
$('input[name$="letter"]').val('test');
[attribute*=value]
选择指定属性具有包含一个给定的子字符串的元素。
$('input[name*="man"]').val('has man in it!');
[selector1][selector2]
多个属性选择器一起使用
$('input[id][name$="man"]')
- （5）子元素过滤选择器( )
:nth-child()
例如:
<div class="div1">
<span id="s1">s1</span>
<span id="s2">s2</span>
<span id="s3">s3</span>
<span id="s4">s4</span>
<span id="s5">s5</span>
<span id="s6">s6</span>
<span id="s7">s7</span>
</div>
<div class="div1"></div>
<div class="div1"></div>选择 当前元素的 第1个子元素：$(".div1:first :nth-child(1)")
选择 当前元素的 第4个子元素：$(".div1:first :nth-child(4)")
选择 当前元素的 为偶数的子元素：$(".div1:first :nth-child(even)")
选择 当前元素的 为奇数的子元素：$(".div1:first :nth-child(odd)")
注意:$(".div1:first :nth-child(1)")中的空格一定要加,表示其子元素的筛选
:first-child
可以匹配多个：选取当前元素下面的第一个子元素，相当于:nth-child(1)。
$("div span:first-child")
例如:
<div>
<span id="s1">s1</span>
<span id="s2">s2</span>
</div>
<div>
<span id="s1">s1</span>
<span id="s2">s2</span>
</div>
<div>
<span id="s1">s1</span>
<span id="s2">s2</span>
</div>
<div>
<span id="s1">s1</span>
<span id="s2">s2</span>
</div>拿到所有div下面的span 共八个：$("div span");
拿到所有div下面的span 共八个,然后拿到每一个span下面的第一个子元素 共0个因为span下面没有子元素(文本元素不算)： $("div span :first-child")
拿到所有div下面的span 共八个,然后再进行筛选得到每个div下面的第一个span 共四个：$("div span:first-child")
注意:通过上面现象【重视选择器中的空格】的作用
:last-child
可以匹配多个：选取当前元素的最后一个子元素：$("div span:last-child")
:only-child
如果某个元素是它父元素中唯一的子元素，将被匹配。选择button标签元素,但是他必须是div中的唯一元素 $("div button:only-child")
:first-of-type
选择当前元素中同一类型的第一个元素。如果有多个类型那么就选出每个类型的第一个元素
:last-of-type
选择当前元素中同一类型的最后一个元素，如果有多个类型那么就选出每个类型的最后一个元
例如:
<div id="myDiv">
<div id="test1"></div>
<div id="test2"></div>
<div id="test3"></div>
<span id="span1"></span>
<span id="span2"></span>
<span id="span3"></span>
</div>拿到myDiv下面的所有span,再筛选拿到第一个span： $("#myDiv span:first-of-type")
拿到myDiv下面的所有span,再筛选拿到最后一个span：$("#myDiv span:last-of-type")
拿到myDiv下面的所有子元素,然后筛选出每种子元素的第一个，得到test1元素和span1元素：$("#myDiv :first-of-type");
拿到myDiv下面的所有子元素,然后筛选出每种子元素的最后一个，得到test3元素和span3元素：$("#myDiv :last-of-type");
- （6）表单选择器：主要是对选择的表单元素进行过滤。
:enabled
选取所有可用元素。该选择器仅可用于选择支持disabled属性（attribute）的HTML元素 (<button>, <input>, <optgroup>, <option>, <select>, 和 <textarea>)。
$("input:enabled")
:disabled
选取所有不可用的元素。该选择器也是仅可用于支持disabled属性的HTML元素
$("input:disabled")
:checked
选取所有被选中的元素。用于复选框和单选框(下拉框)
$( "input:checked" ).length;
:selected
选取所有被选中的选项元素。该选择器只适用于<option>元素
$("select option:selected")
:input
选取所有的<input><textarea><select><button>元素
$(":input")选择可以让用户输入的标签元素
$("input")选择名字为input的标签元素
:text
选取所有的单行文本框（<input type="text">）
$('input:text')
:password 选取所有的密码框
:radio 选取所有的单选框
:checkbox 选取所有的多选框
:submit 选取所有的提交按钮
:image 图像
:reset 重置按钮
:button 所有按钮
:file 所有上传域
例如:
//拿到页面中第一个form表单中的密码输入框
$("form:first input:password");
//拿到页面中第一个form表单中的密码输入框中的第二个
$("form:first input:password:eq(1)")- 过滤器举例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="../../../css/style.css" />
<!--引入JQ的文件-->
<script type="text/javascript" src="../../../js/jquery-1.11.0.js" ></script>
<!--
选择器:first
-->
<script>
//文档加载事件,页面初始化的操作
$(function(){
//初始化操作: 给按钮绑定事件
//过滤出所有div中第一个元素
$("#btn1").click(function(){
$("div:first").css("background-color","palegreen");
});
//过滤出所有div中偶数位的div
$("#btn2").click(function(){
$("div:even").css("background-color","palegreen");
});
$("#btn3").click(function(){
$("div:odd").css("background-color","palegreen");
});
$("#btn4").click(function(){
$("div:gt(2)").css("background-color","palegreen");
});
});
</script>
</head>
<body>
<input type="button" value="过滤出所有div中第一个元素" id="btn1" />
<input type="button" value="过滤出所有div中偶数位的div" id="btn2" />
<input type="button" value="过滤出所有div中奇数位的div" id="btn3" />
<input type="button" value="过滤出所有div中找出索引大于2" id="btn4" />
<br />
<div id="one"> <!-- 0 -->
<div class="mini">1-1</div> <!-- 1 -->
</div>
<div id="two"> <!-- 2 -->
<div class="mini">2-1</div> <!-- 3 -->
<div class="mini">2-2</div> <!-- 4 -->
</div>
<div id="three">
<div class="mini">3-1</div>
<div class="mini">3-2</div>
<div class="mini">3-3</div>
</div>
<span id="four">span</span>
</body>
</html>- 表单选择器例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../../../js/jquery-1.11.0.js" ></script>
<script>
$(function(){
$(":text").css("background-color","#FF0000");
$("#btn1").click(function(){
$("select option:selected").css("background-color","chartreuse");
alert($("option:selected").size());
});
});
</script>
</head>
<body>
<form>
<input type="button" value="Input Button"/>
<input type="checkbox" />
<input type="file" />
<input type="hidden" />
<input type="image" />
<input type="password" />
<input type="radio" />
<input type="reset" />
<input type="submit" />
<input type="text" />
<select multiple="multiple">
<option>Option1</option>
<option>Option2</option>
<option>Option3</option>
</select>
<input type="button" value="点我" id="btn1" />
<textarea></textarea>
<button>Button</button>
</form>
</body>
</html>- 表单过滤器例子
<script>
//1.文档加载事件
$(function(){
$(":text").css("background-color","pink");
});
</script>4. jQuery中的each函数:遍历
格式1:
jQuery对象.each(匿名函数);
格式2:
$.each(对象/数组,匿名函数);
注意:匿名函数可以带参数也可以不带参数
例如1:
<div>test1</div>
<div>test2</div>
<div>test3</div>
<div>test4</div>
<div>test5</div> //遍历jQuery对象中的数组
//这里会循环5次,因为会拿到5个div对象
$("div").each(function(){
console.log("test");
});
//参数i表示每次遍历拿到的数组的下标
$("div").each(function(i){
console.log("下标:"+i);
});
//参数e表示拿到的当前下标的对象,注意是dom对象
$("div").each(function(i,e){
console.log(e);//这是dom对象
console.log($(e));//这是jQuery对象 需要这样封装一下
});
//也可以是this变量,这时候this就等同于参数e
$("div").each(function(i,e){
console.log(this);//this表示拿到的当前对象 dom对象
console.log($(this));//这样就可以变为jQuery对象了
});
例如2:
<script>
var v = {
name:"tom",
age:20
};
//v是一个javascript中的对象
$.each(v,function(i,e){
console.log(i+" : "+e);
});
</script> 结果:
name : tom
age : 20
1328
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
