jQuery 入门笔记1

浏览数：20 / 时间：2015年06月09日

jQuery是一个兼容多浏览器的javascript框架，核心理念是write less,do more(写得更少,做得更多)。

1：jQuery使用

    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){     
            $("#clickme").click(function(){
                alert("Hello, jQuery!");
                }
            );
        });

    </script>

src中的路径可以是自己下载的，也可以用Google或者ie的CDN分发的版本

使用谷歌或微软的 jQuery，有一个很大的优势：

许多用户在访问其他站点时，已经从谷歌或微软加载过 jQuery。所有结果是，当他们访问您的站点时，会从缓存中加载 jQuery，这样可以减少加载时间。同时，大多数 CDN 都可以确保当用户向其请求文件时，会从离用户最近的服务器上返回响应，这样也可以提高加载速度。

2：使用范例及注意事项：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html" charset="utf-8">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script type="text/javascript">
function del(){
    $("#bd").remove();
}
function appendText()
{
var txt1="<p id=‘bd‘>Textbd.</p>";               // 以 HTML 创建新元素
var txt2=$("<p id=‘del‘ onclick=‘del()‘></p>").text("Textdel.");   // 以 jQuery 创建新元素//""之间用‘
var txt3=document.createElement("p");  // 以 DOM 创建新元素
txt3.innerHTML="Text.";
$(".pp").before(txt1,txt2,txt3);         // 追加新元素
}
$(document).ready(function(){
    $("#app").click(function(){
        $("h1,h2").addClass("blue");
        $("#i").addClass("important blue");//多个类之间用空格
    });
    $("#i").click(function(){
        $("h1").toggleClass("blue");
    });
    $("#f").click(function(){
        $("#f").css({"color":"purple","fontSize":"35px"});//一个属性用逗号.css("background-color","yellow");
        alert($("#f").css("color"));
    });
    $("#emp").click(function(){
        $("#emp").empty();
    });
    $("#btn1").click(function(){
        $(".p").prepend("<b>Hello boy </b>.");
    });
    $("#btn2").click(function(){
        $("ol").append("<li>append</li>");
    });
    $("#x").click(function(){
        alert($("#test").val());
        $("#w3s").attr({
        "href" : "http://www.jb51.net/jquery",//查看网页代码没有变，但实际上已经改变，很神奇的一个地方，应该是卸载浏览器内存里面，没有刷新页面
        "title" : "W3School jQuery Tutorial"
      });
    });
    $("#d").click(function(){
        var div=$("#t");
        div.animate({height:‘300px‘,opacity:‘0.4‘},"slow")
        .animate({width:‘300px‘,opacity:‘0.8‘},"slow")
        .animate({height:‘100px‘,opacity:‘0.4‘},"slow")
        .animate({width:‘100px‘,opacity:‘0.8‘},"slow")
        .animate({left:‘+=100px‘},"slow")
        .animate({fontSize:‘3em‘},"slow");
        alert($("#t").html("<b>Hello world!</b>"));
        // $("#t").animate({
        //     left:‘250‘,
        //     opacity:‘0.5‘,
        //     height:‘150px‘,
        //     width:‘toggle‘,
        // });
        
    });
    // $("button").click(function(){
    //     $("p").fadeTo(2000,0.8);
    //     $("#div1").fadeTo();
    //     $("#div2").fadeTo("slow",0.5);
    //     $("#div3").fadeTo(3000,0.1);
    // });
    $(".flip").click(function(){
        $(".panel").slideToggle("slow");
    });
    $("#stop").click(function(){
        $("#t").stop();
    });
});
</script>
<style type="text/css"> 
div.panel,p.flip
{
margin:0px;
padding:5px;
text-align:center;
background:#e5eecc;
border:solid 1px #c3c3c3;
}
div.panel
{
height:120px;
}
.important
{
font-weight:bold;
font-size:xx-large;
}
.blue
{
color:blue;
}
</style>
</head>

<body>
<h1>标题 1</h1>
<h2>标题 2</h2>
<h2 id="f">返回颜色的css</h2>
<div id="i">这是非常重要的文本！</div>
<br>
<button id="app">向元素添加类</button>
<div id="emp" style="height:100px;width:300px;border:1px solid black;background-color:yellow;">
This is some text in the div.
<p>This is a paragraph in the div.</p>
<p>This is another paragraph in the div.</p>
</div>
<p class="pp" onclick="appendText()">This is a paragraph.</p>
<p class="p">This is another paragraph.</p>
<ol>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ol>
<button id="btn1">追加文本</button>
<button id="btn2">追加列表项</button>
<p><a href="file:///C:/Users/Administrator/Desktop/%E6%96%B0%E5%BB%BA%E6%96%87%E6%9C%AC%E6%96%87%E6%A1%A3.HTML" id="w3s">jb51.net</a></p>
<p>姓名：<input type="text" id="test" value="米老鼠"></p>
<button id="x">显示值</button>
<button id="stop">停止滑动</button>
<button id="d">开始动画</button>
<p>默认情况下，所有 HTML 元素的位置都是静态的，并且无法移动。如需对位置进行操作，记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute。</p>
<div style="background:#98bf21;height:100px;width:100px;position:relative;" id="t">python
</div>
<div id="div1" style="width:80px;height:80px;background-color:red;"></div>
<br>
<div id="div2" style="width:80px;height:80px;background-color:green;"></div>
<br>
<div id="div3" style="width:80px;height:80px;background-color:blue;"></div>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Click me</button>
<div class="panel">
<p>W3School - 领先的 Web 技术教程站点</p>
<p>在 W3School，你可以找到你所需要的所有网站建设教程。</p>
</div>
<div class="panel">
<p>W3School - 领先的 Web 技术教程站点</p>
<p>在 W3School，你可以找到你所需要的所有网站建设教程。</p>
</div>
<p class="flip">请点击这里</p>
</body>

</html>