一.一些jQUery基础概念
1)、jQuery中常用的筛选方式
1. 直接从集合中获取元素:eq(),first(),last();
2. 根据元素在集合中的关系:
[1].next(),nextAll(),nextUntil(): 向后查询
[2].prev(),prevAll(),prevUntil(); 向前查询
[3].siblings(): 向前和向后进行双向查询
[4].parent(): 获取父级元素
[5].children(),find(),filter(),not():多级查询
[6].is(),has(): 判断查询
3. 集合区间查询与元素添加: slice(), add()
-------------------------------------------------------------------------
2)、jQuery基本动画
1.显示,隐藏,切换: show(),hide(),tiggle();
2.滑动: slideDown()向下,slideUp()向下,slideToggle()切换;
3.淡入淡出: fadeIn()淡入,fadeOut()淡出,fadeTo(),fadeToggle()切换;
-------------------------------------------------------------------------
3)、jQuery中的基本事件
1.鼠标事件: click点击, mouseenter移入,mouseleave移出;
2.表单事件: submit提交, change内容改变,focus获取焦点, blur失去焦点
二具体实例
1)对象的遍历
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery中常用的筛选方式</title>
</head>
<body>
<ul class="list">
<li class="item">列表项01</li>
<li class="item" id="two">列表项02</li>
<li class="item">列表项03</li>
<li class="item">列表项04</li>
<li class="item">列表项05
<!--<ul>-->
<!--<li>子列表01</li>-->
<!--<li>子列表02</li>-->
<!--<li>子列表03</li>-->
<!--</ul>-->
</li>
<li class="item">列表项06</li>
<li class="item">列表项07</li>
<li class="item">列表项08</li>
<li class="item" id="nine">列表项09</li>
<li class="item">列表项10</li>
</ul>
<script src="../lib/jquery.js"></script>
<script>
$('li').get(1).style.backgroundColor = 'red';//dom原生访问
$($('li').get(1)).css('background-color','yellow');
$('li').eq(1).css('background-color','lightgreen');
$('li').first().css('background-color','lightgreen');
$('li').last().css('background-color','lightgreen');
console.log($('li').index($('li:contains("列表项04")')));
console.log($('.list').children('li').length);
console.log($('.list').find('li').length);
console.log($('.list').contents().length); // 所有节点,包含文本节点
$('li').eq(4).next().css('color','red'); //next(): 相邻兄弟节点
$('li').eq(4).nextAll().css('color','red');
$('li').eq(4).nextUntil('#nine').css('color','red');//到的位置,不
$('li').eq(4).prev().css('color','red');
$('li').eq(4).prevAll().css('color','red');
$('li').eq(4).prevUntil('#two').css('color','red');
$('li').parent().css('border','1px solid red');
$('li').eq(5).siblings().css('color','red');
$('li').eq(5).css('color','red');
$('li').eq(5).add('li:eq(8)').css('color','red');
$('li').not('li:lt(3)').css('color','red'); //选择小于3的
$('li').filter('li:lt(3)').css('color','red');//选择大于上
// not + filter = all
console.log($('li'));
console.log($('li').slice(0,2));
console.log($('li').toArray());
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
2)基本动画的使用
1.显示,隐藏,切换: show(),hide(),tiggle();
2.滑动: slideDown()向下,slideUp()向下,slideToggle()切换;
3.淡入淡出: fadeIn()淡入,fadeOut()淡出,fadeTo(),fadeToggle()切换;
$('.box').hide();
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery基本动画</title>
<style>
.box {
width: 200px;
height: 200px;
background-color: lightgreen;
}
</style>
</head>
<body>
<button class="btn">点击查看</button>
<div class="box"></div>
<script src="../lib/jquery.js"></script>
// <script>
// 1.显示,隐藏,切换: show(),hide(),tiggle();
// 2.滑动: slideDown()向下,slideUp()向下,slideToggle()切换;
// 3.淡入淡出: fadeIn()淡入,fadeOut()淡出,fadeTo(),fadeToggle()切换;
$('.box').hide();
$('.btn').on('click', function () {
// 1显示和隐藏
$('.box').hide();
$('.box').hide(2000);
$('.box').show();
$('.box').show(2000);
$('.box').toggle();
$('.box').toggle(2000);
// 2淡入淡出
$('.box').fadeIn();
$('.box').fadeIn('slow');
$('.box').fadeIn(4000);
$('.box').fadeOut('slow');
$('.box').fadeOut(3000);
$('.box').fadeTo(3000, 0.3);
// 3.滑动
$('.box').slideDown('slow');
$('.box').slideDown(3000);
$('.box').slideUp(3000);
$('.box').slideUp('fast');
$('.box').slideToggle('slow');
})
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
3).基本事件的方法和事件
1.鼠标事件: click点击, mouseenter移入,mouseleave移出;
2.表单事件: submit提交, change内容改变,focus获取焦点, blur失去焦点
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery中的基本事件</title>
</head>
<body>
<button class="btn1">按钮1</button>
<button class="btn2">按钮2</button>
<input type="text">
<script src="../lib/jquery.js"></script>
<script>
// 1.鼠标事件: click点击, mouseenter移入,mouseleave移出;
// 2.表单事件: submit提交, change内容改变,focus获取焦点, blur失去焦点
// //添加事件最简单的方法
$('.btn1').click(function(){
alert(this.innerHTML);
});
//使用on()
$('.btn2').on('click',function () {
alert(this.className);
});
$('.btn2').on({
click: function () {
alert(this.className);
},
mouseover: function () {
$(this).css('color','red');
},
mouseout: function () {
$(this).css('color','black');
}
});
// on()的链式调用
$('.btn2').on('click',function () {
alert(this.className);
}).on('mouseover',function () {
$(this).css('color','red');
}).on('mouseout',function () {
$(this).css('color','black');
});
// focus()获取焦点
$(':text').focus(function () {
$(this).css('background-color','yellow');
});
//blur()失去焦点事件
$(':text').blur(function(){
if ($(this).val().length === 0) {
alert('不能为空');
}
});
//change(): 当文本框 和 下拉表内容发生变量的执行
$(':text').change(function(){
$(this).css('background-color','lightgreen');
});
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
三.在线相册
实例
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>在线相册</title>
<style>
.wrap{
width:360px;
height: auto;
background-color: #efefef;
border:3px double gray;
color:#363636;
border-radius: 2%;
}
.wrap .header{
padding:15px;
}
.wrap .header h2{
text-align: center;
}
.add{
width: 100px;
height: 30px;
border:none;
cursor: pointer;
background-color:skyblue;
color:white;
}
.add:hover{
background-color: orange;
font-size:1.1rem;
}
.main{
overflow:hidden ;
}
.main ul{
padding:0;
margin: 0;
}
.main ul li{
list-style-type: none;
float: left;
margin-left: 20px;
margin-bottom: 20px;
width: 150px;
height: 200px;
text-align: center;
}
.main ul li button{
margin:3px;
border:none;
border-radius: 5%;
background-color: lightgreen;
}
.main ul li button:hover {
background-color: orange;
color: white;
cursor: pointer;
}
</style>
</head>
<body>
<div class="wrap">
<div class="header">
<h2>江湖女侠排行榜</h2>
<p>
<lable for="img_url">输入图片地址</lable>
<input type="file" name="img_url" id="img_url" placeholder="图片地址">
</p>
<p>
图片类型:
<input type="radio" id="rect" name="border" value="0"><label for="rect">直角</label>
<input type="radio" id="radius" name="border" value="10%"><label for="radius">圆角</label>
<input type="radio" id="circle" name="border" value="50%"><label for="circle">圆形</label>
</p>
<p>
是否添加阴影:
<select name="shadow" id="">
<option value="0">不添加</option>
<option value="1">添加</option>
</select>
</p>
<p><button class="add">添加图片</button></p>
</div>
<div class="main">
<ul>
</ul>
</div>
</div>
<script src="../lib/jquery.js"></script>
<script>
$(function(){
$("button.add").on('click',function(){
let img_url= $('#img_url').val();
img_url = 'http://www.phpcntest.com/images/'+img_url.split('\\')[2];
console.log(img_url);
if(img_url.length===0){
alert("请选择一张图片");
$('#img_url').focus();
return false;
}
let img_type=$(':radio:checked').val();
let shadow='none';
if($(':selected').val()==='1'){
shadow='3px 3px 3px #666';
}
let img=$('<img>')
.prop('src',img_url)
.width(150)
.height(150)
.css({
'border-radius':img_type,
'box-shadow':shadow,
});
let before=$('<button></button>').text('前移');
let after=$('<button></button>').text('后移');
let remove=$('<button></button>').text('删除');
let container=$('<li>');
container.append(img,before,after,remove);
container.appendTo('ul');
before.click(function() {
let current=$(this).parent();
let prev=current.prev();
prev.before(current);
});
after.click(function() {
let current=$(this).parent();
let after=current.next();
after.after(current);
});
remove.click(function() {
if(confirm('你确定要删除吗?')){
$(this).parent().remove();
}
return false;
});
});
});
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例