10-jQuery03
2019-01-23 本文已影响5人
努力爬行中的蜗牛
jquery事件
事件函数列表：
blur() 元素失去焦点
focus() 元素获得焦点
click() 鼠标点击
mouseover() 鼠标进入（进入子元素也触发）
mouseout() 鼠标离开（离开子元素也触发）
mouseenter() 鼠标进入（进入子元素不触发）
mouseleave() 鼠标离开（离开子元素不触发）
hover() 同时为mouseenter和mouseleave事件指定处理函数
ready() DOM加载完成
resize() 浏览器窗口的大小发生改变
scroll() 滚动条的位置发生变化
submit() 用户递交表单
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(function() {
// 监听获得焦点事件
// $('#input01').focus(function() {
// alert('获得焦点');
// })
// focus一般用来让input元素开始就获取焦点
$('#input01').focus();
$('#input01').blur(function() {
var sVal = $(this).val();
alert(sVal);
})
})
</script>
</head>
<body>
<form>
<input type="text" name="" id="input01">
<input type="text" name="" id="input02">
<input type="submit" name="" value="提交" id="sub">
</form>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(function() {
// 鼠标移入，移入到子元素也会触发
$('.con').mouseover(function() {
alert('移入');
})
// 鼠标移出，移出子元素也会触发
$('.con').mouseout(function() {
alert('移出');
})
// 鼠标移入，移入的子元素不会触发
// $('.con2').mouseenter(function() {
// alert('移入');
// })
// // 鼠标移出，移出的子元素不会触发
// $('.con2').mouseleave(function() {
// alert('移出');
// })
$('.con2').hover(function() {
alert('移入');
}, function() {
alert('移出');
})
$('#form1').submit(function() {
alert('提交');
// 阻止默认的提交行为
// return false;
})
$(window).resize(function() {
var $w = $(window).width();
document.title = $w;
})
})
</script>
<style type="text/css">
.con, .con2 {
width: 200px;
height: 200px;
background-color: gold;
}
.box, .box2 {
width: 100px;
height: 100px;
background-color: green;
}
</style>
</head>
<body>
<div class="con">
<div class="box"></div>
</div>
<br>
<br>
<div class="con2">
<div class="box2"></div>
</div>
<br>
<br>
<form id="form1" action="https://www.baidu.com">
<input type="text" name="data01" id="input01">
<input type="submit" name="" value="提交" id="sub">
</form>
</body>
</html>
绑定事件和解绑事件
<!DOCTYPE html>
<html>
<head>
<title>绑定事件</title>
<style type="text/css">
</style>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(function() {
// $('#btn').clcik(function() {
// })
// 绑定事件：点击或者鼠标移入的时候绑定的函数
$('#btn').bind('click mouseover', function() {
alert('click事件')
// 解绑
$(this).unbind('mouseover');
})
})
</script>
</head>
<body>
<input type="button" name="" value="按钮" id="btn">
</body>
</html>
事件冒泡
什么是事件冒泡
在一个对象上触发某类事件（比如单机onclick事件），如果此对象定义了此事件的处理程序，那么此事件就会调用这个处理程序，如果没有定义此事件处理程序或者事件返回true，那么这个事件就会想这个对象的父级对象传播，从里到外，直至它被处理（父级对象所有同类事件都将被激活），或者它到达了对象层次的最顶层，即document对象（有些浏览器是window）
事件冒泡的作用
事件冒泡允许多个操作被集中处理（把时间处理器添加到一个父级元素上，避免把事件处理器添加到多个子集元素上），它还可以让你在对象层的不同级别捕获事件。
阻止事件冒泡
事件冒泡机制有时候是不需要的，需要阻止掉，通过event.stopPropagation()来阻止
阻止默认行为
阻止表单提交
$('#form').submit(function() {
event.preventDefault();
})
合并阻止操作
实际开发中，一般把阻止冒泡和阻止默认行为合并起来写，合并写法可以用
// event.stopPropagation();
// event.preventDefault();
// 合并写法：
return false;
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(function() {
// event 是发生事件的时候的事件对象，使用的时候通过第一个参数传进来
$('.son').click(function() {
alert(1);
// 阻止事件冒泡
// event.stopPropagation();
return false;
})
$('.father').click(function() {
alert(2);
})
$('.grandfather').click(function() {
alert(3);
})
$(document).click(function() {
alert(4);
})
})
</script>
<style type="text/css">
.grandfather {
width: 300px;
height: 300px;
background-color: green;
}
.father {
width: 200px;
height: 200px;
background-color: gold;
}
.son {
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<div class="grandfather">
<div class="father">
<dir class="son"></dir>
</div>
</div>
</body>
</html>
弹窗
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(function(){
$('#btn').click(function(){
$('.pop_con').fadeIn();
return false;
})
$(document).click(function(){
$('.pop_con').fadeOut();
})
$('.pop').click(function(){
return false;
})
$('#close').click(function(){
$('.pop_con').fadeOut();
})
})
</script>
<style type="text/css">
.pop_con{
display:none;
}
.pop{
position:fixed;
width:500px;
height:300px;
background-color:#fff;
border:3px solid #000;
left:50%;
top:50%;
margin-left:-250px;
margin-top:-150px;
z-index:9999;
}
.mask{
position:fixed;
width:100%;
height:100%;
background-color:#000;
opacity:0.3;
filter:alpha(opacity=30);
left:0;
top:0;
z-index:9990;
}
.close{
float:right;
font-size:30px;
}
</style>
</head>
<body>
<input type="button" name="" value="弹出" id="btn">
<div class="pop_con">
<div class="pop">
弹框里面文字
投资金额：
<input type="text" name="">
<a href="#" id="close" class="close">×</a>
</div>
<div class="mask"></div>
</div>
</body>
</html>
事件委托
事件委托就是利用冒泡的原理，把事件加到父级上，通过判断事件来源的子集，执行相应的操作，事件委托首先可以极大减少事件绑定次数，提高性能；其次可以让新加入的子元素也可以拥有相同的操作。
<!DOCTYPE html>
<html>
<head>
<title>事件委托</title>
<style type="text/css">
.list {
background-color: gold;
list-style: none;
padding: 10px;
}
.list li {
height: 30px;
background-color: green;
margin: 10px;
}
</style>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(function() {
// $('.list li').click(function() {
// $(this).css({'background-color':'red'});
// })
// 事件委托
$('.list').delegate('li','click',function() {
// $(this)指的是委托的子元素
$(this).css({'background-color':'red'});
})
// 新建一个li元素赋值给$li变量
var $li = $('<li>9</li>');
// 把新建的li元素放到ul子集的最后面
$('.list').append($li);
})
</script>
</head>
<body>
<ul class="list">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
</ul>
</body>
</html>
jquery元素节点操作
创建节点
var ('<div>');
var ('<div>这是一个节点</div>');
插入节点
1、append()和appendTo():在现存元素的内部，从后面插入元素
2、prepend()和prependTo():在现存元素的内部，从前面插入元素
3、after()和insertAfter():在现存元素的外部，从后面插入元素
4、before()和insertBefore()：在现存元素的外部，从前面插入元素
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(function() {
// 通过html的字符串的方式添加节点性能最高
// $('#div1').html($('#div1').html() + '<a href="#">链接<a/>')
// 新建一个带有属性的a元素，把他赋值给$a
$a = $('<a href="#">链接</a>');
// 新建一个空的a元素
$a2 = $('<a>');
$p = $('<p>这是一个p元素</p>');
$h2 = $('<h2>这是一个H2标签</h2>');
$h3 = $('<h3>这是一个H3标签</h3>');
//父元素内的后面放入子元素
// $('#div1').append($a);
//子元素放入到父元素内部的后面
$a.appendTo($('#div1'));
$('#div1').append($a2);
//父元素内的前面放入子元素
// $('#div1').prepend($p);
//子元素放到父元素前面
$p.prependTo($('#div1'));
//div元素后面插入元素
// $('#div1').after($h2);
//将其插入到div元素后面
$h2.insertAfter($('#div1'));
//div1前面插入h3标签
// $('#div1').before($h3);
//h3插入到div1前面
$h3.insertBefore($('#div1'));
})
</script>
<style type="text/css">
</style>
</head>
<body>
<div id="div1">
<h1>这是一个H1元素</h1>
</div>
</body>
</html>
删除节点
$('#div1').remove();
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(function() {
// 对已有节点进行操作
$('#p1').insertBefore($('#title01'));
$('#span01').appendTo($('#p1'));
$('#link01').prependTo($('#p1'));
//删除节点
$('#title01').remove();
})
</script>
</head>
<body>
<h1 id="title01">这是一个h1元素</h1>
<p id="p1">这是一个p元素</p>
<span id="span01">这是一个span元素</span>
<a href="#" id="link01">链接</a>
</body>
</html>
todolist demo
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
<style type="text/css">
.list_con{
width:600px;
margin:50px auto 0;
}
.inputtxt{
width:550px;
height:30px;
border:1px solid #ccc;
padding:0px;
text-indent:10px;
}
.inputbtn{
width:40px;
height:32px;
padding:0px;
border:1px solid #ccc;
}
.list{
margin:0;
padding:0;
list-style:none;
margin-top:20px;
}
.list li{
height:40px;
line-height:40px;
border-bottom:1px solid #ccc;
}
.list li span{
float:left;
}
.list li a{
float:right;
text-decoration:none;
margin:0 10px;
}
</style>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(function() {
var $inputtxt = $('#txt1');
var $btn = $('#btn1');
var $ul = $('#list');
$btn.click(function() {
// 获取input输入框的内容
var $val = $inputtxt.val();
if($val == "") {
alert("请输入内容");
return;
}
//javascript:; 执行JavaScript的空语句，表示什么都不做，但是有链接的样式
var $li = $('<li><span>' + $val +'</span><a href="javascript:;" class="up"> ↑ </a><a href="javascript:;" class="down"> ↓ </a><a href="javascript:;" class="del">删除</a></li>');
// var $a = $li.find('.del');
// $a.click(function() {
// $(this).parent().remove();
// })
$ul.append($li);
$inputtxt.val("");
})
// $('.del').click(function() {
// $(this).parent().remove();
// })
$ul.delegate('a','click',function() {
var $handler = $(this).prop('class');
if ($handler == 'del') {
$(this).parent().remove();
}
if ($handler == 'up') {
if ($(this).parent().prev().length==0) {
alert('到顶了！');
return;
}
$(this).parent().insertBefore($(this).parent().prev());
}
if ($handler == 'down') {
if ($(this).parent().next().length==0) {
alert('到底了！');
return;
}
$(this).parent().insertAfter($(this).parent().next())
}
})
})
</script>
</head>
<body>
<div class="list_con">
<h2>To do list</h2>
<input type="text" name="" id="txt1" class="inputtxt">
<input type="button" name="" value="增加" id="btn1" class="inputbtn">
<ul id="list" class="list">
<li><span>学习html</span><a href="javascript:;" class="up"> ↑ </a><a href="javascript:;" class="down"> ↓ </a><a href="javascript:;" class="del">删除</a></li>
<li><span>学习css</span><a href="javascript:;" class="up"> ↑ </a><a href="javascript:;" class="down"> ↓ </a><a href="javascript:;" class="del">删除</a></li>
<li><span>学习javascript</span><a href="javascript:;" class="up"> ↑ </a><a href="javascript:;" class="down"> ↓ </a><a href="javascript:;" class="del">删除</a></li>
</ul>
</div>
</body>
</html>
滚轮事件与函数节流
jquery.mousewheel插件使用
jquery中没有鼠标滚轮事件，原生js中的鼠标滚轮事件不兼容，可以使用jquery的滚轮事件插件jquery.mousewheel.js
函数节流
javascript中有些事件的触发频率非常高，比如onresize事件（jq中是resize），onmousemove事件（jq中是mousemove)以及上面说的鼠标滚轮事件，在短事件内多处触发执行绑定的函数，可以巧妙的使用定时器来减少触发的次数，实现函数节流。
整屏滚动demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>整页滚动</title>
<link rel="stylesheet" type="text/css" href="css/test.css">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.mousewheel.js"></script>
<script type="text/javascript">
$(function(){
var $screen = $('.pages_con');
var $pages = $('.pages');
var $len = $pages.legnth;
var $h = $(window).height();
var $points = $('.points li');
var timer = null;
var $nowscreen = 0;
$pages.css({'height':$h});
$pages.eq(0).addClass('moving');
$points.click(function() {
$nowscreen = $(this).index();
$points.eq($nowscreen).addClass('active').siblings().removeClass('active');
$screen.animate({'top':-$h * $nowscreen},300);
$pages.eq($nowscreen).addClass('moving').siblings().removeClass('moving');
})
$(window).mousewheel(function(event, dat) {
// 定时器实现函数节流效果
clearTimeout(timer);
timer = setTimeout(function() {
if (dat == -1) {
$nowscreen++;
} else {
$nowscreen--;
}
if ($nowscreen < 0) {
$nowscreen = 0;
} else if ($nowscreen > $len - 1) {
$nowscreen = $len - 1;
}
$screen.animate({'top':-$h * $nowscreen},300);
$pages.eq($nowscreen).addClass('moving').siblings().removeClass('moving');
$points.eq($nowscreen).addClass('active').siblings().removeClass('active');
}, 200)
})
})
</script>
</head>
<body>
<div class="pages_con">
<div class="pages page1">
<div class="main_con">
<div class="left_img"><img src="images/001.png"></div>
<div class="right_info">
Web前端开发是从网页制作演变而来的，名称上有很明显的时代特征。在互联网的演化进程中，网页制作是Web1.0时代的产物，那时网站的主要内容都是静态的，用户使用网站的行为也以浏览为主。
</div>
</div>
</div>
<div class="pages page2">
<div class="main_con">
<div class="right_img"><img src="images/002.png"></div>
<div class="left_info">
2005年以后，互联网进入Web2.0时代，各种类似桌面软件的Web应用大量涌现，网站的前端由此发生了翻天覆地的变化。网页不再只是承载单一的文字和图片，各种富媒体让网页的内容更加生动，网页上软件化的交互形式为用户提供了更好的使用体验，这些都是基于前端技术实现的。
</div>
</div>
</div>
<div class="pages page3">
<div class="main_con">
<div class="left_img"><img src="images/004.png"></div>
<div class="right_info">
以前会Photoshop和Dreamweaver就可以制作网页，现在只掌握这些已经远远不够了。无论是开发难度上，还是开发方式上，现在的网页制作都更接近传统的网站后台开发，所以现在不再叫网页制作，而是叫Web前端开发。
</div>
</div>
</div>
<div class="pages page4">
<div class="main_con">
<div class="left_img"><img src="images/003.png"></div>
<div class="right_info">
Web前端开发在产品开发环节中的作用变得越来越重要，而且需要专业的前端工程师才能做好，这方面的专业人才近几年来备受青睐。Web前端开发是一项很特殊的工作，涵盖的知识面非常广，既有具体的技术，又有抽象的理念。简单地说，它的主要职能就是把网站的界面更好地呈现给用户。
</div>
</div>
</div>
<div class="pages page5">
<div class="main_con">
<div class="center_img"><img src="images/005.png"></div>
</div>
</div>
</div>
<ul class="points">
<li class="active"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>
ajax与jsonp
ajax技术的目的是让JavaScript发送的http请求，与后台通信，获取数据和信息。ajax技术的原理是实例化xmlhttp对象，使用此对象与后台通信。ajax通信的过程不会影响后续JavaScript的执行，从而实现异步。
同步和异步
现实生活中，同步指的是同时做几件事情，异步指的是做完一件事后再做另外一件事，程序中的同步和异步是把现实生活中的概念对调，也就是程序中的异步指的是现实生活中的同步，程序中的同步指的是现实生活中的异步。
局部刷新和无刷新
ajax可以实现局部刷新，也叫做无刷新，无刷新指的是整个页面不刷新，只是局部刷新，ajax可以自己发送http请求，不用通过浏览器的地址栏，所以页面整体不会刷新，ajax获取到后台数据，更新页面显示数据的部分，就做到了页面局部刷新。
同源策略
ajax请求的页面或资源只能是同一个域下面的资源，不能是其他域的资源，这是在设计ajax时基于安全的考虑。
json
json是javascript object notation的首字母缩写，单词的意思是javascript对象表示法，这里说的json指的是类似于JavaScript对象的一种数据格式，目前这种数据格式比较流行，逐渐替换掉了传统的xml数据格式。
$.ajax使用方法
常用参数：
1、url请求地址
2、type请求方式，默认是‘GET’，常用的还有‘POST’
3、dataType设置返回的数据格式，常用的是‘json’格式，也可以设置为‘html’
4、data设置发送给服务器的数据
5、success设置请求成功后的回调函数
6、error设置请求失败后的回调函数
7、async设置是否异步，默认值是‘true’，表示异步。
<!DOCTYPE html>
<html>
<head>
<title>ajax</title>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(function() {
$.ajax({
url:'data.json',
type:'get',
dataType:'json'
})
.done(function(dat) {
$('#username').html(dat.name);
$('#userage').html(dat.age);
})
.fail(function() {
alert('服务器超时');
})
})
</script>
</head>
<body>
<p>姓名：<span id="username"></span></p>
<p>年龄：<span id="userage"></span></p>
</body>
</html>
jsonp
ajax只能请求同一个域下的数据或资源，有时候需要跨域请求数据，就需要用到jsonp技术，jsonp可以跨域请求数据，它的原理主要是利用了<script>标签可以跨域链接资源的特性。jsonp和ajax原理完全一样，不过jquery将它们封装成同一个函数。
<!DOCTYPE html>
<html>
<head>
<title>ajax</title>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(function() {
$.ajax({
url:'js/data.js',
type:'get',
dataType:'jsonp',
jsonpCallback:'fnback'
})
.done(function(dat) {
alert(dat.name);
})
.fail(function() {
alert('服务器超时');
})
})
</script>
</head>
<body>
</body>
</html>
360联想词demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
// https://sug.so.360.cn/suggest?callback=suggest_so&encodein=utf-8&encodeout=utf-8&format=json&fields=word&word=d
$(function(){
$('#input01').keyup(function(){
var $val = $(this).val();
$.ajax({
url:'https://sug.so.360.cn/suggest?',
type:'get',
dataType:'jsonp',
data:{'word':$val}
})
.done(function(data){
//console.log(data);
// 清空元素里面的内容
$('#list01').empty();
var dat = data.s;
for(var i=0;i<dat.length;i++)
{
var $newli = $('<li>');
$newli.html(dat[i]);
$newli.appendTo($('#list01'));
}
})
})
})
</script>
</head>
<body>
<input type="text" name="" id="input01">
<ul id="list01">
</ul>
</body>
</html>
jqueryUI
jquery UI是以jQuery为基础的代码库。包含底层用户交互、动画、特效和可更换的可视控件。我们可以直接用它来构建具有很好交互性的web应用程序。
juqeryUI网址：http://jqueryui.com/
jquerUI拖拽
<!DOCTYPE html>
<html>
<head>
<title>拖拽</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery-ui.min.js"></script>
<script type="text/javascript">
$(function() {
$('.box').draggable({
// 限制在x轴拖动
axis:'x',
// 限定在父级的范围移动
containment:'parent',
drag:function(ev,ui) {
$('#shownumber').val(parseInt(100*(ui.position.left/600)));
}
});
})
</script>
<style type="text/css">
.con {
width: 800px;
height: 200px;
border: 1px solid #000;
margin: 50px auto 0;
}
.box {
width: 200px;
height: 200px;
background-color: gold;
}
</style>
</head>
<body>
<div class="con">
<div class="box"></div>
</div>
<input type="text" name="" id="shownumber">
</body>
</html>
本地存储
本地存储分为cookie，以及新增的localStorage和sessionStorage。
1、cookie存储在本地，容量最大4k，在同源的http请求时携带传递，损耗带宽，可设置访问路径，只有此路径及此路径的子路径才能访问cookie，在设置的过期时间之前有效。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>cookie</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.cookie.js"></script>
<script type="text/javascript">
// 设置cookie 过期时间为1天，存在网站更目录下
$.cookie('mycookie','ok!',{expires:1,path:'/'});
// 读取cookie
var mycookie = $.cookie('mycookie');
alert(mycookie);
</script>
</head>
<body>
<h1>测试页面</h1>
</body>
</html>
2、localStorage存储在本地，容量为5M或者更大，不会再请求时候携带传递，在所有同源窗口中共享，数据一致有效，除非人为删除，可作为长期数据。
3、sessionStorage存储在本地，容量为5M或者更大，不会再请求时候携带传递，在同源的当前窗口关闭前有效。
localStorage和sessionStorage合称为Web Storage，Web Storage支持事件通知机制，可以将数据更新的通知监听者，Web Storage的api接口使用更方便。
iPhone的无痕浏览不支持Web Storage，只能用cookie。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>cookie</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.cookie.js"></script>
<script type="text/javascript">
localStorage.setItem("dat","456");
sessionStorage.setItem('dat1','789');
</script>
</head>
<body>
<h1>测试web storage</h1>
</body>
</html>
