jquery的简介

jquery是一个js库。

<head>
<script type="text/javascript" src="../scripts/jquery.js"></script>//这句话是在往你的网页中添加jquery;并且只能在head标签里面。src的值是jquery.js的存储路径，每个人不一样,我的scripts的文件夹中。
</head>

既然有路径的话，就需要你去下载jquery了，直接去官网下载就可以。除了从本地来引入还可以：

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js">
</script>//这是从microsoft引入jquery
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js">
</script>//这是从google来引入jquery。

//通过 jQuery，您可以选取（查询，query） HTML 元素，并对它们执行“操作”（actions）。
//介绍一些基本的语法。
$(selector).action()//$美元符号就相当于jQuery，selector查询和选择html的元素，action是所需要执行的操作。
$(this).hide()//隐藏当前元素
$("p").hide()//隐藏所有段落
$(".test").hide()//隐藏所有 class="test" 的所有元素
$("#test").hide()//隐藏所有 id="test" 的元素

下面是选择器的部分：其实选择器用的好坏在于怎么利索的选中你想要的html元素。它可以使用css的选择器，也可以使用XPath 表达式。
jQuery是一个专门处理事件的，

//一些例子
$(document).ready(function)//当文档加载完毕之后执行的操作
$(selector).click(function)//单击选择元素时进行的操作
$(selector).dblclick(function)//双击选择元素时进行的操作
$(selector).focus(function)//获得焦点选择元素时进行的操作
$(selector).mouseover(function)//鼠标悬停选择元素时进行的操作

下面我用导航栏的例子来说明jquery的方便：

<html>
    <head>
    </head>
    <body>
        <div class="box">
            <ul class="menu">
                <li class="level1">
                    <a href="#none">衬衫</a>
                    <ul class="level2">
                        <li><a href="#none">短袖衬衫</a></li>
                        <li><a href="#none">长袖衬衫</a></li>
                        <li><a href="#none">短袖T恤</a></li>
                        <li><a href="#none">长袖T恤</a></li>
                    </ul>
                </li>
                <li class="level1">
                    <a href="#none">卫衣</a>
                <ul class="level2">
                    <li><a href="#none">开襟卫衣</a></li>
                    <li><a href="#none">头套卫衣</a></li>
                    <li><a href="#none">运动卫衣</a></li>
                    <li><a href="#none">童装卫衣</a></li>
                </ul>
                </li>
            </ul>
        </div>
    </body>
</html>

其实这就是一个简单的小项目，要求做一个类似的导航栏而已，点击不同的商品名称的链接，显示相应的内容，同时高亮显示当前选择的商品。但是用html来看的化你会发现会做很多无用工，重复很多内容。如果换成jquery来的话就简单的一句话：

$(".level1">a).click(function)(){//当点击被选择对象：".level1">a时执行以下操作
    $(this).addClass("current")//给当前的元素添加”current“样式
    .next().show()//下一个元素显示
    .parent().siblings().children("a").removeClass("current")//父元素的同辈元素的子元素<a>移除”current“样式
    .next().hide();//它们的下一个元素隐藏
    return false;
    });

是不是如此之简单？

猜你喜欢