前端--jQuery
前端——jQuery
k8s
- jQuery是一个轻量级的，兼容多浏览器的JavaScript库。
- jQuery使用户能够更方便的处理HTML Document、Events、实现动画效果、方便地进行Ajax交互，能够极大地简化JavaScript编程。
优势
- 一款轻量级的JS框架。jQuery核心js文件才几十kb，不会影响页面加载速度。
- 丰富的DOM选择器。jQuery的选择器用起来很方便，比如要找到某个DOM对象的相邻元素，JS可能要写好几行代码，而jQuery一行代码就搞定了，再比如要将一个表格的隔行变色，jQuery也是一行代码搞定。
- 链式表达式。jQuery的链式操作可以把多个操作写在一行代码里，更加简洁。
- 事件、样式、动画支持。jQuery还简化了js操作css的代码，并且代码的可读性也比js要强。
- Ajax操作支持。jQuery简化了AJAX操作，后端只需返回一个JSON格式的字符串就能完成与前端的通信。
- 跨浏览器兼容。jQuery基本兼容了现在主流的浏览器，不用再为浏览器的兼容问题而伤透脑筋。
- 插件扩展开发。jQuery有着丰富的第三方的插件，例如：树形菜单、日期控件、图片切换插件、弹出窗口等等基本前端页面上的组件都有对应插件，并且用jQuery插件做出来的效果很炫，并且可以根据自己需要去改写和封装插件，简单实用。
引入
1.下载到本地
jQuery官网：https://jquery.com/
中文文档：http://jquery.cuishifeng.cn/
<script src='jQuery路径.js'></script> <!--引入-->
<script>
//代码
</script>
2.使用网络地址
使用文件的网络地址，就像我们img标签里面的那个src的用法差不多。
引入完之后，就可以直接使用jQuery的语法来写了，但是还是要写在script标签里面，并且要注意引入顺序，先引入文件，再在script标签里面写jQuery的代码，先导入再使用。
jQuery版本
- 1.x：兼容IE678,使用最为广泛的，官方只做BUG维护，功能不再新增。因此一般项目来说，使用1.x版本就可以了，最终版本：1.12.4 (2016年5月20日)
- 2.x：不兼容IE678，很少有人使用，官方只做BUG维护，功能不再新增。如果不考虑兼容低版本的浏览器可以使用2.x，最终版本：2.2.4 (2016年5月20日)
- 3.x：不兼容IE678，只支持最新的浏览器。需要注意的是很多老的jQuery插件不支持3.x版。目前该版本是官方主要更新维护的版本，我们学习就用3.几的就行了，工作中如果需要兼容IE678，就用1.几版本的就行，2.几版本的就别用了。
维护IE678是一件让人头疼的事情，一般我们都会额外加载一个CSS和JS单独处理。值得庆幸的是使用这些浏览器的人也逐步减少，PC端用户已经逐步被移动端用户所取代，如果没有特殊要求的话，一般都会选择放弃对678的支持。
jQuery对象
jQuery对象就是通过jQuery包装DOM对象后产生的对象。jQuery对象是 jQuery独有的。如果一个对象是 jQuery对象，那么它就可以使用jQuery里提供的方法
var $variable = jQuery对像
var variable = DOM对象
$variable[0]//jQuery对象转成DOM对象，通过一个jQuery对象+[0]索引零，就变成了DOM对象，就可以使用JS的代码方法了，DOM对象转换成jQuery对象：$(DOM对象)，通过$符号包裹一下就可以了
jQuery基本语法
查找标签($)
-
基本选择器（同CSS）
- id选择器：$(“#id”)
- 标签选择器：$("标签名（tagname）")
- class选择器：$(".class")
- 所有元素选择器：$(" *")
- 配合使用：$("div.#id")
- 组合使用：$("#id,.class,tagname")
-
层级选择器（同CSS）
- 空格所有后代
-
所有下一级
- +同一级向后相邻的
- ~同一级向后所有的
//x,y为任意选择器
$("x y"); // x的所有后代y（子子孙孙）
$("x > y"); // x的所有儿子y（儿子）
$("x + y") // 找到所有紧挨在x后面的y
$("x ~ y") // x之后所有的兄弟y
-
基本筛选器（:）
选择之后进行过滤- :first第一个
- :last最后一个
- :eq(index)索引等于index的那个
- :even匹配所有索引值为偶数的元素，从0开始
- :odd匹配所有索引值为奇数的元素，从1开始
- :gt(index)匹配所有大于给定索引值得元素
- :lt(index)匹配所有小于给定索引值的元素
- :not(子标签选择器)移除所有满足not条件的标签
- :has(子标签选择器)选择所有满足has条件的标签
$("div:has(h1)")
// 找到所有后代中有h1标签的div标签，意思是首先找到所有div标签，把这些div标签的后代中有h1的div标签筛选出来
$("div:has(.c1)")
// 找到所有后代中有c1样式类（类属性class='c1'）的div标签
$("li:not(.c1)")
// 找到所有不包含c1样式类的li标签
$("li:not(:has(a))")
// 找到所有后代中不含a标签的li标签
-
属性(attribute)选择器[]
- [attribute]有这个属性名
- [attribute=value]属性等于
- [attribute!=value]属性不等于
-
表单筛选器
多用于找form表单里面出现的input标签- :text等于input:text
- :password
- :file
- :radio
- :checkbox
- :submit
- :reset
- :button
-
表单对象属性筛选
- :enabled选择可用的
- :disable选择不可用的
- :checked被选中的（checkbox和select标签都会被筛选，注意区分）
- :selected[selected]属性被选中的
筛选器方法
筛选器方法：通过选择器或者筛选器选择出来的对象来调用一个进一步过滤作用的方法，写在对象后面加括号，不再是写在选择器里面的了。
- 下一个元素
- .next()同级后一个
- .nextAll()同级向后所有
- .nextUntill(标签对象)同级向后直到找到(标签）就结束，且不包含
- 上一个元素
- .prev()同级前一个
- .prevAll()同级依次向前所有
- .prevUntil(标签对象)同级依次向前直到找到（标签）就结束，且不包含。
- 上一级元素
- .parent()上一级
- .parents()所有直系上级（祖辈元素）
- .parentsUntil(标签对象)依次所有上级，直到（标签）为止，且不包含。
- 下一级元素
- chiledren()下一级所有
- 同级元素
- .siblings()同级所有不包含自己
- 查找
搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。- .find("条件")
- 筛选
筛选出与指定表达式匹配的元素集合。这个方法用于缩小匹配的范围。用逗号分隔多个表达式。- .filter("条件")
- .first()
- .last()
- .not("")
- .has("")
- .eq()
隐藏菜单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>左侧菜单示例</title>
<style>
.left {
position: fixed;
left: 0;
top: 0;
width: 20%;
height: 100%;
background-color: rgb(47, 53, 61);
}
.right {
width: 80%;
height: 100%;
}
.menu {
color: white;
}
.title {
text-align: center;
padding: 10px 15px;
border-bottom: 1px solid #23282e;
}
.items {
background-color: #181c20;
}
.item {
padding: 5px 10px;
border-bottom: 1px solid #23282e;
}
.hide {
display: none;
}
</style>
</head>
<body>
<div class="left">
<div class="menu">
<div class="title">菜单一</div>
<div class="items">
<div class="item">111</div>
<div class="item">222</div>
<div class="item">333</div>
</div>
<div class="title">菜单二</div>
<div class="items hide">
<div class="item">111</div>
<div class="item">222</div>
<div class="item">333</div>
</div>
<div class="title">菜单三</div>
<div class="items hide">
<div class="item">111</div>
<div class="item">222</div>
<div class="item">333</div>
</div>
</div>
</div>
<div class="right"></div>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script>
$(".title").click(function (){ // jQuery绑定事件
// 隐藏所有class里有.items的标签
$(".items").addClass("hide"); //批量操作
$(this).next().removeClass("hide");
});
</script>
操作标签
样式操作
- 样式类（添加删除class的值来修改样式）
- addclass('classname')添加指定的class名
- removeClass('classname')移除指定的class名
- hasClass(classname)判断是否有指定class名
- toggleClass(classname)切换，如果有指定class名就移除，没有就添加。
- 直接修改CSS属性
- .css('属性','值')
- .css({'属性':'值','属性':'值'})
位置操作
- offset()获取、设置匹配元素在当前窗口的相对偏移
- position()获取匹配元素相对父元素的偏移
- $(window).scrollTop()获取、设置滚动条向下移动的距离
- $(window).scrollLeft()获取、设置滚动条向左移动的距离
.offset()方法允许我们检索一个元素相对于文档（document）的当前位置。和 .position()的差别在于：.position()获取相对于它最近的具有相对位置(position:relative或position:absolute)的父级元素的距离，如果找不到这样的元素，则返回相对于浏览器的距离。
尺寸
- 盒子模型content的大小，标签的高度和宽度
- height()
- width()
- 内容content的大小 + padding的大小
- innerHeight()
- innerWidth()
- 内容大小+padding大小+border的大小，不包括margin
- outerHeight()
- outerWidth()
文本操作
HTML代码
-
html()取得第一个匹配元素的HTML内容，包含标签内容
-
html(val)设置所有匹配元素的HTML内容，识别标签，能够表现出标签的效果
text文本值
-
text()取得所有匹配元素的内容，只有文本内容，没有标签
-
text(val)设置所有匹配元素的内容，不识别标签，将标签作为文本插入进去
值
val()取得第一个匹配元素的当前值
val(val)设置所有匹配元素的值
val([val1,val2])设置多选的checkbox，多选select的值
<input type='text'><!--value不是必须的-->
<input type='radio' name='n1' value='1'> <!--单选框value必须写-->
<!--$(':radio').val([1,])设置值，数字，字符串都可以-->
<!--$(':radio:checked').val()获取选中的单选值-->
<input type='checkbox' name='' value='1'>
<!--value必须给-->
<!--$(':checkbox').val([1,2])设置值，数字，字符串都可以-->
<!--$(':checkbox:checked').val()循环获取多个选中的值-->
<select name='' id=''>
<option value='1'>内容</option>
</select>
<!--标签对象.val()获取select标签的选中值,multiple（多选）返回数组-->
属性操作
自带属性或自定义属性
- attr(name) 返回属性值
- attribute(name,val)添加，设置属性
- attribute({k1:v1,k2:v2})设置多个属性
- removeAttr(name)删除属性名
用于checked，selected，disabled状态属性
-
prop()设置和查看状态属性
prop与attr的区别
- 对于标签上有的能看到的属性和自定义属性都用attr
- 对于返回布尔值的比如checkbox、radio和option的是否被选中或者设置其被选中与取消选中都用prop。
具有 true 和 false 两个属性的属性，如 checked, selected 或者 disabled 使用prop()，其他的使用 attr()
文档处理
标签内部追加标签
$(A).append(B)// 把B(可以使字符串形式的标签)追加到A中，父子
$(A).appendTo(B)// 把A追加到B中，父子
标签内部最前插入
$(A).prepend(B)// 把B前置到A，父子
$(A).prependTo(B)// 把A前置到B，父子
标签外部后面
$(A).after(B)// 把B放到A的后面，同级相邻
$(A).insertAfter(B)// 把A放到B的后面，同级相邻
标签外部前边
$(A).before(B)// 把B放到A的前面，同级相邻
$(A).insertBefore(B)// 把A放到B的前面，同级相邻
移除或清空元素
remove()// 从DOM中删除所有匹配的元素。且里面的元素全部删除
empty()// 删除匹配的元素集合中所有的子节点，包括文本被全部删除，但是匹配的元素还在
替换
A.replaceWith(B) 将A替换成B
A.replaceAll(B) 将B替换成A
克隆
clone() 复制标签所有内容，加true判断复制绑定事件
事件
常用事件
-
click点击事件
-
focus()获取光标
$("标签").focus(function(){})
$("标签").on('focus',function(){}) -
blur()失去光标
$('').blur(function(){})
$('').on('blur',function(){}) -
change()与内容改变input,select
$('').change(function(){}) -
鼠标指针事件
- mouseenter指针进入
- mouseleave指针离开
- mousemove当鼠标指针在指定的元素中移动时
- mouseout当鼠标指针从元素上移开时
- mouseover当鼠标指针位于元素(含子元素)上方时
- mouseup当在元素上放松鼠标按钮时
- mousedown当在元素上按下鼠标按键时
-
keydown和keyup键盘按键按下和抬起
keyCode键盘上的每个按键都对应一个keyCode
$('').keydown(function(){}) -
input实时监听事件
当在元素上放松鼠标按钮时
$("").on('input,function(){}')
事件绑定
$().on(events,[selector,],function(){})
events:事件
selector：选择器（可选的）
function：事件处理函数
事件移除
$().off(events,[,selector][,function(){}])
events:事件
selector：选择器（可选的）
function：事件处理函数
阻止后续事件运行
- return false;
常见阻止表单提交等，如果input标签里免得值为空就阻止它提交， - e.stopPropagation()
冒泡事件
冒泡的意思就是因为html可以嵌套，如果你给子标签绑定了点击事件（或者没有绑定点击事件，父级标签绑定了点击事件），那么你一点击子标签，不管子标签有没有绑定事件，都会触发父级标签的点击事件，如果有，会先触发子标签的点击事件，然后触发父级标签的点击事件，不管子标签有没有点击事件，都会一级一级的还往上找点击事件
return false；//这个也可以阻止
e.stopPropagation(); //e来自function(e/event)用事件对象的这个方法就能阻止冒泡 （Propagation：传递的意思）
事件委托
事件委托是通过事件冒泡的原理，利用父标签去捕获子标签的事件，将未来添加进来的某些子标签自动绑定上事件。
$("父级标签").on('事件','选择器',function(){})
IE浏览器
$("table").on("click", ".delete", function () {
//console.log(this)；this还是触发事件的那个子标签
// 删除按钮绑定的事件
})
页面载入
当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。这是事件模块中最重要的一个函数，因为它可以极大地提高web应用程序的响应速度。
<script>
//方法一：
$("doucument").ready(function(){/*代码*/})
//方法二(简写)：
$(function(){/*代码*/})
</script>
与window.onliad的区别
- window.onload()函数有覆盖现象，必须等待着图片资源加载完成之后才能调用
- jQuery这个入口函数没有函数覆盖现象，文档加载完成之后就可以调用（建议使用此函数）
动画效果
// 基本
show([s,[e],[fn]]) $('.c1').show() //show(5000),就是5秒之后显示出来这个标签，并且有一个动画效果，（搞个img图片看看效果），后面两个参数先不用管
hide([s,[e],[fn]]) $('.c1').hide()
toggle([s],[e],[fn])//toggle的意思就是你原来是什么效果，我就反着来
// 滑动（拉窗帘一样）
slideDown([s],[e],[fn])
//使用的时候别忘了给标签设置一个高度和宽度，其实就是控制你的标签高度，如果你写$('#di').slideUp(5000)；意思就是5秒内把你的高度变为0
//还有如果你直接操作的是img标签和操作img标签的父级标签，两个的效果是不同的
slideUp([s,[e],[fn]])
slideToggle([s],[e],[fn])
// 淡入淡出（控制透明度）
fadeIn([s],[e],[fn])
fadeOut([s],[e],[fn])
fadeTo([[s],o,[e],[fn]]) o参数是透明度，0-1的区间，意思是淡入或者淡出到一个多大的透明读
fadeToggle([s,[e],[fn]])
// 自定义（了解即可）
animate(p,[s],[e],[fn])
animate
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>点赞动画示例</title>
<style>
div {
position: relative;
display: inline-block;
}
div>i {
display: inline-block;
color: red;
position: absolute;
right: -16px;
top: -5px;
opacity: 1;
}
</style>
</head>
<body>
<div id="d1">点赞</div>
<script src="jquery-3.2.1.min.js"></script>
<script>
$("#d1").on("click", function () {
var newI = document.createElement("i");
newI.innerText = "+1";
$(this).append(newI);
$(this).children("i").animate({
opacity: 0 //1秒之后透明度变为0，注意写法，animate({属性：值},毫秒数)
}, 1000)
})
</script>
</body>
</html>
点赞特效简单示例
循环
jQuery.each(collection,callback(indexInArray,valueOfElement)):
一个通用的迭代函数，它可以用来无缝迭代对象和数组。数组和类似数组的对象通过一个长度属性（如一个函数的参数对象）来迭代数字索引，从0到length - 1。其他对象通过其属性名进行迭代。
li =[10,20,30,40]
$.each(li,function(i, v){
console.log(i, v);//function里面可以接受两个参数，i是索引，v是每次循环的具体元素。
})
.each(function(index,element))
遍历一个jQuery对象，为每个匹配元素执行一个函数。
.each() 方法用来迭代jQuery对象中的每一个DOM元素。每次回调函数执行时，会传递当前循环次数作为参数(从0开始计数)。由于回调函数是在当前DOM元素为上下文的语境中触发的，所以关键字 this 总是指向这个元素。
// 为每一个li标签添加foo
$("li").each(function(){
$(this).addClass("c1");
});
终止循环
在遍历过程中可以使用 return false提前结束each循环。
而直接使用return;后面什么都不加，不写false，就是跳过本次循环的意思
绑定数据.data()
任意jQuery对象都有data方法，可以保存任意值，可以用来代替全局变量
在匹配的元素集合中的所有元素上存储任意相关数据或返回匹配的元素集合中的第一个元素的给定名称的数据存储的值。
.data(key, value): 设置值
在匹配的元素上存储任意相关数据。
$("div").data("k",100);//给所有div标签都保存一个名为k，值为100
.data(key): 取值，没有的话返回undefined
返回匹配的元素集合中的第一个元素的给定名称的数据存储的值—通过 .data(name, value)或 HTML5 data-*属性设置。
$("div").data("k");//返回第一个div标签中保存的"k"的值
.removeData(key):
移除存放在元素上的数据，不加key参数表示移除所有保存的数据。
$("div").removeData("k"); //移除元素上存放k对应的数据
插件
<script>
$.expend({
方法名1:function(){},
方法名2:function(){},
})
$.fn.expend({
方法名1:function(){},
方法名2:function(){},
})
</script>
传参版本
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>登录校验示例</title>
<style>
.login-form {
margin: 100px auto 0;
max-width: 330px;
}
.login-form > div {
margin: 15px 0;
}
.error {
color: red;
}
</style>
</head>
<body>
<div>
<form action="" class="login-form" novalidate>
<div>
<label for="username">姓名</label>
<input id="username" type="text" name="name" required autocomplete="off">
<span class="error"></span>
</div>
<div>
<label for="passwd">密码</label>
<input id="passwd" type="password" name="password" required autocomplete="off">
<span class="error"></span>
</div>
<div>
<label for="mobile">手机</label>
<input id="mobile" type="text" name="mobile" required autocomplete="off">
<span class="error"></span>
</div>
<div>
<label for="where">来自</label>
<input id="where" type="text" name="where" autocomplete="off">
<span class="error"></span>
</div>
<div>
<input type="submit" value="登录">
</div>
</form>
</div>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="validate3.js"></script>
<script>
$.validate({"name":{"required": true}, "password": {"required": true, "minLength": 8}, "mobile": {"required": true}});
</script>
</body>
</html>
浙公网安备 33010602011771号