第一节:了解Jquery
原生的JS代码的编写量非常多,且获取DOM节点并对元素进行操作也比较繁琐,为了简化,jQuery开始诞生。
jQuery是一个快速、简洁的JavaScript框架,是一个优秀的支持多浏览器的JavaScript代码库(或JavaScript框架)。jQuery即倡导写更少的代码,做更多的事情。“write Less,Do More”.它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作、事件处理、动画设计和Ajax交互。在2006年1月由美国人John Resig在纽约的barcamp发布。
jQuery官方网站可点击此处链接
jQuery版本介绍
- 1.x.x
兼容低版本浏览器IE8-
代码过于庞杂,性能不高
最新版本1.12 - 2.x.x
已经不支持IE低版本浏览器IE8-
最新版本2.2 - 3.x.x
3.0 版本是从 2.0 版本分支出来的,但由于改动过大,因此更新了主版本号
不支持IE低版本浏览器
性能大幅度提高(推荐使用)
jQuery下载与安装
1、官网下载地址可点击此处链接
2、CDN下载地址可点击此处链接
3、CDN.min版下载地址可点击此处链接
jQuery文档(API说明书)
jQuery库封装了很多方法,更详细的说明和使用方法,可以在jQuery文档中进行查询。jQuery文档有在线版和文件版。在线版速查起来更方便些,在线链接非常多,很多网页都有
在线版jQuery文档在线链接
jQuery文档在线连接1可点击此处
jQuery文档在线连接2可点击此处
jQuery文档在线连接3可点击此处
jQuery的使用
jQueuy只做两件事情
【获取元素】 使用jQuery选择器获取元素,jQuery选择器支待CSS,还有自己私有的选择器
【操作元素】 使用jQuery操作,可操作属性、内容、样式、动画、事件等
引入jQuery
<script src="lib/jquery-3.2.1.js"></script>
jQuery的牛刀小试(获取元素)
jQuery('selector')
——获取元素
jQuery(function(){ })
—— 替代window.onload
$
—— jQuery的别名
即:$() ==jQuery()
,为了编写的规范和安全性,$()最好只在function()内部才写
例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>引入jquery</title>
<script src="lib/jquery-3.2.1.js"></script>
<script type="text/javascript">
jQuery(function(){
var $box = jQuery('.box');
console.log($box);
})
</script>
</head>
<body>
<div class="box"></div>
</body>
</html>
控制台结果:
常用jQuery原型对象的方法介绍
写在jQuery原型对象中的方法,通过jQuery实例调用
【修改元素style属性】
css(attr[,val])
: (内联样式)
取值:
css(attr),css([‘color’,’text-align’]) <==> getComputedStyle[attr]
赋值:
css(attr,val),css({attr:val});
【获取/设置匹配表单元素的值(等同于原生js中的value属性)】
val(v)
:
取值:
input.val()
赋值:
input.val(v)
v:字符串
v:数组(一般用于单选/复选框的勾选)
v:函数function(idx,val){ return 值}//函数内部一定要返回值
【原生js中的innerHTML】
html()
: (等同于)
取值
div.html() ——取得第一个匹配元素的html内容
赋值
div.html(‘:’) ——设置匹配元素的内容
【文本内容】
text()
——取得所有匹配元素的文本内容。
【添加/删除类】
addClass()/removeClass()
: 添加/删除类,支持多个类同时添加或删除
toggleClass() ——如果存在(不存在)就删除(添加)类。
hasClass(‘con’) ——判断当前元素是否包含con这个类,返回布尔值(不支持多个类进行判断)
【获取jquery对象】
eq(n)
——获取第N个jquery对象(元素),n支持负数(表示从后面查找)
**【获取当前元素在同辈元素中的索引值】
index()
——获取当前元素在同辈元素中的索引值
$(this).index();
【显示/隐藏】
show()
——显示元素
hide()
——隐藏元素
带参数:同时改变width,height,opacity的动画
【检测匹配元素集合】
is(expr|obj|ele|fn)
——根据选择器、DOM元素或 jQuery 对象来检测匹配元素集合,其中如果有一个元素符合这个给定的选择器表达式就返回true
。如果没有元素符合,或者表达式无效,都返回false
。
【获取html标签属性】
attr(name[,val])
——设置/获取html标签属性
【获取DOM节点属性】
prop(attr[,val])
获取/设置DOM节点属性(一般修改布尔类型属性)
获取:获取在匹配的元素集中的第一个元素的属性值。
赋值:给集合中所有元素属性赋值
val为函数
$(':checkbox').prop('checked',function(idx,oldVal){
return !oldVal;
}
【遍历jquery对象】
each(function(idx,ele){})
——用于遍历jquery对象
return true ——跳过当前循环,进入下一个循环(等效原生js中得continue)
return false ——退出整个each循环(等效原生js中得break)
【jquery大部分方法的共性】
无参数时为取值,带参数时为赋值
取值:取得第一个匹配元素的值
赋值:设置所有匹配元素的值
隐式迭代(隐式遍历):看不见的遍历,大部分的jquery方法都支持隐式迭代
常用jQuery静态方法介绍
$.each(arr|obj,callback)
——通用遍历方法,用于遍历对象和数组。
callback(idx,item)
$.map(arr|obj,callback)
——根据现有数组生成一个新的数组,新数组的元素为callback内return的值
callback(item,idx)
$.type(n)
——检测参数n的数据类型
$.makeArray(obj)
——将类数组对象转换为数组。
$.parseJSON(json)
——接受一个JSON字符串,返回解析后的对象。类似原生js中的JSON.parse
$.inArray(value,array,[fromIndex])
——确定value在数组array中的位置,从0开始计数(如果没有找到则返回 -1 ),一般用于判断数组中是否包含某一字符。
serialize()/serializeArray()
——只能在form表单中使用,并且表单元素必须有name属性
选择器介绍
- 常用的选择器
【作用】
选择页面中的元素,得到jQuery实例对象
【ID选择器】
$(“#save”)
——ID选择器
【类选择器】
$(“.class”)
——类选择器
【标签选择器】
$(“div”)
——标签选择器
【复合选择器】
$(“div,span,p.myClass”)
——复合选择器
【属性选择器】
$(‘[id=box]’)
——属性选择器
$(‘li[data-index]’)
——获取有data-index属性的所有元素
$(‘li[data-index!=10]’)
——data-index属性不等于10的元素,css目前未支持
$(‘li[data-index^=10]’)
——data-index属性以10开头的元素
$(‘li[data-index$=10]’)
——data-index属性以10结尾的元素
$(‘li[data-index*=10]’)
——data-index属性包含10的元素
【表单选择器】
$(‘:input’)
:radio
——匹配所有单选按钮
:checkbox
——匹配所有复选按钮
:selected
——获取已选择的option元素
:checked
——匹配所有被选中的元素(复选框、单选框等,select中的option)
:submit
——匹配所有提交按钮
:reset
——匹配所有重置按钮
:button
——匹配所有按钮
:text
——匹配所有的单行文本框
:password
——匹配所有密码框
【可见性】
:hidden
——匹配所有不可见元素(display:none),或者type为hidden的元素
:visible
——匹配所有可见元素
以上两个选择器配合is()方法通常用于判断,返回布尔值
if(box.is(':visible')){
box.css('display','none');
}
- 选择器的常用操作
【jquery对象与原生对象的转换】
jquery转原生:
get(0)/[0]
——获取集合中第一个DOM节点
get()
——不传参得到集合中所有的dom节点
原生转
jquery: $(dom);
【判断是否为jquery对象】
var box = $('#box');
if(box.jquery){
.....
}
【判断一个jquery对象是否存在(是否能获取到元素)】
length
转成原生对象再判断
- 筛选
利用选择器得到得结果不一定是我们想要得最终结果,有时需要进一步筛选
【基本筛选】
:odd/:even,:gt(n)/:lt(n)
——筛选范围(索引支持负数)
:contains(奥巴马)
——筛选出包含“奥巴马”这三个字的元素
【筛选方法】
first()/last()
——获取集合中第一个/最后一个元素
eq(index|-index)
——获取第N个元素,n支持负数(表示从后面查找)
filter(expr|obj|ele|fn)
——筛选出与指定表达式匹配的元素集合。这个方法用于缩小匹配* 的范围。用逗号分隔多个表达式
map(fn)
——将一组元素转换成其他数组(不论是否是元素数组)
slice(start,[end])
——选取一个从start到end(不包括end)匹配的子集
has(expr|ele)
—— 保留包含特定后代的元素,去掉那些不含有指定后代的元素。
not(expr|ele|fn)
—— 删除与指定表达式匹配的元素
- 查找
利用当前元素去查找其他元素
【查找子元素】
find(expr|obj|ele)
—— 查找后代元素
children([expr])
—— 取得匹配元素的所有子元素。(原生js:children)
【查找父级元素】
parent([expr])
—— 获取父元素
parents([expr])
—— 取得所有父级元素
closest(expr|obj|ele)
—— 从元素本身开始,逐级向上级元素匹配,并返回最先匹配的元素
offsetParent()
—— 返回第一个有定位属性(absolute,relative,fixed)* 的父元素,如果没有定位父级,则返回html元素
【查找兄弟元素】
next([expr])
—— 返回下一个同辈元素 ==> nextElementSibling
prev([expr])
—— 获取前一个同辈元素 ==> previousElementSibling
nextAll([expr])
—— 获取当前元素之后所有的同辈元素
prevAll([expr])
—— 获取当前元素之前所有的同辈元素
siblings([expr])
—— 获取当前元素的所有兄弟元素(除自身以外的所有兄弟元素 = * prevAll + nextAll)
DOM节点操作介绍
- 增删改
【创建jquery对象】
$('<div/>');
$('<div>生成一个div</div>');
【元素添加】
1、内部添加(添加为子元素)
append(content|obj|ele|fn)
: 在元素内部最后面追加内容(后置)
prepend
: 向元素内部增加内容(前置)
appendTo,prependTo
2、外部插入内容(添加为兄弟元素)
after
: 在元素后面插入内容
before
: 在元素前面插入内容
insertAfter,insertBefore
如果页面上已经存在了要添加的元素,append,prepend,after,before会把元素移动到页面相应的位置
【元素删除】
remove()
; 删除元素, 虽然元素从文档中删除了,但js内部依然保留对它引用
empty()
; 清空内容
【元素复制】
clone([Event[,deepEvent]])
Event:(true 或 false)是否复制元素的行为,默认为false
deepEvent: (true 或 false)是否复制子元素的行为,默认为Even的值
- 盒模型属性
.offset()
:获取匹配元素相对于根元素的偏移量
返回一个对象,包含当前元素的top,left值
position()
:获取匹配元素相对(有定位属性)父元素的偏移量,如果没有定位父级,则相对于根元素(html),返回一个对象,包含当前元素的top,left值。
width(v) = width
; //取值/赋值,当传入v时,相当于css(‘width’,v);
innerWidth() = width + padding;
-----> clientWidth
outerWidth() = width + padding + border;
-------> offsetWidth
outerWidth(true) = width + padding + border + margin;
第二节:jQuery使用案例
操作样式
例:jQuery选择器+CSS方法
<script type="text/javascript">
jQuery(function(){
//改变背景颜色
$('.box').css('background-color','#58bc58')
})
</script>
操作事件
例:jQuery选择器+点击事件方法+CSS样式方法
<script type="text/javascript">
jQuery(function($){
$('.box').on('click',function(){
$('.box').css('background-color','#58bc58')
})
})
</script>
浏览器结果:
操作内容
例:jQuery选择器+原型对象innerHTML的方法HTML()+CSS方法==
<script type="text/javascript">
jQuery(function($){
//
$('.box').html('我是原来的innerHtml').css('font-size',30) //链式调用
})
</script>
浏览器结果:
DOM节点操作与HTML属性
DOM节点操作
prop(attr,val)
例:为多选框默认全部勾上
<!DOCTYPE html5>
<html>
<head>
<meta charset="utf-8">
<title>关于jquery</title>
<style type="text/css">
</style>
<script src="./lib/jquery-3.2.1.js"></script>
<script type="text/javascript">
jQuery(function($){
$(':checkbox').prop('checked',true);
})
</script>
</head>
<body>
<div class="checkbox">