文章目录
JQuery简述
JQuery就是封装了大量js代码的函数库
使用Jquery的好处
jquery封装了大量的方法,完全不需要担心兼容性的问题,因为都已经被封装好了
1.1 获取JQuery的两种方式
1.1.1 直接下载库文件
JQuery完全开源,直接在官网上下载即可,这里附上官网链接
1.1.2 url(CDN)引用
直接通过url(CDN)在线访问JQuery库,这里附上几个常用url:
**微软jquery压缩版引用地址: **
**官网jquery压缩版引用地址: **
提示:jQuery官网引用地址最近国内访问会经常出现打不开的情况,请尽量不要调用官网引用地址!
百度 cdn:
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
新浪cdn:
<script src="https://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script>
又拍云 CDN
<script src="https://upcdn.b0.upaiyun.com/libs/jquery/jquery-2.0.2.min.js"></script>
1.2 初试JQuery
下面是普通代码给DOM元素添加点击事件的不同写法比较
<body>
<a href="#" id="a1">点我</a>
<script>
//原生写法
// var oo = document.getElementById("a1");
// oo.οnclick=function(){
// alert("hello win");
// }
//jQuery写法,这里$()括号内的选择器和css选择器相同
$("#a1").click(function(){
alert("hello win");
});
</script>
</body>
1.3 JQuery的几种选择器方式
由于过于繁杂,请查阅文档JQuery语法大全,下面仅给出示例:
<body>
<a href="#" id="a1" name="aaa" class="bbb">点我</a>
<script>
// 原生选择器
// id选择器
// document.getElementById("a1");
//标签选择器
// document.getElementsByTagName("a");
// 名称选择器
// document.getElementsByName("aaa");
// css选择器
// document.querySelector("");这里面传什么选择器就是什么选择器,和css相同
// jQuery选择器
// $('a')标签选择器
// $('#a1')id选择器
// $('.bbb')class选择器
</script>
</body>
1.4 JQuery一些细节
<script>
//原生等待网页加载
// window.οnlοad=function(){
// //...代码
// }
// jQuery等待网页加载完毕
// 以下三个方法相同,不过ready优先于load,document优先于window先加载完毕,因为document是window的子集
$(window).load(function(){// 3
alert("3");
});
$(document).ready(function(){// 首先运行 1
alert("1");
});
$(window).ready(function(){// 2
alert("2");
})
$(window).load(function(){// 4
alert("4");
});
</script>
<script>
//原生模式显示内容
// document.getElementById("ddd").innerText="通过这个方法显示一些内容";
//jquery方式
// $("#ddd").text("通过这个方法显示一些内容");//设置值
// alert( $("#ddd").text());//显示值
// $("#ddd").innerText="通过这个方法显示一些内容";//这样写是无效的
</script>
… 不止这些,请查看文档学习,授之以鱼不如授之以渔,接下来只会给出jquery的案例代码,可以帮助学习
最后推荐三个能让前端页面更好看的学习任务
- Layer弹窗组件
- Element-ui可视化效果
- css3
JQuery样式案例细节补充
- jquery的css中,例如$(‘div’).css(‘background-color’,‘red’);其中的background-color也可以换成backgroundColor
- jquery存在隐式迭代的特性,当进行设置属性操作的时候,会默认给所有的对象都设置为相同的属性,不过在获取的时候,只会返回第一个元素
- addClass方法用来添加类,他的好处是,不会覆盖掉前面的添加好的类,removeClass用来移除一个类,并且不会覆盖前面的class,hasClass判断是否有这个class,toggleClass判断用来切换移除这个类
- jquery只会负责添加属性,具体的样式问题还是css自己的问题
- jquery清除一个元素内所有的元素,如果用原生html会发生内存泄漏问题,因为原生html中、不会清除绑定在元素上的事件,事件会占用一部分内存,但是如果用jquery中的empty()函数清除,会将绑定的事件也一并删除
- empty()和remove()的区别,empty只清除自己的所有孩子,remove会删除自己
- clone()方法,如果传递true,那么会复制事件,如果传递false,不会复制事件
- Jquery创建元素,只需要$("")。这样就创建了一个元素
- window对象没有scrollTop和scrollLeft属性,只有pageYOffset和pageXOffset属性(距离顶部或距离左边多少距离)
- jquery在传递对象时,key值可以加引号也可以不加,但是如果不加引号,key值中不能有‘ - ’ 符号
- 事件注册用on,事件解除用off,事件触发用trigger(即触发绑定在一个元素上的事件,可以给出事件名)
- 通过事件对象可以阻止元素(a)默认行为:e.preventDefault(),可以阻止冒泡行为:e.stopPropagation(),还有一个比较万能,return false既能阻止默认行为,也可以阻止冒泡行为
attr和prop的最大区别
对于表单元素的checked、selected、disabled等属性,在jQuery 1.6之前,attr()
获取这些属性的返回值为Boolean类型:如果被选中(或禁用)就返回true
,否则返回false
。
但是从1.6开始,使用attr()
获取这些属性的返回值为String类型,如果被选中(或禁用)就返回checked、selected或disabled,否则(即元素节点没有该属性)返回undefined
。并且,在某些版本中,这些属性值表示文档加载时的初始状态值,即使之后更改了这些元素的选中(或禁用)状态,对应的属性值也不会发生改变。
因为jQuery认为:attribute的checked、selected、disabled就是表示该属性初始状态的值,property的checked
、selected
、disabled
才表示该属性实时状态的值(值为true
或false
)。
因此,在jQuery 1.6及以后版本中,请使用prop()
函数来设置或获取checked
、selected
、disabled
等属性。对于其它能够用prop()
实现的操作,也尽量使用prop()
函数。
大家都知道原生js可以获取匹配元素的内部html和外部html,内部是innerHTML,外部是outerHTML,原生js的dom对象是存在这两个属性的,
document.getElementById(“linkType”).outerHTML;
如果用jQuery如何获取匹配元素(包括自身元素的html)呢?
既然存在这个属性,我们就可以用$("#linkType").prop(“outerHTML”)来获取;
可以通过$("#linkType").prop(“outerHTML”,outerHTML)赋值来改变outerHTML的内容;
值得注意的是jQuery的attr是获取不到这个属性值的。
1、全选案例代码实例
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!--引入百度的jquery cdn-->
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<input type="checkbox" name="all" id="all">全选
<br>
<input type="checkbox" name="1" id="1">1
<br>
<input type="checkbox" name="2" id="2">2
<br>
<input type="checkbox" name="3" id="3">3
<br>
<input type="checkbox" name="4" id="4">4
</body>
</html>
<script>
$("#all").click(function(){
$(this).nextAll("input").prop('checked',$(this).prop('checked'));
});
$('input:not(:first)').click(function(){
var alllen = $('input:not(:first)').length;
var len = $('input:not(:first):checked').length;
if(alllen === len){
$('#all').prop('checked',true);
}else{
$('#all').prop('checked',false);
}
});
</script>
2、jquery操作DOM元素之创建添加结点案例
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<style>
</style>
</head>
<body>
<button type="button">>></button>
<button type="button"><<</button>
<button type="button">></button>
<button type="button"><</button>
<br>
<select name="" id="1" multiple>
<option value="1">郑州</option>
<option value="1">洛阳</option>
<option value="1">周口</option>
<option value="1">开封</option>
</select>
<select name="" id="2" multiple></select>
</body>
</html>
<script>
$('button').eq(0).click(function(){
$('select#1>option').appendTo("select#2");
}).next('button').click(function(){
// $('select#2>option').appendTo('select#1');
$("select#1").append($("select#2>option"));//用这种方式append方法内只能传递jquery对象
}).next('button').click(function(){
$("select#1>option:selected").appendTo("select#2");
}).next('button').click(function(){
$("select#2>option:selected").appendTo("select#1");
});
</script>
3、发表评论案例
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<style>
html,body{height: 100%;}
.wrapper{width: 400px;height: 100%;background-color: antiquewhite;margin: 0 auto;text-align: center;}
.context{border: 1px solid black;width: 400px;height: 67%;}
</style>
</head>
<body>
<div class="wrapper">
<textarea name="" id="content" cols="50" rows="20"></textarea>
<input type="button" value="发表评论">
<input type="button" value="清空评论">
<div class="context"></div>
</div>
</body>
</html>
<script>
$('.wrapper>input[value=发表评论]').click(function(){
var content = $('.wrapper>#content').val();
// var op = $('<p>'+content+'</p>');
var op = $('<p></p>').text(content).css('border-bottom','1px dotted black');
$('.context').prepend(op);
$('.wrapper>#content').val("");
});
$('.wrapper>input[value=清空评论]').click(function(){
$('.context').empty();
});
</script>
4、弹幕制作案例
这个项目有一个未实现的问题,就是如果span标签离浏览器边缘太近的话,会造成字体竖向显示的效果,暂时没有找到解决方法
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>弹幕效果</title>
<style>
html,body{width: 100%;height: 100%;}
.show{width: 100%;height: 80%;background-color: whiteSmoke}
.bottom{width: 100%;height: 20%;text-align:center}
.bottom>input[type=text]{width: 300px;padding: 10px}
.bottom>input[type=button]{padding: 10px 20px;cursor: pointer;background-color: red;color: white}
span{position: absolute;font-size: 30px;}
</style>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<div class="show"></div>
<br>
<div class="bottom">
<input type="text" name="ctt" id="ctt" placeholder="请输入弹幕内容">
<input type="button" value="发送">
</div>
</body>
<script>
var width = document.body.clientWidth-350;//获取body中可视区域的宽度
var randColor = ["#FAEBD7","#00FFFF","#7FFFD4","#F5F5DC","#8A2BE2","#7FFF00","#1E90FF","ForestGreen","#FFB6C1"];
var randNum = parseInt(Math.random()*randColor.length);
$(".bottom>input[type=button]").click(function(){
var ctt = $(".bottom>#ctt").val();
var randPos = Math.random().toFixed(2)*400;
// 如果发送弹幕内容不为空,那么就创建一个span元素并且准备发射
if(ctt!=""){
//这里key值是否加引号都无所谓
$("<span></span>").text(ctt).css({'color':randColor[randNum]+'px',
'left':width+'px','top':randPos+'px',
"overflow":"hidden"}).
animate({left:'-50px'},5000,'linear',function(){
$(this).remove();
}).appendTo($(".show"));
$(".bottom>#ctt").val("");
}
});
$(".bottom>input[type=text]").keyup(function(e){
if(e.keyCode ===13){
$(".bottom>input[type=button]").click();
}
});
</script>
</html>
5、获取可视区的宽高
width:获取某个属性上的width值,返回数字
innerWidth:获取padding+width的值
outerWidth:获取padding+width+border的值
outerWidth(true):获取padding+width+border+margin的值
scrollLeft:获取被卷曲的宽度
scrollTop:获取被卷曲的高度
offset:获取元素相对于document的位置
position:获取元素相对于有定位的父元素的位置
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>获取可视区的宽高</title>
<style>
.show{text-align: center;width: 700px;height: 400px;background-color: aqua;font-size: 30px;}
</style>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<div class="show">可视区宽度:<span></span><br>可视区高度:<span></span></div>
</body>
</html>
<script>
$(".show>span").eq(0).text($(window).width());
$(".show>span").eq(1).text($(window).height());
// $(".show>span").eq(0).text($(document).width())
$(window).resize(function(){
var width = $(window).width();
var height = $(window).height();
$(".show>span").eq(0).text(width);
$(".show>span").eq(1).text(height);
});
</script>
6、回到顶部案例
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>获取可视区的宽高</title>
<style>
html,body{height: 3000px;}
.back{width: 40px;height: 40px;padding: 5px;position: fixed;right: 50px;bottom: 40px;
border: 10px solid black;display: none;background-color: #ccc;}
</style>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<div class="back"><a href="javascript:void(0);">回到顶部</a></div>
</body>
</html>
<script>
$(window).scroll(function(){
// window没有scrollTop属性,window的pageXOffset和pageYOffset是只读的
if($("html,body").scrollTop()>300){//这里有一个兼容性问题,如果是在ie6,7,8下body是不起作用的
// $(".back").show();
$(".back").fadeIn();
}else{
$(".back").fadeOut();
}
});
$(".back>a").click(function(){
$("html,body").animate({scrollTop:0},500);
});
</script>
7、Jquery中的事件委托(delegate,不推荐使用)
即创建新的元素时,让新的元素也拥有事件
table创建增加删改事件案例
<!DOCTYPE html>
<html lang="zh,en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>事件委托</title>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<input type="button" value="点击创建新角色" id="create">
<br>
<br>
<table id="mytable" border="1" cellpadding='5' cellspacing='0'>
<caption>用户列表</caption>
<tr><td>用户名</td><td>1</td><td>2</td><td>3</td>
<td>
<input type="button" value="删除此列" id="delete">
</td>
</tr>
</table>
</body>
<script>
$("#create").click(function(){
$("<tr><td>用户名</td><td>1</td><td>2</td><td>3</td><td><input type='button' value='删除此列' id='delete'></td></tr>").appendTo($("#mytable"))
});
$("#mytable").delegate("#delete","click",function(){
$(this).parent().parent().remove();
});
</script>
</html>
8、on注册事件(重点)
jquery为了让方法更好记忆,从jquery1.7之后,就用on统一了所有事件的注册方法
利用on事件重写上述delegate案例
<!DOCTYPE html>
<html lang="zh,en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>事件委托</title>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<input type="button" value="点击创建新角色" id="create">
<br>
<br>
<table id="mytable" border="1" cellpadding='5' cellspacing='0'>
<caption>用户列表</caption>
<tr><td>用户名</td><td>1</td><td>2</td><td>3</td>
<td>
<input type="button" value="删除此列" id="delete">
</td>
</tr>
</table>
</body>
<script>
$("#create").on("click",function(){//用on可以注册简单事件
$("<tr><td>用户名</td><td>1</td><td>2</td><td>3</td><td><input type='button' value='删除此列' id='delete'></td></tr>").appendTo($("#mytable"))
});
//用on也能注册委托事件
$("#mytable").on("click","#delete",function(){//此时参数位置稍有不同
$(this).parent().parent().remove();
});
</script>
</html>
9、jquery delay延迟案例
<!DOCTYPE html>
<html lang="zh,en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>事件委托</title>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<style>
div{
width: 500px;
height: 60px;
font-size:30px;
text-align: center;
margin: 200px auto;
display: none;
background-color: aqua;
line-height: 60px;
}
</style>
</head>
<body>
<div>提示,欢迎至此</div>
</body>
<script>
$("div").fadeIn(1000).delay(1000).fadeOut(1000);
</script>
</html>
10、五角星评分案例
<!DOCTYPE html>
<html lang="zh,en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>事件委托</title>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<style>
ul{list-style: none;}
ul>li{float:left;margin-left: 20px;color: orange;font-weight: bolder;font-size: 30px;}
</style>
</head>
<body>
<ul>
<li>☆</li>
<li>☆</li>
<li>☆</li>
<li>☆</li>
<li>☆</li>
</ul>
</body>
<script>
var wk = "☆";
var ws = "★";
$("ul>li").on("mouseenter",function(){
$(this).text(ws).prevAll().text(ws);
$(this).nextAll().text(wk);
}).on("mouseleave",function(){
$(this).text(wk).siblings().text(wk);
$("ul>li.current").text(ws).prevAll().text(ws);
}).on("click",function(){
$(this).addClass("current").siblings().removeClass("current");
})
</script>
</html>