学习jQuery的第一天

最新推荐文章于 2022-04-25 09:03:25 发布

心在飘扬

最新推荐文章于 2022-04-25 09:03:25 发布

阅读量494

点赞数

分类专栏： WEB前端开发

WEB前端开发专栏收录该内容

1 篇文章 0 订阅

订阅专栏

前段时间一直去找前端的实习，想要在实习中去学习新的知识，无奈，投出去的简历不是石沉大海，就是人家说掌握的知识太少。理想是丰满的，现实是残酷的，或许有时就是太高估自己的能力。鄙人自学过html、css、js。自认为前两者学得还不错，js掌握了基本的知识，毕竟也学过其他语言，理解起来大多没问题。可是，经过这几次的经历了看，前端水深、需要掌握的东西还有很多，我掌握的仅仅是冰山一角。以下是某个公司的要求：

1.精通W3C标准及规范，熟练使用DIV+CSS+JavaScript手写页面代码；熟悉jQuery，yui，bootstrap等框架；
2.了解Ajax／DOM／BOM／JSON，具有良好的代码风格、接口设计与程序架构；
3. 能够快速解决各种常用浏览器（IE，FireFox，Chrome，Safari等）的兼容问题，熟悉HTML5，CSS3 为佳；
4.掌握至少一门服务器端编程语言（Java，.net，Ruby，PHP）优先考虑。

希望以此来激励自己要不断学习，机会总会青睐有准备的人。听闻jQuery很久了，但一直没去学习，这次狠下心来慢慢学习、直至能熟练掌握。

第一个实例：一个垂直菜单，当鼠标点击时，显示二级菜单。如下：

实现：

总体的思路就是被点击的那个元素添加current属性，并且将之下被隐藏的元素显示出来。

<!-- jQuery语法-->
$(document).ready(function(){//DOM载入完毕时开始执行的入口
$(".level1 > a").click(function(){//.level1 这个元素的第一个直接子元素被点击时
	$(this).addClass("current") //给被点击的元素添加class属性，为current
	.next().show()//下一个元素显示
	.parent().siblings().children("a").removeClass("current").next().hide();//当前元素的父元素移除current样式并且子元素隐藏
	return false;//不在新窗口显示。
});
});

执行效果：

<span style="font-family: Arial, Helvetica, sans-serif;">上面的$(document).ready( ）类似window.onload，却不尽完全相同。1、window.onload不能同时并列编写多个，只执行了最后一个，而$(document).ready( ）不同，它可以同时并列编写多个，并且都执行。2、$(document).ready( ）有简写形式：等同于$（）；3、执行时机不同。window.onload是等待网页中所有的内容加载完毕（包括图片）才能执行；而$(document).ready( ）仅仅要求网页中的所有DOM结构绘制完毕后执行。</span>

  附加代码：

  css部分：对于a标签的颜色属性color不能通过它的父级元素改变，只能在a上添加。

</pre><pre name="code" class="plain"> <span style="font-family: Arial, Helvetica, sans-serif;">   </span><span style="font-family: Arial, Helvetica, sans-serif;"> </span>

ul,li{
margin:0;
padding:0;
}
/*外部盒子 */
#box{
 list-style-type:none;
 width:960px;
 margin:0 auto;
}
/*外部ul */
.menu{
 width:150px;
 border:1px  solid  #e6e2af;
 font-family:'雅黑';
 font-size:16px;
}
/*外部ul下的li */
.level1{
  list-style-type:none;
  background-color:#002f2f;
  border:1px solid #046380;
}
/*外部ul下的li下的a */
.level1 a{
  text-decoration:none;
  color:#fff;
  font-size:18px;
	
}
/* 外部ul内嵌的ul */
.level2{
  display:none;
  list-style:none;
  background-color:#efecca;
	
}
.level2 li{
  padding-top:6px;
  padding-bottom:6px;
  color:#000;
	
}
.level2 a{
  color:#000;
  font-size:16px;
}
ul .current{
  background-color:#046380;
  display:block;
}

html部分：

<div id="box">
<ul class="menu">
<li class="level1">
<a href="#">衬衫</a>
<ul class="level2">
<li> <a href="#">短袖衬衫1</a></li>
<li> <a href="#">短袖衬衫2</a></li>
<li> <a href="#">短袖衬衫3</a></li>
</ul>
</li>

<li class="level1">
<a href="#">衬衫</a>
<ul class="level2">
<li> <a href="#">短袖衬衫1</a></li>
<li> <a href="#">短袖衬衫2</a></li>
<li> <a href="#">短袖衬衫3</a></li>
</ul>
</li>

<li class="level1">
<a href="#">衬衫</a>
<ul class="level2">
<li> <a href="#">短袖衬衫1</a></li>
<li> <a href="#">短袖衬衫2</a></li>
<li> <a href="#">短袖衬衫3</a></li>
</ul>
</li>

<li class="level1">
<a href="#">衬衫</a>
<ul class="level2">
<li> <a href="#">短袖衬衫1</a></li>
<li> <a href="#">短袖衬衫2</a></li>
<li> <a href="#">短袖衬衫3</a></li>
</ul>
</li>
</ul>
</div>