JavaScript0330笔记

最新推荐文章于 2022-11-16 13:30:56 发布
最新推荐文章于 2022-11-16 13:30:56 发布
阅读量135 收藏
点赞数

1.js二级导航

<html><head>
<style>
	*{margin:0;padding:0}
	#nav{	background-color:#c5cce5; width: 600px; height: 40px; margin: 0 auto;}
	ul{list-style:none}
	ul li{float: left;line-height: 40px;text-align:center;position:relative}
	a{text-decoration:none;color: #78a95c;padding:0 10px;/*width:100px;*/display:block;}
	a:hover{background-color: #78a95c;color:#77e55d}
	ul li ul li{float:none;/*width:100px;*/background-color:#77e55d;margin-top:2px 0;/*display:none;*/}
	ul li ul {/*padding:0;*/ background:#00ff00;position:absolute;left:0px;top:40px;display:none}
	ul li ul a:hover /*li*/{/*display:block;*/background-color:blueviolet}
</style>

<script>
function show(li){
	var ul = li.getElementsByTagName("ul")[0]
	console.log(ul)
	ul.style.display = 'block';

}
function hide(li){
	var ul = li.getElementsByTagName("ul")[0]/*集合。可返回带有指定标签名的对象的集合。*/
	console.log(ul)
	ul.style.display = 'none';


}
</script>
</head>
<body>
<div id="nav">
	<ul>
		<li><a href="#">首页</a></li>
		<li onmouseover="show(this)" onmouseout="hide(this)"><a href="#">10</a>
		<ul>
			<li><a href="#">1</a></li>
			<li><a href="#">2</a></li>
			<li><a href="#">3</a></li>
			<li><a href="#">4</a></li>
		</ul></li>
		<li onmouseover="show(this)" onmouseout="hide(this)"><a href="#">11</a>
		<ul>
			<li><a href="#">12</a></li>
			<li><a href="#">22</a></li>
			<li><a href="#">32</a></li>
			<li><a href="#">42</a></li>
		</ul></li>
		<li><a href="#">首页1</a></li>
		<li><a href="#">首页2</a></li>
	</ul>
</div>
</body>
</html>

2.css 二级导航

<html><head>
<meta charset="UTF-8">
<style>
	*{margin:0;padding:0} 
	#nav{/*background-color:darkgrey;*/width:600px;height:40px;margin:0 auto;}
	ul {list-style:none;}
	/*ul {list-style:none;text-decoration:none;float:left;line-height:20px;text-align:center:position:absolute;}*/
	ul li{float:left;line-height:40px;text-align:center:position:relative;}
	a{text-decoration:none;color: #33b5e5;padding:0 20px;/*width:100px;*/display:block;}
	a:hover{background-color: #78a95c;color:#77e55d}
	ul li ul{position:absolute; top:40px;left:0px; display:none;}
	ul li ul li{float:none;/*width:100px;*/background-color:blueviolet;margin:1px 0;/*display:none;*/}
	ul li ul li a{/*padding:0;*/ background:#00ff00}
	ul li:hover ul /*li*/{display:block;}
</style>
</head><body>
<div id="nav">
	<ul>
		<li><a href="#">1</a><ul>
				<li><a href="#">31</a><!--<ul>
					<li><a href="#">web3</a></li>
					<li><a href="#">web4</a></li>
					<li><a href="#">web5</a></li>
				</ul>--></li>
				<li><a href="#">41</a></li>
				<li><a href="#">51</a></li>

				</ul></li>
		<li><a href="#">2</a>
			<ul><li><a href="#">312</a><!--<ul>
					<li><a href="#">web3</a></li>
					<li><a href="#">web4</a></li>
					<li><a href="#">web5</a></li>
				</ul>--></li>
				<li><a href="#">412</a></li>
				<li><a href="#">512</a></li>

				</ul></li>
		<li><a href="#">3</a><ul>
				<li><a href="#">313</a><!--<ul>
					<li><a href="#">web3</a></li>
					<li><a href="#">web4</a></li>
					<li><a href="#">web5</a></li>
				</ul>--></li>
				<li><a href="#">413</a></li>
				<li><a href="#">513</a></li>

			</ul></li>
		<li><a href="#">4</a><ul>
				<li><a href="#">314</a><!--<ul>
					<li><a href="#">web3</a></li>
					<li><a href="#">web4</a></li>
					<li><a href="#">web5</a></li>
				</ul>--></li>
				<li><a href="#">414</a></li>
				<li><a href="#">514</a></li>

			</ul></li>
		<li><a href="#">5</a><ul>
				<li><a href="#">315</a><!--<ul>
					<li><a href="#">web3</a></li>
					<li><a href="#">web4</a></li>
					<li><a href="#">web5</a></li>
				</ul>--></li>
				<li><a href="#">415</a></li>
				<li><a href="#">515</a></li>

			</ul></li>
	</ul>
</div>
</body></html>

3.jq导入数据库

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-1.8.3.min.js">/*引用库、*/

    </script>

</head>
<body>
<p>asd</p><p>asd</p><p>asd</p>
<span>asdasd</span><span>asdasd</span><span>asdasd</span>
<script>
    var p1= document.getElementsByTagName("p");
    for(var i=0; i<p1.length ;i++){
        p1[i].style.backgroundColor = '#CCC'
        p1[i].style.width = '50px'
        p1[i].style.height = '50px'

    }
    $("a").css({color:"#ff0011",background:"blue"});
    $("span").css("background","red").css('color','blue');
</script>
</body>
</html>

 

Sect Arms灬逍
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jQuery一级菜单和二级菜单
wen0627的博客
05-07 3399
1、先做一级菜单，第一步设置body，把大概样子写出来。 2、第二步-1、用css设置通配符。 3、第二步-2、设置ul标签基础样式 。 4、第二步-3、设置类样式。 5、设置jquery内容的第一步先引入jQuery文件。 6、第二步设置一个函数在里面放入我们要设置成的效果，获取文档在在载入页面是的效果，绑定类设置鼠标移入展示一级菜单内容，鼠标移出隐藏内容。 7、一级菜单的说完了，现在来说二级菜单的内容怎么设置移入显示然后在移入下一个就显示下一个隐藏上一个...
js|jquery实现动态菜单(二级菜单)
清圆cc的博客
06-10 1413
js|jquery实现动态菜单(二级菜单)
jQuery学习：二级菜单
weixin_47295886的博客
11-16 359
对子元素进行操作动画变换。
jquery实现二级菜单
enthan809882的博客
10-27 2522
代码如下： <!DOCTYPE html> <html> <head> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <meta charset="utf-8"> <title></title> <style...
JavaScript笔记03
qq_23175673的博客
05-23 136
1.案例一：在末尾添加节点 第一步：获取到ul标签 第二部：获取到li标签 document.createElement("标签名称")方法 第三步： 创建文本 document.createTextNode("文本内容") 第四步：把文本添加到li下面 使用appendChild()方法 第五步：把li添加到ul末尾 使用appendChild()方法 2.元素对象（element对象） 要操
Javascript笔记大全03
qwq_666的博客
08-14 460
BOM 简介 BOM（Browser Object Model）即浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象使window 区别 DOM 文档对象模型 DOM就是把【文档】当做是一个【对象】来看待 DOM的顶级对象是document DOM主要学习的是操作页面元素 DOM是W3C标准规范 BOM 浏览器对象模型 把【浏览器】当做是一个【对象】来看待 BOM的顶级对象是window BOM学习的是浏览器窗口交互的一些对象 BOM是浏览器厂商在各自浏览器上定义的，兼容性较差
javascript学习笔记
11-24
JavaScript是一种广泛应用于网页和网络应用的编程语言，它在客户端运行，无需专门的编译步骤，而是由浏览器实时解释执行。这种解释型的特性使得JavaScript轻便且灵活，能够快速响应用户交互，提升Web应用程序的动态...
javascript高级 笔记
03-06
这份"javascript高级 笔记"涵盖了从JavaScript基础进阶到高级特性的深入理解，旨在帮助那些已经掌握了JavaScript基础知识的学习者进一步提升技能。 一、JavaScript高级特性 在JavaScript高级阶段，你会接触到许多...
javascript笔记.pdf
11-28
javascript笔记.pdf
jQuery二级下拉菜单
08-28
利用JavaScript中的select标签模仿新浪微博的二级下拉菜单
jquery实现漂亮的二级下拉菜单代码
11-24
本文实例讲述了jquery实现漂亮的二级下拉菜单代码。分享给大家供大家参考。具体如下： 这里介绍一款基于jquery实现的网站下拉菜单，黑色风格，很漂亮，本菜单需要点击主菜单后的小三角符号才下拉出二级菜单，并不是有些菜单，是鼠标移上主菜单的时候就滑过，至于哪一种，就看个人的喜好了 先来看看运行效果： 在线演示地址如下： http://demo.jb51.net/js/2015/jquery-bg-2-level-down-show-menu-codes/ 具体代码如下： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//E
jq实现下拉菜单效果 jq二级菜单效果.zip
06-19
使用jq实现二级菜单效果，jq下拉菜单效果，这个下拉菜单，一般大多数人都选择使用ui框架，但是也有人还是需要jq实现的，写个demo分享给大家
js制作的简易二级菜单
02-13
使用javascript制作简易的二级菜单，比较全面，想制作菜单的不同效果可以修改里面的css样式
Ruffy javascript 学习笔记
10-29
Ruffy javascript 学习笔记
JavaScript-笔记.pdf
11-28
JavaScript-笔记.pdf
JQuery之封装二级菜单
席木木的博客
02-14 726
JQuery封装二级菜单HTML菜单定义Flex布局样式图JQuery-二级菜单展开/闭合实现最终效果对比图 HTML菜单定义     HTML代码定义如下，样式代码可以根据需要自行调整，重点是下面如何编写JQuery代码。 <ul class="nav"> <li class="main-menu"> <a class="active" href="#"><i class="fa fa-user-p
jQuery 简单介绍，二级菜单（HTML+css；JavaScript；jQuery三种实现方式）
qq_43434300的博客
04-03 3052
jQuery简介 jQuery 库可以通过一行简单的标记被添加到网页中。 在您开始学习 jQuery 之前，您应该对以下知识有基本的了解：HTML、CSS、JavaScript。 什么是 jQuery ？ jQuery是一个JavaScript函数库。 jQuery是一个轻量级的"写的少，做的多"的JavaScript库。 jQuery库包含以下功能： HTML 元素选取 HTML 元素操作 C...
分别用css、JS、jQuery实现二级菜单、三级菜单
热门推荐
SmileRM的博客
12-19 1万+
先看一下效果图，再决定是否接着往下看二级菜单的实现，先编写HTML结构<ul class="t1 fl"> <li>一级菜单 <ul class="t2"> <li>二级菜单</li> <li>二级菜单</li> <li>二级菜单</li> </ul> </li> <li>一级菜单 <ul cla
javascript typora笔记
最新发布
09-27
Typora是一款支持JavaScript语言的笔记软件。它提供了强大的编辑功能和良好的用户界面，使得编写和管理笔记变得简单和高效。 首先，Typora支持JavaScript脚本语言，这意味着用户可以使用JavaScript编写自定义功能和...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值