jQuery2
目录
jQuery基本筛选器
$(\'ul li:first\'); // 筛选出第一个元素, [li]
$(\'ul li:last\'); // 筛选出最后一个元素
$(\'ul li:eq(1)\'); // 筛选出索引等于1的元素, 从0开始计数
$(\'ul li:even\'); // 筛选出索引为偶数的元素
$(\'ul li:odd\'); // 筛选出索引为奇数的元素
$(\'ul li:gt(3)\'); // 筛选出索引大于3的元素
$(\'ul li:lt(3)\'); // 筛选出索引小于3的元素
$(\'div:not(".c1")\'); // 筛选出不包含c1样式的元素
$(\'div:has(".c1")\'); // 筛选出包含c1样式的元素, 从div标签的后代元素中筛选
jQuery属性选择器
$(\'[userName]\'); // 选择出属性名为userName的元素
$(\'[userName = "jason"]\'); // 选择出属性名为userName, 属性值为jason的元素
$(\'span [userName = "jason"]\'); // 在所有span元素中选择出属性名为userName, 属性值为jason的span元素
// 粒度
jQuery表单筛选中
$(\'[type = "password"]\'); // 复杂写法
$(\':text\'); // 默认在input标签中筛选
$(\':password\');
$(\':file\');
$(\':button\');
$(\':checked\'); // 筛选checked时, 会筛选到selected
$(\'input:checked\'); // 添加input条件过滤掉selected
$(\':selected\'); // 正常筛选
jQuery筛选器方法
<span>div上面的span标签</span>
<div id = "d1">
<span>div中的第一个span标签</span>
<p id = "d2">div中的p标签
<span>p中的span标签</span>
</p>
<span>div中的第二个span标签</span>
</div>
// 注意区分标签对象和jQuery对象
var spanEle = $(\'span\')[1]; // 标签对象, <span>
var $spanEle = $(spanEle); // 将标签对象转换为jQuery对象, [span]
$spanEle.next(); // 筛选出统计下面的第一个, [p#d2]
$spanEle.nextAll(); // 筛选出同级下面所有的, [p#d2, span]
$spanEle.nextUntil(\'#d2\'); // 筛选出同级下面直到d2为止, 但不包括d2, []
$spanEle.parent(); // 筛选出父标签, [div#d1]
$spanEle.parents(); // 筛选出所有父标签, [div#d1, body, html]
$spanEle.parentsUntil(\'html\'); // [div#d1, body]
$(\'div\').find(\'span\'); // 在div的后代中筛选出span标签, [span, span, span]
$("div").filter("#d2") // 筛选出id值为d2的div, 等价于$("div");, [div#d1]
$(\'div span\').first(); // 在div的后代中筛选出第一个span标签, 和下面等价, [span]
$(\'div span:first\'); // [span]
jQuery标签操作
模态框
- 某种特定状态下弹出的对话框
- 用户必须先操作完模态框才能进行其他操作
- 非模态框允许用户直接进行其他操作。
开关灯示例
<style>
.c1 {
width: 200px;
height: 200px;
border-radius: 50%;
}
.c2 {
background-color: red;
}
.c3 {
background-color: green;
}
</style>
<div class="c1 c2 c3"></div>
$(\'div\').removeClass(\'c3\'); // [div.c1.c2]
$(\'div\').addClass(\'c3\'); // [div.c1.c2.c3]
$(\'div\').hasClass(\'c3\'); // true
$(\'div\').toggleClass(\'c3\'); // [div.c1.c2]
$(\'div\').toggleClass(\'c3\'); // [div.c1.c2.c3]
链式操作
$(\'p\').first().css(\'color\', \'red\').next().css(\'color\', \'blue\');
# 原理: 对象调用了方法之后, 再将对象返回
class JQuery:
def f(self):
return self
位置操作
<div style = "height: 1000px; background-color: green"></div>
<div style = "height: 1000px; background-color: aqua"></div>
<div style = "height: 1000px; background-color: black"></div>
$(window).scrollTop(); // 获取匹配元素(浏览器滚动条)相对于滚动条顶部的偏移量
文本操作
$(\'div\').text(); // 获取标签内文本值
$(\'div\').html(); // 获取标签内文本值 + html代码
$(\'div\').text(\'<h1>好痛啊</h1>\'); // 设置标签内文本内容, 不识别html代码
$(\'div\').html(\'<h1>好痛啊</h1>\'); // 设置标签内文本内容, 识别html代码
$(\'input\').val(); // 获取
$(\'input\').val(\'好痛啊\'); // 设值
用户注册校验示例
<h1>注册页面</h1>
<form action="">
<p>
用户名: <input type="text" id="d1">
<span style="color: red" class="errors"></span>
</p>
<p>
密码: <input type="text" id="d2">
<span style="color: red" class="errors"></span>
</p>
<input type="button" id="submit" value="提交">
</form>
<script>
var btnEle = $(\'#submit\')[0];
btnEle.onclick = function () {
// 获取用户输入的用户名和密码
var userNameVal = $(\'#d1\').val();
var passWordVal = $(\'#d2\').val();
// 校验用户名和密码是否有值
if (userNameVal.length == 0) {
// 在对应的位置展示错误信息
$(\'.errors\').first().text(\'用户名不能为空!\')
}
if (passWordVal.length == 0) {
// 在对应的位置展示错误信息
$(\'.errors\').last().text(\'密码不能为空!\')
}
};
var inputEleLt = $(\'input\');
for (let i = 0; i < inputEleLt.length; i++) { // 遍历每个input标签
inputEleLt[i].onfocus = function () { // input标签获取焦点绑定事件
$(this).next().text(\'\') // 设置事件: 清除span标签中的文本内容
}
}
</script>
属性操作
$(\'p\').attr(\'id\'); // "d1"
$(\'p\').attr(\'id\', \'d2\'); // 设置一个属性, [p#d2]
$(\'p\').attr({\'password\': \'123\', \'hobby\': \'study\'}); // 设置多个属性
$(\'p\').removeAttr(\'hobby\'); // 移除属性
/*
足球: <input type="checkbox" >
篮球: <input type="checkbox" checked>
*/
$(\'input\').last().attr(\'checked\'); // 静态获取, "checked"
$(\'input\').first().prop(\'checked\'); // 动态获取, true
$(\'input\').first().prop(\'checked\',\'\'); // 动态设值
$(\'input\').first().removeProp(\'checked\'); // 无效移除, 无法动态移除
节点操作
$(A).append(B); // 把B追加到A
$(A).appendTo(B); // 把A追加到B
clone
<style>
button {
height: 50px;
width: 100px;
background-color: aqua;
border: 3px solid darkgray;
color: white;
}
</style>
<button>屠龙宝刀点击就送</button>
<script>
$("button").on( // jQuery绑定事件
"click", // 点击时绑定事件
function () {
$(this).clone(true).insertAfter(this); // clone内参数为true表示同时克隆事件
}
);
</script>
jQuery时间
jQuery绑定事件的语法
/*
js绑定事件的语法:
var xxxEle = document.getElementBy...;
xxxEle.on事件名 = function () {
// 事件代码
}
jQuery绑定事件的语法:
方式一:
$(选择器).事件名(
function () {
//事件代码
}
)
方式二: 推荐使用, 支持事件委托
$(选择器).on(\'事件名\', functon() {
// 事件代码
}
*/
鼠标悬浮绑定事件
<p style = "width: 700px; height: 100px; background-color: green">贪玩蓝月~是兄弟就来砍我!</p>
<script>
$(\'p\').hover( // 只有一个function时, 悬浮和移开执行同一个事件
function () { // 鼠标悬浮上去时触发
alert(\'23号技师很高兴为您服务!\')
},
function () { // 鼠标移除时触发
alert(\'老板慢走, 下次记得选23号哟~~\')
}
)
</script>
input实时监听事件
<input type="text">
<script>
$(\'input\').on(
\'input\', function () { // input事件, 实时监听用户输入
console.log($(this).val());
}
)
</script>
阻止标签默认的事件
<form action="">
<input type="submit">
<span></span>
</form>
<script>
$(\'input\').on(
\'click\', function (e) {
$(this).next().text(\'你追我~~~\');
// return false; // 方式一
e.preventDefault(); // 方式二
}
)
</script>
事件冒泡
<div>div标签
<p>div中的p标签
<span>p中的span标签</span>
</p>
</div>
<script>
$(\'div\').on(
\'click\', function (e) {
alert(\'div\');
}
);
$(\'p\').on(
\'click\', function (e) {
alert(\'p\');
e.stopPropagation(); // 阻止事件冒泡
}
);
$(\'span\').on(
\'click\', function (e) {
alert(\'span\');
}
);
</script>
事件委托
通过事件冒泡的原理, 利用父标签去捕获子标签的事件, 使动态创建的子标签也拥有同类的静态子标签的对应事件
<button>按钮</button>
<button class="c1">按钮</button>
<input type="button" value="input中的按钮" class="c1">
<script>
$(\'body\').on(
\'click\', \'.c1\', function () {
alert(\'123\')
}
)
// body为父标签, .c1为含有c1样式的子标签
</script>
<!--
在body内动态创建button标签, JavaScript:
var btnEle = document.createElement(\'button\');
btnEle.innerText = \'按钮\';
btnEle; // <button>按钮</button>
var bodyEle = document.getElementsByTagName(\'body\')[0];
bodyEle.append(btnEle);
-->
jQuery动画效果
// <div style = "width: 800px; height: 500px; background-color: aqua"></div>
$(\'div\').hide(3000); // 3秒内隐藏
$(\'div\').show(3000); // 3秒内展示
$(\'div\').slideUp(3000); // 3秒内向上滑动隐藏
$(\'div\').slideDown(3000); // 3s内向下滑动展示
$(\'div\').fadeOut(3000); // 3s内褪色隐藏
$(\'div\').fadeIn(3000); // 3s内增色展示
$(\'div\').fadeTo(3000, 0.3); // 3s内褪色到透明度为0.3
点赞动画效果示例
<div id="d1">点赞</div>
<script>
$("#d1").on(
"click", function () { // 绑定点击事件
var newI = document.createElement(\'i\'); // 创建i标签
$(newI).css(\'color\', \'red\'); // js对象转换成jQuery对象, 并设置颜色样式
newI.innerText = "+1"; // 在i标签中添加文本内容
$(this).append(newI); // 将i标签添加到所有的div标签中
$(this).children().fadeOut(1000); // 给i标签添加动态展示效果: 1秒内褪色隐藏
}
)
</script>
each循环
<div>
<p>1</p>
<p>2</p>
<p>3</p>
</div>
<script>
$pIt = $(\'p\');
// 方式一: 使用return false;可提前结束循环
$.each(
$pIt, function (index, obj,) { // 遍历$pIt中的元素, 获取每一个元素对象的索引和元素对象
console.log(index, obj, this) // this指代当前元素本身
}
);
// 方式二:
$pIt.each(
function (index, obj) {
console.log(index, obj, this)
}
); // 0 <p>1</p> <p>1</p> ...
</script>
data方法隐式设置属性
.data()方法设置的属性对外部不可见
<p></p>
<p></p>
<script>
$(\'p\').data(\'username\', \'jason\');
console.log($(\'p\').data(\'username\')); // jason
console.log($(\'p\').first().data(\'username\')); // jason
console.log($(\'p\').first().data(\'xxx\')); // 不存在不报错, undefined
$(\'p\').removeData(\'username\'); // 移除属性
console.log($(\'p\').data(\'username\')); // 不存在不报错, undefined
</script>