jQuery节点操作
创建节点
语法:$(‘要创建的元素’)
列子:
$("<span>这是一个span元素</span>");
添加节点
// append appendTo 都是添加到元素内部的最后面
// prepend prependTo 都是添加到元素内部的最前面
// before 添加到元素前面,做兄弟元素
// after 添加到元素后面,做兄弟元素
清空节点empty与删除节点remove
语法:$(元素名).empty()
empty:清空指定节点的所有元素,自身保留(清理门户)
$('div').empty();//清空div的所有内容
语法:$(元素名).remove()
remove:相比于empty,自身也删除(自杀)
$('div').remove();
克隆节点clone
语法:$(元素名).clone()
clone:复制匹配的元素
$(selector).clone();
// 复制$(selector)所匹配到的元素(深度复制)
// cloneNode(true)
// 返回值为复制的新元素,和原来的元素没有任何关系了。即修改新元素,不会影响到原来的元素。
jQuery特殊属性操作
val方法
语法:val()
val方法用于设置和获取表单元素的值,例如input、textarea的值
注:val()方法的使用是有元素限制的,要求元素有默认的value属性
常见的有value属性的元素有:input、select、textarea
特点:如果有参数就是赋值,没有参数就是取值
//设置值
$("#name").val('张三');
//获取值
$("#name").val();
html方法与text方法
语法:html()
html方法相当于innerHTML
语法:text()
text方法相当于innerText
作用:为标签赋值,值是标签之间的值,只能用于双标签
//设置内容
$('div').html('<span>这是一段内容</span>');
//获取内容
$('div').html()
//设置内容
$('div').text('<span>这是一段内容</span>');
//获取内容
$('div').text()
区别:html方法会识别html标签,text方法会将内容直接当成字符串,并不会识别html标签。
清空标签的内容
empty() 和 html() 方法都可以清空内容,但推荐使用empty方法清空元素里的内容
$('div').empty();//清空div的所有内容(推荐使用,会清除子元素上绑定的事件)
$('div').html("");//使用html方法来清空元素,不推荐使用,会造成内存泄漏,绑定的事件不会被清除。
width方法与height方法
设置或者获取高度(宽度)
//带参数表示设置高度
$(“img”).height(200);
//不带参数获取高度
$(“img”).height();
获取网页的可视区宽高
//获取可视区宽度
$(window).width();
//获取可视区高度
$(window).height();
$(function () {
let $div = $('.box')
// width:仅仅获取样式中的width值
console.log("样式中的width宽度:" + $div.width()) // 200
console.log("样式中的width+border宽度:" + $div.innerWidth()) // 200 + 10
console.log("样式中的width+border+padding宽度:" + $div.outerWidth()) // 200 + 10 + 10
console.log("样式中的width+border+padding+margin宽度:" + $div.outerWidth(true)) // 200 + 10 +10 + 10
})
scrollTop与scrollLeft
设置或者获取垂直滚动条的位置
//获取页面被卷曲的高度
$(window).scrollTop();
//获取页面被卷曲的宽度
$(window).scrollLeft();
offset方法与position方法
offset方法获取元素距离document的位置。
position方法获取的是元素距离有定位的父元素的位置。
//获取元素距离document的位置,返回值为对象:{left:100, top:100}
$(selector).offset();
//获取相对于其最近的有定位的父元素的位置。
$(selector).position();
jQuery事件机制
on注册事件(重点)
on注册事件的语法:
on('参数1','参数2','参数3','参数4')
$(selector).on(events[,selector][,data],handler);
// 第一个参数:events,绑定事件的名称可以是由空格分隔的多个事件(标准事件或者自定义事件)
// 第二个参数:selector, 执行事件的后代元素(可选),如果没有后代元素,那么事件将有自己执行。
// 第三个参数:data,传递给处理函数的数据,事件触发的时候通过event.data来使用(不常使用)
// 第四个参数:handler,事件处理函数
//on注册简单事件
// 表示给$(selector)绑定事件,并且由自己触发,不支持动态绑定。
$(selector).on( "click", function() {});
//on注册委托事件
// 表示给$(selector)绑定代理事件,当必须是它的内部元素span才能触发这个事件,支持动态绑定
$(selector).on( "click","span", function() {});
事件解绑off
off方式: 谁绑定了事件,就为谁解绑
// 解绑匹配元素的所有事件
$(selector).off();
// 解绑匹配元素的所有click事件
$(selector).off("click");
触发事件(重点)
// click()可以触发指定元素的click事件,但是,它只能触发元素的click事件,如果其它元素是不同的事件类型,那么就需要调用指定的类型的方法
$(selector).click(); //触发 click事件
$(selector).trigger("click");
案例
案例1:城市选择
/*
要求:
1、获取元素(#src-city、#tar-city)
2、为按钮绑定事件
2.1、btn1:点击btn1,将全部选项移到#tar-city框中
2.2、btn2:点击btn2,将全部选项移到#src-city框中
2.3、btn3:点击btn3,将选中项移到#tar-city框中,用到option:selected
2.4、btn4:点击btn4,将选中项移到#src-city框中,用到option:selected
*/
js代码如下:
$(function () {
let $srcCity = $('#src-city');
let $tarCity = $('#tar-city');
// console.log($srcCity, $tarCity);
// 点击btn1,将全部选项移到#tar-city中
$('#btn1').click(function () {
// console.log('aa');
$tarCity.append($srcCity.find('option'));
})
// 点击btn2,将全部选项移到#src-city中
$('#btn2').click(function () {
// console.log('aa');
$srcCity.append($tarCity.find('option'));
})
// 点击btn3,将选中项移到#tar-city中
// :selected 获取select列表中的选中元素
$('#btn3').click(function () {
// console.log('aa');
$tarCity.append($srcCity.find('option:selected'));
})
// 点击btn4,将选中项移到#src-city中
$('#btn4').click(function () {
// console.log('aa');
$srcCity.append($tarCity.find('option:selected'));
})
});
案例2:固定导航位置
/*
// 思路:
// 1. 获取元素(navBar、topPart、mainPart)
// 2. 给window注册滚动事件 scroll
// 3. 页面滚动的时候,获取页面的垂直方向的滚动距离 scrollTop
// 4. 将获取的滚动距离scrollTop 和 topPart的高度做比较
// 4.1 scrollTop >= topPart的高度 ==> navBar固定定位
// 问题:navBar固定定位后不占位置,底下的mainPart会跑到上面去。
// 解决:mainPart添加外边距样式:marginTop = 10 + navBar的高度
// 4.2 否则 ==> 让navBar取消固定定位 占位置,
// mainPart设置marginTop = 10
*/
js代码如下:
$(function () {
// 1、获取元素(navBar、topPart、mainPart)
let $topPart = $('#topPart');
let $navBar = $('#navBar');
let $mainPart = $('#mainPart');
// 2、给window注册滚动事件 scroll
$(window).scroll(function () {
// 3. 页面滚动的时候,获取页面的垂直方向的滚动距离 scrollTop
let offsetTop = $('html').scrollTop();
// console.log(offsetTop);
// 4. 将获取的滚动距离scrollTop 和 topPart的高度做比较
if (offsetTop >= $topPart.height()) {
// console.log('aa');
// 为$navBar添加固定定位样式
$navBar.addClass('fixed');
// 为$mainPart添加上外边距: $navBar的高度 + 10px
$mainPart.css({
marginTop: $navBar.height() + 10
})
} else {
// 去除固定定位样式和上外边距的$navBar的高度
$navBar.removeClass('fixed');
$mainPart.css({
marginTop: 10
})
}
})
});
案例3:固定导航位置
/*
要求:
回到顶部
*/
js代码如下:
$(function () {
let $actGotop = $('.actGotop');
// 为window添加滚动事件
$(window).scroll(function () {
// console.log($('html').scrollTop(), $('html').scrollLeft());
// 获取偏移高度
let offsetTop = $('html').scrollTop();
// console.log(offsetTop);
// 判断偏移高度是否大于1000,大于则显示小火箭,否则就隐藏
if (offsetTop > 1000) {
// $actGotop.css({ display: 'block' });
$actGotop.fadeIn('actGotop')
} else {
// $actGotop.css({ display: 'none' });
$actGotop.fadeOut('actGotop')
}
})
$actGotop.click(function () {
// console.log('aaa');
// animate:是元素动画,只能对dom元素添加动画
// $('html,body'):目的是为了兼容
// $('html').animate({
$('html,body').animate({
scrollTop: 0
}, 300)
})
});
案例4:弹幕效果
/*
// 思路:
// 1. 找对象(text、btn)
// 2. 给btn注册click
// 3. 获取text的内容
// 4. 创建span元素,设置span的内容为 text的内容 ==> 内存中,页面中看不到
// 5. 把span添加到boxDom中
// 6. 随机span的文字颜色
// 7. 随机span的top取值 范围 [0, 可视区的高度的一半]
// 8. 设置span的left为可视区的宽度
*/
js代码如下:
$(function () {
let $txt = $('#text');
let $btn = $('#btn');
$btn.click(function () {
let $value = $txt.val();
let $span = $(`<span>${$value}</span>`);
$span.css({
left: $(window).width(),
top: Math.random() * $(window).height() / 2,
color: `rgb(${Math.random() * 255}, ${Math.random() * 255}, ${Math.random() * 255})`
})
// 将创建好的span元素插入到#boxDom中
$('#boxDom').prepend($span);
$span.animate({
left: -$span.width()
}, 3000, 'linear', function () {
$span.remove();
})
})
});
案例5:京东轮播图
/*
要求:
1、获取元素,绑定事件
1.1、鼠标移入,显示箭头
1.2、鼠标移出,隐藏箭头
2、为箭头按钮绑定事件,动画效果:fadeIn() 淡入、fadeOut() 淡出
2.1、点击左箭头,显示上一张图片
2.2、点击右箭头,显示下一张图片
3、实现自动轮播效果
3.1、设置定时器,每2秒执行一次向右点击事件
3.2、鼠标移出,清除定时器
3.3、鼠标移入,再次添加定时器
*/
js代码如下:
$(function () {
// 1、获取元素,绑定事件
let $slider = $('.slider');
let $arrow = $('.arrow');
let $lis = $('li');
let $arrow_left = $('.arrow-left');
let $arrow_right = $('.arrow-right');
// 1.1、鼠标移入,显示箭头
$slider.mouseenter(function () {
$arrow.show();
});
// 1.2、鼠标移出,隐藏箭头
$slider.mouseleave(function () {
$arrow.hide();
})
// 2、为箭头按钮绑定事件,动画效果:fadeIn()、fadeOut()
let index = 0; // 获取索引,默认为0
// 2.2、点击右箭头,显示下一张图片
$arrow_right.click(function () {
index++;
if (index > $lis.length - 1) {
index = 0;
}
$lis.eq(index).fadeIn().siblings().fadeOut();
})
// 2.1、点击左箭头,显示上一张图片
$arrow_left.click(function () {
index--;
if (index < 0) {
index = $lis.length - 1;
}
$lis.eq(index).fadeIn().siblings().fadeOut();
})
// 3、实现自动轮播效果
// 3.1、设置定时器,每2秒执行一次向右点击事件
let timeId = setInterval(function () {
$arrow_right.click();
}, 2000)
// 3.2、鼠标移出,清除定时器
$slider.on('mouseenter', function () {
clearInterval(timeId);
})
// 3.3、鼠标移入,再次添加定时器
$slider.on('mouseleave', function () {
timeId = setInterval(function () {
$arrow_right.click();
}, 2000)
})
})
案例6:音乐导航
/*
要求1:
1、获取元素
2、为li元素绑定事件
2.1、鼠标移入:背景变黄(span标签上移到li标签上)
2.2、鼠标移出:背景恢复(span标签移出li标签)
3、鼠标移到对应的li上,播放相应的音乐
3.1 获取当前li元素的索引
3.2 让对应索引位置的音乐播放
要求2:
1、添加键盘按键事件
2、通过按键盘的某一按键来对应着具体的导航项,通过事件源事件的keyCode可以获取当前按键的键码
3、按键1-7所对应的键码为49-55,而导航项的所有为0-6,所有可以通过 键码 - 49 来获取对应的索引
(按键操作的本质:就是鼠标上移到某个li元素(导航项)的操作)
*/
js代码如下:
$(function () {
// 1、获取元素
let $lis = $('.nav li');
let $span = $('.nav li span');
let $audios = $('.mp3 audio');
// 2、为li元素绑定事件
// 2.1、鼠标移入:背景变黄(span标签上移到li标签上)
$lis.mouseenter(function () {
// console.log('sss');
$(this).find('span').stop().animate({
'top': 0
})
// 3、鼠标移到对应的li上,播放相应的音乐
// 3.1 获取当前li元素的索引
let index = $(this).index();
// 3.2 让对应索引位置的音乐播放
// $audios.eq(index).play(); //报错: jq中没有封装play()这个函数
// jq并没有封装原生的所的功能,例如多媒体,意味着音乐播放需要使用原生方式来调用
// 播放音乐:play(),play只有本次播放结束之后,才会播放下一首
// load():重新加载,会中止当前的播放
$audios[index].load();
$audios[index].play();
})
// 2.2、鼠标移出:背景恢复(span标签移出li标签),即让对应的黄色区域隐藏,它是位移动画,所以使用animate
$lis.mouseleave(function () {
// console.log('sss');
$(this).find('span').stop().animate({
'top': 60
})
})
/*
要求2:
1、添加键盘按键事件
2、通过按键盘的某一按键来对应着具体的导航项,通过事件源事件的keyCode可以获取当前按键的键码
3、按键1-7所对应的键码为49-55,而导航项的所有为0-6,所有可以通过 键码 - 49 来获取对应的索引
(按键操作的本质:就是鼠标上移到某个li元素(导航项)的操作)
*/
// 定义一个变量,通过判断,让按键按下事件在按下一次时只执行一次
let flag = true;
// 键盘按下事件
$(document).on('keydown', function (e) {
if (flag == true) {
flag = false;
// 通过 键码 - 49 来获取对应的索引
let index = e.keyCode - 49;
// console.log(index);
// 让对应的li(导航项)执行鼠标移入事件
$lis.eq(index).mouseenter();
}
})
// 键盘抬起事件
$(document).on('keyup', function (e) {
flag = true;
let index = e.keyCode - 49;
// console.log(index);
// 让对应的li(导航项)执行鼠标移出事件
$lis.eq(index).mouseleave();
})
})