jQuery学习笔记
佛佛ง
前端
展开
-
jQuery-实现上一页、下一页、选中、滑动功能
功能简介:1、点击向左、向右的绿色箭头,实现左滑和右滑分页展示;2、点击某个小圆点,页面跳转到第几页;3、当鼠标在页面上横向滑动距离超过50px时,页面滑动,切小圆点跟着变动;dom结构如下:界面逻辑如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www....原创 2019-11-01 16:45:09 · 1743 阅读 · 0 评论 -
jQuery-显示农历日期,如腊月初八
dom结构 <span id="nongli">农历</span> 引用农历方法navCal.js <script type="text/javascript" src="js/navCal.js"></script> 显示当天的农历日期 $(document).ready(function () { //显...原创 2019-10-26 14:38:29 · 1265 阅读 · 0 评论 -
hover、toggle合并事件
1、hover(enter,leave)实现鼠标滑入、滑出效果2、toggle(fn1,fn2,fnN)模拟鼠标连续点击事件,第一次单击触发事件fn1,第二次触发fn2,以此类推...3、toggle()切换元素的可见状态,如果元素是可见的,单击切换后则隐藏;如果元素是隐藏的,单击切换后则可见<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML ...原创 2018-09-10 14:47:44 · 533 阅读 · 0 评论 -
事件冒泡
假设body、div、span均绑定了click事件,当点击span时,会输出3条记录,span点击事件产生的——>div点击事件产生的——>body点击事件产生的。解决方法:1、创建事件对象,只需要为函数添加一个event参数$().bind("click",function(event){...........});2、停止事件冒泡event.stopP...转载 2018-09-10 16:37:00 · 291 阅读 · 0 评论 -
移除事件unbind()
unbind([type],[data])1、没有参数,则删除所有的绑定事件2、提供事件类型作为参数,则删除该类型的绑定事件3、把绑定时传递的处理函数作为参数,则删除该函数 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1...转载 2018-09-10 16:55:58 · 1269 阅读 · 0 评论 -
基本动画方法:show | hide | fadeIn | fadeOut | slideUp | slideDown
show hide 修改元素的高、宽、透明度;从左上角高、宽、透明度渐变 fadeIn fadeOut修改元素的透明度;宽高不变,透明度渐变 slideUp slideDown 修改元素的高度;宽高渐变,透明度不变1、都可以指定3种速度参数slow normal fast,分别是0.6 0.4 0.2秒,1)当使用速度关键字时需要加引号,例如show("fast"),...原创 2018-09-10 17:47:39 · 386 阅读 · 0 评论 -
动画animate(params , speed , callback)
animate(params , speed , callback)1、params:包含样式属性值及值的映射,如{color:“red”,width:“400px”,height:“400px”}2、speed:速度参数,可选3、callback:在动画完成时执行的参数,可选****需要注意的是,为了能让元素动起来,需要把元素的position设置成“relative”或“abs...原创 2018-09-10 17:58:07 · 1625 阅读 · 0 评论 -
默认值与实际值之间的切换
1、默认显示如下样式:<!-- 下:提示信息 --><div class="infotip" name="tip">正常运营,运力充足</div>2、当数字<180时,样式变化,如图:3、实现方式://注意:初始化时,就设置默认数字颜色和提示信息样式var changeTip=function(){ $("#...原创 2018-11-10 13:31:53 · 218 阅读 · 0 评论 -
jQuery-鼠标事件及使用unbind移除mouseover、mouseout、mousemove绑定
$item.mouseover(function(){//鼠标滑入 ...}).mouseout(function(){//鼠标滑出 ...}).mousemove(function(){//鼠标移动 ...});如上,对dom绑定了鼠标事件,那么如何解除绑定呢?如下设置即可:$item.unbind('mouseover').unbind('mouseo...原创 2019-07-02 16:01:36 · 7286 阅读 · 0 评论 -
jQuery-图片加载失败时,显示默认图片
有以下几种情况:1、正常显示图片;<img src="img/bus2.png">2、当图片未找到或者404时,触发 onerror 显示默认的图片;<img src="img/bus22.png" onerror="this.src='img/default.png'">3、若是默认图片也没找到,会引起崩溃,这时候可以通过设置this.oner...原创 2019-07-04 15:01:40 · 2788 阅读 · 0 评论 -
jQuery-判断dom元素是否可见:visible或 :hidden
<div id="item1"></div>判断item1是否可见的方法:if($("#item1").is(":visible")){ //可见 //执行可见的操作 ......}或者if($("#item1").is(":hidden")){ //不可见 //执行不可见的操作 ......}...原创 2019-08-08 09:18:15 · 3061 阅读 · 0 评论 -
鼠标事件执行顺序
div元素的执行顺序:mouseover--> mousedown-->mouseup-->click -->mouseoutinput、checkbox 、select 元素执行顺序:mouseover--> mousedown-->focus-->mouseup-->click --&g...原创 2019-08-08 10:06:53 · 1020 阅读 · 0 评论 -
jQuery-通过监控mousedown事件,输入框即时展示查询结果面板,获取焦点和失去焦点时,面板展示与否操作
功能介绍:1、开始时,面板是隐藏的;2、输入框获取焦点,面板展示;3、当点击到面板内区域时,面板不消失;当点击到面板内黄色区域时,面板消失;4、当点击到面板外区域时,面板消失;5、当再次点击到输入框时,面板也不消失;本文只介绍面板展示与消失的操作,查询匹配不做介绍。可以监听元素的body的mousedown,也可以监听window,如window.onmousedo...原创 2019-08-08 13:43:49 · 406 阅读 · 0 评论 -
bind、click、mouseover、mouseout及简写实现显示与隐藏效果
1、$().bind("click", function() {...........});也可以写成 $().click(function() {..........});2、$().bind("mouseover", function() {...........}) .bind("mouseout", function() {...........});也可以...原创 2018-09-10 14:32:11 · 1790 阅读 · 0 评论 -
TAB-1网页选项卡,元素中使用onclick="function(a,b)"实现
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><原创 2018-09-04 18:36:48 · 1064 阅读 · 0 评论 -
TAB-1网页选项卡,元素中使用onclick="function(a)"实现
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><原创 2018-09-04 17:52:39 · 1111 阅读 · 0 评论 -
循环显示选中的下拉列表的值
1、和选中多选框的方式一样,用each()和For方式来实现2、源码无标题文档 $(document).ready( function() { //两种循环语句,一种使用each,一种使用for,for的时候需要加eq()函数显 countCheckd(); var $a = $("select"); //返回下拉值 $a.click(原创 2018-01-12 13:56:46 · 1805 阅读 · 0 评论 -
可见性选择器
1、可见性选择器:hidden:visible2、:hidden 包含3种样式,源码: 可见性1 /*不占位置*/ 可见性2 /*占位置*/ 可见性33、效果原创 2018-01-09 14:25:36 · 291 阅读 · 0 评论 -
jQuery 判断某个元素在网页上是否存在
1、解决方法:根据获取到的元素的长度来判断2、实例:if($("#content").length>0){//do something}3、非法写法if($("#content")){//do something}原创 2018-04-16 15:59:29 · 2209 阅读 · 0 评论 -
find和filter的区别
1、find和filter的用法find表示从子集中选择符合条件的对象;filter表示从自身过滤出符合条件的对象;2、源代码<script type="text/javascript">$(function(){ // 等待DOM加载完毕. //lzz:实验find和filter方法,前者是在内部查找符合条件的,后者是过滤自身符合条件的 $("#a1"...原创 2018-04-18 11:43:16 · 2450 阅读 · 0 评论 -
jQuery插入节点的方法-展示效果
原创 2018-04-18 17:55:34 · 254 阅读 · 0 评论 -
删除节点方法remove() 、detach()、empty()
有三种删除节点的方法,分别为remove() 、detach()、empty()原创 2018-04-19 18:02:07 · 2266 阅读 · 0 评论 -
获取节点的相对和绝对位置
1、获取绝对位置x、y的坐标(相对页面而言),无论是否设置了left、top,不影响最终的x、y坐标值,绝对定位position:absolute;不占空间drag._x = $("div").offset().left;drag._y = $("div").offset().top;2、获取相对位置(相对父元素而言),偏移值!!!,设置了left、top才有值,相对定位position:rel...原创 2018-05-15 12:06:57 · 3007 阅读 · 0 评论 -
TAB-1网页选项卡,选取元素组使用click事件
1、代码<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>..转载 2018-06-26 18:45:12 · 795 阅读 · 0 评论 -
tAB-2-选项卡-同一数据展示
1、代码<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>..原创 2018-06-27 10:23:54 · 221 阅读 · 0 评论 -
使用class类实现显示与隐藏效果
1、源码<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><原创 2018-07-05 14:03:57 · 4434 阅读 · 0 评论 -
报表字段行显示图片
1、源码colModel : [ //此处省略其他的字段设置 {name :'iotype',index : 'iotype',width : '15%',align: 'center',sortable: false, formatter:function(cellValue){ var intype= "<div class='intype'></di...原创 2018-07-05 14:10:09 · 647 阅读 · 0 评论 -
滑动定位对应项
1、源码<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><原创 2018-07-05 17:42:38 · 305 阅读 · 0 评论 -
循环输出被选中多选框的值
1、解决方式①使用each方法实现;②使用for实现2、源码1)前端 多选框: <input type="checkbox" name="newsletter" checked="checked" value="test1" /> test111 <input type="checkbox" name="newsletter" value="test2" /原创 2018-01-11 17:52:39 · 970 阅读 · 0 评论