一.核心函数
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="jquery-3.6.0.js"></script>
<script type="text/javascript">
/*传入参数为[函数]时，在文档加载完成后执行这个函数*/
$(function (){
alert("页面加载完成后自动调用");
/*传入参数为[HTML字符串]时，根据这个字符串创建元素节点对象*/
$(" <div>" +
" <span>div-span1</span>" +
" <span>div-span2</span>" +
" </div>").appendTo("body");
/*传入参数为[选择器字符串]时，根据这个字符串查找元素节点对象*/
alert($("button").length);
/*传入参数为DOM对象，把DOM对象转换成jQuery对象*/
alert($(document.getElementById("btn01")));
});
</script>
</head>
<body>
<button id="btn01">button1</button>
<button>button2</button>
<button>button3</button>
</body>
二.jQuery对象和DOM对象区分
DOM对象Alert出来的效果：[object HTML标签名Element]
jQuery对象Alert出来的效果：[object Object]
jQuery对象=DOM对象的数组+jQuery提供的一系列功能函数
转换：
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="jquery-3.6.0.js"></script>
<script type="text/javascript">
$(function (){
/*DOM对象转换成jQuery对象*/
let jQuery=$(document.getElementById("testDiv"));
alert(jQuery);
/*jQuery对象转换成DOM对象*/
let DOM=jQuery[0];
alert(DOM);
});
</script>
</head>
<body>
<div id="testDiv">div</div>;
</body>
三.jQuery选择器
1.基础选择器
- id选择器
jQuery #id 选择器通过 HTML 元素的 id 属性选取指定的元素。
页面中元素的 id 应该是唯一的，所以您要在页面中选取唯一的元素需要通过 #id 选择器。
$("#test") - 元素选择器
jQuery 元素选择器基于元素名选取元素。
$(“div”) - .class选择器
jQuery 类选择器可以通过指定的 class 查找元素。
$(".test")
2.层级选择器
| 选择器 | 实例 | 选取 |
|---|---|---|
| parent descendant | $(“div p”) |
元素的后代的所有
元素 |
| parent > child | $(“div > p”) |
元素的直接子元素的所有
元素 |
| element + next | $(“div + p”) | 每个
元素相邻的下一个
元素 |
| element ~ siblings | $(“div ~ p”) |
元素同级的所有
元素 |
3.过滤选择器
- 基本过滤选择器
| 选择器 | 实例 | 选取 |
|---|---|---|
| :first | $(“p:first”) | 第一个p元素 |
| :last | $(“p:last”) | 最后一个p元素 |
| :even | $(“tr:even”) | 所有偶数tr元素，索引值从 0 开始 |
| :odd | $(“tr:odd”) | 所有奇数tr元素，索引值从 0 开始 |
| :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)”) | 所有不为空的输入元素 |
| :header | $(":header") | 所有标题元素h1,h2 … |
| :animated | $(":animated") | 所有动画元素 |
- 内容过滤选择器
| 选择器 | 实例 | 选取 |
|---|---|---|
| :contains(text) | $(":contains(‘Hello’)") | 所有包含文本 “Hello” 的元素 |
| :empty | $(":empty") | 所有空元素 |
| :parent | $(":parent") | 匹配所有含有子元素或者文本的父元素 |
| :has(selector) | $(“div:has§”) | 所有包含有p元素在其内的div元素 |
- 属性过滤选择器
| 选择器 | 实例 | 选取 |
|---|---|---|
| [attribute] | $("[href]") | 所有带有 href 属性的元素 |
| [attribute=value] | $("[href=‘default.htm’]") | 所有带有 href 属性且值等于 “default.htm” 的元素 |
| [attribute!=value] | $("[href!=‘default.htm’]") | 所有带有 href 属性且值不等于 “default.htm” 的元素 |
| [attribute^=value] | $("[title^=‘Tom’]") | 所有带有 title 属性且值以 “Tom” 开头的元素 |
| [attribute$=value] | ( " [ h r e f ("[href ("[href=’.jpg’]") | 所有带有 href 属性且值以 “.jpg” 结尾的元素 |
| [attribute*=value] | $("[title*=‘hello’]") | 所有带有 title 属性且值包含字符串 “hello” 的元素 |
- 表单过滤选择器
| 选择器 | 实例 | 选取 |
|---|---|---|
| :enabled | $(":enabled") | 所有启用的元素 |
| :disabled | $(":disabled")) | 所有禁用的元素 |
| :selected | $(":selected") | 所有选定的下拉列表元素 |
| :checked | $(":checked") | 所有选中的复选框选项 |
四.jQuery方法
1.jQuery属性操作
- html()
返回内容：
$(selector).html()
设置内容：
$(selector).html(content)
- text()
返回文本内容：
$(selector).text()
设置文本内容：
$(selector).text(content)
- val()
返回 value 属性：
$(selector).val()
设置 value 属性：
$(selector).val(value)
- attr()
返回属性的值：
$(selector).attr(attribute)
设置属性和值：
$(selector).attr(attribute,value)
设置多个属性和值：
$(selector).attr({attribute:value, attribute:value,…})
- prop()
使用方法与上面相同，区别如下：
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#p1").html("attr('checked'): " + $("input").attr('checked')
+ "<br>prop('checked'): " + $("input").prop('checked'));
});
});
</script>
</head>
<body>
<p><b>注意:</b>确认或取消选中该复选框,然后单击按钮刷新内容。</p>
<button>查看attr() 和 prop() 的值</button>
<br><br>
<input id="check1" type="checkbox" >
<label for="check1">Check me</label>
<p id="p1"></p>
</body>
当在单选框的属性上加入 checked=“checked” 后，变成
2.DOM的增删改
- 内部插入
appendTo() 在被选元素的结尾插入 HTML 元素
在每个p元素的结尾插入span元素：
$("button").click(function(){
$("<span>Hello World!</span>").appendTo("p");
});
使用 appendTo() 方法在每个被选元素的结尾插入已有的元素
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("h1").appendTo("p");
});
});
</script>
</head>
<body>
<h1>这是一个标题</h1>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
<button>移除现标题并在每个P元素结尾插入h1元素</button>
</body>
如需在被选元素的开头插入 HTML 元素，请使用 prependTo() 方法
- 外部插入
在每个 p元素后插入一个span元素：
$("button").click(function(){
$("<span>Hello world!</span>").insertAfter("p");
});
如需在被选元素前插入 HTML 元素，请使用 insertBefore() 方法
- 替换
replaceWith() 把被选元素替换为新的内容
把第一个p元素替换为新的文本：
$("button").click(function(){
$("p:first").replaceWith("Hello world!");
});
replaceAll() 把被选元素替换为新的 HTML 元素
把最后一个p元素替换为span元素：
$("button").click(function(){
$("<span>Hello world!</span>").replaceAll("p:last");
});
- 删除
remove() 移除被选元素（包含数据和事件）
移除所有的p元素：
$("button").click(function(){
$("p").remove();
});
如只需从被选元素移除内容，请使用 empty() 方法
注意：empty() 方法不会移除元素本身，或它的属性
3.CSS样式操作
- addClass() 向被选元素添加一个或多个类名
向第一个p元素添加一个类名：
$("button").click(function(){
$("p:first").addClass("intro");
});
该方法不会移除已存在的 class 属性，仅仅添加一个或多个类名到 class 属性。
提示：如需添加多个类，请使用空格分隔类名。
- removeClass() 从被选元素移除一个或多个类
使用 addClass() 和 removeClass() 来移除一个类名，并添加一个新的类名
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p:last").removeClass("intro").addClass("main");
});
});
</script>
<style>
.intro{
color:red;
}
.main{
background-color:yellow;
}
</style>
</head>
<body>
<h1>这是一个标题</h1>
<p>这是另一个段落。</p>
<p class="intro">这是一个段落。</p>
<button>修改最后一个P元素的类名</button>
</body>
注意：如果没有规定参数，则该方法将从被选元素中删除所有类。
- toggleClass() 在被选元素中添加/移除一个或多个类之间切换
该方法检查每个元素中指定的类。如果不存在则添加类，如果已设置则删除之。这就是所谓的切换效果。
对添加和移除所有p元素的 “main” 类进行切换：
$("button").click(function(){
$("p").toggleClass("main");
});
- offset() 设置或返回被选元素的偏移坐标（相对于文档）
返回p元素的偏移坐标：
$("button").click(function(){
var x=$("p").offset();
alert("Top: " + x.top + " Left: " + x.left);
});
返回偏移坐标：
$(selector).offset()
设置偏移坐标：
$(selector).offset({top:value,left:value})
4.动画
- 基本动画
show() 显示被选元素
注意：show() 适用于通过 jQuery 方法和 CSS 中 display:none 隐藏的元素（不适用于通过 visibility:hidden 隐藏的元素）
$(selector).show(speed,easing,callback)
speed 规定显示效果的速度。
callback show() 方法执行完之后，要执行的函数。
easing 规定在动画的不同点上元素的速度。默认值为 “swing”。
“swing” - 在开头/结尾移动慢，在中间移动快
“linear” - 匀速移动
hide() 隐藏被选元素
<script>
$(document).ready(function(){
$(".btn1").click(function(){
$("p").hide();
});
$(".btn2").click(function(){
$("p").show();
});
});
</script>
</head>
<body>
<p>这是一个段落。</p>
<button class="btn1">隐藏</button>
<button class="btn2">显示</button>
</body>
toggle() hide() 和 show() 方法之间的切换
$("button").click(function(){
$("p").toggle();
});
- 淡入淡出动画
fadeIn() 逐渐改变被选元素的不透明度，从隐藏到可见
fadeOut() 逐渐改变被选元素的不透明度，从可见到隐藏
<script>
$(document).ready(function(){
$(".btn1").click(function(){
$("p").fadeOut()
});
$(".btn2").click(function(){
$("p").fadeIn();
});
});
</script>
</head>
<body>
<p>这是一个段落。</p>
<button class="btn1">淡出</button>
<button class="btn2">淡入</button>
</body>
fadeTo() 把被选元素逐渐改变至给定的不透明度
$(selector).fadeTo(speed,opacity,easing,callback)
speed 必需。规定褪色效果的速度。
opacity 必需。规定要淡入或淡出的透明度。必须是介于 0.00 与 1.00 之间的数字。
fadeToggle() 在 fadeIn() 和 fadeOut() 方法之间进行切换
5.事件操作
事件冒泡：父子元素同时监听同一个事件。当出发子元素的事件的时候，同一个事件也被传递到了父元素的事件里去响应。
阻止事件冒泡:在事件函数体内，return false可以阻止事件的冒泡传递。
js事件对象
事件对象，是封装有触发的事件信息的一个js对象
获取事件对象，function(event)
扫一扫
860
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
