DOM操作
// 外部之前
$('#d').before('<span style="color:red">Before</span>');
// 外部之后
$('#d').after('<span style="color:red">After</span>');
// 内部之前
$('#d').prepend('<span style="color:blue">Prepend</span><br>');
// 内部之后
$('#d').append('<span style="color:blue">Append</span><br>');
// 外部周围
$('#d').wrap('<div style="border: 5px solid red"></div>');
// 内部周围
$('#d').wrapInner('<div style="border: 5px solid green"></div>');
// 删除节点(节点+内容)
$('#d1').remove();
// 清空节点(内容)
$('#d2').empty();
// 删除父节点
$('p').unwrap();
// 节点替换
$('p').replaceWith('<h3>标题3</h3>');
杂项方法
// 声明字符串
var str = ' helloworld ';
console.log(str);
console.log($.trim(str));
console.log($.type(str)); // string
var cars = ['奔奔', '红旗', '50宏光'];
console.log($.type(cars));
console.log(cars);
// 遍历数组
$.each(cars, function(i, v){
console.log("索引:"+i+" 值:"+v);
});
var person = {
username: "小新",
age: "18",
skill: "PHP"
};
// 遍历对象
$.each(person, function(label, value){
console.log('属性名: '+label+'属性值: '+value);
});
// 遍历选择器选中的结果集
$('ul').children().each(function(i,v){
// console.log(i+": "+v);
// 获取当前节点 $(this)
// 获取当前节点的索引
console.log($(this).index());
// 获取当前节点的内容
console.log($(this).text());
});
事件绑定
绑定多个事件
$('button').bind('click mouseout', function(){
$('#d').text('试试就试试');
});
鼠标悬浮态
$('#d').hover(function(){
// 鼠标滑过
$(this).text('我进来了');
}, function(){
// 鼠标离开
$(this).text('我离开了');
});
隐藏与显示
// 单击第一个按钮,将div藏起来
$('button:first').click(function(){
$('#d').hide(20000, function(){
alert('我藏起来了');
});
});
// 单击第二个按钮,显示div
$('button').eq(1).bind('click', function(){
$('#d').show(20000);
});
// 单击最后一个按钮,切换div的状态
$('button:last').click(function(){
$('#d').toggle(1000);
});
滑动收起
// 单击第一个按钮,将div藏起来
$('button:first').click(function(){
$('#d').slideUp(10000, function(){
// alert('我藏起来了');
});
});
// 单击第二个按钮,显示div
$('button').eq(1).bind('click', function(){
$('#d').slideDown(10000);
});
// 单击最后一个按钮,切换div的状态
$('button:last').click(function(){
$('#d').slideToggle(1000);
});
渐变
// 单击第一个按钮,将div藏起来
$('button:first').click(function(){
$('#d').fadeOut(10000, function(){
// alert('我藏起来了');
});
});
// 单击第二个按钮,显示div
$('button').eq(1).bind('click', function(){
$('#d').fadeIn(10000);
});
// 单击最后一个按钮,切换div的状态
$('button:last').click(function(){
$('#d').fadeToggle(1000);
});
});
自定义动画
// 自定义动画
$('button').click(function(){
$('#d').animate(
{
left: '100px',
top: '50px',
width: '200px',
height: '50px'
},
5000,
function() {
alert('动画执行完毕');
}
);
});
验证码点击更新-原生写法
// 1. 获取验证码对象
var c = document.getElementById('captcha');
// 2. 响应单击事件
c.onclick = function(){
// 3. 设置src属性
c.src = "captcha/c.php?rand="+Math.random();
}
验证码点击更新-jQuery写法
// 单击事件
$('#captcha').click(function(){
$(this).attr('src', 'captcha/c.php?rand='+Math.random());
});
京东侧边栏动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<style>
a {
color: #EE00EE;
text-decoration: none;
padding: 0 20px;
}
.nav {
position: relative;
width: 100px;
background-color: #EEE;
}
.nav-1 {
display: block;
height: 40px;
line-height: 40px;
}
.nav-2 {
display: none;
position: absolute;
top: 0;
left: 100%;
padding: 0;
margin: 0;
width: 200px;
background-color: #DDFFBB;
}
li {
list-style: none;
float: left;
line-height: 40px;
}
</style>
</head>
<body>
<div class="nav">
<a href="#" class="nav-1">北京</a>
<ul class="nav-2">
<li><a href="#">重庆</a></li>
<li><a href="#">河南</a></li>
<li><a href="#">山东</a></li>
</ul>
</div>
<script type="text/javascript" src="../../jquery-3.4.1.min.js" ></script>
<script type="text/javascript">
// 就绪函数
$(function(){
$('.nav-1').hover(function(){
// 1. 鼠标进入"北京",显示其他省份
$(this).next().show();
$(this).css('background-color', '#DDFFBB');
}, function(){
// 2. 鼠标离开"北京"
$(this).next().hover(function(){
// 2.1 进入了"其他省份"(保持显示)
$(this).show();
$(this).prev().css('background-color', '#DDFFBB');
}, function(){
// 2.2 离开"其他省份"(隐藏)
$(this).hide();
$(this).prev().css('background-color', '#EEE');
});
// 2.3 完全离开
$(this).next().hide();
$(this).css('background-color', '#EEE');
});
});
</script>
</body>
</html>
tab选项卡
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>tab(选项卡)</title>
<style type="text/css">
#tabmenu {
width: 300px;
height: 30px;
}
#tabmenu > h3 {
width: 96px;
height: 30px;
line-height: 30px;
float: left;
margin: 0;
background-color: #DDEEFF;
border: 2px solid #FFFFFF;
text-align: center;
}
#tabmenu > h3.active {
background-color: #DDEEAA;
border: 2px solid #DDEEAA;
}
#tabcontent {
width: 300px;
height: 200px;
background-color: #DDEEAA;
}
#tabcontent > div {
display: none;
}
#tabcontent > div.active {
display: block;
}
</style>
</head>
<body>
<h3>选项卡功能</h3>
<div id="tab">
<div id="tabmenu">
<h3 class="active">西游记</h3>
<h3>水浒传</h3>
<h3>红楼梦</h3>
</div>
<div id="tabcontent">
<div class="active">悟空,蜘蛛精,金角大王</div>
<div>潘金莲,武松,大郎</div>
<div>宝玉,刘姥姥,黛玉</div>
</div>
</div>
<!-- 引入jQuery -->
<script type="text/javascript" src="../../jquery-3.3.1.js"></script>
<script type="text/javascript">
// 单击h3(tab菜单)
$('#tabmenu>h3').click(function(){
// 获取当前菜单的索引值
var index = $(this).index();
// console.log(index);
// 高亮当前菜单, 回调兄弟菜单
$(this).addClass('active').siblings().removeClass('active');
// 高亮当前内容, 隐藏兄弟内容
// $('#tabcontent>div').eq(index).addClass('active').siblings().removeClass('active');
$('#tabcontent>div').eq(index).show().siblings().hide();
});
</script>
</body>
</html>
网友评论