目录
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>