目录
1.普通元素内容html()(相对于原生innerHTML)
2.普通元素文本内容text()(相当于原生innerText)
一、jQuery的入口函数
1.jQuery对象和DOM对象
$(function () {
…
})
(1)$是jQuery的别称,在代码中可以使用jQuery代替$,但一般为了方便,通常都直接使用$.
(2)$是jQuery的顶级对象,相当于原生JavaScript中的window。把元素利用$包装成jQuery对象,就可以调用jQuery的方法。
(3)用原生JS获取来的对象就是DOM对象,jQuery方法获取来的对象就是jQuery对象。
(4)jQuery对象本质是:利用$对DOM对象包装后产生的对象(伪数组形式储存)。
(5)DOM对象和jQuery对象的转换
①DOM对象转换为jQuery对象:$(DOM对象)
②jQuery对象转换为DOM对象
•$(”div”) [index] index是索引号
•$(“div”).get(index) index是索引号
<script>
// DOM对象
var myDiv = document.querySelector('div');
console.dir(myDiv);
// jQuery对象
$("div").css("background", "pink");
</script>
二、jQuery选择器
1.基础选择器
$(“选择器”)
名称 | 用法 | 描述 |
ID选择器 | $(“#id”) | 获取指定ID的元素 |
全选选择器 | $(“*”) | 匹配所有元素 |
类选择器 | $(“.class”) | 获取同一类class的元素 |
标签选择器 | $(“div”) | 获取同一类标签的所有元素 |
并集选择器 | $(“div, p, li”) | 选取多个元素 |
交集选择器 | $(“li.current”) | 交集元素 |
2.层级选择器
名称 | 用法 | 描述 |
子代选择器 | $(“ul>li”); | 使用>号,获取亲儿子层级的元素;注意,并不会获取孙子层级的元素 |
后代选择器 | $(“ul li”); | 使用空格,代表后代选择器,获取ul下的所有li元素,包括孙子等 |
3.隐式迭代
给匹配到的所有元素进行循环遍历,执行相应的方法,不用我们再去循环,遍历内部DOM元素(伪数组形式存储)的过程就叫做隐式迭代
4.jQuery筛选选择器
语法 | 用法 | 描述 |
: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元素中,选择索引号为偶数的元素 |
5.jQuery筛选方法
语法 | 用法 | 说明 |
parent() | $(“li”).parent(); | 查找父级 |
children() | $(“ul”).children(“li”) | 相当于$(“ul>li”),最近一级(亲儿子) |
find(selector) | $(“ul”).find(“li”); | 相当于$(“ul li”),后代选择器 |
siblings(selector) | $(“.first”).siblings(“li”) | 查找兄弟节点,不包括自己本身 |
nextAll([expr]) | $(“.first”).nextAll() | 查找当前元素之后所有的同辈元素 |
prevtAll([expr]) | $(“.last”).prevAll() | 查找当前元素之前所有的同辈元素 |
hasClass(class) | $(“div”).hasClass(“protected”) | 检查当前的元素是否含有某个特定的类。如果有,则返回true |
eq(index) | $(“li”).eq(2); | 相当于$(“li:eq(2)”),index从0开始 |
三、jQuery样式操作
1.操作css方法
(1)参数只写属性名,则是返回属性值
$(this).css(“color”);
(2)参数是属性名,属性值,逗号分隔,是设置一组样式,属性必须加引号,值如果是数字可以不用跟单位的引号
$(this).css(“colcor”, “red”);
(3)参数可以是对象形式,方便设置多组样式,属性名和属性值用冒号隔开,属性可以不用加引号。
$(this).css({“color”:”while”,”font-size”:”20px”});
2.设置类样式方法
(1)添加类
$(“div”).addClass(“current”);
(2)移除类
$(“div”).removeClass(“current”);
(3)切换类
$(“div”).toggleClass(“current”);
四、jQuery效果
1.显示隐藏效果
(1)隐藏语法
hide([speed, [easing], [fn]])
(2)切换语法
toggle([speed, [easing], [fn]])
2.滑动效果
(1)下滑效果语法
slideDown([speed, [easing], [fn]])
(2)上滑效果语法
slideUp([speed, [easing], [fn]])
(3)滑动切换效果语法
slideToggle([speed, [easing], [fn]])
3.隐藏参数
(1)参数可以省略,无动画直接显示。
(2)speed:三种预定速度之一的字符串(“slow”,“normal”,or “fast”)或表示动画市场的毫秒数值(如:1000)。
(3)easing:(Optional)用来指定切换效果,默认是“swing”,可用参数“linear”。
(4)fn:回调函数,在动画完成时执行的函数,每个元素执行一次。
4.事件切换
hover([over,]out)
(1)over:鼠标移到元素上要触发的函数(相当于mouseenter)
(2)out:鼠标移出元素要触发的函数(相当于mouseleave)
5.动画停止排队
stop()
(1)stop()方法用于停止动画或效果
(2)注意:stop()写到动画或者效果的前面,相当于停止结束上一次的动画
6.淡入淡出效果
(1)淡入效果语法
fadeIn([speed, [easing], [fn]])
(2)淡入效果参数
①参数都可以省略
②speed:三种预定速度之一的字符串(“slow”,“normal”,or “fast”)或表示动画市场的毫秒数值(如:1000)。
(3)渐进方式调整到指定的不透明度
fadeTo([speed,opacity, [easing], [fn]])
①opacity透明度必须写,取值0~1之间。
②speed:三种预定速度之一的字符串(“slow”,“normal”,or “fast”)或表示动画市场的毫秒数值(如:1000)。
③easing:(Optional)用来指定切换效果,默认是“swing”,可用参数“linear”。
④fn:回调函数,在动画完成时执行的函数,每个元素执行一次。
<script>
$(function () {
$("button").click(function () {
$("div").animate({
left: 500,
top: 300,
opacity: .4/*透明度*/
}, 500/*速度*/);
})
})
</script>
7.自定义动画animate
animate(params,[speed],[easing],[fn])
(1)params:想要更改的样式属性,以对象形式传递,必须写。属性名可以不用带引号,如果是复合属性则需要采取驼峰命名法borderLeft。其余参数都可以省略。
(2)speed:三种预定速度之一的字符串(“slow”,“normal”,or “fast”)或表示动画市场的毫秒数值(如:1000)。
(3)easing:(Optional)用来指定切换效果,默认是“swing”,可用参数“linear”。
(4)fn:回调函数,在动画完成时执行的函数,每个元素执行一次。
五、jQuery属性操作
1.设置或获取元素固有属性值prop()
(1)获取属性语法
prop(“属性”)
(2)设置属性语法
prop(“属性”,“属性值”)
2.设置或获取元素自定义属性值attr()
(1)获取属性语法
attr(“属性”)
(2)设置属性语法
attr(“属性”,“属性值”)
六、jQuery内容文本值
1.普通元素内容html()(相对于原生innerHTML)
html() //获取元素的内容
html(“内容”) //设置元素的内容
2.普通元素文本内容text()(相当于原生innerText)
text() //获取元素的文本内容
text(“文本内容”) //设置元素的文本内容
七、jQuery元素操作
1.遍历元素
(1)为什么要用到遍历
jQuery隐式迭代是对同一类元素做了同样的操作,如果想要给同一类元素做不同操作,就要用到遍历。
(2)语法
$(“div”).each(function (index, domEle) { xxx; })
$.each(object, function (index, element) { xxx; })
①each()方法遍历匹配的每一个怨怒是。主要用DOM处理,each每一个
②里面的回调函数有2个参数:index是每个元素的索引号;demEle是每个DOM元素对象,不是jQuery对象
③所以想要使用jQuery方法,需要给这个dom元素转换为jQuery对象$(domEle)
④$.each()方法可用于遍历任何对象。主要用于数据处理,比如数组,对象
⑤里面的函数有2个参数:index是每个元素的索引号;element遍历内容
2.添加元素
(1)内部添加
①语法
//把内容放入匹配元素内部最后面,类似原生appendChild
element.append(“内容”)
②语法
//把内容放入匹配元素内部前面
element.prepend(“内容”)
(2)外部添加
①语法
//把内容放入匹配元素内部后面
element.after(“内容”)
②语法
//把内容放入匹配元素内部前面
element.before(“内容”)
3.删除元素
(1)语法
//删除匹配的元素(本身)
element.remove()
//删除匹配的元素集合中所有的子节点
element.empty()
//清空匹配的元素内容
element.html(“”)
4.存储元素
(1)本地存储
本地存储localStorage里面只能存储字符串格式,因此需要把对象转换为字符串JSON.stringify(data)
(2)读取本地存储
获取本地存储数据,需要把里面的字符串转换为对象格式JSON.parse()我们才能使用里面的数据
八、jQuery尺寸、位置操作
1.jQuery尺寸
语法 | 用法 |
width()/height() | 取得匹配元素宽度和高度值 只算width/height |
innerWidth()/innerHeight() | 取得匹配元素宽度和高度值 包含padding |
outerWidth()/outerHeight() | 取得匹配元素宽度和高度值 包含padding、border |
outerWidth(true)/outerHeight(true) | 取得匹配元素宽度和高度值 包含padding、borde、margin |
①以上参数为空,则是获取相应值,返回的是数字型
②如果参数为数字,则是修改相应值
③参数可以不必写单位
2.jQuery位置
主要位置:offset()、position()、scrollTop()/scrollLeft()
(1)offset()设置或获取元素偏移
①offset()方法设置或返回被选元素相对于文档的偏移坐标,跟父级没有关系
②该方法有2个属性left、top。offset().top用于获取距离文档顶部的距离,offset().left用于获取距离文档左侧的距离。
③可以设置元素的偏移:offset({top: 10, left: 30});
3.jQuery事件处理
(1)事件处理on()绑定事件
on()方法在匹配元素上绑定一个或多个事件的事件处理函数
①语法
element.on(event, [selector], fn)
•events:一个或多个用空格分隔的事件类型,如“click”或“keydown”
•selector:元素的子元素选择器
②优势
可以帮到多个事件,多个处理事件处理程序
$("div").on({
click: function () {
console.log("我点击了");
},
mouseover: function () {
console.log("我经过了");
}
});
事件处理程序相同
$("ul").on("click", "a", function () {
$(this).parent().slideUp(function () {
$(this).remove();
});
})
(2)事件处理off()解绑事件
off()方法可以移除通过on()方法添加的事件处理程序
①语法
$(“p”).off() //解绑p元素所有事件处理程序
$(“p”).off(“click”) //解绑p元素上的点击事件
$(“ul”).off(“click”, “li”) //解绑事件委托
$("div").off();
// 如果只想解除一个就在off的括号里面添加off("click")
/*如果有的事件只想触发一次,可以使用one()来绑定事件*/
(3)自动触发事件trigger()
利用定时器自动触发右侧按钮点击事件,不必鼠标点击触发
①语法
element.click() //元素.事件 第一种简写形式 会触发元素的默认行为
element.trigger(“type”) //第二种自动触发模式 会触发元素的默认行为
$(“p”).on(“click”, function() {
alert(“hi~”);
});
//此时自动触发点击事件,不需要鼠标点击 不会触发元素的默认行为
$(“p”).trigger(“click”);
element.triggerHandler(type) //第三种自动触发模式
4.jQuery事件对象
事件被触发,就会有事件对象的产生
(1)事件对象
①语法
element.on(events, [selector], function(event) { })
阻止默认行为:event.preventDefault() 或者 return false
阻止冒泡:event.stopPropagation()
(2)jQuery对象拷贝
如果想要把某个对象拷贝(合并)给另外一个对象使用,此时可以使用$.extend()方法
①语法
$.extend([deep], target, object1, [objectN])
•deep:如果设为true为深拷贝,默认为false浅拷贝
•target:要拷贝的目标对象
•object1:待拷贝到第一个对象的对象
•objectN:待拷贝到第N个对象的对象
•浅拷贝是把被拷贝的对象复杂数据类型中的地址拷贝给目标对象,修改目标对象会 影响被拷贝对象
•深拷贝,前面加true,完全克隆(拷贝的对象,而不是地址),修改目标对象不会 影响被拷贝对象
(3)jQuery多库共存
①概念
解决其他js库中同样使用$作为标识符产生的冲突,这就叫做多库共存。
②解决方案
•把里面的$符号统一改为jQuery。比如jQuery(“div”)
•jQuery变量规定新的名称:$.noConflict() var xx = $.noConflict();
九、数据可视化
1.常见数据可视化库
(1)ECharts.js 百度出品的一个开源Javascript数据可视化库
https://echarts.apache.org/handbook/zh/get-started/
(2)Highcharts.js 国外的前端数据可视化库,非商用免费
2.边框图片
(1)语法
属性 | 描述 |
border-image-source | 用在边框的图片的路径 |
border-image-slice | 图片边框向内偏移(裁剪的尺寸,一定不加单位,顺序为上右下左(顺时针)) |
border-image-width | 图片边框的宽度(需要加单位)(不是边框的宽度是边框图片的宽度) |
border-image-repeat | 图片边框是否应平铺(repeat)、铺满(round)或拉伸(stretch),默认拉伸 |
<style>
div {
height: 500px;
width: 500px;
border: 65px solid azure;
border-image-source: url(images/border.png);
border-image-slice: 62 50 54 52;
border-image-width: 65px;
}
</style>
(2)切割边框图片
把边框图片的边框四角切下来(上右下左),中间部分可以铺排、拉伸或者环绕,要保 证边框图片的完整性