您的位置：首页 > Web前端 > JQuery

一、认识jQuery

2015-06-16 19:36 706 查看

JQuery的优势：

轻量级。JQuery采用UglifyJS进行压缩
强大的选择器

出色的DOM操作的封装

可靠的事件处理机制

完善的Ajax

不污染顶级变量

出色的浏览器兼容性

链式操作方式

隐士迭代

行为层与结构层的分离

丰富的插件支持

完善的文档

开源

JQuery入门例子：
$是jQuery的简写形式

$(document).reday(function(){
//...
});

$(function(){
//...
})

DOM对象和jQuery对象简介
DOM：Document ObjectModel 文档对象模型
jQuery对象：是通过jQuery包装DOM对象后产生的对象

jQuery对象和DOM对象的相互转换
1.jQuery对象转换为DOM对象，两种方法：[index]和get(index)
2.DOM对象转换为jQuery对象，只需要用$()把DOM对象包装起来

ps：平时用到的jQuery对象都是通过$()函数制造出来的，$()函数就是一个jQuery对象的制造工厂

问题：
1.导入的jar包

示例：
关键点：$(this)

chidren()

next()

$('#cr').is(':checked')

示例1：
<!DOCTYPEhtml>
<html>
<headlang="en">
    <meta charset="UTF-8">
    <title>jquery实现动态导航</title>
    <script type="text/javascript"src="/resources/js/jquery.min.js"></script>
</head>
<body>
<divclass="box">
    <ul class="menu">
        <li class="level1">
            <a href="#none">衬衫</a>
            <ul class="level2">
                <li><ahref="#none">短袖衬衫</a></li>
                <li><ahref="#none">长袖衬衫</a></li>
                <li><ahref="#none">短袖T恤</a></li>
                <li><ahref="#none">长袖T恤</a></li>
            </ul>
        </li>

        <li class="level1">
            <a href="#none">卫衣</a>
            <ul class="level2">
                <li><ahref="#none">套头卫衣</a></li>
                <li><ahref="#none">开襟卫衣</a></li>
                <li><ahref="#none">童装卫衣</a></li>
                <li><ahref="#none">运动卫衣</a></li>
            </ul>
        </li>

        <li class="level1">
            <a href="#none">裤子</a>
            <ul class="level2">
                <li><ahref="#none">短裤</a></li>
                <li><ahref="#none">长裤</a></li>
                <li><ahref="#none">牛仔裤</a></li>
                <li><ahref="#none">休闲裤</a></li>
            </ul>
        </li>
    </ul>
</div>
</body>

<scripttype="text/javascript">
    $(function(){
       $('.level1 > a').click(function(){
           $(this).addClass('current')
                   .next().show()
                  .parent().siblings().children('a').removeClass('current').next().hide();
           return false;
       });
    });
</script>
</html>

示例2：
<!DOCTYPEhtml>
<html>
<headlang="en">
    <meta charset="UTF-8">
    <title>jquery实现是否接受协议的判断</title>
    <script type="text/javascript"src="/resources/js/jquery.min.js"></script>
</head>
<body>

<divclass="registerDiv">
    <form id="register"action="#" method="post">

用户名：<input type="text"name="username" /><br/>

密码：<input type="password"name="password"/><br/>

邮箱：<input type="text"name="email"/><br/>
        <input type="checkbox"id="cr"/><label for="cr">是否接受注册协议</label><br/>
        <input type="submit"id="registerButton" value="注册"/>
    </form>

</div>
</body>

<scripttype="text/javascript">
    $(function(){
        //点击注册按钮
       $('#registerButton').click(function(){
          if($('#cr').is(":checked")){
               alert("接受注册协议，可以注册");
           }else{
               alert("未接受注册协议，拒绝注册");
           }
       });
    });
</script>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： web js jquery

相关文章推荐

新的分享

章节导航