<script src="js/jquery-1.10.1.js" type="text/javascript"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
方式一:
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<script src="../JS/jquery-3.5.1.js"></script>
<script type="text/javascript">
$(function () {
});
</script>
</head>
方式二:
<body>
<script src="../JS/jquery-3.5.1.js"></script>
<script type="text/javascript">
</script>
</body>
① DOM 对象:
DOM 对象 Alert 出来的效果是:[object HTML 标签名 Element]
② jQuery 对象:
JQuery 对象时 dom 对象的数组 + JQuery 提供的一系列功能函数。
方法 | 描述 |
---|---|
#id | 根据给定的 ID 匹配一个元素。 |
tagName/* | 根据匹配标签元素/所有元素。 |
.class | 根据给定的类匹配元素。 |
selector1,selector2,selector3 | 将每一个选择器匹配到的元素合并后一起返回。 |
selector1selector2selector3 | 将每一个选择器匹配到的元素交集部分一起返回。 |
找子孙后代,兄弟元素
方法 | 描述 |
---|---|
selector1>selector2 | 子元素 |
selector1 selector2 | 后代元素 |
方法 | 描述 |
---|---|
:first | 获取第一个元素 |
:last | 获取最后个元素 |
:eq(index) | 匹配一个给定索引值的元素 |
:lt | 匹配所有小于给定索引值的元素 |
:gt | 匹配所有大于给定索引值的元素 |
:odd | 匹配所有索引值为奇数的元素,从 0 开始计数 |
:even | 匹配所有索引值为偶数的元素,从 0 开始计数 |
:not(selector) | 去除所有与给定选择器匹配的元素 |
:hidden | 匹配所有不可见元素,或者 type 为 hidden 的元素 |
:visible | 匹配所有的可见元素 |
[attrName] | 匹配包含给定属性的元素。 |
[attrName=value] | 匹配给定的属性是某个特定值的元素 |
代码示例 [attrName]:
<div>
<p>Hello!</p>
</div>
<div id="test2"></div>
jQuery 代码:
$("div[id]")
运行结果:
<div id="test2"></div>
代码示例 [attrName=value]:
<input type="checkbox" name="newsletter" value="Hot Fuzz" />
<input type="checkbox" name="newsletter" value="Cold Fusion" />
<input type="checkbox" name="accept" value="Evil Plans" />
jQuery 代码:
$("input[name='newsletter']").attr("checked", true);
运行结果:
<input type="checkbox" name="newsletter" value="Hot Fuzz" checked="true" />
<input type="checkbox" name="newsletter" value="Cold Fusion" checked="true" />
方法 | 描述 |
---|---|
:input | 匹配所有 input, textarea, select 和 button 元素 |
:text | 匹配所有的单行文本框 |
:checkbox | 匹配所有复选框 |
:radio | 匹配所有单选按钮 |
:checked | 匹配所有选中的被选中元素(复选框、单选框等,不包括 select 中的 option) |
代码示例 【:input】:
<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>
<option>Option</option>
</select>
<textarea></textarea>
<button>Button</button>
</form>
jQuery 代码:
$(":input")
运行结果:
<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>
<option>Option</option>
</select>
<textarea></textarea>
<button>Button</button>
代码示例 【:checked】:
<form>
<input type="checkbox" name="newsletter" checked="checked" value="Daily" />
<input type="checkbox" name="newsletter" value="Weekly" />
<input type="checkbox" name="newsletter" checked="checked" value="Monthly" />
</form>
jQuery 代码:
$("input:checked")
运行结果:
<input type="checkbox" name="newsletter" checked="checked" value="Daily" />
<input type="checkbox" name="newsletter" checked="checked" value="Monthly" />
方法 | 描述 |
---|---|
attr(name) / attr(name, value) | 读写非布尔值的标签属性 |
prop(name) / prop(name, value) | 读写布尔值的标签属性 |
removeAttr(name)/removeProp(name) | 删除属性 |
addClass(classValue) | 添加 class |
removeClass(classValue) | 移除指定 class |
val() / val(value) | 读写标签的 value |
html() / html(htmlString) | 读写标签体文本 |
方法 | 描述 |
---|---|
css(styleName) | 根据样式名得到对应的值 |
css(styleName, value) | 设置一个样式 |
css(多个样式对) | 设置多个样式 |
代码示例:
$("p").css("color");
$("p").css({ color: "#ff0011", background: "blue" });
3. 将所有段落字体设为红色
$("p").css("color","red");
方法 | 描述 |
---|---|
offset() | 读/写当前坐标(原点是页面左上角) |
position() | 读写当前元素的坐标的(原点是父元素左上角) |
scrollTop()/scrollLeft() | 读/写元素/页面的滚动坐标 |
代码示例:
<p>Hello</p>
<p>2nd Paragraph</p>
// jQuery代码 var p = $("p:last"); var offset = p.offset(); p.html( "left: " +
offset.left + ", top: " + offset.top );
运行结果
<p>Hello</p>
<p>left: 0, top: 35</p>
<p>Hello</p>
<p>2nd Paragraph</p>
// jQuery代码 var p = $("p:first"); var position = p.position();
$("p:last").html( "left: " + position.left + ", top: " + position.top );
运行结果:
<p>Hello</p>
<p>left: 15, top: 15</p>
<p>Hello</p>
<p>2nd Paragraph</p>
// jQuery代码 var p = $("p:first"); $("p:last").text( "scrollTop:" +
p.scrollTop() );
运行结果:
<p>Hello</p>
<p>scrollTop: 0</p>
<p>Hello</p>
<p>2nd Paragraph</p>
// jQuery代码
var p = $("p:first");
$("p:last").text( "scrollLeft:" + p.scrollLeft() );
运行结果:
<p>Hello</p>
<p>scrollLeft: 0</p>
方法 | 描述 |
---|---|
width()/height() | width/height |
innerWidth()/innerHeight() | width + padding |
outerWidth()/outerHeight() | width + padding + border |
outerWidth(true)/outerHeight(true) | width + padding + border+margin |
代码示例:
$("p").height();
<p>Hello</p>
<p>2nd Paragraph</p>
// jQuery
var p = $("p:first");
$("p:last").text("innerHeight:" + p.innerHeight());
结果示例:
<p>Hello</p>
<p>innerHeight: 16</p>
<p>Hello</p>
<p>2nd Paragraph</p>
// jQuery
var p = $("p:first");
$("p:last").text(
"outerHeight:" +
p.outerHeight() +
" , outerHeight(true):" +
p.outerHeight(true)
);
运行结果:
<p>Hello</p>
<p>outerHeight: 35 , outerHeight(true):55</p>
在 jQuery 对象内部的元素中找出部分匹配的元素, 并封装成新的 jQuery 对象返回
方法 | 描述 |
---|---|
first() | 获取第一个元素 |
last() | 获取最后个元素 |
eq(index) | 获取第 N 个元素 |
filter(selector) | 筛选出与指定表达式匹配的元素集合。 |
not(selector) | 删除与指定表达式匹配的元素 |
has(selector) | 保留包含特定后代的元素,去掉那些不含有指定后代的元素。 |
代码示例:
<p>Hello</p>
<p>Hello Again</p>
<p class="selected">And Again</p>
// jQuery
$("p").filter(".selected");
// 运行结果
<p class="selected">And Again</p>
<p>Hello</p>
<p id="selected">Hello Again</p>
// jQuery
$("p").not($("#selected")[0]);
// 运行结果
<p>Hello</p>
3. **has(selector)**
<ul>
<li>list item 1</li>
<li>
list item 2
<ul>
<li>list item 2-a</li>
<li>list item 2-b</li>
</ul>
</li>
<li>list item 3</li>
<li>list item 4</li>
</ul>
// jQuery
$("li").has("ul").css("background-color", "red");
查找 jQuery 对象内部的元素的子孙/兄弟/父母元素, 并封装成新的 jQuery 对象返回
方法 | 描述 |
---|---|
children(selector) | 取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合。(子元素) |
find(selector) | 搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的方法。(后代元素) |
preAll(selector) | 查找当前元素之前所有的同辈元素(前的所有兄弟) |
siblings(selector) | 取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合。(所有兄弟) |
parent() | 取得一个包含着所有匹配元素的唯一父元素的元素集合。(父元素) |
代码示例:
<div></div>
<div></div>
<div></div>
<div></div>
// jQuery
$("div:last").prevAll().addClass("before");
// 运行结果
<div class="before"></div>
<div class="before"></div>
<div class="before"></div>
方法 | 描述 |
---|---|
append() / appendTo() | 插入后部 |
preppend() / preppendTo() | 插入前部 |
before() | 插到前面 |
after() | 插到后面 |
方法 | 描述 |
---|---|
remove() | 从 DOM 中删除所有匹配的元素。(将自己及内部的孩子都删除) |
empty() | 删除匹配的元素集合中所有的子节点。(掏空(自己还在)) |
代码示例:
<p>Hello</p>
how are
<p>you?</p>
// jQuery
$("p").remove();
// 运行结果 how are
方法 | 描述 |
---|---|
replaceWith() | 将所有匹配的元素替换成指定的 HTML 或 DOM 元素。 |
代码示例:
<p>Hello</p>
<p>cruel</p>
<p>World</p>
// jQuery
$("p").replaceWith("<b>Paragraph. </b>");
// 运行结果
<b>Paragraph. </b>
<b>Paragraph. </b>
<b>Paragraph. </b>
理解: 将子元素的事件委托给父辈元素处理
好处:
jQuery 的事件委托 API
代码示例:
<ul>
<li>11111</li>
<li>1111111</li>
<li>111111111</li>
<li>11111111111</li>
</ul>
<li>22222</li>
<br />
<button id="btn">添加新的li</button>
<br />
// jQuery
$("ul>li").click(function () {
this.style.background = "red";
});
$("#btn").click(function () {
$("ul").append("<li>新增的li....</li>");
});
// 运行结果
<ul>
<li>11111</li>
<li>1111111</li>
<li>111111111</li>
<li>11111111111</li>
<li>新增的li....</li>
</ul>
方法 | 描述 |
---|---|
event.offsetX | 原点是当前元素左上角 |
event.clientX | 原点是窗口左上角 |
event.pageX | 原点是页面左上角 |
代码示例:
<div class="out">
外部DIV
<div class="inner">内部div</div>
</div>
<div class="divBtn">
<button id="btn1">测试事件坐标</button>
</div>
$("#btn1").click(function (event) {
// event 事件
console.log(event.offsetX, event.offsetY); // 原点为事件元素的左上角
console.log(event.clientX, event.clientY); // 原点为窗口的左上角
console.log(event.pageX, event.pageY); // 原点为页面的左上角
});
代码示例:
<ul>
<li>1111</li>
<li>2222</li>
<li>3333</li>
<li>4444</li>
</ul>
<li>22222</li>
<br />
<button id="btn1">添加新的li</button>
<button id="btn2">删除ul上的事件委托的监听器</button>
// jQuery
// 设置事件委托
$("ul").delegate("li", "click", function () {
this.style.background = "red";
});
$("#btn1").click(function () {
$("ul").append("<li>新增的li....</li>");
});
// 移除事件委托
$("#btn2").click(function () {
$("ul").undelegate("click");
});
方法 | 描述 |
---|---|
show() | 将隐藏的元素显示 |
hide() | 将可见的元素隐藏 |
toggle() | 可见就隐藏,不可见就显示 |
以上的动画都可以添加参数:
① 第一个参数就是显示 执行的时间,以毫秒为单位
② 第二个参数就是动画的回调函数(动画完成以后调用的函数)
代码示例:
<style type="text/css">
* {
margin: 0px;
}
.div1 {
position: absolute;
width: 200px;
height: 200px;
top: 50px;
left: 10px;
background: red;
display: none;
}
</style>
<body>
<button id="btn1">瞬间显示</button>
<button id="btn2">慢慢显示</button>
<button id="btn3">慢慢隐藏</button>
<button id="btn4">显示隐藏切换</button>
<div class="div1"></div>
<script src="../JS/jquery-3.5.1.js" type="text/javascript"></script>
<script type="text/javascript">
var $div1 = $(".div1");
// 1. 点击btn1, 立即显示
$("#btn1").click(function () {
$div1.show();
});
// 2. 点击btn2,慢慢显示
$("#btn2").click(function () {
$div1.show(1000);
});
// 3. 点击btn3, 慢慢隐藏
$("#btn3").click(function () {
$div1.hide(1000);
});
// 4.点击btn4, 切换显示/隐藏
$("#btn4").click(function () {
$div1.toggle(1000);
});
</script>
</body>
动画 | 描述 |
---|---|
fadeln() | 淡入 |
fadeOut() | 淡出 |
fade To() | 在指导时长内慢慢将透明度修改指定的值。0 透明 1 完成可见 0.5 透明 |
<style type="text/css">
* {
margin: 0px;
}
.div1 {
position: absolute;
width: 200px;
height: 200px;
top: 50px;
left: 10px;
background: red;
}
</style>
<body>
<button id="btn1">慢慢淡出</button>
<button id="btn2">慢慢淡入</button>
<button id="btn3">淡出/淡入切换</button>
<div class="div1"></div>
<script src="../JS/jquery-3.5.1.js" type="text/javascript"></script>
<script type="text/javascript">
/*
需求:
1. 点击btn1, 慢慢淡出
* 无参
* 有参
* 字符串参数
* 数字参数
2. 点击btn3, 慢慢淡入
3. 点击btn3, 淡出/淡入切换,动画结束时提示“动画结束了”
*/
var $div1 = $(".div1");
$("#btn1").click(function () {
$div1.fadeOut(1000, function () {
alert("动画完成了!!!!");
});
});
$("#btn2").click(function () {
$div1.fadeIn();
});
$("btn3").click(function () {
$div1.fadeToggle();
});
</script>
</body>