jquery的简介

最新推荐文章于 2024-09-14 18:52:56 发布

soyomo

最新推荐文章于 2024-09-14 18:52:56 发布

阅读量122

点赞数

分类专栏： jquery 文章标签： javascript ViewUI

本文链接：https://blog.csdn.net/soyomo/article/details/84883386

版权

jquery 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

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;
    });

是不是如此之简单？