实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Jquery初级基础备忘</title>
<script src="../static/jquery-3.4.1.js">
</script>
<script>
$(document).ready(function() {
$('p').click(function() {
$(this).hide();
});
});
/*
jQuery 是一个 JavaScript 库。
jQuery 极大地简化了 JavaScript 编程。
jQuery 库包含以下特性：
HTML 元素选取
HTML 元素操作
CSS 操作
HTML 事件函数
JavaScript 特效和动画
HTML DOM 遍历和修改
AJAX
Utilities
====================================================================================
基础语法是：$(selector).action()
jQuery 使用 CSS 选择器来选取 HTML 元素。
$("p") 选取 <p> 元素。
$("p.intro") 选取所有 class="intro" 的 <p> 元素。
$("p#demo") 选取所有 id="demo" 的 <p> 元素。
jQuery 使用 XPath 表达式来选择带有给定属性的元素。
$("[href]") 选取所有带有 href 属性的元素。
$("[href='#']") 选取所有带有 href 值等于 "#" 的元素。
$("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。
$("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。
$(selector).hide(speed,callback);
$(selector).show(speed,callback);
可以使用 toggle() 方法来切换 hide() 和 show() 方法。 $(selector).toggle(speed,callback);
$(selector).slideDown(speed,callback);
$(selector).slideUp(speed,callback);
$(selector).slideToggle(speed,callback);
$(selector).animate({params},speed,callback);
如需对位置进行操作，要记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute！
jQuery stop() 方法用于停止动画或效果，在它们完成之前。
stop() 方法适用于所有 jQuery 效果函数，包括滑动、淡入淡出和自定义动画。
$(selector).stop(stopAll,goToEnd);
可选的 stopAll 参数规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。
可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。
因此，默认地，stop() 会清除在被选元素上指定的当前动画。
当动画 100% 完成后，即调用 Callback 函数。
$("p").hide(1000,function(){alert("The paragraph is now hidden");});
链接（chaining）的技术，允许我们在相同的元素上运行多条 jQuery 命令，一条接着另一条
=============================================================================================
获得内容 - text()、html() 以及 val()
三个简单实用的用于 DOM 操作的 jQuery 方法：
text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容（包括 HTML 标记）
val() - 设置或返回表单字段的值
attr() 方法用于获取属性值。
append() - 在被选元素的结尾插入内容
prepend() - 在被选元素的开头插入内容
after() - 在被选元素之后插入内容
before() - 在被选元素之前插入内容
append() 和 prepend() 方法能够通过参数接收无限数量的新元素。可以通过 jQuery 来生成文本/HTML，或者通过 JavaScript 代码和 DOM 元素。
remove() - 删除被选元素（及其子元素）
empty() - 从被选元素中删除子元素
remove() 方法也可接受一个参数，允许您对被删元素进行过滤。
该参数可以是任何 jQuery 选择器的语法。
================================================================================
addClass() - 向被选元素添加一个或多个类
removeClass() - 从被选元素删除一个或多个类
toggleClass() - 对被选元素进行添加/删除类的切换操作
css() - 设置或返回样式属性 css() 方法设置或返回被选元素的一个或多个样式属性。
如需设置指定的 CSS 属性，请使用如下语法：css("propertyname","value");
如需设置多个 CSS 属性，请使用如下语法：
css({"propertyname":"value","propertyname":"value",...});
===================================================================================
Query 提供多个处理尺寸的重要方法：
width()
height()
innerWidth()
innerHeight()
outerWidth()
outerHeight()
width() 方法设置或返回元素的宽度（不包括内边距、边框或外边距）。
height() 方法设置或返回元素的高度（不包括内边距、边框或外边距）。
innerWidth() 方法返回元素的宽度（包括内边距）。
innerHeight() 方法返回元素的高度（包括内边距）。
outerWidth() 方法返回元素的宽度（包括内边距和边框）。
outerHeight() 方法返回元素的高度（包括内边距和边框）。
outerWidth(true) 方法返回元素的宽度（包括内边距、边框和外边距）。
outerHeight(true) 方法返回元素的高度（包括内边距、边框和外边距）。
$("#div1").width(500).height(500);给参数，设置元素的宽度和高度；
========================================================================================
parent()
parents()
parentsUntil()
parent() 方法返回被选元素的直接父元素。该方法只会向上一级对 DOM 树进行遍历。
parents() 方法返回被选元素的所有祖先元素，它一路向上直到文档的根元素 (<html>)。
parentsUntil() 方法返回介于两个给定元素之间的所有祖先元素。
$("span").parentsUntil("div");
例子返回介于 <span> 与 <div> 元素之间的所有祖先元素：
-------------------------------------------------------------------------------
children()
find()
children() 方法返回被选元素的所有直接子元素。该方法只会向下一级对 DOM 树进行遍历。
$("div").children("p.1");
find() 方法返回被选元素的后代元素，一路向下直到最后一个后代。
--------------------------------------------------------------------------------
有许多有用的方法让我们在 DOM 树进行水平遍历：
siblings()
next()
nextAll()
nextUntil()
prev()
prevAll()
prevUntil()
siblings() 方法返回被选元素的所有同胞元素。
$("h2").siblings("p").css({"color":"red","border":"2px solid red"});
next() 方法返回被选元素的下一个同胞元素。该方法只返回一个元素
$("h2").next().css({"color":"red","border":"2px solid red"});
nextAll() 方法返回被选元素的所有跟随的同胞元素
$("h2").nextAll();
nextUntil() 方法返回介于两个给定参数之间的所有跟随的同胞元素。
$("h2").nextUntil("h6");
prev(), prevAll() 以及 prevUntil() 方法的工作方式与上面的方法类似，
只不过方向相反而已：它们返回的是前面的同胞元素（在 DOM 树中沿着同胞元素向后遍历，而不是向前）。
------------------------------------------------------------------------------------------
三个最基本的过滤方法是：first(), last() 和 eq()，它们允许您基于其在一组元素中的位置来选择一个特定的元素。
过滤方法，比如 filter() 和 not() 允许您选取匹配或不匹配某项指定标准的元素。
first() 方法返回被选元素的首个元素。
$("div p").first().css("background-color","yellow");
last() 方法返回被选元素的最后一个元素。
eq() 方法返回被选元素中带有指定索引号的元素。
索引号从 0 开始，因此首个元素的索引号是 0 而不是 1。下面的例子选取第二个 <p> 元素（索引号 1）：
$("p").eq(1);
filter() 方法允许您规定一个标准。不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回。
下面的例子返回带有类名 "intro" 的所有 <p> 元素：
$("p").filter(".intro");
not() 方法返回不匹配标准的所有元素。
提示：not() 方法与 filter() 相反。
下面的例子返回不带有类名 "intro" 的所有 <p> 元素：
$("p").not(".intro");
======================================================================================================
语法 描述
$("*") 选取所有元素
$(this) 选取当前 HTML 元素
$("p.intro") 选取 class 为 intro 的 <p> 元素
$("p:first") 选取第一个 <p> 元素
$("ul li:first") 选取第一个 <ul> 元素的第一个 <li> 元素
$("ul li:first-child") 选取每个 <ul> 元素的第一个 <li> 元素
$("[href]") 选取带有 href 属性的元素
$("a[target='_blank']") 选取所有 target 属性值等于 "_blank" 的 <a> 元素
$("a[target!='_blank']") 选取所有 target 属性值不等于 "_blank" 的 <a> 元素
$(":button") 选取所有 type="button" 的 <input> 元素 和 <button> 元素
$("tr:even") 选取偶数位置的 <tr> 元素
$("tr:odd") 选取奇数位置的 <tr> 元素
=========================================================================================================
鼠标事件 键盘事件 表单事件 文档/窗口事件
click keypress submit load
dblclick keydown change resize
mouseenter keyup focus scroll
mouseleave blur unload
*/
$(document).ready(function() {
$('#btn1').click(function() {
$('#test1').text(function(i, oldtext) {
return 'old text:' + oldtext + 'new text:' + 'Hello World! index:(' + i + ')';
});
});
$('#btn2').click(function() {
$('#test2').html(function(i, oldtext) {
return 'old HTML:' + oldtext + 'New HTML: Hello <strong>World!</string> index:(' + i + ')';
});
});
})
</script>
</head>
<body>
<p>如果你点我，我就会消失。</p>
<p>继续点我!</p>
<p>接着点我!</p>
<p id="test1">这是<b>粗体</b>文本。</p>
<p id="test2">这是另一段<b>粗体</b>文本。</p>
<button id="btn1">显示旧/新文本</button>
<button id="btn2">显示旧/新 HTML</button>
</body>
</html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
Collection
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
