jQuery
- JavaScrilpt库：是一个封装好的，有特定函数和方法的集合，是个js文件。是对原生JS的封装，内部都是用JS实现的。
- jQuery：是一个快速简洁的JavaScrilpt库主要用来操作DOM元素
- jquery.min.js：里面的.min是压缩后的意思
- 官网：https://jquery.com/
入口函数
- $(document).ready(function(){}) // DOM加载完毕就执行，不用等所有外部资源加载完成
- $(function(){}) // DOM加载完毕就执行，不用等所有外部资源加载完成，相当于js中的DOMContentLoaded
<head>
<!--1.引入jQuery库-->
<script src = "jquery.min.js"></script>
</head>
<body>
<script>
//2.使用jQuery
//第一种方法.等页面DOM加载完毕再执行JS代码
$(document).ready(function(){
console.log("666")
})
//第二种方法.等页面DOM加载完毕再执行JS代码
$(function(){
console.log("666")
})
</script>
</body>
顶级对象$
- $ 是jQuery的别称，用jQuery或者$都行
- $ 是jQuery的顶级对象，相当于js中的window
$(function(){console.log("666")})
jQuery(function(){console.log("666")})
- 用原生js获取来的，就是DOM对象。DOM对象只能使用原生的属性和方法
- 用jQuery获取来的对象，就是jQuery对象，利用$对DOM就行了包装，以伪数组形式存储。jQuery对象只能使用jQuery方法
var div = document.querySelector('div') //DOM对象
$("div") // jQuery对象，推荐用双引号
对象转换
- $(DOM对象)：将DOM对象转换成jQuery对象
- $(‘div’)[index]：index是索引号或者 $(‘div’).get(index)，将jQuery对象转换成DOM对象
var domDiv = document.querySelector('div') //DOM对象
$(domDiv) // 将DOM对象转换成jQuery对象
var jQueryDiv = $('div')[0] // 将jQuery对象转换成DOM对象
jQuery选择器
- $(“选择器”)：获取元素，直接写css选择器即可，但是要有引号
基础选择器
层级选择器
筛选选择器
:checked选择器
- :checked选择器，查找被选中的表单元素
<input type = "checkbox" class = "j-checkbox" checked>1</input>
<input type = "checkbox" class = "j-checkbox" checked>2</input>
<input type = "checkbox" class = "j-checkbox" checked>3</input>
<script>
console.log($(".j-checkbox:checked").length)//输出被选中的复选框的个数
console.log($(".j-checkbox").length) //输出3，复选框的个数
</script>
筛选方法
- parents(‘选择器’)：可以返回指定的祖先元素
<div class = "one">
<div class = "two">
<div class = "three">
<span class = "spn"></span>
</div>
</div>
</div>
<script>
console.log($(".spn").parent().parent().parent()) //输出的是<div class = "one">
console.log($(".spn").parents()) //输出所有的父级
//输出指定的父级
console.log($(".spn").parents(".one")) //也可以输出<div class = "one">
</script>
$('div).mouseover(function(){
$(this).children("div").show() //this指的是jQuery中的当前元素，不加引号。show()显示元素
$(this).children("div").hide() //hide()隐藏元素
})
隐式迭代
- 隐式迭代：就是遍历jQuery对象的内部DOM元素（伪数组形式存储）的过程。
<div>1</div>
<div>2</div>
<div>3</div>
<script>
//设置3个div的背景是粉色，会隐式迭代，即匹配的所有元素内部进行遍历循环，给每个元素添加css
$('div').css("background","pink")
</script>
排他思想
<div>1</div>
<div>2</div>
<div>3</div>
<script>
//设置3个div的背景是粉色，会隐式迭代，即匹配的所有元素内部进行遍历循环，给每个元素添加css
$('div').click(function(){
// 得到当前元素的索引号index()，不需要先添加索引index
$(this).index()
// 当前元素添加背景颜色
$(this).css("background","pink")
// 其他元素去掉背景颜色
$(this).siblings("div").css("background","")
})
</script>
jQuery链式编程
<div>1</div>
<div>2</div>
<div>3</div>
<script>
$('div').click(function(){
// 当前元素添加背景颜色，兄弟节点去掉背景颜色。链式编程
$(this).css("background","pink").siblings("div").css("background","")
})
</script>
jQuery设置样式
操作css方式
- $(“选择器”).css(‘属性’,‘值’)：设置样式，值如果是数字可以不用加单位和引号
- $(“选择器”).css(‘属性’) ：参数只写属性名，则返回属性的值。
- $(“选择器”).css(对象) ：设置多个样式
设置类样式方式
- 添加类：$(‘选择器’).addClass(‘类样式’) 类样式不需要加点，添加类样式，类似原生的classList追加类名。
- 删除类：$(‘选择器’).removeClass(‘类样式’)
- 切换类：$(‘选择器’).toggleClass(‘类样式’)
<style>
.curr{backgournd-color: pink}
</style>
<div>1</div>
<script>
$('div').click(function(){
// 当前元素添加背景颜色
$(this).css("background","pink")
// 得到当前元素的背景颜色
console.log($(this).css("background"))
// 当前元素添加多个样式，属性值200是数字可以不加引号，属性名采用驼峰命名法
console.log($(this).css({backgroundColor: 'pink',width: 200})
// 添加类
$(this).addClass(curr)
// 删除类
$(this).removeClass(curr)
// 切换类
$(this).toggleClass(curr)
})
</script>
jQuery动画效果
显示和隐藏动画
- show([speed],[easing],[fn]) 显示。speed速度例如"slow"，"normal"或毫秒数1000。easing指定切换效果，默认swing。fn回调函数
- hide([speed],[easing],[fn]) 隐藏
- toggle([speed],[easing],[fn]) 切换
滑动动画
- slideDown([speed],[easing],[fn]) 下拉
- slideUp([speed],[easing],[fn]) 上拉
- slideToggle([speed],[easing],[fn]) 切换
淡入淡出动画
- fadeIn([speed],[easing],[fn]) 淡入
- fadeOut([speed],[easing],[fn]) 淡出
- fadeToggle([speed],[easing],[fn]) 切换
- fadeTo([speed],opacity,[easing],[fn]) 修改透明度。opacity透明度，取值0~1之间
自定义动画
- animate(params,[speed],[easing],[fn]) params想要更改的样式属性，以对象形式
//stop()停止上一次动画
$('div').animate({left: 200,top: 300},500)
停止动画排队
上面的这些动画，当快速多次触发时，会排队执行。
stop()：停止动画。stop写到动画或效果前面，就相当于停止上一次动画
//stop()停止上一次动画
$('div').hover(function(){
$(this).stop().slideToggle(200)
})
事件切换
- hover([over],out) ：over鼠标移动到元素上就触发函数相当于(mouseenter)，out鼠标移出元素就触发函数相当于(mouseleave)
//鼠标经过
$('div').mouseenter(function(){
$(this).slideDown(200)
})
//鼠标离开
$('div').mouseleave(function(){
$(this).slideUp(200)
})
// hover是鼠标经过和鼠标离开的复合写法
$('div').hover(function(){
//鼠标经过
$(this).slideDown(200)
},function(){
//鼠标离开
$(this).slideUp(200)
})
// hover只写一个参数，那么鼠标经过和鼠标离开都调用这个函数
$('div').hover(function(){
$(this).slideToggle(200)
})
jQuery属性操作
获取固有属性值
- prop(“属性”)：获取元素固有属性，即元素自带的属性，如<a>自带的href
设置固有属性值
- prop(“属性”,“属性值”)：设置元素固有属性
<a href="http://www.baidu.com"></a>
<script>
console.log($("a").prop("href")) //输出http://www.baidu.com
</script>
获取自定义属性值
- attr(“属性”)：获取元素自定义属性。类似原生getAttribute()
设置自定义属性值
- attr(“属性”,“属性值”)：设置元素自定义属性。类似原生setAttribute()
<a index = "1" data-index = "2"></a>
<script>
console.log($("a").prop("index")) //输出1
console.log($("a").prop("data-index")) //输出2 H5新增属性也能获取到
</script>
数据缓存data()
- data()方法可以在指定的元素上获取数据，并不会修改DOM元素结构，一旦页面刷新，之前存放的数据都被移除
获取数据
- data(“属性”)：获取备选元素数据。
附加数据
- data(“属性”,“属性值”)：向备选元素附加数据。
<a data-index1 = "2"></a>
<script>
$("a").data("uname","zhangsan") // 把元素当成一个变量看，<a>中是看不到该属性的，存储在缓存中
console.log($("a").data("index1")) //输出2 H5新增属性也能获取到
</script>
jQuery内容文本值
- html()：获取元素内容，相当于原生innerHTML
- html(“内容”)：设置元素内容
<div>
<span>111</span>
</div>
<script>
console.log($('div').html())//输出div中的内容，<span>111</span>，标签也会输出
</script>
- text()：获取元素文本内容，相当于原生innerText
- text(“内容”)：设置元素文本内容
<div>
<span>111</span>
</div>
<script>
console.log($('div').text())//输出div中的内容，111，标签不会输出，只输出文字
</script>
- val()：获取表单值，等价于原生的value
- val"内容")：设置表单值
<input type = "text" value ="123">
<script>
console.log($('input').val())//输出表单中的内容，123
</script>
jQuery元素操作
遍历元素
- 隐式迭代：对同一类元素做了同样的操作。
- jQueryElement.each() ：遍历每一个元素，对同一类元素做不同的操作。主要用于DOM处理
- $(‘div’).each(function(index,domElement){xxx})
// each里参数是回调函数
// function第一个参数index：索引号，demEle：每个DOM对象，不是jQuery对象
$('div').each(function(index,domElement){
$(domElement).css("color","blue") //将dom对象转换成jQuery对象
})
- $.each() ：遍历每一个元素，可以遍历任何对象，主要用于数据处理，比如数组，对象
- $.each(object, function(index,element){xxx})
// each的第一个参数：要遍历的对象，第二个参数回调函数
// 第一个参数index：索引号。element：每个DOM对象，不是jQuery对象
$.each($('div'), function(index,element){
$(element).css("color","blue") //将dom对象转换成jQuery对象
})
// 遍历数组
var arr = ["red","green","blue"]
$.each(arr , function(index,element){
console.log(element) //循环输出red green blue
})
//遍历对象
$.each({name: "zhangsan",age: 16} , function(index,element){
console.log(index) //输出对象的属性名 name age
console.log(element) //输出对象的属性值 zhangsan 16
})
创建元素
- $(“<li></li>”) 动态创建元素
添加元素
内部添加：元素是父子关系
- append() 类似原生appendChild，放到内容最后面
- prepend() 放到内容最前面
外部添加：元素是兄弟关系
- after() 把内容放入目标元素后面
- before() 把内容放入目录元素前面
删除元素
- remove() 删除匹配的元素，自身
- empty() 删除匹配元素的子节点，即孩子节点
- html(“”) 清空匹配元素的内容，即孩子节点
<ul>
<li></li>
</ul>
<script>
// 创建元素
var li =$("<li>111</li>")
// 添加元素
$("ul").append(li)
// 删除元素
$("ul").remove()
</script>
jQuery尺寸，位置操作
元素尺寸
元素位置
- offset() 相对于文档的偏移 ，可以获取也可以设置偏移offset({top:200})
- position() 带有定位的父级的偏移，只能获取，不能设置偏移
- scrollTop/scrollLeft() 获取或设置元素被卷去的顶部和左侧的位置
//页面动画滚动效果
$("body,html").animate({
scrollTop: 200
})
jQuery事件注册
单个事件注册
- element.事件(function(){})
$('div').click(function(){})
jQuery事件处理
- element.on(events,[selector],function(){})：on()方法在匹配的元素上绑定一个或多个事件处理函数，selector是元素的子元素选择器
- element.one(events,[selector],function(){}) ：one()绑定的事件只会触发一次
// 1.绑定多个事件处理函数
$('div').on({
mouseenter: function(){console.log(111)},
click: function(){console.log(222)}
})
//或者绑定多个事件处理函数
$('div').on("mouseenter click",function(){console.log(111)})
//2.事件委托，给ul绑定了事件，但触发对象是li
$('ul').on("click","li",function(){})
//3.动态创建的元素，click()等等是没有办法绑定事件的，on()可以给动态生成的元素绑定事件
$('ol').on("click","li",function(){})
var li = $("<li>111</li>") //动态创建的li
$("ol".append(li))
jQuery事件解绑
- off()：可以移除通过on()方法添加的事件处理程序
// 解除div绑定的所有事件
$('div').off()
// 解除div绑定的点击事件
$('div').off("click")
// 解除div绑定的事件委托
$('ul').off("click","li")
jQuery自动触发事件
- element.trigger(“type”)：type是要触发的事件
- element.事件()
- element.triggerHandler(“type”) ：type是要触发的事件
// 1.元素.事件()
$('div').click()
// 2.元素.trigger("事件")
$('div').trigger("click")
// 3.元素.trigger("事件") ，不会触发元素的默认行为
$('div').triggerHandler("click")
jQuery事件对象
- element.on(events,[selector],function(event){}) event是事件对象
$('div').on('click',function(event){
event.preventDefault() // 阻止默认行为 或return false
event.stopPropagation() //阻止冒泡
})
jQuery拷贝对象
- $.extend([deep],target,object1,[objectN]) deep默认为false浅拷贝，target目标，object1待拷贝到target的对象
var targetObj = {}
var obj = {id: 1}
//将obj拷贝给targetObj
$.extend(targeObj,obj)
var targetObj = {id: 0}
var obj = {id: 1}
//将obj拷贝给targetObj，并且覆盖了，targetObj原有的内容。targeObj最后是{id: 1}
$.extend(targeObj,obj)
//浅拷贝会把对象的复杂数据类型中的地址拷贝给目标对象，修改目标对象会影响被拷贝的对象,
var targetObj = {id: 0}
var obj = {id: 1,msg{name:"zhangsan"}}
$.extend(targeObj,obj) //只把obj中的msg的地址拷贝给了targetObj
targetObj.msg.name="111"
console.log(obj.msg.name) //输出的也是111
// 深拷贝，完全克隆(拷贝的是对象，不是地址),修改目标对象并不会影响被拷贝的对象，如果里面有不冲突的属性，会合并到一起。
var targetObj = {id: 0}
var obj = {id: 1,msg{name:"zhangsan"}}
$.extend(true，targeObj,obj)
targetObj.msg.name="111"
console.log(obj.msg.name) //输出的也是zhangsan
多库共存
- 问题：jQuery用$作为标示符，其他js库也可能用$作为表示符，就会有冲突
- 解决：将$改成jQuery，即jQuery(“div”)，或者var xxx = $.noConflict()
// 让jQuery释放对$的控制权
var hello = $.noConflict()
// hello就可以替代原来的$或jQuery
hello("div").click(function())
jQuery插件
- jQuery插件插件网站 https://www.jq22.com/
- 图片懒加载：EasyLazyload.js
- 全屏滚动：fullpage.js
- bootstrap框架也是依赖jquery开发的，https://www.bootcss.com/
//将对象转换为字符串
var na = Json.stringify({name: "zhangsan"})
//将字符串转换为对象
Json.parse(na)
数据可视化ECharts
<head>
<style>
.box{
width: 400px;
height: 400px;
background-color: pink;
}
</style>
<!-- 1.引入echarts.js文件 -->
<script src = "echarts.min.js"> </script>
</head>
<body>
<!-- 2.准备一个具备大小的DOM容器 -->
<div class ="box"></div>
<script>
// 3.初始化echarts实例对象
var myChart = echarts.init(document.querySelector('.box'))
// 4.指定图表的配置项和数据
var option = {
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
legend: {
data: ['销量']
},
xAxis: {
data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
},
yAxis: {},
series: [
{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}
]
};
// 5.将配置项设置给echarts实例对象
myChart.setOption(option);
</script>
</body>
- flexible.js：检测浏览器宽度，修改html文字大小
- rem单位：页面元素根据rem适配大小，配合cssrem插件
- flex布局：页面快速布局
扫一扫
439
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
