ul | 易学教程

理解jquery on 委托事件的机制

阅读更多关于理解jquery on 委托事件的机制

前两天做了一个点击任意位置，都能关闭菜单的功能，因为菜单里面的每一个a,的点击事件都是用on绑定的。所以在阻止冒泡的时候不管用，今天特意来理解一下on的机制 on 是委托事件，利用的就是冒泡原理 $(selector).on(event,[selector],handler); selector 如果为空，表示的就是目标元素就是所选元素，如果有值代表的是符合所选元素的所有后代元素实际上，事件委托的事件处理函数是当被委托的元素上的事件触发时判断e.target后执行，而不是目标元素上的事件被触发后就立即执行，在没有阻止冒泡的情况下，事件还是一层层传播的，只是处理函数在事件到达那一层被触发的问题。根据事件代理的规则，点击li元素后，click事件是从li至ul至ul父元素一层层冒泡上去的，沿途触发各个元素上的事件处理函数。如果我们将事件委托在ul上，调用了stopPropagation，就阻止了事件从ul继续向上冒泡，而不是阻止事件从li向上冒泡。这样从ul开始，ul及其祖先元素上的事件冒泡被阻止。重要说明：如果传递了 selector 参数，那么 on() 函数并不是为当前jQuery对象匹配的元素绑定事件处理函数，而是为它们的后代元素中符合选择器 selector 参数的元素绑定事件处理函数。 on() 函数并不是直接为这些后代元素挨个绑定事件

HTML连载76-正方体和长方体

阅读更多关于 HTML连载76-正方体和长方体

一、如何编辑出一个正方体上后下前的顺序编写，最后在写左右 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>D184_3DTransformCube</title> <style> *{ margin:0; padding:0; } ul{ width: 200px; height: 200px; border: 1px solid black; box-sizing:border-box; margin:100px auto; position:relative; transform: rotateY(0deg) rotateX(0deg); transform-style: preserve-3d;/*转换成一个3D的面*/ } li{ list-style: none; width: 200px; height: 200px; text-align:center; line-height:200px; font-size:60px; position:absolute; } ul li:nth-child(1){ background-color: red; transform:rotateX(90deg) translateZ(100px) ; } ul li:nth

CRM删除数据——24天

阅读更多关于 CRM删除数据——24天

1、在table_objs_change.html文件加上删除按钮： <div class="col-sm-2"> <button type="button" class="btn btn-danger"> <a href="{% url 'table_objs_delete' app_name table_name form_obj.instance.id %}">Delete</a> </button> </div> 2、在urls.py文件中加上url: url(r'^(\w+)/(\w+)/(\d+)/delete/$', views.table_objs_delete, name='table_objs_delete'), 3、新建table_objs_delete.html文件： {% extends "kindadmin/table_index.html"%} {% load tags %} {% block container%} {% display_obj_related obj %} {% endblock%} 4、在view.py文件中返回table_objs_delete.html页面： def table_objs_delete(request,app_name,table_name,obj_id): """ #删除数据 :param request:

Jquery操作DOM

阅读更多关于 Jquery操作DOM

一：Jquery操作DOM节点 1，查找节点 2，创建节点 append() 3,删除节点 remove() 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Jquery操作DOM节点</title> 6 <script type="text/javascript" src="../js/jquery-1.11.0.js"></script> 7 <script type="text/javascript"> 8 $(document).ready(function(){ 9 //查找DOM节点 10 /* var li2=$("ul li:eq(1)"); 11 var li2_txt=li2.text(); 12 alert(li2_txt); */ 13 //添加DOM节点 14 /* var li1=$("<li title='我是马化腾'>马化腾</li>"); 15 var li2=$("<li title='我是李彦宏'>李彦宏</li>") 16 $("ul").append(li1);//在最后面添加 17 var li22=$("ul li:eq(1)");//在第二项之后添加 18 li2.insertAfter(li22); */ 19 //删除DOM节点 20 //

jQuery基础知识笔记（一）

阅读更多关于 jQuery基础知识笔记（一）

jQuery官网： https://jquery.com/ 在线API: https://api.jquery.com/ jQuery UI： https://jqueryui.com/ API:提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码高版本的jQuery不支持IE浏览器，注意匹配 1. 框架库和jQuery介绍 jQuery就是JavaScript语法写的一些函数类，内部仍然是调用JS实现的，所以并不是代替JS。可以说jQuery本身就是一堆JS函数，jQuery就是一个JS的函数库 2. jQuery文件使用（1）为什么要学习jQuery？ DOM中一个简单的功能需要大量的代码；兼容问题很多；代码容错性很差；window.onload也只能有一个（2）jQuery好处：解决浏览器兼容性问题，体积小，链式编程，隐式迭代，插件丰富，开源，免费（例题）点击按钮出现一个蓝色小方块 < script > //Dom中写法 window . onload = function ( ) { document . getElementById ( "btn" ) . onclick = function ( ) { var divObj = document . getElementById ( "dv" ) ; divObj . style .

【锋利的jQuery】学习笔记03

阅读更多关于【锋利的jQuery】学习笔记03

第三章 jQuery中的DOM操作一、DOM操作的分类 DOM(document object model)是一种与浏览器、平台、语言无关的接口，使用该接口可以访问页面中的·所有组件。DOM的操作可以分为DOM Core、HTML-DOM和CSS-DOM。 DOM Core：任意支持DOM的程序设计语言都可以使用。JS中getElementById(),getelementByTagName(),getAttribute()和setAttribute()都是它的组成部分。 HTML-DOM:提供了一些更加简明的记号描述各种Html元素，只能用来处理web文档。eg:document.forms CSS-DOM:是针对CSS的操作，用于获取和设置style对象的各种属性。eg:element.style.color 二、jQueryDOM操作——节点操作查找节点查找元素节点可以直接使用选择器进行查找。 1 var $li=$("ul li:eq(1)"); //获取ul中的第二个li节点 2 var li_text=$li.text(); //获取第二个li元素节点的文本内容 3 alert(li_text); //打印文本内容 2.查找属性节点找到元素节点后，使用attr()方法获取设置元素的属性。attr()方法传入参数为一个时为获取该属性的值

除指定区域外点击任何地方隐藏DIV

阅读更多关于除指定区域外点击任何地方隐藏DIV

<ul> <li><a href="#">主菜单1</a></li> <li><a href="#">主菜单2</a></li> <li class="li-other"> <a href="javascript:;">其他<i class="arrow-down"></i></a> <div class="otherbox"> <ul> <li><a href="#">子菜单1</a></li> <li><a href="#">子菜单2</a></li> </ul> </div> </li> </ul> HTML如上： JQuery如下： $('.li-other').on('mousedown',function(event){ event.stopPropagation();//阻止mousedown 事件冒泡（注意只阻止了mousedown事件） event.preventDefault();//阻止当前元素默认事件 $('.li-other').toggleClass("active"); }); $(document).on('mousedown',function(){ $('.li-other').removeClass("active"); }); 来源： https://www.cnblogs.com/rainy0496/p/12501697.html

由简入繁实现Jquery树状结构

阅读更多关于由简入繁实现Jquery树状结构

由简入繁实现Jquery树状结构　　在项目中，我们经常会需要一些树状结构的样式来显示层级结构等，比如下图的样式，之前在学.net的时候可以直接拖个服务端控件过来直接使用非常方便。但是利用Jquery的一些插件，也是可以实现这些效果的，比如说Jquery.treeview.js插件。　　　　下面就直入主题，开始从简入繁的分析怎么使用treeview插件，从已知的知识开始轻松入手，让树状结构唾手可得。　　　显示树状结构的几个实现步骤：　　一、HTML做初始静态原型。　　首先通过<ul></ul><li></li>展示树状基本结构，还原其最初的样子：　　相信学过一点HTML的同学都可以实现吧，在“tree.html”中写如下代码： <ul> 2 <li>系统管理 3 <ul> 4 <li>部门管理</li> 5 <li>岗位管理 6 <ul> 7 <li>岗位添加</li> 8 <li>岗位删除</li> 9 </ul> 10 </li> 11 <li><用户管理 12 <ul> 13 <li>添加用户</li> 14 <li>修改用户</li> 15 </ul> 16 </li> 17 </ul> 18 </li> 19 <li>审批流转</li> 20 </ul> 我们静态的树形结构的草本如下：　　　　二、加入treeview插件库，实现动态树状结构。　

javascript实现图片滚动

阅读更多关于 javascript实现图片滚动

闲来无事捣鼓了一个原来的js图片滚动首先看看静态页的结构： <body> <a href="javascript: le()">向左</a> <a href="javascript: re()">向右</a> <div id="img"> <ul id="imgul"> <li><img src="img/1.jpg" height="150" width="200"/></li> <li><img src="img/2.jpg" height="150" width="200" /></li> <li><img src="img/3.jpg" height="150" width="200"/></li> <li><img src="img/4.jpg" height="150" width="200"/></li> </ul> </div> </body> 上面两个a标签是控制图片滚动的走向关键是div ul li <img> 的结构 div里面是ul 人后是li 里面是图片img 标签让li 有浮动然后给 div 加一个左右外边距自动在给 div 一个相对定位 ul一个绝对定位大体的布局就差不多了滚动的大体思路就是,通过css定位和js定时器改变ul 的left 属性来实现滚动。下面就是js代码： <!DOCTYPE html PUBLIC "-/

JavaScript事件委托

阅读更多关于 JavaScript事件委托

JavaScript事件委托（事件代理）简单来说就是利用事件冒泡的原理，将原本子元素的事件绑定在父元素上事件委托的优点提升性能，减少事件绑定 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>Document</title> 7 </head> 8 <body> 9 <ul> 10 <li>1</li> 11 <li>2</li> 12 <li>3</li> 13 </ul> 14 </body> 15 <script> 16 //获取ul里的li 17 var lis = document.querySelectorAll('ul li'); 18 //循环绑定li的单击事件 19 for(i=0;i<lis.length;i++){ 20 lis[i].onclick = function(){ 21 //单击每个li分别显示各个li的内容 22 console.log(this.innerText) 23 } 24 } 25 //以上代码是平时我们做事件绑定，而用事件委托的方法只需要给父元素绑定事件 26 //用法: 事件对象

订阅 ul