目录
7.1 普通元素内容html()(相当于原生js中的innerHTML)
7.2 普通元素文本内容text()(相当于原生js中的innerText)
1. 概述
1.1 jQuery?
jQuery是一个快速、简洁的JavaScript 库,其设计的宗旨是"write Less , Do More”, 即倡导写更少的代码,
做更多的事情。
j就是JavaScript; Query 查询;意思就是查询js ,把js中的DOM操作做了封装,我们可以快速的查询使用里
面的功能。
jQuery封装了JavaScript常用的功能代码,优化了DOM操作、事件处理、动画设计和Ajax交互。
学习jQuery本质:就是学习调用这些函数(方法)。
优点:
- 轻量级。核心文件才几+kb,不会影响页面加载速度
- 跨浏览器兼容。基本兼容了现在主流的浏览器
- 链式编程、隐式迭代
- 对事件、样式、动画支持.大大简化了DOM操作
- 支持插件扩展开发。有着丰富的第三方的插件,例如:树形菜单、日期控件.轮播图等
- 免费、开源
2. jQuery的使用
2.1 下载
版本:
- 1x :兼容IE 678等低版本浏览器,官网不再更新
- 2x :不兼容IE 678等低版本浏览器,官网不再更新
- 3x : 不兼容IE 678等低版本浏览器,是官方主要更新维护的版本
各版本下载地址:http://code.jquery.com/
2.2 jQuery 的入口函数
<head>
<script src="jquery.min.js"></script>
</head>
<body>
<script>
// 方法1 这种写法更简单
$(function(){
...//此处是页面DOM加载完成的入口
});
// 方法2
$(document.ready(function(){
...//此处是页面DOM加载完成的入口
}));
</script>
</body>
- 等着DOM结构渲染完毕即可执行内部代码,不必等到所有外部资源加载完成, jQuery帮我们完成了封装。
- 相当于原生js中的DOMContentLoaded.
- 不同于原生js中的load事件是等页面文档、外部的js文件、css文件、 图片加载完毕才执行内部代码。
2.3 jQuery的顶级对象 $
2.3.1 $ 是jQuery的别称
上面的代码中的‘$’符号可以换成‘jQuery’,代码正常运行
2.3.2 $ 是 jQuery的顶级对象
相当于原生JavaScript中的window.把元素利用$包装成Query对象,就可以调用jQuery的方法。
2.4 jQuery对象和DOM对象
DOM对象:原生js代码获取来的对象
jQuery对象:jQuery方法获取的元素
jQuery对象的本质:利用$对DOM对象包装后产生的对象(伪数组形式存储)。
jQuery对象只能使用jQuery 方法,DOM对象则使用原生的JavaScirpt 属性和方法
2.4.1 两种对象之间的相互转换
1. DOM对象转换成jQuery对象: $(DOM对象)
$('div')
2. jQuery对象转换成DOM对象
//方法1
$('div')[index]//index是索引号
//方法2
$('div').get(index)//index是索引号
3. jQuery 选择器
3.1 基础选择器
名称 | 用法 | 描述 |
---|---|---|
ID选择器 | $("#id") | 获取指定ID的元素 |
全选选择器 | $('*') | 匹配所有元素 |
类选择器 | $(".lass") | 获取同一类class的元素 |
标签选择器 | $("div") | 获取同一类标签的所有元素 |
并集选择器 | s("div,p,i") | 选取多个元素 |
交集选择器 | $("li.current") | 交集元素 |
3.2 层级选择器
名称 | 用法 | 描述 |
---|---|---|
子代选择器 | $("ul>li"); | 使用>号,获取亲儿子层级的元素;注意,并不会获取孙子层级的元素 |
后代选择器 | $("u2 li"); | 使用空格,代表后代选择器,获取u下的所有1i元素,包括孙子等 |
3.3 隐式迭代
遍历内部DOM元素(伪数组形式存储)的过程就叫做隐式迭代。
简单理解:给匹配到的所有元素进行循环遍历,执行相应的方法,而不用我们再进行循环,简化我们的操作,方便我们调用。
3.4 筛选选择器
语法 | 用法 | 描述 |
---|---|---|
:first | $('li:first') | 获取第一个li元素 |
:last | $('li:last') | 获取最后一个li元素 |
:eq(index) | $("li:eq(2)") | 获取到的li元素中,选择索引号为2的元素,索引号index从0开始。 |
:odd | $("li:odd") | 获取到的li元素中,选择索引号为奇数的元素 |
:even | $('li:even") | 获取到的li元素中,选择索引号为偶数的元素 |
3.5 筛选方法
语法 | 用法 | 说明 |
---|---|---|
parent() | $("li").parent(); | 查找父级,最近一级(亲爸爸) |
children(selector) | $("ul").children("li") | 相当于$("ul>li"),最近一级(亲儿子) |
find(selector) | $("ul").find("li"); | 相当于$("ul Ii"),后代选择器 |
siblings(selector) | $(". first").siblings("li"); | 查找兄弟节点,不包括自己(类名first的元素)本身 |
nextAll([expr]) | $(".first").nextAll() | 查找当前元素之后所有的同辈元素 |
prevtAll([expr]) | $(" . last").prevAll() | 查找当前元素之前所有的同辈元素 |
hasClass(class) | $('div').hasClass("protected" ) | 检查当前的元素是否含有某个特定的类,如果有,则返回true |
eq( index) | $("li").eq(2); | 相当于$("li:eq(2)"), index从0开始 |
3.6 jQuery的排他思想
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="jquery.min.js"></script>
</head>
<body>
<button>点一下</button>
<button>点一下</button>
<button>点一下</button>
<button>点一下</button>
<button>点一下</button>
<button>点一下</button>
<button>点一下</button>
<script>
$(function() {
// 隐式迭代,给所有按钮都绑定了点击事件
$("button").click(function() {
$(this).css("background", "blue");
$(this).siblings("button").css("background", "");
});
})
</script>
</body>
</html>
4. jQuery样式操作
4.1 css方法
- 参数只写属性名,则是返回属性值
$(this).css("color");
参数是属性名,属性值,逗号分隔,是设置一组样式,属性必须加引号,值如果是数字可以不用跟单位和引号
$(this).css("color","red");
参数可以是对象形式,方便设置多组样式。属性名和属性值用冒号隔开,属性可以不用加引号,
$(this).css({ color:"white", width:20 });
4.2 操作类
作用等同于以前的classList ,可以操作类样式,注意操作类里面的参数不要加点
- 添加类 addClass() //追加类名,不影响原来的类名
$("div").click(function() { $(this).addClass("current"); });
删除类 removeClass()
$("div").click(function() { $(this).removeClass("current"); });
切换类 toggleClass()
$("div").click(function() { $(this).toggleClass("current"); });
4.3 类操作与className的区别
原生JS中className会覆盖元素原先里面的类名。
jQuery.里面类操作只是对指定类进行操作,不影响原先的类名。
5. jQuery 效果
jQuery封装的动画效果,常见的:
显示隐藏 | 滑动 | 淡入淡出 | 自定义动画 |
---|---|---|---|
show() | slideDown() | fadeln() | animate() |
hide() | slideUp() | fadeOut() | |
toggle() | slideToggle() | fadeToggle() | |
fadeTo() |
5.1 显示隐藏效果
语法:show ([speed, [easing], [fn]])
hide([speed, [easing], [fn]])
参数:
- 参数都可以省略,无动画直接显示。
- speed:三种预定速度之-的字符串( "slow" ,"normal" . or "fast" )或表示动画时长的毫秒数值(如: 1000)。
- easing : (Optional)用来指定切换效果,默认是“swing” , 可用参数"linear” 。
- fn:回调函数,在动画完成时执行的函数,每个元素执行一次。
jQuery API 速查表,查看方法的使用
5.2 滑动效果
语法:slideDown([speed, [easing], [fn]])
slideUp([speed, [easing], [fn]])
slideToggle([speed, [easing], [fn]])
参数说明与现实隐藏效果的参数说明一致
5.3 动画队列及停止其排队的方法
5.3.1 动画(效果)队列
动画或者效果一旦触发就会执行 ,如果多次触发,就造成多个动画或者效果排队执行。
5.3.2 停止排队
stop()
- stop()方法用于停止动画或效果
- 注意: stop()写到动画或效果的前面,相当于停止结束上一次的动画
$(this).children("ul" ).stop().slideToggle();
5.4 淡入淡出效果
语法: fadeIn([speed, [easing], [fn]])
fadeOut([speed, [easing], [fn]])
fadeToggle([speed, [easing], [fn]])
参数说明与现实隐藏效果的参数说明一致
渐进方式调整到指定的不透明度
fadeTo ([[speed] , opacity, [easing], [fn]])
参数:
- opacity透明度必须写,取值0~1之间。
- speed :三种预定速度之一 的字符串( "slow" ,"normal" , or "fast" )或表示动画时长的毫秒数值(如: 1000)。 必须写
- easing : (Optional)用来指定切换效果,默认是“swing” ,可用参数"Iinear” .
- fn:回调函数,在动画完成时执行的函数,每个元素执行一次。
5.5 自定义动画 animate()
animate (params, [speed], [easing], [fn])
参数:
- params:想要更改的样式属性,以对象形式传递,必须写。属性名可以不用带引号,如果是复合属性则需要采取驼峰命名法borderleft.其余参数都可以省略。
- speed:三种预定速度之一的字符串( "slow" ,"normal" , or "fast" )或表示动画时长的毫秒数值(如: 1000)。
- easing : (Optional)用来指定切换效果,默认是“swing”, 可用参数 "linear" 。
- fn:回调函数,在动画完成时执行的函数,每个元素执行一次。
<script> $(function() { $(”button").click(function() { $("div" ). animate({ left: 500, top:100 }, 500); }) }) </script>
6. jQuery 属性操作
6.1 设置或获取元素固有属性值 prop()
6.1.1 获取属性语法
prop("属性名")
6.1.2 设置属性语法
prop("属性名","属性值")
6.2 设置或获取元素自定义属性值 attr()
1.获取属性语法
attr("属性") // 类似原生getAttribute()
2.设置属性语法
attr("属性","属性值"”) // 类似原生setAttribute()
6.3 数据缓存data()
data0方法可以在指定的元素上存取数据,并不会修改DOM元素结构。一旦页面刷新,之前存放的数据都将被移除。
$("span").data("uname",” andy");
console.1og($(" span") .data("uname" ));
1.附加数据语法
data("name","value") // 向被选元素附加数据
2.获取数据语法
date("name") //向被选元素获取数据
同时,还可以读取HTML5自定义属性data-index ,写法【data("index"),省略了data- 】.得到的是数字型
7. jQuery 内容文本值
7.1 普通元素内容html()(相当于原生js中的innerHTML)
html()//获取元素的内容
html("内容")//设置元素的内容
7.2 普通元素文本内容text()(相当于原生js中的innerText)
text()//获取元素的内容
text("内容")//设置元素的内容
7.3 表单的值val()(相当于原生value)
val()//获取元素的内容
val("内容")//设置元素的内容
8. 元素操作
主要是遍历、创建、添加、删除元素操作
8.1 遍历操作
语法1
$("div") .each (function (index, domEle) { xxx; } )
- .each()方法遍历匹配的每一个元素。主要用DOM处理。each每 一个
- 里面的回调函数有2个参数: index 是每个元素的索引号; domEle是每个DOM元素对象,不是jquery对象
语法2:
$.each (object,function (index,element) {xxx;})
- $.each()方法可用于遍历任何对象。主要用于数据处理,比如数组,对象
- 里面的函数有2个参数: index 是每个元素的索引号; element 遍历内容
$.each({ name: " andy" , age: 18 }, function(i, ele) { console.1og(i); //输出的是name age属性名 console.1og(ele); //输出的是andy 18 属性值 })
8.2 创建元素
语法:
$("<li></li>"); //动态的创建了一个<li>
8.3 添加元素
8.3.1 内部添加
$("ul").append("<li></li>"); //添加到元素的后面,类似于appendChild
$("ul").prepend("<li></li>"); //添加到元素的最前面
8.3.2 外部添加
element.after("内容"); //加到后面
element.before("内容"); //加到前面
内部添加的元素是父子关系
外部添加的元素是兄弟关系
8.4 删除元素
element.remove() //删除匹配的元素(本身)
element.empty() // 删除匹配的元素集合中所有的子节点
element.html("") //清空匹配的元素内容子节点
9. jQuery 尺寸、位置操作
9.1 jQuery 尺寸
语法 | 用法 |
---|---|
width()/ height() | 取得匹配元素宽度和高度值 只算width / height |
innerWidth()/innerHeight() | 取得匹配元素宽度和高度值 包含padding |
outerWidth()/outerHeight() | 取得匹配元素宽度和高度值 包含padding、border |
outerWidth(true)/outerHeig(true) | 取得匹配元素宽度和高度值 包含padding、border. margin |
- 以上参数为空,则是获取相应值,返回的是数字型。
- 如果参数为数字,则是修改相应值。
- 参数可以不必写单位。
9.2 jQuery 位置
位置主要有三个: offset()、 position()、 scrollTop()/scrollLeft()
9.2.1 offset()设置或获取元素偏移
- offset0 方法设置或返回被选元素相对于文档的偏移坐标,跟父级没有关系。
- 该方法有2个属性left、top. offset().top 用于获取距离文档顶部的距离, offset().left用于获取距离文档左侧的距离。
- 可以设置元素的偏移: offset({ top: 10, left: 30 });
9.2.2 position()获取元素偏移
- position()方法用于返回被选元素相对于带有定位的父级偏移坐标,如果父级都没有定位,则以文档为准。
- 这个方法只能获取不能设置
9.2.3 scrollTop()/scrollLeft()设置或获取元素被卷去的头部和左侧
- scrollTop()方法设置或返回被选元素被卷去的头部。
- 返回顶部
$(".back").click(function() { // $(document) . scro11Top(0); $("body, html").stop().animate({ scrol1Top: 0 }); })