JQuery
_七七
delicate.
展开
-
JQuery插件的两种实现方式
JQuery插件:增强JQuery的功能实现方式:$.fn.extend(object)用于增强通过JQuery获取的对象的功能 $("#id" )$.extend( object)用于增强JQeury对象自身的功能 $/jQuery<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title>原创 2020-06-16 21:44:22 · 178 阅读 · 0 评论 -
JQuery 图片循环播放抽奖
开始按钮:定义循环定时器切换小相框的src属性定义数组,存放图片资源路径生成随机数,数组索引结束按钮:停止计时器给大相框设置src属性<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="js/jquery-3.4.1.min.js">&原创 2020-06-16 19:34:59 · 387 阅读 · 0 评论 -
JQurey页面广告的自动显示和隐藏
JQurey广告的显示和隐藏页面加载完成后,3秒后自动显示;广告显示五秒后自动消失;<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="js/jquery-3.4.1.min.js"></script> <script>原创 2020-06-16 18:41:45 · 212 阅读 · 0 评论 -
JQuery 事件绑定的方式、on绑定事件/off解除绑定、事件切换: toggle
事件绑定jquery标准的绑定方式jq对象.事件方法(回调函数) ;on绑定事件/off解除绑定jq对象.on(“事件名称”,回调函数)jq对象.off(“事件名称”)事件切换: togglejq对象.toggle(Fn1,Fn2… …)原创 2020-06-16 15:56:58 · 542 阅读 · 0 评论 -
JQuery遍历的方式each、$.each、for...of
JS的遍历方式for(初始化值;循环结束条件;步长)<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="js/jquery-3.4.1.min.js"></script> <script> $(functi原创 2020-06-15 18:53:27 · 229 阅读 · 0 评论 -
JQuery动画淡入淡出效果
淡入淡出显示和隐藏方式fadeIn( [speed], [easing],[fn])fadeout([speed], [easing],[fn])fadeToggle([ speed, [easing],[fn]])<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script原创 2020-06-15 18:21:41 · 238 阅读 · 0 评论 -
JQuery 动画滑动显示和隐藏方式 slideDown\slideUp\slideToggle
滑动显示和隐藏方式slideDown([speed], [easing],[fn])slideup( [ speed, [easing],[fn]])slideToggle([speed], [easing],[fn])<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <scri原创 2020-06-15 18:18:46 · 600 阅读 · 0 评论 -
JQuery 动画默认显示和隐藏方式show\hide\toggle
默认显示和隐藏方式show([speed, [easing],[fn]])speed :动画的速度。三个预定义的值(“slow”, “normal”, “fast” )或表示动画时长的毫秒数值(如: 1000)easing :用来指定切换效果,默认是"swing",可用参数"linear"swing:动画执行时效果是先慢,中间快,最后又慢linear :动画执行时速度是匀速的fn: 在动画完成时执行的函数,每个元素执行一次。hide([speed, [easing],[fn]])t原创 2020-06-15 18:09:03 · 659 阅读 · 0 评论 -
JQuery 多选下拉列表左右移动
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>多选下拉列表左右移动</title> <script src="js/jquery-3.4.1.min.js"></script> <style> #left{ height: 300px;原创 2020-06-14 20:56:41 · 341 阅读 · 0 评论 -
JQurey 表情选择追加到聊天框
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>表情追加</title> <script src="js/jquery-3.4.1.min.js"></script> <style> li{ float: left;原创 2020-06-14 20:39:00 · 224 阅读 · 0 评论 -
JQuery 全选和全不选的实现
全选和全不选<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>全选和全不选</title> <script src="js/jquery-3.4.1.min.js"></script> <script> //js实现全选 function sel原创 2020-06-14 20:03:35 · 175 阅读 · 0 评论 -
JQuery 隔行换色
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>隔行换色</title> <script src="js/jquery-3.4.1.min.js"></script> <script> //将数据奇数行背景色设置为pink,偶数行设置为yellow原创 2020-06-14 19:44:43 · 194 阅读 · 0 评论 -
JQurey CRUD增删改查操作
CRUD增删改查操作append():父元素将子元素追加到末尾对象1. append(对象2):将对象2添加到对象1元素内部,并且在末尾prepend() :父元素将子元素追加到开头对象1. prepend(对象2) :将对象2添加到对象1元秦内部,并且在开头appendTo():对象1. appendTo(对象2):将对象1添加到对象2内部,并且在末尾prependTo() :对象1. prependTo(对象2) :将对象1添加到对象2内部,并且在开头after():添加元素到元素后原创 2020-06-14 19:30:35 · 135 阅读 · 0 评论 -
JQurey DOM 对class属性操作
对class属性操作addClass(): 添加class属性值removeClass(): 删除class属性值toggleClass():切换class属性toggleClass(“id”):判断如果元素对象上存在class=“id”,则将属性值one删除掉。如果元素对象上不存在class=“id”,则添加。相当于同时实现了addClass和removeClass的功能;<!DOCTYPE html><html lang="en"><head>原创 2020-06-14 17:43:13 · 174 阅读 · 0 评论 -
JQurey DOM通用属性操作
通用属性操作attr(): 获取/设置元素的属性removeAttr(): 删除属性prop():获取/设置元素的属性removeProp(): 删除属性attr和prop区别:如果操作的是元素的固有属性,则建议使用prop如果操作的是元素自定义的属性,则建议使用attr<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>原创 2020-06-14 16:24:05 · 147 阅读 · 0 评论 -
JQuery DOM内容操作 html&text&val
内容操作html(): 获取/设置元素的标签体内容;text(): 获取/设置元素的标签体纯文本内容;val() :获取/设置元素的value属性值;<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="js/jquery-3.4.1.min.j原创 2020-06-14 15:42:52 · 97 阅读 · 0 评论 -
JQuery 表单过滤选择器
表单过滤选择器可用元素选择器语法::enabled 获得可用元素不可用元素选择器语法::disabled 获得不可用元素选中选择器语法::checked 获得单选/复选框选中的元素选中选择器语法::selected 获得下拉框选中的元素 <script> $(function () { //将可用input内容改为aaa $("b1").click(function () {原创 2020-06-14 15:22:29 · 167 阅读 · 0 评论 -
JQuery 过滤选择器
过滤选择器首元素选择器语法:first 获得选择的元素中的第一个元素尾元素选择器语法::last 获得选择的元素中的最后一个元素非元素选择器语法::not(selector) 不包括指定内容的元素偶数选择器语法::even偶数,从0开始计数奇数选择器.语法::odd奇数,从0开始计数等于索引选择器语法::eq(index) 指定索引元素大于索引选择器语法::gt(index) 大于指定索引元素小于索引选择器语法::lt(index) 小于指定索引元素标题选原创 2020-06-14 15:05:53 · 133 阅读 · 0 评论 -
JQuery 属性选择器
属性选择器属性名称选择器语法: $(“A[属性名]”)包含指定属性的选择器属性选择器语法: $(“A[属性名=‘值’]”)包含指定属性等于指定值的选择器复合属性选择器语法: $(“A[属性名=‘值’][]…”) 包含多个属性条件的选择器<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>JQuery属性选择器</title原创 2020-06-14 14:23:50 · 150 阅读 · 0 评论 -
JQuery 层级选择器
层级选择器后代选择器语法: $(“A B”)选择A元素内部的所有B元素子选择器语法: $(“A > B”)选择A元素内部的所有B子元素<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>JQuery层级选择器</title> <script src="js/jquery-3.4.1.min.js"&g原创 2020-06-14 13:53:29 · 134 阅读 · 0 评论 -
JQuery 基本选择器
基本选择器标签选择器(元秦选择器)语法: $(“html标签名”)获得所有匹配标签名称的元素id选择器语法: $("#id的属性值")获得与指定id属性值匹配的元素类选择器.语法: $(".class的属性值")获得与指定的class属性值匹配的元素并集选择器:语法: $(“选择器1,选择器2…”)获取多个选择器选中的所有元素<!DOCTYPE html><html lang="en"><head> <meta charset原创 2020-06-14 13:42:35 · 139 阅读 · 0 评论 -
JQurey事件绑定、入口函数、样式控制:CSS方法
事件绑定 //获取b1按钮 $("#b1").click(function () { alert("abc"); });入口函数$(function () { });window.onload 和 $(function) 区别window.Onload只能定义一次,多次定义,最后的会把前面的覆盖掉$(function)可定义多次样式控制:CSS方法$("#div1").css("back原创 2020-06-14 12:02:03 · 141 阅读 · 0 评论 -
JQuery概念、jquery-xxx.js 与jquery- xxx.min. js区别、JS自定义框架、JQuery快速入门、 Jquery对象和JS对象的相互转换
JQuery概念JS的一个框架,简化代码;目前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,只支持最新的浏览器。除非特殊要求,一般不会使用3. x版本的原创 2020-06-14 11:09:08 · 494 阅读 · 0 评论