JQuery
jQuery是一个快速、简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(框架)于2006年1月由John Resig发布。jQuery设计的宗旨是**“write Less,Do More”**,即倡导写更少的代码,做更多的事情。
它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作、事件处理、动画设计和Ajax交互。
jQuery的核心特性可以总结为:具有独特的链式语法和短小清晰的多功能接口;具有高效灵活的CSS选择器,并且可对CSS选择器进行扩展;拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器,如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。
有两个版本的 jQuery 可供下载:
- Production version - 用于实际的网站中,已被精简和压缩。
- Development version - 用于测试和开发(未压缩,是可读的代码)
这两个版本都可以从 jQuery.com 下载。
只要通过JavaScript代码语句调用JQuery文件即可使用!
<script type="text/javascript" src="../script/jquery-3.6.0.js"></script>
并且需要明确一个点,JQuery必须要引进JQuery库中,不然代码是不会执行的,而且,在JQuery中的$符号,也是一个函数!
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="../script/jquery-3.6.0.js"></script>
<script>
// window.onload =function() {
// var btnObj = document.getElementById("btn");
// alert(btnObj);
// btnObj.onclick = function () {
// alert("JS原生的单击事件!")
// }
// }
$(function() {
// 表示页面加载完成之后执行,相当于window.onload
var $btn = $("#btn"); // 按id查询标签对象
$btn.click(function () {
// 绑定单击事件
alert("JQuery的单击事件!")
});
});
</script>
</head>
<body>
<button id="btn">Hello</button>
</body>
</html>
JQuery语法
jQuery 语法是为 HTML 元素的选取编制的,可以对元素执行某些操作。
基础语法是:$(selector).action()
- 美元符号定义 jQuery
- 选择符(selector)“查询”和“查找” HTML 元素
- jQuery 的 action() 执行对元素的操作
示例:
$(this).hide() - 隐藏当前元素
$(“p”).hide() - 隐藏所有段落
$(".test").hide() - 隐藏所有 class=“test” 的所有元素
$("#test").hide() - 隐藏所有 id=“test” 的元素
注意: 如果网站包含许多页面,并且希望 jQuery 函数易于维护,那么需要把 jQuery 函数放到独立的 .js 文件中。
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="my_jquery_functions.js"></script>
</head>
jQuery 使用 $ 符号作为 jQuery 的简介方式。
某些其他 JavaScript 库中的函数(比如 Prototype)同样使用 $ 符号。
jQuery 使用名为 noConflict() 的方法来解决该问题。
var jq=jQuery.noConflict(),使用自己的名称(比如 jq)来代替 $ 符号。
<script>
$.noConflict();
jQuery(document).ready(function(){
jQuery("button").click(function(){
jQuery("p").text("jQuery 仍在运行!");
});
});
</script>
由于 jQuery 是为处理 HTML 事件而特别设计的,那么当您遵循以下原则时,您的代码会更恰当且更易维护:
- 把所有 jQuery 代码置于事件处理函数中
- 把所有事件处理函数置于文档就绪事件处理器中
- 把 jQuery 代码置于单独的 .js 文件中
- 如果存在名称冲突,则重命名 jQuery 库
如何区分JQuery对象和DOM对象
关于DOM对象:
- 通过getElementByID()…查询出来的标签对象就是DOM对象、
- 通过createElement()方法创建的对象也是DOM对象
- DOM对象alert出来的效果是:[Object HTMLElement]
关于JQuery对象:
- 通过JQuery提供的API创建的对象,是JQuery对象
- 通过JQuery包装的DOM对象,是JQuery对象
- 通过JQuery提供的API查询到的对象,也是JQuery对象
并且需要注意的是,JQuery对象可以理解成由DOM对象组成的数组,加上JQuery提供的一系列函数!
但是JQuery对象并不能调用DOM对象的属性!同样的,DOM对象也不能调用JQuery提供的一系列函数!
DOM对象和JQuery对象的互转
- DOM对象转换成JQuery对象
- 首先需要有DOM对象
- $(DOM对象)就可以转换成JQuery对象
- JQuery对象转为DOM对象
- 首先需要有JQuery对象
- JQuery对象[下标]取出相应的DOM对象
JQuery选择器
基本选择器
jQuery 使用 CSS 选择器来选取 HTML 元素。
$(“p”) 选取
元素。
$(“p.intro”) 选取所有 class=“intro” 的
元素。
$(“p#demo”) 选取所有 id=“demo” 的
元素。
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="../script/jquery-3.6.0.js"></script>
<script>
$(function(){
$("#id").click(function () {
$("#id").css("background-color","blue");
});
$(".class").click(function() {
$(".class").css("fontSize", "30px");
})
$("span").click(function () {
$("p").hide();
})
});
</script>
</head>
<body>
<p id="id">基本id选择器</p>
<p class="class">基本class选择器</p>
<span>基本标签选择器</span>
</body>
</html>
层次选择器
1. 全部后代选择
$(‘ancestor descendant’):在给定的祖先元素下,匹配所有的后代元素
2. 直接后代选择
$(‘parent > child’):在给定的父元素下匹配所有的子元素
3. 兄弟元素选择器
-
相邻下一个兄弟元素选择器
$(‘prevSibling + nextSibling’):匹配所有紧接在prevSibling元素后的nextSibling元素。
-
后排兄弟元素选择器
$(‘prev ~ sibling’):匹配所有紧接在prev元素后所有的siblings元素。
示例代码:
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="../script/jquery-3.6.0.js"></script>
<script>
$(document).ready(function () {
// 全部后代选择
$("#btn1").click(function () {
var array = $("body input");
for (let i = 0; i < array.length; i++) {
array[i].value = "测试"
}
})
// 直接后代选择
$("#btn2").click(function () {
$("form > p").css("fontSize", "25px")
})
// 相邻下一个兄弟元素选择器
$("#btn3").click(function () {
$("p + input").css("fontSize", "25px")
})
// 后排兄弟元素选择器
$("#btn4").click(function () {
$("form ~ p").css("fontSize", "25px")
})
});
</script>
</head>
<body>
<button id="btn1">测试1</button>
<button id="btn2">测试2</button>
<button id="btn3">测试3</button>
<button id="btn4">测试4</button>
<p>第一个p标签</p>
<input type="text" value="第一个input标签">
<form action="#">
<p>第二个p标签</p>
<input type="text" value="第二个input标签">
</form>
<p>第三个p标签</p>
<input type="text" value="第三个input标签">
</body>
</html>
其他选择器
选择器 | 实例 | 选取 |
---|---|---|
[*] | $("*") | 所有元素 |
[#id] | $("#lastname") | id=“lastname” 的元素 |
[.class] | $(".intro") | 所有 class=“intro” 的元素 |
[element] | $(“p”) | 所有 元素 |
.class.class | $(".intro.demo") | 所有 class=“intro” 且 class=“demo” 的元素 |
[:first] | $(“p:first”) | 第一个 元素 |
[:last] | $(“p:last”) | 最后一个 元素 |
[:even] | $(“tr:even”) | 所有偶数 |
[:odd] | $(“tr:odd”) | 所有奇数 |
[:eq(index)] | $(“ul li:eq(3)”) | 列表中的第四个元素(index 从 0 开始) |
[:gt(no)] | $(“ul li:gt(3)”) | 列出 index 大于 3 的元素 |
[:lt(no)] | $(“ul li:lt(3)”) | 列出 index 小于 3 的元素 |
:not(selector) | $(“input:not(:empty)”) | 所有不为空的 input 元素 |
[:header] | $(":header") | 所有标题元素 - |
[:animated] | 所有动画元素 | |
[:contains(text) | $(":contains(‘W3School’)") | 包含指定字符串的所有元素 |
[:empty] | $(":empty") | 无子(元素)节点的所有元素 |
:hidden | $(“p:hidden”) | 所有隐藏的 元素 |
[:visible] | $(“table:visible”) | 所有可见的表格 |
s1,s2,s3 | $(“th,td,.intro”) | 所有带有匹配选择的元素 |
[[attribute]] | $("[href]") | 所有带有 href 属性的元素 |
[[attribute=value]] | $("[href=’#’]") | 所有 href 属性的值等于 “#” 的元素 |
[[attribute!=value]] | $("[href!=’#’]") | 所有 href 属性的值不等于 “#” 的元素 |
[[attribute$=value]] | ( " [ h r e f ("[href ("[href=’.jpg’]") | 所有 href 属性的值包含以 “.jpg” 结尾的元素 |
[:input] | $(":input") | 所有 元素 |
[:text] | $(":text") | 所有 type=“text” 的 元素 |
[:password] | $(":password") | 所有 type=“password” 的 元素 |
[:radio] | $(":radio") | 所有 type=“radio” 的 元素 |
[:checkbox] | $(":checkbox") | 所有 type=“checkbox” 的 元素 |
[:submit] | $(":submit") | 所有 type=“submit” 的 元素 |
[:reset] | $(":reset") | 所有 type=“reset” 的 元素 |
[:button] | $(":button") | 所有 type=“button” 的 元素 |
[:image] | $(":image") | 所有 type=“image” 的 元素 |
[:file] | $(":file") | 所有 type=“file” 的 元素 |
[:enabled] | $(":enabled") | 所有激活的 input 元素 |
[:disabled] | $(":disabled") | 所有禁用的 input 元素 |
[:selected] | $(":selected") | 所有被选取的 input 元素 |
[:checked] | $(":checked") | 所有被选中的 input 元素 |
遍历
jQuery 提供了多种遍历 DOM 的方法,遍历方法中最大的种类是树遍历(tree-traversal)。
向上遍历
以下方法用于向上遍历 DOM 树:
- parent()
- parent() 方法返回被选元素的直接父元素,该方法只会向上一级对 DOM 树进行遍历。
- parents()
- parents() 方法返回被选元素的所有祖先元素,它一路向上直到文档的根元素 ()。
- parentsUntil()
- parentsUntil() 方法返回介于两个给定元素之间的所有祖先元素。
向下遍历
下面是两个用于向下遍历 DOM 树的 jQuery 方法:
- children()
- children() 方法返回被选元素的所有直接子元素。
- find()
- find() 方法返回被选元素的后代元素,一路向下直到最后一个后代。
水平遍历
有许多有用的方法让我们在 DOM 树进行水平遍历:
- siblings()
- siblings() 方法返回被选元素的所有同胞元素。
- next()
- next() 方法返回被选元素的下一个同胞元素。
- nextAll()
- nextAll() 方法返回被选元素的所有跟随的同胞元素。
- nextUntil()
- nextUntil() 方法返回介于两个给定参数之间的所有跟随的同胞元素。
- prev()
- prevAll()
- prevUntil()
prev(), prevAll() 以及 prevUntil() 方法的工作方式与上面的方法类似,只不过方向相反而已:它们返回的是前面的同胞元素(在 DOM 树中沿着同胞元素向后遍历,而不是向前)。
each
each() 方法规定为每个匹配元素规定运行的函数。
提示: 返回 false 可用于及早停止循环。
$(selector).each(function(index,element))
参数 | 描述 |
---|---|
function(index,element) | 必需。为每个匹配元素规定运行的函数。index - 选择器的 index 位置element - 当前的元素(也可使用 “this” 选择器) |
代码实例:输出每个 li 元素的文本
$("button").click(function(){
$("li").each(function(){
alert($(this).text())
});
});
其中,this所代表的是当前遍历中已经遍历到的元素!
过滤
过滤说白了就是缩小搜索元素的范围!
三个最基本的过滤方法是:first(), last() 和 eq(),它们允许您基于其在一组元素中的位置来选择一个特定的元素。
其他过滤方法,比如 filter() 和 not() 允许您选取匹配或不匹配某项指定标准的元素。
first() 方法返回被选元素的首个元素。
下面的例子选取首个
元素:
$(document).ready(function(){
$("div p").first();
});
last() 方法返回被选元素的最后一个元素。
下面的例子选择最后一个
元素: