JavaScript与jQuery在网页交互中的应用-优快云博客

本文链接：https://blog.youkuaiyun.com/jiazhongkai521/article/details/9121349

1）例如左侧边栏点击三角号可以隐藏，再单击可以展开的功能，如果用js来做的话，我会选择用一个hidden来做，hidden文本初始有一个值，当点击之后有一个值（这是为隐藏），然后再点击的时候判断hidden的值是多少，然后再把导航栏打开，但是现在用jquery来做就简单多了，代码如下：

其中：isshow是三角号，即隐藏按钮的id，directions为左侧导航栏的id，

 $(function()
    {
        $("#isshow").click(function()
        {
            if ($("#directions").is(":hidden"))
            {
                $("#directions").show();
                $("#isshow").attr("src", "images/meun_2.jpg")
            }
            else
            {
                $("#directions").hide();
                $("#isshow").attr("src", "images/menu_02.jpg")
            }
        });
    });

上面的is（":hidden") 这个方法是用力判断元素是否被隐藏的，如果被隐藏就显示true否则显示false；

如果是attr("src") 是获取src属性路径，如果是attr（"src","路径") 那么就是为该元素的src赋值。一个是取值一个是赋值。

2）今天看到了jquery的新用法，就是jquery 和传统的function一起使用，这样做的好处是假如你对jquery中的一些方法不是很了解的话，那么你也可以写成传统的js，然后用jquery进行调用同时这样还可以避免页面没有加载完用户就触发特定时间的问题。实例代码如下：

$("#album-list img").mouseover(function () {
animateElement($(this));
});
function animateElement(element) {
element.animate({ height: '+=25', width: '+=25' })
.animate({ height: '-=25', width: '-=25' });
}

其中的传统的function里面我用的是jquery，你也可以换成传统的js来写，都是一样的效果，在此只是举例说明一下。（本人建议最好使用jquery，方便快捷兼容性好）

3）今天看了一下发现jquery中有addClass和removeClass的方法，具体事例代码如下：

$("a").mouseover(function () {
$(this).addClass("highlight");
}).mouseout(function () {
$(this).removeClass("highlight");
});

这两个方法就是为了给文件添加类来使用的即html中的class，我们可以通过class来添加样式，整体代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>生育平台</title>

    <script src="js/jquery.min.js" type="text/javascript"></script>
<style type="text/css">
.lw
{
	border:1px dotted red;
	font-size:20px;
}
</style>
</head>
<body>
    <a href="#">这是超链接</a>

</body>
<script type="text/javascript">
    $(function()
    {
        $("a").mouseover(function()
        {
            $(this).addClass("lw");
        }).mouseout(function()
        {
            $(this).removeClass("lw");
        });
    });
</script>
</html>

3）以前也没太注意，今天尝试了一下js判断文本框是否为空，其中不能判断是否为null，而是要判断是否为"";

如上面的代码一样，我们不能像下面这样使用

if($("#name").val()==null )

{

}

我们要使用下面的方法：

if($("#name").val()=="")

{

}

---------------------------------------------------------未完待续----------------------------------------------------------------------------