- 浏览器中ul和li元素默认情况下文字前都有圆点标识符,li元素会有缩进。Opera浏览器比较特殊,li的标识符和其他浏览器不同。
- list-style属性值为none时,可以清除ul和li前面的小圆点
- 清除子菜单的缩进值,需要padding和margin都为0,其中IE6和IE7只有margin也为0的时候才可以清除缩进值
- 可以使用bakcground-repeat来控制背景图的重复填充方式
- text-decoration属性值为none时,可以取消文字上的下划线
- float的值是left,可以使原本各自位于一行的元素全部在一行中向左浮动
- 在一个包含了多个元素的JQuery对象上执行each方法,可以注册给each方法的那个function的内容被每一个元素执行。同时这个function还可以接收到一个参数,表示这个元素的索引值。JQuery中的很多方法也用到了each
- eq方法可以根据索引值只得到JQuery对象中包含的多个元素中的某一个元素,并仍然返回元素对应的新JQuery对象
- addClass和removeClass方法用于添加和移除元素的class定义
- Javascript中的setTimeout方法可以延时执行某些代码,对应的clearTimeout可以清除设定的延时操作
- cursor属性可以控制元素上的鼠标样式,pointer的属性值表示手型样式,也就是我们常见的链接鼠标样式
- z-index可以控制元素在页面中的层高,值越大就会在页面的层越靠前,也就会覆盖住一些z-index值较低的元素。只有position的值为relative或absolute的元素,z-index才会生效
- JQuery中的load方法十分强大,可以把一个指定的静态,动态页面或服务器端程序输出的数据装入到执行load方法的JQuery对象包装着的元素中
- load方法还支持部分装载,在装入的页面地址后面加空格,然后使用选择器,就可以把页面中符合选择器的部分装入进来
- 被load的页面一定要是UTF-8编码的,否则装入后中文会出现乱码。
- bind可以用于给指定的节点绑定Javascript的事件或JQuery中定义的事件。对于JQuery中没有直接提供注册方法的事件,可以用这种方式注册。方法的第二个参数可以是事件执行的方法定义。
- ajaxStart,ajaxStop对应ajax交互开始前和结束后的事件,给某一个节点注册了这两个事件后,当前页面的ajax交互开始前和结束后,就会执行指定的方法
<style type="text/css">
ul,li{
padding:0px;
margin:0px;
list-style:none;
}
li{
float:left;
background-color:#606F6F;
color:white;
margin-right:2px;
border:2px solid white;
}
div{
clear:left;
background-color:#6E6E6E;
color:white;
width:300px;
height:100px;
padding:10px;
display:none;
}
div.contentTop{
display:block;
}
.liIn{
background-color:#6E6E6E;
border:2px solid #6E6E6E
}
</style>
<script>
$(document).ready(function(){
$("li").each(function(index){
//每个Li都会执行function方法
//index为返回Li的索引值
var timeOut="";
$(this).mouseover(function(){
var menuthis = $(this);
timeOut = setTimeout(function(){
//原来显示的区域隐藏
$("div.contentTop").removeClass("contentTop");
$("li.liIn").removeClass("liIn");
$("div:eq("+index+")").addClass("contentTop");
$(menuthis).addClass("liIn");
},300);
}).mouseout(function(){
clearTimeout(timeOut);
});
});
});
</script>
<ul >
<li class="liIn">
Menu1
</li>
<li>
Menu2
</li>
<li>
Menu3
</li>
</ul>
<div class="contentTop">content1</div>
<div >content2</div>
<div >content3</div>
分享到:
相关推荐
JQuery in Action JQuery实战 JavaScript 学习笔记
王兴魁 《绚丽效果教你做之jQuery实战》 温谦 《精通JavaScript+jQuery》 另外感谢在各大论坛知识分享的热心人! 本资源内容如下: 1、学习开发时的源码 知识点和注释应该是比较全的 2、最后整理的一个文档,可...
近期公司积极组织我们这些开发人员学习进步,督促我们学习更多的技术来...为此我选择了jQuery作为我学习的方向,同时我也是想将我的学习心得分享给大家,以后我会不断的更新一系列jQuery方面的学习纪要,帮助大家学习。
jquery学习笔记及常用函数封装 JQuery1.10.1 jquery-ui.min.js 从JQuery入门 -> 进阶 -> 实战
NULL 博文链接:https://sunyimaying0925-gmail-com.iteye.com/blog/700241
jQuery也正是采用了这样的机制,使jQuery的元素选择能力易常强大。a——选择所有元素#specialID——选择匹配id为specialID的元素.specialClass——选择匹配拥有css类sepcialClass的元素a#specialID.specialClass——...
项目标题:2021年Java SSM框架实战案例:基于jQuery的数据库全操作源码实现 项目概述: 本项目采用Java语言开发,整合了SSM(Spring、SpringMVC、MyBatis)框架,通过前端jQuery技术实现了对数据库的全面操作,包括...
另外本系列文章的大部分知识点来源于图灵出版社的"jQuery实战"一书. 推荐大家购买此书, 是jQuery书籍中的经典之作. 下面让我们开始jQuery之旅. 三.什么是jQuery jQuery是一套Javascript脚本库. 在我的博客中...
本人资源全部免费,更多资源请查看我的上传资源 ================================================ 书 名:JSP & Servlet学习笔记(第2版) ... 译作:《Ajax实战手册》、《jQuery实战手册(第2版)》
云笔记是在吸收了多年的运营数据,经过精确的大数据分析指导需求模型的建立从而实现的,云笔记通过大数据分布式存储解决方案解决了笔记信息量膨胀的问题,并且通过分布式搜索引擎服务以及数据分析推荐平台的建立提升...
译作:《ajax实战手册》、《jquery实战手册(第2版)》 个人网站:http://openhome.cc 目录 《java jdk 7学习笔记》 chapter1 java平台概论 1 1.1 java不只是语言 2 1.1.1 前世今生 2 1.1.2 三大平台 5 ...
11全版本语法(只看了ES6部分)2020.11.6JQueryJQuery笔记JSON与AJAXJSON与AJAX基础2020.10.26NodeNode.js基础2020.9前端框架分类笔记时间Vue《Vue.js实战》附属笔记2020.9ReactReact16.4快速上手前端工程化分类笔记...
九宫格记忆网 ( Java awt+JSP+MySQL+ Javascript+CSS实现)。 最近网络中出现了一种全新的日记方式一一九宫格日记。...本章将以九宫格记忆网为例,介绍如何应用 Java Web+Ajax+ Jquery+ My SQL实现九宫格日记网。
jQuery:jQuery教程(jquery从入门到精通) AJAX:【尚硅谷】3小时Ajax入门到精通 ES6-ES11:Web前端ES6教程,涵盖ES6-ES11 Node.js:2023版Node.js零基础视频教程,nodejs新手到高手 AngularJS:AngularJS实战教程angular....
Jquery许愿墙实战 JS前端开发 JS经典实例 Sublime开发编辑器 SVN版本控制器 手机微信开发 手机微网站开发 无刷新上传图片和文件 Bootstrap前端框架 CSS3样式设计 HTML5网页标签 Javascript前端开发 jQuery前端框架 ...
echarts入门视频、笔记和源码,包括基础的柱状图、折线图和饼形图制作过程等
web开发课程笔记、源码和课程视频,适合自学web、有编程基础...内含:html、css、javascript、jQuery、XML、Tomcat、Servlet、jsp、EL表达式、JSTL标签库、cookie、session、Filter过滤器、json、Ajax请求、项目实战。
课程主要涵盖内容: ajax底层实现原理剖析、 ajax跨域,手写jquery库、 ajax省市联动、 ajax实现搜索联想、 ajax改造oa项目等,课程在理论层面非常深入,使用大量实战案例来进行驱动,能够让大家在欢快愉悦的环境...