
jQuery
ES6
这个作者很懒,什么都没留下…
展开
-
Jquery 事件(注意点)
1、mouseenter事件和mouseover的区别 (都是鼠标移入)冒泡的方式处理问题如果父级有mouseover事件,那么mouseover触发冒泡事件但是mouseenter不会触发冒泡事件不论鼠标指针穿过被选元素或其子元素,都会触发 mouseover 事件。对应mouseout只有在鼠标指针穿过被选元素时,才会触发 mouseenter 事件。对应mouseleave(无冒泡问题)2、hover事件(移进移出切换)$(selector).hover(hand...原创 2020-11-19 15:25:59 · 183 阅读 · 0 评论 -
Jquery中DOM节点的操作
1、删除节点empty和remove的区别empty() 严格地讲,empty()方法并不是删除节点,而是清空节点,它能清空元素中的所有后代节点empty不能删除自己本身这个节点remove()该节点与该节点所包含的所有后代节点将同时被删除;包括绑定的事件及与该元素相关的jQuery数据。可有参数:提供传递一个筛选的表达式,删除指定的元素及事件 $("p").remove(":contains('3')")detach()临时删除页面上的节点,但是又不希望节点上的数据...原创 2020-11-18 15:31:58 · 265 阅读 · 0 评论 -
Jquery 选择器
1、层级选择器1、相邻兄弟选择器选取prev后面的第一个的div兄弟节点$(".prev + div").css("border", "3px groove blue");2、一般相邻选择器选取prev后面的所有的div兄弟节点$(".prev ~ div").css("border", "3px groove blue");...原创 2020-11-06 10:07:03 · 178 阅读 · 0 评论 -
Jquery位置(offset,position,scrollTop/scrollLeft)
1、offset() 获取或设置元素偏移 (1)方法返回被选元素相对于文档的偏移坐标,跟父级没有关系,无论是否定位 (2)方法是一个对象,有2个属性:left、top;offset().top用于获取距离文档顶部的距离 (3)如果括号内加参数,则可以设置偏移offset({top:10,left:30})2、positio() 获取元素偏移 方法用于返回元素相对于带有定位的父级元素偏移坐标,如果父级没有定位,则以文档为准...原创 2020-10-02 09:14:36 · 448 阅读 · 0 评论 -
Jquery事件
一、事件注册1、事件注册:可以绑定多个事件(利用对象的方式) $("div").on({ mouseenter: function() { $(this).css("background", "skyblue"); }, click: function() { $(this).css("background", "purpl原创 2020-10-02 08:41:56 · 142 阅读 · 0 评论 -
Jquery中的对象拷贝
$.extend([deep],target,obj) 把obj拷贝给targetdeep true深拷贝 false 浅拷贝target 要拷贝的对象obj 把内容拷贝给target的对象用法:$.extend(true,targetObj,obj);浅拷贝把原来对象里面的复杂数据类型地址拷贝给目标对象深拷贝把里面的数据完全复制一份给目标对象如果里面有不冲突的属性,会合并到一起...原创 2020-10-02 08:41:45 · 539 阅读 · 0 评论 -
Jquery操作元素(增,删)
1.创建元素varli=$("<li>我是后来创建的li</li>");2、内部添加$("ul").append(li);内部添加并且放到内容的最后面$("ul").prepend(li);内部添加并且放到内容的最前面3、外部添加$(".test").after(div); 添加到后面$(".test").before(div); 添加到前面4、删除元素$("ul").remove();可以删除匹配的元素自杀$("u...原创 2020-09-29 16:02:50 · 89 阅读 · 0 评论 -
Jquery遍历方法
1、遍历DOM元素 $("div").each(function(index,domEle){})index 索引号domEle 每个DOM元素对象,不是Jquery对象2、遍历任何对象,主要用于数据处理,比如数组、对象 $.each(obj,function(index,element){})index 索引号element 遍历内容(每一项)...原创 2020-09-29 14:58:47 · 179 阅读 · 0 评论 -
Jquery实现全选反选
1、根据全选按钮状态决定复选框状态$(".checkall").change(function () { $(".j-checkbox,.checkall").prop("checked", $(this).prop("checked")) })2、当复选框状态发生变化时,判断被选中复选框的数量是否等于复选框的数量;等于则把全选框的状态改为true;反之为false完整代码:$(function () { // 1. 全选 全不选功能模块 // 就原创 2020-09-29 14:00:39 · 474 阅读 · 0 评论 -
Jquery获取设置元素属性
一、元素固有属性1、获取元素属性 prop("属性")$(this).prop("checked")2、设置元素属性 prop("属性",属性值)$("a").prop("title","我们都挺好");二、元素自定义属性1、获取$("div").attr("index")2、设置$("div").attr("index",4);...原创 2020-09-29 09:36:35 · 319 阅读 · 0 评论 -
Jquery------手风琴案例
1、布局<div class="king"> <ul> <li class="current"> <a href="#"> <img src="images/m1.jpg" alt="" class="small"> <img src="images/m.png" alt="" cla.原创 2020-09-29 09:31:51 · 180 阅读 · 0 评论 -
Jquery----下拉菜单(利用滑动效果)
1、普通方法 //鼠标经过 $(".nav>li").mouseover(function() { // $(this) jQuery 当前元素 this不要加引号 // show() 显示元素 hide() 隐藏元素 $(this).children("ul").slideDown(200); });原创 2020-09-29 09:01:42 · 1414 阅读 · 0 评论 -
Jquery效果(使用Jquery时,先在外围$(function () {})
1、显示、隐藏、切换(语法相同)show(speed,easing,fn)speed 速度,可以用已定义的("slow","normal","fast"),也可以用毫秒数1000easing 制定切换效果,默认swing,可以linear匀速fn 回调函数...原创 2020-09-29 08:44:50 · 112 阅读 · 0 评论 -
Jquery样式操作(css与类的操作)
添加类时,原生js会覆盖原先类名;但Jquery的会追加,不会影响以前的类名原创 2020-09-29 08:36:27 · 108 阅读 · 0 评论 -
jQuery----Tab栏切换
使用$("#left li")相当于把所有的li选出来,并且做了隐式迭代,成为了一个数组,原生通过querySelector选择出来的是个伪数组,只有length的属性,并没有数组的方法另外我们可以通过$(this).index()方法获取到当前小li的索引号$("#left li").mouseover(function() { // 2. 得到当前小li 的索引号 var index = $(this).index();原创 2020-09-29 08:27:50 · 180 阅读 · 0 评论 -
jQuery选择器
1、parent() 查找父级$("li").parent()2、children(selector)相当于$("ul>li"),最近一级的所有元素(亲儿子)$("ul").children("li")3、find(selector) 后代选择器(多个)$("ul").find("li")4、siblings(selector) 查找兄弟节点,不包含自己$(".first").siblings("li")...原创 2020-09-29 08:22:24 · 252 阅读 · 0 评论