jQuery
栗子好好吃
向来心是看客心,奈何人是剧中人
展开
-
算法 --- > 递归实现多级树展开结构
在项目中,经常会给出一个深度不确定的数组,数字结构如下:data = [ {name: 'a', child:[{name: 'a1'},{name: 'a2', child: [{name:'a21'}]}]}, {name: 'b'}]要求将数组渲染成对应的目录结构, 结构如下:<ul> <li> a ...原创 2020-02-08 18:21:08 · 1189 阅读 · 2 评论 -
jquery --- > 监听tab栏的变化
1. jQuery样式操作1.1 操作css方法参数只写属性名,则返回属性值(字符串)$(this).css('color')参数是 属性名、属性值(逗号分隔,则表示设置属性$(this).css('color','red')参数可以是对象的形式$(this).css({ width: 400px, height: 400px})1.2 设置类样...原创 2020-02-08 16:36:16 · 1080 阅读 · 0 评论 -
javascript --- > 瀑布流的实现
说明源代码1. 瀑布流出现问题: 设计给的图片不是同一个尺寸大小,因此不能规则的放入到给定的DOM结构中.此时,需要使用瀑布流技术来解决这个问题解决的思路: 让图片等宽、不等高核心: 用到了定位img { position: absolute; left: 最小的索引 * 图片的宽度; top: 最小的图片的高度;}算法如下:...原创 2020-02-07 19:38:00 · 211 阅读 · 0 评论 -
jquery --- > 阻止表单默认的提交行为,标准化表单的数据
表单如下:// .htm<form id="topics_new_form" method="post" action="/topics/new"> <div class="form-group"> <label for="exampleInputEmail1">选择模块</label> <selec...原创 2019-08-09 10:40:05 · 181 阅读 · 0 评论 -
jquery --- > 全选、全不选、反选、提交
注意:jquery 提供的$(’#id’).attr(‘checked’,true)方法,在某些情况下会失效… 因此,使用js原生的 .checked = true方法 控制// html<form> 你爱好的运动是? <br/> <input type="checkbox" name="items" value="足球" /> 足球 ...转载 2019-07-17 23:13:40 · 139 阅读 · 0 评论 -
jquery --- > 事件处理函数的event对象的几个属性(方法)说明
1.event.type: 事件的类型$('a').click(function(event) { alert(event.type); return false; // 阻止链接跳转});// click2.event.preventDefault(): 阻止默认事件$("#sub").bind("click", function(event) { var u...转载 2019-07-17 16:48:47 · 393 阅读 · 0 评论 -
jquery --- > 控制元素的隐藏/显示
<!DOCTYPE html><html><head><meta charset="utf-8"></head><body><div id="panel"> <h5 class="head">什么是jquery?</h5> <div class="conte...转载 2019-07-17 15:56:57 · 129 阅读 · 0 评论 -
jquery --- > 网页选项卡
点击,不同的tab_menu,显示不同的tab_box注意点:1.获取ul下,当前li的编号. $(‘div ul li’).index(this)2.显示ul下编号为$index的li -> $(‘ul li’).eq($index)<!DOCTYPE html><html><head><meta charset="utf-8"&g...转载 2019-07-18 20:44:06 · 202 阅读 · 0 评论 -
jquery --- > 收缩兄弟元素
点击高亮的收缩子元素.思路:1.点击的其实是tr.(类为parent)2.toggleClass可以切换样式3.slblings(’.class’).toggle 可以根据其类来进行隐藏显示代码如下:<!DOCTYPE html><html><head><meta charset="utf-8"><style> ...转载 2019-07-18 19:45:54 · 181 阅读 · 0 评论 -
jquery --- > 多选下拉框的移动(穿梭框)
效果如下:几个注意地方:1.多选下拉框需要添加 multiple2.获取选中的元素KaTeX parse error: Expected 'EOF', got '#' at position 3: ('#̲id option:selec…(#id option:not(:selected))下面是代码的各个部分实现, 方便引用,最后是总体代码,方便理解添加选中到右边:// 添加选中到...转载 2019-07-18 09:30:10 · 1191 阅读 · 0 评论 -
jquery--- > 属性和样式的操作 && 设置和获取HTML、文本和值、焦点事件
1.获取p元素的title属性:var title = $("p").attr("title");2.给p元素加title属性(值为:栗子)和date属性(值为:2019/7/15):$("p").attr("title":"栗子", "date":"2019/7/15");3.删除p中的title属性:$("p").removeAttr("title");4.给p添加class...转载 2019-07-15 20:24:57 · 220 阅读 · 0 评论 -
jquery --- > DOM操作、表单元素的初始化
基本过滤选择器:// 选取所有<div>元素中第一个<div>元素$("div:first")// 选取所有<div>元素中最后一个<div>元素$('div:last')// 选取class不是myClass的<input>元素$('input:not(.myClass)')// 选取索引是偶数的<input&...转载 2019-07-15 16:44:31 · 533 阅读 · 0 评论 -
jquery --- > 监听input框失效
使用juery监听Input输入的变化,并且封装起来,如下:// html<input type="text" id=‘myinput1’ />// jsfunction formOnById(id){ let dom = '#' + id; $(dom).bind('input propertychange',()=>{ let i...原创 2019-05-30 11:13:21 · 1423 阅读 · 0 评论 -
jquery常见操作分享
参考: https://www.cnblogs.com/eager/p/7133270.html转载 2019-05-23 09:51:50 · 320 阅读 · 0 评论 -
jquery --- > pip方法
我们先来看下面一个例子:var getPromise = $.get('/query');getPromise.done(function(data) { var postPromise = $.post('/search', data);});// ...无法在此处给postPromise方法附加处理器// 上面先使用get方法读取url为query的数据,在完成后,再使用p...转载 2019-05-27 10:59:03 · 511 阅读 · 0 评论 -
jquery --- > 使用when方法等待2个异步事件结束后执行某一个函数.
$.when(promise1, promise2).done(function(args1, args2){ console.log(args1 + args2);}// 上述代码,等待promise1和promise2执行完,打印出(promise1和promise2)使用的参数// 注:1.promise1和promise2是异步调用的函数,如ajax请求// 2....转载 2019-05-27 10:31:36 · 2414 阅读 · 0 评论 -
jQuery --- > 简单操作合集
// 获取所有<p>元素$("p");// 获取一个ID为myDiv的<div>元素$("div#myDiv");// 获取所有type属性等于"text"的<input>元素$("input[@type=text]");// 获取所有p元素并隐藏它们$("p").hide();// 获取ID为myDiv的<div>元素,然后...转载 2019-03-23 09:19:48 · 114 阅读 · 0 评论