![](https://img-blog.csdnimg.cn/20201014180756923.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
jQuery
文章平均质量分 76
神奇大叔
这个作者很懒,什么都没留下…
展开
-
jq trigger()事件
1、该事件触发由bind制作的自定义函数事件,在页面加载时自动执行语法:('选择器').trigger('自定义函数名'); 代码示例:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="wi...原创 2020-02-01 15:16:04 · 1138 阅读 · 0 评论 -
jq 事件委托delegate
$('选择器').delegate('子元素选择器','无on的事件',function(){...})给选择器下的子元素委派事件代码示例:<!DOCTYPE html><html><head> <meta charset="UTF-8"> <meta name="viewport" content="width=devic...原创 2020-02-01 14:14:13 · 382 阅读 · 0 评论 -
jq offset()
1、返回距离视口的位移2、返回值为top和left原创 2020-02-01 10:30:22 · 297 阅读 · 0 评论 -
jq $.each
$.each(数组/对象,function(index,item));不可以遍历字符串原创 2020-02-01 10:15:12 · 107 阅读 · 0 评论 -
jq attr与prop
//attr与prop的区别 /* * 1、prop多用在标签的固有属性,布尔值属性。比如:a标签的href,class,selected等。 * 2、attr多用在自定义属性上。 * 3、在jquery中如果用attr去获取布尔值属性且该布尔值属性在标签体内没有定义的时候,会返回undefined */代码示例:<!DOCTYPE ...原创 2020-02-01 09:35:49 · 137 阅读 · 0 评论 -
jq swiper动画
动画教程地址:动画教程地址使用需要引入文件 swiper.jquery.min.js animate.min.css swiper.animate1.0.2.min.js代码示例:<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></tit...原创 2019-12-13 23:55:06 · 335 阅读 · 0 评论 -
jq swiper(各种轮播图样式)
具体样式教程查看地址swiper各种样式引用地址各种样式引入swiper.min.css文件 swiper.jquery.min.js 文件步骤:安装教程引入框架,然后再根据样式地址中的样式可以添加其他样式添加的其他样式写在js代码域里,方式为参数名:‘样式名’代码示例:<!DOCTYPE html><html> <head> &l...原创 2019-12-13 23:21:28 · 3226 阅读 · 0 评论 -
jq easie-移动速度缓冲
引入文件easie文件<script src="js/jquery.easie.js"></script>移动速度缓冲样式查看地址easie代码示例:在样式地址里查看代码 $('.box').animate({'left':600,'top':500},2000,$.easie(1, 0, 0.044, 1));...原创 2019-12-13 22:30:54 · 199 阅读 · 0 评论 -
jq UI-引入、拖动效果、api文档位置
引入 jq UI的引入在jq的引入下,因为要jq UI要引用jq里的代码 拖动 $('选择器').draggable(); 限制拖动范围 containment:'parent' 句尾不能加;分号,表示在父元素范围内移动 axis:'x/y' 只能x方向/y方向拖动jquery UI文档链接:api代码示例:<!DOCTYPE html><h...原创 2019-12-13 17:34:03 · 217 阅读 · 0 评论 -
jq 尺寸大小、偏移量、动画回到顶部方式
宽尺寸 $('选择器').width() 内容宽度 $('选择器').innerWidth() 内容宽度和padding宽度 $('选择器').outerWidth() 内容宽度和padding宽度和border宽度 $('选择器').outerWidth(true) 内容宽度和padding宽度和border宽度和margin宽度 高尺寸 $('选择器').h...原创 2019-12-13 16:42:48 · 129 阅读 · 0 评论 -
jq is方法
判断节点是否拥指定有属性$('选择器').is(':属性'); 判断选定的元素是否有该属性,返回值为布尔值判断节点类型$('选择器').is('选择器/标签名') 判断是否是相同节点/判断节点类型...原创 2019-12-13 16:33:26 · 429 阅读 · 0 评论 -
jq 延迟案例(随机照片延迟出现,发扑克式特效)
延迟执行 delay $('选择器').delay(毫秒数)<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> img{ position: abso...原创 2019-12-13 11:46:25 · 191 阅读 · 0 评论 -
jq each遍历
节点的遍历 遍历选择的每个节点,执行each中的函数 $('选择器').each(函数);代码示例:<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> </style...原创 2019-12-13 10:53:29 · 139 阅读 · 0 评论 -
jq 对应和排他写法
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> div{ width: 600px; height: 300px; border: solid 1px red; ...原创 2019-12-13 10:41:31 · 360 阅读 · 0 评论 -
jq 节点查找
查找节点 查找儿子元素 $('选择器').children(); $('选择器').children('选择器'); //查找儿子元素中的指定元素查找后代元素 $('选择器').find('选择器')查找直接父节点 $('选择器').parent()查找所有祖先节点,直到html节点为止 $('选择器').parents()查找所有兄弟节点(本身除外) $('选择...原创 2019-12-13 10:03:04 · 527 阅读 · 0 评论 -
百叶窗照片(偏js版、jq精简版)
问题 如何计算每个图片分配的位置大小 当一个图片完全展开时,如何计算其他图片分配的位置大小 如何设置未点击时的黑幕效果和点击后的去除(即利用定位,使得黑幕div和img重叠,然后设置黑幕div的背景颜色和透明度) 压缩图片的效果是怎么实现的(利用overflow多余效果不显示); 如何清除动画累计 jq是使用.eq()来进行类似数组下标操作的 添加方法 $('选择器').fin...原创 2019-12-12 22:03:18 · 265 阅读 · 1 评论 -
jq stop
停止动画 .stop(是否清除所有动画(可选),是否立即完成当前动画(可选)) 无参时,默认为.stop(false,false); 即一次只清除一次动画代码示例:<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>&l...原创 2019-12-12 20:09:19 · 227 阅读 · 0 评论 -
jq animate动画
animate $('选择器').animate({json类型到终点的几何位置/几何大小},毫秒数) 多个变化一起执行 $(".div1").animate({"width":100,'top':400,'left':400},4000); 链式调用,执行完一个变化后再执行另一个变化 $(".div1").animate({'width':100},2000)...原创 2019-12-12 17:11:43 · 671 阅读 · 0 评论 -
jq 呼吸轮播图
问题:淡入淡出时间清除动画累积代码示例:<html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> * { margin: 0; padding: 0...原创 2019-12-12 12:11:55 · 204 阅读 · 0 评论 -
jQ 其他方法(获取下标、动画)
返回元素下标$(‘选择器’).index();原创 2019-12-12 11:02:25 · 224 阅读 · 0 评论 -
jq 事件监听on
事件监听 多个事件绑定相同函数 $('选择器').on('去掉on的事件名 去掉on的事件名',函数); 可以将多个事件绑定一个函数,多个事件用空格隔开 给不同事件绑定不同函数(采用json写法) $("选择器").on({'去掉on的事件名':函数,'去掉on的事件名':函数,...}); 添加json信息 $('选择器').on('去掉on...原创 2019-12-11 23:46:19 · 654 阅读 · 0 评论 -
jq 选择器2
同第一种选择器对应方法相同效果$('选择器').first();$('选择器').last();$('选择器').eq(num);原创 2019-12-10 15:15:31 · 91 阅读 · 0 评论 -
jq 将JQ对象转换成js对象
通过$()得到的是jQuery对象将jq对象转换成js原生对象 方式一 var p=$('选择器')[num]; 通过数组下标 方式二 var p=$('选择器').get(num);原创 2019-12-10 15:03:18 · 434 阅读 · 0 评论 -
jq 隔行变色(横、纵)
jQ不能使用this.css来设置样式,使用$(this).css来设置样式$('标签').hover(函数1,函数2); 分别定义了鼠标悬浮和鼠标离开事件代码示例:<html> <head> <meta charset="utf-8"> <title></title> <script src="js/jqu...原创 2019-12-10 14:33:32 · 185 阅读 · 0 评论 -
jQ 引入、补充
引入下载文件(script引入)引入静态cdn文件(上网搜,复制文件路径,script引入)<script src="js/jquery-3.4.1.js"></script>原创 2019-12-10 13:58:38 · 137 阅读 · 0 评论 -
jq 事件机制
**绑定事件** 数组对象.bind("去掉on的事件名",绑定内容) 追加模式,一个事件增加多个操作,js是覆盖,可配合js追加绑定 function t2() { $("#btn2").bind("click",function(){alert("我是bind绑定单击事件")}); $("#btn2").bind("click",function(){alert("第...原创 2019-11-14 09:22:48 · 143 阅读 · 0 评论 -
jq菜单-jq页面加载方式
<html> <head> <meta charset="utf-8"> <title>jq 菜单案例</title> <script type="text/javascript" src="js/jquery-3.4.1.js" charset="utf-8"></script> <sc...原创 2019-11-14 23:31:16 · 160 阅读 · 0 评论 -
jq 菜单-js和jq通过点击实现
<html> <head> <meta charset="utf-8"> <title>jq 菜单案例</title> <script type="text/javascript" src="js/jquery-3.4.1.js" charset="utf-8"></script> <sc...原创 2019-11-14 23:29:20 · 144 阅读 · 0 评论 -
jq 操作动画
**显示隐藏的的元素(逐渐显示,动态改变成设置的高和宽)** 通过hide()方法隐藏的或是在CSS里设置了display:none 数组对象.show() $("#showdiv").show(); 设置时间 $("#showdiv").show(3000);**隐藏显示的元素(逐渐淡出,动态减小高和宽至消失,消失过程其他元素会动态移动自己位置)** 对象数组.hi...原创 2019-11-14 19:00:22 · 207 阅读 · 0 评论 -
jq 操作文档节点
操作文档结构内部插入 追加数据到已有内容后面 对象数组.append("追加内容"); 会解析标签 function t1() { var div=$("#showdiv"); div.append("<b>饭</b>"); } 追加数据到已有内容前面 对象数组.prepend("追加内容"); 会解析标签 ...原创 2019-11-13 22:54:58 · 144 阅读 · 0 评论 -
jq 操作元素样式
**返回css样式内容** 对象数组.css("样式名") function t2() { var showdiv=$("#showdiv"); alert(showdiv.css("width")); } **增加/修改样式** 对象数组.css("样式名","修改样式") function t1() { var showdiv=$("#s...原创 2019-11-12 22:19:54 · 289 阅读 · 0 评论 -
jq 操作元素内容
操作元素内容 **返回元素的所有内容,包括子标签** 对象数组.html(); function t1() { var showdiv=$("#showdiv"); alert(showdiv.html()); } **返回元素的内容,不包括子标签** 对象数组.text(); function t4() { var ...原创 2019-11-12 19:36:31 · 286 阅读 · 0 评论 -
jq 操作元素属性
操作元素属性 **获得元素属性** 数组对象.attr("属性名"); 不能拿到value的实时值,只能拿到默认值 数组对象.val(); 能拿到value属性的实时数据 function t1() { var uname=$("#uname"); alert(uname.attr("type")+uname.attr("name")+uname.v...原创 2019-11-12 12:31:52 · 191 阅读 · 0 评论 -
jq 选择器
**jQuery选择器返回的是数组对象** .val() 是数组对象的方法,其他对象无法使用,直接使用返回数组中对一个对象的value .html() 返回数组对象的,直接使用返回数组中第一个对象的标签中的内容 id选择器 $("#标签id"); var inp=$("#uname"); 标签选择器 $("标签名"); va...原创 2019-11-11 23:03:13 · 131 阅读 · 0 评论