div | 易学教程

jqury中$("#div").index($this)在setTimeoutt中返回值一直是-1的问题解决方案

阅读更多关于 jqury中$("#div").index($this)在setTimeoutt中返回值一直是-1的问题解决方案

今天遇到一个十分蛋疼的问题，花了我一个多小时才解决，其实十分简单，但我是新手，好了，事情是这样的：我想让鼠标停留在某个元素一定时间再显示它隐藏的内容（不然你鼠标快速滑上滑下，反反复复，如果碰上slideDown(),会让电脑反应不过来的），刚开始代码如下： var tid = 0; $( ".header_middle ul li" ).hover( function() { tid = setTimeout( function() { $(".hm_con_1 ").slideDown(250); var $t=$(this); var $t_index=$t.index(); $(".hm_con_1 ul ").hide().eq($t_index).show(); }, 100 ); }, function() { clearTimeout( tid );//当在1秒内退出了hover事件就取消计时代码 } ); $(".content1").mouseover(function () { $(".hm_con_1").slideUp(250); }) $(".header,.menu,.top").mouseover(function (e) { if ($(e.target).closest(".header_middle ul li").length === 0)

如何让DIV水平和垂直居中

阅读更多关于如何让DIV水平和垂直居中

我们在设计页面的时候，经常要把DIV居中显示，而且是相对页面窗口水平和垂直方向居中显示，如让登录窗口居中显示。我们传统解决的办法是用纯CSS来让DIV居中。在本文中，我将给大家讲述如何用CSS和jQuery两种方法让DIV水平和垂直居中。 CSS让DIV水平居中说明，本文中所指的DIV包括HTML页面中所有的元素。让一个DIV水平居中，直接用CSS就可以做到。只要设置了DIV的宽度，然后使用margin设置边距0 auto，CSS自动算出左右边距，使得DIV居中。 .mydiv{ margin:0 auto; width:300px; height:200px; } 但是如果要使DIV垂直方向也居中，恐怕CSS需要修改了。 CSS实现水平和垂直居中要让DIV水平和垂直居中，必需知道该DIV得宽度和高度，然后设置位置为绝对位置，距离页面窗口左边框和上边框的距离设置为50%，这个50%就是指页面窗口的宽度和高度的50%，最后将该DIV分别左移和上移，左移和上移的大小就是该DIV宽度和高度的一半。 .mydiv{ width:300px; height:200px; position:absolute; left:50%; top:50%; margin:-100px 0 0 -150px } 该方法使用普遍，但是前提是必需设置DIV的宽度和高度。如果当页面DIV宽度和高度是动态的

在p标签里面不能嵌套ul、div等块级元素

阅读更多关于在p标签里面不能嵌套ul、div等块级元素

在p标签里面不能嵌套ul、div等块级元素显示结果为：在ul元素的前后都加上了兄弟元素p 不可自由嵌套的元素就是里面只能放内联元素的有：标题标记的<h1~6>、<caption>；段落标记的<p>；分隔线<hr> 一个特别的元素 (它只存在于列表元素的子一级)。 <ul>、<ol>、<dl>、<table>，它们的子一层必须是指定元素， <ul>、<ol>的子一级必须是<li>； <dl>的子一级必须是<dt>或者<dd>； <table>的子一级必须是<caption> 或<thead>、<tfoot>、<tbody>等，而再子一级必须是<tr> 注： <tr>只存在于<thead>、<tfoot>、<tbody>中，之后才是可放内容的<td>或者<th> 居中的一种方式来源： https://www.cnblogs.com/panghu123/p/11677350.html

原生js实现div随鼠标移动效果

阅读更多关于原生js实现div随鼠标移动效果

原生js实例demos: http://pandoraui.github.io/learning-javascript/lesson2/10.html 原生js常用事件：当网页加载时候： onload和onunload事件 <body onload ="checkCookies()"> 或者window.οnlοad=function(){} 当图像加载的时候：当鼠标移动到元素上时候\当鼠标移除元素的时候： onmouseover ommousein ommouseout <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> </head> <body> <div οnmοuseοver="mOver(this)" οnmοuseοut="mOut(this)" style="background-color:#D94A38;width:120px;height:20px;padding:40px;">Mouse Over Me</div> <script> function mOver(obj){ obj.innerHTML="Thank You" } function mOut(obj){ obj.innerHTML="Mouse Over Me" } <

div增加class

阅读更多关于 div增加class

函数封装写法 function (obj,str){ var _str=obj.setAttribute("class");//获取原有的class var ok=_str+" "+str;//加上需要使用的class obj.setAttribute("class",ok)//设置class } 来源： https://www.cnblogs.com/aaaaap/p/11693373.html

肆拾叁--Jquery

阅读更多关于肆拾叁--Jquery

Jquery 一、Jquery简介 jQuery是一个轻量级的、兼容多浏览器的JavaScript库。能使用户能够更方便地处理HTML Document、Events、实现动画效果、方便地进行Ajax交互，能够极大地简化JavaScript编程。它的宗旨就是：“Write less, do more.“ 特点：一款轻量级的JS框架。jQuery核心js文件才几十kb，不会影响页面加载速度。丰富的DOM选择器,jQuery的选择器用起来很方便，比如要找到某个DOM对象的相邻元素，JS可能要写好几行代码，而jQuery一行代码就搞定了，再比如要将一个表格的隔行变色，jQuery也是一行代码搞定。链式表达式。jQuery的链式操作可以把多个操作写在一行代码里，更加简洁。事件、样式、动画支持。jQuery还简化了js操作css的代码，并且代码的可读性也比js要强。 Ajax操作支持。jQuery简化了AJAX操作，后端只需返回一个JSON格式的字符串就能完成与前端的通信。跨浏览器兼容。jQuery基本兼容了现在主流的浏览器，不用再为浏览器的兼容问题而伤透脑筋。插件扩展开发。jQuery有着丰富的第三方的插件，例如：树形菜单、日期控件、图片切换插件、弹出窗口等等基本前端页面上的组件都有对应插件，并且用jQuery插件做出来的效果很炫，并且可以根据自己需要去改写和封装插件

07 前端--JQuery

阅读更多关于 07 前端--JQuery

目录一、JQuery介绍二、JQuery的优势三、JQuery 内容四、JQuery对象五、JQuery创建对象六、JQuery的基础语法 6.1 基本元素选择器 6.2 基本元素筛选器七、属性选择器八、筛选器方法 8.1 查找(find) 8.2 筛选(filter) 九、表单元素选择器十、表单对象属性十一、操作标签 11.1 样式操作(CSS) 11.2 位置操作 11.3 尺寸操作 11.4 文本操作 11.5 属性操作 11.6 porp和attr的区别 11.7 文档处理十二、事件 12.1 常用事件 12.2 事件绑定 12.3 移出事件 12.4 阻止后续事件执行 12.5 组织事件冒泡 12.6 页面加载 12.7 JQ页面加载DOM页面加载的区别 12.8 事件委托十三、动画效果十四、each 一、JQuery介绍 jQuery是一个轻量级的、兼容多浏览器的JavaScript库。 jQuery使用户能够更方便地处理HTML Document、Events、实现动画效果、方便地进行Ajax交互，能够极大地简化JavaScript编程。它的宗旨就是：“Write less, do more.“ 二、JQuery的优势一款轻量级的JS框架。jQuery核心js文件才几十kb，不会影响页面加载速度。丰富的DOM选择器

006 前端基础之Jquery

阅读更多关于 006 前端基础之Jquery

前端之CSS

阅读更多关于前端之CSS

一 CSS介绍　　CSS（ C ascading S tyle S heet，层叠样式表)定义如何显示 HTML元素，给HTML设置样式，让它更加美观。　　当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化（渲染）。二 CSS语法 2.1CSS实例　每个CSS样式由两个组成部分：选择器和声明。声明又包括属性和属性值。每个声明之后用分号结束。　　　　　　 2.2CSS注释 1 /*这是注释*/ 三 CSS的几种引入方式 3.1行内样式　　行内式是在标记的style属性中设定CSS样式。不推荐大规模使用。 1 <p style="color: red">Hello world.</p> 3.2内部样式　　嵌入式是将CSS样式集中写在网页的<head></head>标签对的<style></style>标签对中。格式如下： 1 <head> 2 <meta charset="UTF-8"> 3 <title>Title</title> 4 <style> 5 p{ 6 background-color: #2b99ff; 7 } 8 </style> 9 </head> 3.3外部样式　　外部样式就是将css写在一个单独的文件中，然后在页面进行引入即可。推荐使用此方式。 1 <link href="mystyle.css" rel="stylesheet"

对于div里面内容过大根据长度或者宽度进行适配，然后可以滚轮缩放的功能

阅读更多关于对于div里面内容过大根据长度或者宽度进行适配，然后可以滚轮缩放的功能

在做3000的项目中，因为页面的svg很大，但是做的只是适配电脑，打开肯定是看不全的，要看全就必须进行滚动，可是客户提出了将页面放在电视机上面，用电视输入网址直接访问，这样问题就来了，电视上怎么进行滚动呢所以新增需求 1、页面根据不同尺寸的设置进行适配 2、确保页面内容可以全部查看完整 3、可以进行滚轮滚动缩放实例 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <title>Document</title> <style type="text/css"> html,body{ width:100%; height:100%; overflow:hidden; padding:0; margin:0; } #big{ overflow:auto; width:100%; height:100% } #content{ width:3000px; height:2000px; background-color

订阅 div