JQuery学习笔记记录
文章目录
- JQuery简述
-
- 1.1 获取JQuery的两种方式
-
- 1.1.1 直接下载库文件
- 1.1.2 url(CDN)引用
- 1.2 初试JQuery
- 1.3 JQuery的几种选择器方式
- 1.4 JQuery一些细节
- JQuery样式案例细节补充
-
-
- 1、全选案例代码实例
- 2、jquery操作DOM元素之创建添加结点案例
- 3、发表评论案例
- 4、弹幕制作案例
- 5、获取可视区的宽高
- 6、回到顶部案例
- 7、Jquery中的事件委托（delegate，不推荐使用）
- 8、on注册事件（重点）
- 9、jquery delay延迟案例
- 10、五角星评分案例
-
JQuery简述
JQuery就是封装了大量js代码的函数库
使用Jquery的好处
jquery封装了大量的方法，完全不需要担心兼容性的问题，因为都已经被封装好了
1.1 获取JQuery的两种方式
1.1.1 直接下载库文件
JQuery完全开源，直接在官网上下载即可，这里附上官网链接
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元素添加点击事件的不同写法比较
点我
1.3 JQuery的几种选择器方式
由于过于繁杂，请查阅文档JQuery语法大全，下面仅给出示例：
点我
1.4 JQuery一些细节
… 不止这些,请查看文档学习,授之以鱼不如授之以渔，接下来只会给出jquery的案例代码，可以帮助学习
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>Documenttitle>
<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>Documenttitle>
<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>Documenttitle>
<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 = $(''+content+'
');
var op = $('').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值是否加引号都无所谓
$("").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>1td><td>2td><td>3td>
<td>
<input type="button" value="删除此列" id="delete">
td>
tr>
table>
body>
<script>
$("#create").click(function(){
$("用户名 1 2 3 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>1td><td>2td><td>3td>
<td>
<input type="button" value="删除此列" id="delete">
td>
tr>
table>
body>
<script>
$("#create").on("click",function(){//用on可以注册简单事件
$("用户名 1 2 3 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>