jquery学习第一天

简介: 1.helloworld jquery one //第一个jquery练习,弹出对话框hello world!; $(document).
1.helloworld

<html>
    <head>
        <title>jquery one</title>
        <script type="text/javascript" src="../js/jquery.js"></script>
        <script type="text/javascript">
            //第一个jquery练习,弹出对话框hello world!;
            $(document).ready(function(){
                    alert("hello world!");
                });
        </script>
    </head>    
    <body>
        
    </body>
</html>

2.a.html
<!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 type="text/javascript" src="../js/jquery.js" ></script>
<script>
$(document).ready(function(){
    $(".has_children").click(function(){
        $(this).addClass("highlight")
        .children("a").show().end()
        .siblings().removeClass("highlight")
        .children("a").hide();    
    })
    
})
    
</script>
<style>
    #menu{width:300px;}
    .has_children{background:#555;color:#fff;cursor:pointer;}
    .highlight{color:#fff;backgounrd:green;}
    div{padding:0;magin:10px 0;}
    div a{background:#888;display:none;float:left;width:300px;}
</style>
</head>
    <div id="menu">
        <div class="has_children">
            <span>第一章-知识</span>
            <a>1.1-javascript和javascript库</a>
            <a>1.2-加入jquery</a>
            <a>1.3-编写简单jquery代码</a>
            <a>1.4-jquery对象和DOM对象</a>
            <a>1.5-解决jquery和其他库的冲突</a>
            <a>1.6-jquery开发工具和插件</a>
            <a>1.7-小结</a>
        </div>
        <div class="has_children">
            <span>第二章-知识</span>
            <a>2.1-javascript和javascript库</a>
            <a>2.2-加入jquery</a>
            <a>2.3-编写简单jquery代码</a>
            <a>2.4-jquery对象和DOM对象</a>
            <a>2.6-jquery开发工具和插件</a>
            <a>2.7-小结</a>
        </div>
        <div class="has_children">
            <span>第三章-知识</span>
            <a>3.1-javascript和javascript库</a>
            <a>3.2-加入jquery</a>
            <a>3.3-编写简单jquery代码</a>
            <a>3.6-jquery开发工具和插件</a>
            <a>3.7-小结</a>
        </div>
    </div>


<body>
</body>

b.html </html>
<!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>juqery转化为DOM</title>
<script type="text/javascript" src="../js/jquery.js" ></script>
<script>
    /*
    $(document).ready(function(){
        var $cr=$("#cr");
        var cr=$cr[0]; //或者cr=$cr.get(0);
        $cr.click(function(){
            if(cr.checked){
                alert("感谢你的支持,你可以继续操作了!");
            }    
        })    
    })
    */
    
    $(document).ready(function(){
        var $cr=$("#cr");
        $cr.click(function(){
            if($cr.is("checked")){
                alert("感谢你的支持,你可以继续操作了!");
            }    
        })    
    })
    
</script>
</head>
    <input type="checkbox" id="cr" /><label for="cr" >我已经阅读了上面的制度</label>
<body>
</body>
</html>


 

目录
相关文章
|
5月前
|
JavaScript 前端开发 CDN
jQuery学习记录--jQuery语法,选择器,事件及hide(),show(), toggle()
本文是关于jQuery的学习笔记,涵盖了jQuery的简介、语法、选择器、事件处理以及hide()、show()、toggle()等方法的使用。
jQuery学习记录--jQuery语法,选择器,事件及hide(),show(), toggle()
|
8月前
|
开发框架 JavaScript 前端开发
技术经验解读:从零开始学习jQuery(十)jQueryUI常用功能实战
技术经验解读:从零开始学习jQuery(十)jQueryUI常用功能实战
67 0
|
9月前
|
JavaScript 前端开发 索引
jQuery学习教程,写更少的代码,做更多的事情(二)
jQuery学习教程,写更少的代码,做更多的事情(二)
|
9月前
|
XML JavaScript 前端开发
JavaScript学习 -- jQuery库
JavaScript学习 -- jQuery库
99 0
|
9月前
|
JavaScript 前端开发 数据安全/隐私保护
jQuery选择器-第2次课-大部分跟CSS3选择器类似-几乎没有学习成本-附案例-作业等
jQuery选择器-第2次课-大部分跟CSS3选择器类似-几乎没有学习成本-附案例-作业等
49 0
|
9月前
|
JavaScript 前端开发 API
jquery是什么-是否还有必要学-与JS的区别-学习技巧-文末附资料、案例、作业
jquery是什么-是否还有必要学-与JS的区别-学习技巧-文末附资料、案例、作业
121 0
|
JavaScript
【jQuery学习】—实现弹幕效果
【jQuery学习】—实现弹幕效果
|
JavaScript
【jQuery学习】—jQuery对象的访问
【jQuery学习】—jQuery对象的访问
|
JavaScript 前端开发
【jQuery学习】—jQuery操作CSS和表格
【jQuery学习】—jQuery操作CSS和表格
|
JavaScript 容器
【jQuery学习】—jQuery操作元素位置
【jQuery学习】—jQuery操作元素位置