《从零玩转jQuery》李南江https://study.163.com/course/courseMain.htm?courseId=1005220017
简书笔记https://www.jianshu.com/nb/23491401
中文jQueryhttp://hemin.cn/jq/
学习该课程,参考上述笔记和API,自己总结锤炼吸收,以后方便参考。
1、属性 2、CSS类 3、html代码/文本/值 4、CSS 5、位置和尺寸
一、初识jQuery
jQuery是一款JavaScript库,简化原生js操作,除了查询以外,使html文档遍历和操作、事件处理、动画、Ajax等变得更加简单,且简化浏览器兼容。
1、jQuery版本
1.x:兼容ie678,但相对其它版本文件较大,官方只做bug维护,不再新增功能,最终版本1.12.4。
2.x:不兼容ie678,官方只做bug维护,不再新增功能,最终版本2.2.4。
3.x:不兼容ie678,只支持最新的浏览器,很多老的jQuery插件不支持这个版本,提供不包含Ajax、动画API版本。
查看百度、腾讯、京东等网页源码,均使用1.x。
uncompressed开发版:代码没有经过压缩,含完整的单词、空格、换行等,更有利于阅读,体积更大(200-300KB)。开发时使用。
minified生产版:所有代码经过压缩,体积更小(30-40KB)。项目上线使用。
2、jQuery使用
(1)下载jQuery库
jquery.com->Download底部->jQuery CDN->https://code.jquery.com
(2)引入jQuery库
<script
src="https://code.jquery.com/jquery-1.12.4.min.js"
integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
crossorigin="anonymous"></script>
(3)jQuery入口函数
$符号是jQuery框架对外暴露的全局变量,是window对象的属性,window.jQuery=window.$=jQuery;。
<script>
//该js写在body之前,加载完页面再运行js,否则失去意义
//原生js的固定写法
window.onload=function(event){};
//jQuery的固定写法
$(document).ready(function(){});
</script>
原生js和jQuery入口函数的加载模式不同。原生js会等网页全部加载完毕(DOM元素、图片等)才会执行;多个window.onload只会执行一次,后面覆盖前面。jQuery只等待网页中的DOM结构加载完毕,不等图片加载就会执行;多个$(document).ready()依次执行,不会覆盖。
//jQuery入口函数四种写法
$(document).ready(function(){});
jQuery(document).ready(function(){});
$(function(){});//推荐
jQuery(function(){});
(4)jQuery冲突问题
很多js框架都提供了类似jQuery这样的便捷访问方式,如果其它框架也使用$,后引入的框架覆盖之前的,会引起冲突。
//方法1:在编写其它jQuery前释放$使用权,用jQuery代替$
jQuery.noConflict(); //释放$
jQuery(function(){});
//方法2:自定义一个访问符号
var yc=jQuery.noConflict();
yc(function(){});
二、jQuery核心函数与工具方法
1、核心函数
$()代表jQuery核心函数,可接收一个函数、字符串、DOM元素。
<div class="box1"></div>
<div id="box2"></div>
<span></span>
$(function(){//1.接收函数
//2.返回一个jQuery对象
var $box1=$(".box1");//2.接收字符串选择器
var $box2=$("#box2");
var $p=$("<p>我是段落</p>");//2.接收字符串代码片段
$box1.append($p);//创建对应的DOM元素
//3.接收DOM元素,该元素被包装成一个jQuery对象返回
var span=document.getElementsByTagName("span")[0];
var $span=$(span);
console.log($span);
});
jQuery对象是一个伪数组,有0-length-1的属性和length属性,可以通过下标对每个元素进行访问。
2、静态方法
(1)静态方法和实例方法
静态方法直接添加到类上面,通过类名调用;实例方法添加到类的原型上,通过实例调用。
function AClass(){//定义一个类
}
AClass.staticMethod=function(){//静态方法
alert("staticMethod");
};
AClass.staticMethod();
AClass.prototype.instanceMethod=function(){//实例方法
alert("instanceMethod");
};
var a=new AClass();
a.instanceMethod();
(2)each和map方法
var arr=[1,3,5,7,9];//数组
var obj={0:1,1:3,2:5,3:7,4:9,length:5};//伪数组
//原生forEach和map方法只能遍历数组,不能遍历伪数组
arr.forEach(function(value,index,array){
console.log(index,value,array[index]);
});
arr.map(function(value,index,array){
console.log(index,value,array[index]);
});
//利用jQuery的each和map静态方法遍历数组和伪数组
//参数为数组、回调函数(参数遍历到的索引及元素)
//默认返回值是遍历的数组或伪数组,return不会对返回值产生影响
var res1=$.each(obj,function(index,value){
console.log(index,value);
});
console.log(res1);//{0: 1, 1: 3, 2: 5, 3: 7, 4: 9, length: 5}
//参数为数组、回调函数(参数遍历到的元素及索引)
//默认返回值是空数组,或将回调函数的返回值组成一个新数组返回
var res2=$.map(obj,function(value,index){
console.log(index,value);
return index+value;
});
console.log(res2);//(5) [1, 4, 7, 10, 13]
(3)其它静态方法
$.trim(),去除字符串两端的空格,返回去除空格之后的字符串。
$.isWindow(),判断传入的对象是否是window对象,返回true/false。
$.isArray(),判断传入的对象是否是真数组,返回true/false。
$.isFunction(),判断传入的对象是否是函数,返回true/false。jQuery框架本质上是一个匿名函数,$.isFunction($)返回true。
//jQuery框架
(function(window,undefined){
})(window);
(4)holdReady方法
$.holdReady(),传入true或false,暂停或恢复jQuery.ready()事件(入口函数),例如为了等待资源加载完。
<head>
<meta charset="UTF-8">
<title>04-jQuery静态方法</title>
<script src="jquery-1.12.4.js"></script>
<script>
// 使用$直接调用,是静态方法
$.holdReady(true);
$(function () {
$("#first").click(function () {
alert("我是你想要的弹窗");
});
});
</script>
</head>
<body>
<button id="first">点击测试弹出</button>
<button id="second">解除延迟</button>
<script>
$("#second").click(function(){
$.holdReady(false);
});
</script>
</body>
3、VS Code简化操作
打开默认浏览器,Alt+B。
文件-> 首选项-> 用户代码片段-> html-> 添加如下.json代码。
"Print to console": {
"prefix": "jq",
"body": [
"<!DOCTYPE html>",
"<html>",
"<head>",
" <meta charset='UTF-8'>",
" <title>$1</title>",
" <script src='jquery-1.12.4.js'></script>",
" <script>",
" $(function(){",
" $2",
" });",
" </script>",
"</head>",
"<body>",
" $0",
"</body>",
"</html>"
],
"description": "jQuery"
}
三、jQuery属性和CSS
1、属性
属性是对象上保存的变量,操作属性:对象.属性名称;/对象[“属性名称”]。属性节点指在html标签中添加的属性,操作属性节点通过getAttribute()和setAttribute()方法。任何对象都有属性,只有DOM对象有属性节点。
通过浏览器查看属性和属性节点,Sources-> 源码-> Watch-> 获取节点document.getElementsByTagName(‘span’)-> 展开看到属性,其中attributes属性保存属性节点。
attr(name[,value]);获取或设置属性节点的值。获取时,返回找到所有元素中第一个元素指定属性节点的值;设置时,为找到的所有元素设置该属性值,如果设置的属性节点不存在,系统会自动新增该属性。
removeAttr(name);删除属性节点,删除所有找到元素指定的属性节点,属性名用空格隔开表示删除多个属性节点。
$("span").attr("class"); //获取
$("span").attr("class","box1 box2"); //设置
$("span").removeAttr("class"); //删除
prop()、removeProp()方法操作属性,也可以操作属性节点,与attr()、removeAttr()方法特点一致。
官方推荐,操作属性节点时,具有true/false两个属性的属性节点(如:checked, selected, disabled等)使用prop,其它使用attr。因为对于具有true/false两个属性的属性节点,attr分别返回checked/undefined,而prop返回true/false。
2、CSS类
通过操作标签的class属性实现CSS样式改变。
addClass(),添加类;
removeClass(),删除类;
toggleClass(),切换类,存在就删除,不存在就添加。
<head>
<meta charset='UTF-8'>
<title></title>
<style>
*{margin:0; padding:0;}
.class1{width:100px; height:100px; background:red;}
.class2{border:10px solid #000;}
</style>
<script src='jquery-1.12.4.js'></script>
<script>
$(function(){
var btns=document.getElementsByTagName("button");
btns[0].onclick=function(){
$("div").addClass("class1 class2");//添加类
};
btns[1].onclick=function(){
$("div").removeClass("class1");//删除类
};
btns[2].onclick=function(){
$("div").toggleClass("class2");//切换类
};
});
</script>
</head>
<body>
<button>添加类</button>
<button>删除类</button>
<button>切换类</button>
<div></div>
</body>
3、html代码/文本/值
html()添加或获取元素中的html,text()添加或获取元素中的文本。html()可以实现text()的功能,一般使用html()方法即可。
val()添加或获取元素value值。
$("div").html("<p>我是段落</p>");//添加html,相当于innerHTML
$("div").html();//获取html
$("div").text("我是文本");//添加文本,相当于innerText
$("div").text();//获取文本
$("input").val("请输入内容");//添加value值
$("input").val();//获取val值
4、CSS
//逐个设置
$("div").css("width","100px");
$("div").css("height","100px");
$("div").css("background","red");
//链式设置
$("div").css("width","100px").css("height","100px").css("background","yellow");
//批量设置,以对象的方式传入
$("div").css({
width:"100px",
height:"200px",
background:"blue"
});
//获取样式
console.log($("div").css("width"));
5、位置和尺寸
offset()获取或设置元素距离窗口的偏移位;
position()获取或设置元素距离定位元素的偏移位。
$(".son").offset().top;//获取
$(".son").offset({//设置
left:10
});
$(".son").position().top;//只能获取不能设置
scrollTop(), scrollLeft()获取或设置滚动的偏移位。
$(".scroll").scrollTop();//获取
$(".scroll").scrollTop(20);//设置
//获取网页滚动的偏移位,为了保证浏览器的兼容,ie通过body,其它通过html元素
$("body").scrollTop()+$("html").scrollTop();//获取
$("body,html").scrollTop(50);//设置
height(), width()获取或设置元素的高度和宽度,不包括padding和border;
innerHeight(), innerWidth()获取或设置元素的高度和宽度,包括padding,不包括border;
outerHeight(), outerWidth()获取或设置元素的高度和宽度,包括padding和border。
$(".parent").width("500px");//设置元素宽度
$(".parent").width();//获取元素宽度