前端攻城狮---jQuery的使用(1)

jQuery

我们为什么要用jQuery？

原生js开发的缺点：

查找元素比较麻烦，方法不多。

操作样式比较麻烦，需要进行iE版本的兼容。

动画麻烦。

HTML节点操作麻烦。

so自从有了jQuery，再也不用担心。

jQuery是DOM编程领域的霸主，简化元素js开发。

jQuery本质上是js，所以可以理解为js的一个库

jQuery可以方便我们兼容问题。

jQuery主要分三个大版本

1.* 主要兼容 IE6 7 8

2.* 不兼容 IE6 7 8

3.* 不兼容 IE6 7 8 但是语法更加简洁（国内用的比较少）

咱这主要使用1.*的jQuery。

jQuery 主要分五个模块来说选择器，DOM操作，动画，事件，扩展。

jQuery初步使用

我们再使用js的时候，是不是需要注意js声明的位置，因为js里的语句是在页面所有资源（图片文件）加载完全后才执行。为了避免这种情况我们通过window.onload方法去保证js的加载。同样在jQuery也需要这么做，jQuery提供了两个方法

$(docment).ready(function(){

.......... 方法一

})

$(function(){

......... 方法二

})

这些入口韩式的作用就等同于window.onload

初探jQuery

我们看到最多的就是$符号，这个符号到底是什么意思呢

$本质是一个函数，参数不一样，对应的功能不一样

$("div") 参数是字符串代表查找所有div元素

$("#btn1") 代表查找id为btn1的元素

还可以通过$将dom对象和jQuery进行互转。

选择器

jQuery支持所有的css1~css3的全部选择器。

ID选择器 $("#id")

class类选择器 $(".class")

标签选择器 $("标签选择器")

交集选择器 $("div,#demo")

并集选择器 $("p.demo")

后代选择器 $("p .demo")

子代选择器 $(".demo>li")

...

jQuery 自带的一些选择器

过滤选择器

$("li:eq(3)") 指定标签为li中的4个，因为下标是从0开始。

$("li:odd") li中所有奇数的li

$("li:even") li中所有偶数的li

筛选选择器

children( ) 获取指定的孩子$(".parent").children(".child")===$(".parent>.child")

find( ) 获取后代指定的元素 $(".parent").find(".child")===$(".parent .child")

siblings( ) 获取除了自己的所有的兄弟$(".demo").siblings("li")

parent( ) 获取改元素的父亲 $(".demo").parent()

eq(index) $(".demo").eq(1) ===$(".demo:eq(1)")

next( ) 下一个兄弟

prev( ) 上一个兄弟

jQuery操作样式属性

* 设置单个样式
$("li:odd").css("backgroundColor","#00f");

* 设置多个样式
$("li:odd").css("backgroundColor","#00f");

$("li:odd").css("fontSize","14px");

或者是

$("li:odd").css({"fontSize":"14px","backgroundColor":"#00f"});

* 获取样式
css("属性")

需要注意是的：如果是获取多个元素的话，那么获取样式只会返回第一个元素的样式。若设置多个元素的属性的话，那么都能设置成功。

*class操作

addClass() 添加类样式

removeClass（）取消类样式

hasClass（）判断是否有这个类样式

toggleClass（）样式切换 $(".demo") toggleClass("demo") 若元素没有demo类样式则设置类样式，有则删除类样式。

index

index属性，在讲闭包的时候，我们遇到了一个问题，就是给一个数组添加方法，方法里面添加个参数，参数表示该方法对应的下标，故用了IIFE和强加变量的方法。在jQuery中，每一个jQuery都有index的参数，它表示的就是下标。

demo

效果图

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	     * {
	     	padding: 0;
	     	margin: 0;
	     }
	     ul {
	     	list-style: none;
	     }
	     .wrap {
	     	width: 330px;
	     	height: 30px;
	     	margin: 100px auto;
	     	padding-left: 10px;
	     }
	     .wrap>ul>li {
	     	float: left;
	     	margin-right: 10px;
	     	position: relative;
	     }
	     .wrap li ul {
	     	 position: absolute;
	     	 top: 30px;
	     	 display: none;
	     }
	</style>
</head>
<body>
	<div class="wrap">
		<ul>
			<li>
				一级菜单栏目
				<ul>
					<li>二级菜单</li>
					<li>二级菜单</li>
					<li>二级菜单</li>
				</ul>
			</li>
			<li>
				一级菜单栏目
				<ul>
					<li>二级菜单</li>
					<li>二级菜单</li>
					<li>二级菜单</li>
				</ul>
			</li>
			<li>
				一级菜单栏目
				<ul>
					<li>二级菜单</li>
					<li>二级菜单</li>
					<li>二级菜单</li>
				</ul>
			</li>
		</ul>
	</div>
    <!--1  引入jquery文件-->
	<script type="text/javascript" src="jquery-1.12.4.js"></script>
	<script type="text/javascript">
         $(function() {
         	 // 1 获取一级菜单
         	 var $lis = $(".wrap>ul>li");
         	 // 2 注册事件  onmouseenter   onmouseout
         	 $lis.mouseover(function() {
                 // 让对应二级菜单显示
                 $(this).css({
                 	"height": '100px'
                 });
                 $(this).children('ul').show();       
         	 });
         	 $lis.mouseout(function() {
         	 	 // 让对应二级菜单隐藏
                  $(this).css({
                 	"height": '30px'
                 });
                 $(this).children('ul').hide();
         	 });
         }); 
	</script>
</body>
</html>

jQuery基本使用讲完已讲完，接下来会来讲jquery的动画和节点的操作，如有表达错的请谅解，并请提出指出，且修改错误，望能共同进步。