jquery初级
从渊
jquery
jQuery介绍
- jQuery是目前使用最广泛的JavaScript函数库。据统计，全世界排名前100万的网站，有46%使用jQuery，远远超过其他库。微软公司甚至吧jQuery作为他们的官方库。
- jQuery的版本目前分为1.x系列和2.x、3.x系列，1.x系列兼容低版本的浏览器，2.x、3.x系列放弃支持低版本浏览器，目前使用最多的是1.x系列的。
- jQuery是一个函数库，一个js文件，页面使用script标签引入这个js文件就可以使用。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
window.onload = function(){
var oDiv = document.getElementById('div1');
alert('原生js获取的div' + oDiv);
}
/*
$(document).ready(function(){
var $div = $('#div1');
alert('jquery获取的div' + $div);
})
*/
// ready的写法可以简写成下面的格式
$(function(){
var $div = $('#div1');
alert('jquery获取的div' + $div);
})
</script>
</head>
<body>
<div id="div1">这是一个div元素</div>
</body>
</html>
jquery选择器
- jquery用法思想一
选择某个网页元素，然后对它进行某种操作
- jquery选择器
jquer选择器可以快速地选择元素，选择规则和css样式相同，使用length属性判断是否选择成功
$('#myId') //选择id为myId的网页元素
$('.myClass') // 选择class为myClass的的元素
$('li') //选择所有的li元素
$('#uli li span') //选择id为ul1元素下的li下的span元素
$('input[name=first]') //选择name属性等于first的input元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
$(function(){
var $div = $('#div1');
var $div2 = $('.box');
var $li = $('li');
var $span = $('.box span');
var $div3 = $('div[class="box2"]')
$div.css({'color':'red','font-size':30});
$div2.css({'color':'green','fontSize':'40px'});
$li.css({'background':'gold'});
$span.css({'color':'red','font-size':'50'});
$div3.css({'font-size':40,'color':'pink'});
})
</script>
</head>
<body>
<div id="div1">这是一个div</div>
<div class="box">这是第二个<span>div</span></div>
<div class="box">这是第三个div</div>
<div class="box2">这是第四个div</div>
<ul>
<li>列表文字</li>
<li>列表文字</li>
<li>列表文字</li>
<li>列表文字</li>
<li>列表文字</li>
<li>列表文字</li>
<li>列表文字</li>
<li>列表文字</li>
</ul>
</body>
</html>
- 对选择集进行过滤
$('div').has('p'); //选择包含p元素的div元素
$('div').not('.myClass'); //选择class不等于myClass的div元素
$('div').eq(5); //选择第6个div元素
$(function(){
var $div3 = $('div[class="box2"]');
var $div4 = $('div').has('span');
var $div5 = $('div').not('.box');
var $li2 = $('li').eq(2);
$div3.css({'font-size':40,'color':'pink'});
$div4.css({'text-indent':50});
$div5.css({'text-decoration':'underline'});
$li2.css({'list-style':'none','text-indent':40});
})
- 选择集转移
$('#box').prev(); //选择id是box的元素前面紧挨的同辈元素
$('#box').prevAll(); //选择id是box的元素之前所有的同辈元素
$('#box').next(); //选择id是box的元素后面紧挨的同辈元素
$('#box').nextAll(); //选择id是box的元素后面所有的同辈元素
$('#box').parent(); //选择id是box的父元素
$('#box').children(); //选择id是box的所有子元素
$('#box').siblings(); //选择id是box的元素的同级元素
$('#box').find('.myClass'); //选择id是box的元素内的class等于myClass的元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
$(function(){
var $div = $('#div1');
$div.prev().css({'color':'red'});
$div.prevAll().css({'text-indent':40});
$div.next().css({'color':'blue'});
$div.nextAll().css({'text-decoration':'underline'});
$div.parent().css({'background':'#ddd'});
$div.children().css({'color':'red','font-size':30});
$div.siblings().css({'color':'gold'});
$div.find('.sp02').css({'font-weight':'bold'});
})
</script>
</head>
<body>
<div>
<h2>这是一个h2标签</h2>
<p>这是第一个段落</p>
<div id="div1">这是一个<span>div</span><span class="sp02">span02</span></div>
<h3>这是一个h3标题</h3>
<p>这是第二个段落</p>
</div>
</body>
</html>
- jquery用法思想二
同一个函数完成取值和赋值
- 操作行间样式
//获取div的样式
$("div").css("width");
$("div").css("color");
//设置div的样式
$("div").css("width","30px");
$("div").css("height","30px");
$("div").css({fontSize:"30px",color:"red"});
操作元素行间样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
$(function(){
var $div = $('#div1');
// 读取样式属性值
var sSize = $div.css('font-size');
// alert(sSize);
// 原生方法获取文字大小，需要在标签中声明这个样式属性才可以获取到
var sSize2 = document.getElementById('div1').style.fontSize;
// alert(sSize2);
// 写样式属性，也叫作设置或者修改样式属性
$div.css('color','red');
$div.css({'font-size':30,'background':'gold'});
// 获取多个元素的属性值，得到的是第一个元素的属性值
var $div2 = $('div');
var sSize3 = $div2.css('font-size');
alert(sSize3);
})
</script>
</head>
<body>
<div id="div1">这是一个div</div>
<div>这是第二个div</div>
</body>
</html>
- 操作样式类名
$('#div1').addClass('divClass2') //为id为div1的对象追加样式divClass2
$('#div1').removeClass('divClass') //移除id为div1的对象的class名为divClass的样式
$('#div1').removeClass('divClass divClass2') //移除多个样式
$('#div').toggleClass('anotherClass') //重复切换anotherClass样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.big{
font-size:30px;
}
.red{
color: red;
}
.noline{
text-decoration: none;
}
</style>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
$(function(){
var $a = $('#link01');
$a.addClass('big');
$a.addClass('red');
$a.addClass('noline');
$a.removeClass('big');
$a.removeClass('red noline');
})
</script>
</head>
<body>
<a href="#" id="link01">这是一个链接</a>
</body>
</html>
判断是否选中了元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
$(function(){
var $div = $('#div1');
var $div2 = $('#div2');
var $li = $('.list li');
// 判断是否选中了元素，用length属性
var iLen = $div.length;
// 选择器不存在，返回的是一个空的jquery对象，它的length属性值是：0
var iLen2 = $div2.length;
var iLen3 = $li.length;
alert(iLen); // 弹出1
alert(iLen2); // 弹出0
alert(iLen3); // 弹出8
})
</script>
</head>
<body>
<div id="div1">这是一个div</div>
<!-- ul.list>li{列表文字}*8 -->
<ul class="list">
<li>列表文字</li>
<li>列表文字</li>
<li>列表文字</li>
<li>列表文字</li>
<li>列表文字</li>
<li>列表文字</li>
<li>列表文字</li>
<li>列表文字</li>
</ul>
</body>
</html>
jquery动画参数
通过animate方法可以设置元素某属性值上的动画，可以设置一个或多个属性值，动画执行完成后会执行一个函数。
/*
animate参数：
参数一：要改变的样式属性值，写成字典的形式
参数二：动画持续的时间，单位为毫秒，一般不写单位
参数三：动画曲线，默认为‘swing’，缓冲运动，还可以设置为‘linear’，匀速运动
参数四：动画回调函数，动画完成后执行的匿名函数
*/
$('#div1').animate({
width:300,
height:300
}),1000,'swing',function(){
alert('done!');
};
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.box,.box2{
width: 200px;
height: 200px;
background: gold;
}
.box2{
margin-top: 20px;
}
</style>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
$(function(){
var $btn = $('#btn');
var $div = $('.box');
var $div2 = $('.box2');
$btn.click(function(){
/*
动画参数：
第一个参数：要做动画的样式属性，写成字典的形式
第二个参数：动画持续的时间，默认是400毫秒。默认单位是毫秒，定义时不写单位
第三个参数：动画曲线：默认是 'swing' 缓冲运动,还有'linear'，匀速运动
第四个参数：回调函数
*/
$div.animate({'width':1000},1000,'swing',function(){
$div2.animate({'width':1000},1000,'linear');
});
})
})
</script>
</head>
<body>
<input type="button" value="动画" id="btn">
<div class="box">swing</div>
<div class="box2">linear</div>
</body>
</html>
jquery属性操作
- html取出或设置html内容
// 取出html内容
var $htm = $('#div1').html();
// 设置html内容
$('#div1').html('<span>添加文字<\span>');
- prop() 取出或设置某个属性的值
// 取出图片的地址
var $src = $('#img1').prop('src');
// 设置图片的地址和alt属性
$('#img1').prop({src:"test.jpg",alt:"Test Image"});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
$(function(){
var $a = $('#link01');
var $div = $('#div1');
// 读取属性值：
var sId = $a.prop('id');
// alert(sId);
// 写入或者叫做设置属性值
$a.prop({'href':'http://www.baidu.com','title':'这是去到百度的链接','class':'big'});
// 操作元素包裹的内容
// 读取内容
var sTr = $div.html();
// alert(sTr);
// 写入也叫作设置或者修改元素包裹的内容
$div.html('改变的文字');
$div.html('<ul><li>列表文字</li><li>列表文字</li></ul>');
})
</script>
</head>
<body>
<a href="#" id="link01">这是一个链接</a>
<div id="div1">这是一个div</div>
</body>
</html>
jquery事件
blur() 元素失去焦点
focus() 元素获得焦点
click() 鼠标单击
mouseover() 鼠标进入（进入子元素也触发）
mouseout() 鼠标离开（离开子元素也触发）
mouseenter() 鼠标进入（进入子元素不触发）
mouseleave() 鼠标离开（离开子元素不触发）
hover() 同时为mouseenter和mouseleave事件指定处理函数
ready() DOM加载
submit() 用户递交表单
<script src="js/jquery-1.12.4.min.js"></script>
<script>
$(function(){
var $input = $('#input01');
// 一般不在foucus事件上绑定函数
/*$input.focus(function(){
alert('获得焦点');
})
*/
// foucus一般用在让input输入框默认获取焦点
$input.focus();
})
</script>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
$(function(){
var $div = $('.box');
// mouseover 和 mouseout 移入子元素也会触发
/*
$div.mouseover(function(){
$(this).animate({'margin-top':150})
})
$div.mouseout(function(){
$(this).animate({'margin-top':100})
})
*/
// mouseenter 和 mouseleave 移入子元素不会触发
/*
$div.mouseenter(function(){
$(this).animate({'margin-top':150})
})
$div.mouseleave(function(){
$(this).animate({'margin-top':100})
})
*/
// 上面两句可以用hover事件合成一句：
$div.hover(function(){
$(this).animate({'margin-top':150})
},function(){
$(this).animate({'margin-top':100})
})
})
</script>
事件冒泡
- 什么是事件冒泡
- 在一个对象上触发某类事件（比如单击onclick事件），如果此对象定义了此事件的处理程序，那么此事件就会调用这个处理程序，如果没有定义此事件处理程序或者事件返回true，那么这个事件会向这个对象的父级对象传播，从里到外，直至它被处理（父级对象所有同类事件都将被激活），或者它到达了对象层次的最高层，即document对象（有些浏览器是window）。
- 时间冒泡的作用
事件冒泡允许多个操作被集中处理（把时间处理器添加到一个父级元素上，避免把事件处理器添加到多个子级元素上），它还可以让你在对象层的不同级别捕获事件。 - 阻止事件冒泡
事件冒泡机制有时候是不需要的，需要阻止掉，通过event.stopPropagation()来阻止
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.grandfather{
width: 300px;
height: 300px;
background: orange;
position: relative;
}
.father{
width: 200px;
height: 200px;
background: gold;
}
.son{
width: 100px;
height: 100px;
background: red;
position: absolute;
left: 0px;
top: 400px;
}
</style>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
$(function(){
// var $son = $('.son');
$('.son').click(function(){
alert(1);
// 阻止事件冒泡的简略写法：
return false;
});
$('.father').click(function(ev){
alert(2);
// 阻止事件冒泡的完整写法；
ev.stopPropagation();
});
$('.grandfather').click(function(){
alert(3);
});
$(document).click(function(){
alert(4);
});
})
</script>
</head>
<body>
<div class="grandfather">
<div class="father">
<div class="son"></div>
</div>
</div>
</body>
</html>
事件委托
事件委托就是利用冒泡的原理，把事件加到父级上，通过判断事件来源的子集，执行相应的操作，事件委托首先可以极大减少事件绑定次数，提高性能；其次可以让新加入的子元素也可以拥有相同的操作。
一般绑定事件的写法
$(function(){
$ali = $('#list li');
$ali.click(function(){
$(this).css({background:'red'});
});
})
· · ·
<ul id="list">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
$(function(){
var $li = $('.list li');
var $ul = $('.list');
// alert($li.length);
/*
$li.click(function(){
$(this).css({'background':'red'});
})
*/
// 上面的写法性能不高，可以写成事件委托的形式：
$ul.delegate('li','click',function(){
// $(this)指的是发生事件冒泡的子级
$(this).css({'background':'red'});
})
})
</script>
</head>
<body>
<ul class="list">
<li>列表文字</li>
<li>列表文字</li>
<li>列表文字</li>
<li>列表文字</li>
<li>列表文字</li>
<li>列表文字</li>
<li>列表文字</li>
<li>列表文字</li>
</ul>
</body>
</html>
表单事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
$(function(){
var $form = $('#form01'),
$txt = $('#input_txt'),
$btn = $('#input_sub');
// 绑定失去焦点的事件
$txt.blur(function(){
// alert('失去焦点');
var sVal = $(this).val();
// alert(sVal);
})
// 绑定表单提交事件
$form.submit(function(){
// alert('提交了');
// 阻止表单的默认提交行为
return false;
})
})
</script>
</head>
<body>
<form action="" id="form01">
<input type="text" name="username" id="input_txt">
<br><br>
<input type="submit" id="input_sub" value="提交">
</form>
</body>
</html>
jquery特殊效果
fadeIn() 淡入
$btn.click(function(){
$('#div1').fadeIn(1000,'swing',function(){
alert('done!');
});
});
fadeOut() 淡出
fadeToggle() 切换淡入淡出
hide() 隐藏元素
show() 显示元素
toggle() 切换元素的可见状态
slideDown() 向下展开
slideUp() 向上卷起
slideToggle() 依次展开或卷起某个元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.box{
width: 200px;
height: 200px;
background: gold;
display: none;
}
</style>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
$(function(){
var $btn = $('#btn');
var $div = $('.box');
$btn.click(function(){
// 制作显示和隐藏的动画
// $div.hide();
// $div.show();
// $div.toggle();
// 制作淡入和淡出的动画
// $div.fadeIn();
// $div.fadeOut();
// $div.fadeToggle();
// 制作向下展开和向上卷起的动画
// $div.slideUp();
// $div.slideDown();
$div.stop().slideToggle();
})
})
</script>
</head>
<body>
<input type="button" value="动画" id="btn">
<div class="box"></div>
</body>
</html>
jquery链式调用
jquery对象的方法会在执行完后返回这个jquery对象，所有jquery对象的方法可以连起来写：
$('#div1') //id为div1的元素
.children('ul') //该元素下面的ul子元素
.slideDown('fast') //最高从零变到实际高度来显示ul元素
.parent() //跳到ul的父元素，也就是id为div1的元素
.siblings() //跳到div1元素平级的所有兄弟元素
.children('ul') //这些兄弟元素中的ul子元素
.slideUp('fast'); //高度实际高度变换到零来隐藏ul元素
绑定click事件
- 给元素绑定click事件，可以用如下方法:
$('#btn1').click(function(){
// 内部的this指的是原生对象
// 使用jquery对象用$(this)
})
- 获取元素索引值
- 有时候需要获得匹配元素相对于其同胞元素的索引位置，此时可以用index()方法获取
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
$(function(){
var $li = $('.list li');
var $p = $('p');
// 绑定click事件
$li.click(function(){
// this 指的是当前发生电击事件的那个对象，它是原生对象
// this.style.background = 'gold';
// $(this) 指的是当前发生电击事件的那个对象，它是jquery对象
$(this).css({'background':'red'});
// 获取元素的索引值
alert($(this).index());
})
$p.click(function(){
alert($(this).index());
})
})
</script>
</head>
<body>
<ul class="list">
<li>列表文字</li>
<li>列表文字</li>
<li>列表文字</li>
<li>列表文字</li>
<li>列表文字</li>
<li>列表文字</li>
<li>列表文字</li>
<li>列表文字</li>
</ul>
<div>
<p>这是第一个p标签</p>
</div>
<div>
<p>这是第二个p标签</p>
</div>
</body>
</html>
正则表达式
- \d 匹配一个数字，即0-9
- \D 匹配一个非数字，即除了0-9
- \w 匹配一个单词字符（字母、数字、下划线）
- \W 匹配任何非单词字符。等价于[^A-Za-z0-9]
- \s 匹配一个空白符
- \S 匹配一个非空白符
- \b 匹配单词边界
- \B 匹配非单词边界
- . 匹配一个任意字符
- i 忽略大小写
常用正则规则
- 用户名验证：（数字字母或下划线6到20位）
- var reUser = /^\w{6,20}$/;
- 邮箱验证：
- var reMail = /^[a-z0-9][\w.-]*@[a-z0-9-]+(.[a-z]{2,5}){1,2}$/i;
- 密码验证：
-
var rePass = /^[\w!@#$%^&*]{6,20}$/;
-
- 手机号验证
- var rePhone = /^1[34578]\d{9}/;
<script>
// 创建正则表达式
// 第一种方法：
var reTest01 = new RegExp('a');
// 第二种方式：
var reTest02 = /a/;
var reTest03 = /a/i;
var reTest04 = /\d+/;
var reTest05 = /^\d+$/;
var sTr01 = 'abc';
var sTr02 = 'Abc';
var sTr03 = '123456';
var sTr04 = '12345abcde';
// 使用正则表达式：
// alert(reTest02.test(sTr01)); // 弹出true
// alert(reTest02.test(sTr02)); // 弹出false
// alert(reTest03.test(sTr02));
// alert(reTest04.test(sTr03));
// alert(reTest04.test(sTr04));
alert(reTest04.test(sTr03));
alert(reTest05.test(sTr04));
</script>
Dom操作
- 元素节点操作指的是改变html的标签结构，它有两种情况：
- 移动现有标签的位置
- 将新创建的标签插入到现有的标签中
创建新标签
var $div = $('<div>'); //创建一个空的div
var $div2 = $('<div>这是一个div元素</div>');
移动或者插入标签的方法
- append()和appendTo():在现存元素的内部，从后面放入元素
var $span = $('<span>这是一个span元素</span>');
$('#div1').append($span);
· · · · · ·
<div id="div1"></div>
- prepend()和prependTo():在现存元素的内部，从前面放入元素
- after()和insertAfter():在现存元素的外部，从后面放入元素
- before()和insertBefore():在现存元素的外部，从前面放入元素
删除标签
$('#div1').remove();
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
var $div = $('#div1');
var $h01 = $('#h01');
var $h02 = $('#h01');
var $div2 = $('#div2');
// 当前元素里面的后面要放另外一个元素
// $div.append($h01);
// 当前元素要放到另外一个元素里面的后面
$h01.appendTo($div);
// 当前元素里面的前面要放另外一个元素
// $div.prepend($h02);
// 当前元素要放到另外一个元素里面的前面
$h02.prependTo($div);
// 当前元素的外面的后面要放另外一个元素
// $div.after($div2);
// 当前元素要放到另外一个元素的外面的后面
$div2.insertAfter($div);
// 创建新标签
// 创建一个空的div
var $div3 = $('<div>');
// 创建一个包含内容的div
var $div4 = $('<div>新创建的div2</div>')
// 当前元素外面的前面要放另外一个元素
$div.before($div3);
// 当前要元素要放到另外一个元素的外面的前面
$div4.insertBefore($div);
// 删除标签
$div3.remove();
</script>
</head>
<body>
<h3 id="h01">这是div1外面的h3标签</h3>
<h1 id="h02">这是div1外面的h1标签</h1>
<div id="div2">这是div1上面的div</div>
<div id="div1">
<h2>这是div1里面的h2标签</h2>
<p>这是div1里面的p标签</p>
</div>
</body>
</html>
类似资料：