JQuery学习笔记(一)环境搭建

一、下载jQuery Starterkit(从官网,或者csdn下载)

打开starterkit.html和custom.js这两个文件
starterkit.html中导入了这两个js,选择自己的是Jquery1.2.6还是1.3.2或者更新
<script src="jquery.js" type="text/javascript"></script>
<script src="custom.js" type="text/javascript"></script>
在custom.js中写自己的代码,For Example
jQuery(document).ready(function()
{
// do something here
$("a").click(function()
{
    alert("hello world");
});

});
二、根据API的方法写自己的逻辑
将starterkit中的一个CSS样式red附加到了orderedlist上
$(document).ready(
function()
{
    $("#orderedlist").addClass("red");

});
将所有orderedlist中的li都附加了样式"blue"
$(document).ready(
function()
{
    $("#orderedlist > li").addClass("blue");
});
当把鼠标放在li对象上面和移开时进行样式切换,但只在list的最后一个element上生效
$(document).ready(
function()
{
    $("#orderedlist li:last").hover(
    function()
    {
        $(this).addClass("green");
    },
    function()
    {
        $(this).removeClass("green");
    });
});

Find me:使用选择器和事件,对Element进行迭代
$(document).ready(
function()
{
    $("#orderedlist2").find("li").each(
    function(i)
    {
        $(this).html($(this).html()+"hello"+i);
    });
});

点击Reset链接后,就选择了文档中所有的form元素,并对它们都执行了一次reset()。
$(document).ready(
function()
{
    $("#reset").click(function()
    {
        $("form").each(function()
        {
            this.reset();
        });
    });
});

filter()以过滤表达式来减少不符合的被选择项, not()则用来取消所有符合过滤表达式的被选择项
$(document).ready(
function()
{
    $("li").not("[ul]").css("border","1px solid black");
});

你可能感兴趣的:(html,jquery,css)