JQuery tutorial –set up and retrive — Part 1

1. Set up

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;
<html xmlns=”http://www.w3.org/1999/xhtml”&gt;
<head>
<title>First jQuery-Enabled Page</title>
<script src=”//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js”></script>
<script type=”text/javascript”>
$(“document”).ready(function() {
alert(“The page just loaded!”);
});
</script>
</head>
<body>

</body>
</html>

2.basic retrieving

$("document").ready(function() {
        //$("p[class]").css("border", "3px solid red"); // paragraph has define class
        //$("p[id=para1]").css("border", "3px solid red");//paragraph has id named para1
        //$("p[id^=para]").css("border", "3px solid red");//paragraph has id name start with para
        //$("p[id^=para][lang*=en-]").css("border", "3px solid red");//paragraph has id name started with para //and has attribute lang follow with anything or not and = en- 
     $("li a[href$='.pdf']").after("");
//li has a and end with .pdf then add a img to it
//$("p:first").css("border", "3px solid red");
        //$("p:last").css("border", "3px solid red");
        //$("p:even").css("border", "3px solid red");
        //$("p:odd").css("border", "3px solid red");
        //$(".a:first").css("border", "3px solid red");
        //$(".b:even").css("border", "3px solid red");
        //$("p:gt(1)").css("border","3px solid red");
        //$("p:not(p:eq(2))").css("border", "3px solid red");
        //$("p").css("border", "3px solid red");
        //$(".a").css("border", "3px solid red");
        //$("#list1").css("border", "3px solid red");
        //$("p.b").css("border", "3px solid red");
        //$("p:contains(3)").css("border", "3px solid red");
        //$("p:parent").css("border", "3px solid red");
        //$("ul:has(li[class=a])").css("border", "3px solid red");
        //$("ul li:nth-child(3)").css("border", "3px solid red");
        //$("ul li:nth-child(2n)").css("border", "3px solid red");
        //$("form :input").css("border", "3px solid red");
        //$("form :text").css("border", "3px solid red");
        //$("form :text:enabled").css("border", "3px solid red");
        //$("form :checked").css("border", "3px solid red");
        //$("form :checkbox:checked").css("border", "3px solid red");
        //$("p,li.b").css("border", "3px solid red");
        //$("ul li.a").css("border", "3px solid red");
        //$("ul + p").css("border", "3px solid red");
        //$("#list1 ~ p").css("border", "3px solid red");
       // Inspect the length and size() of a result set
        alert("There are " + $("p").length + "elements");

        // use the get() and get(index) to retrieve DOM elements
        var elems = $("li").get();
        alert("There are " + elems.length + "tags");
        alert($("li").get(0));

        // use the find function
        $("ul").find("li.b").css("border", "3px solid red");

        // use the each function
        var leftmargin = 0;
        var border = 3;
        $("p").each(function() {
            $(this).css("border", border+"px solid red");
            $(this).css("margin-left", leftmargin);
            border += 2;
            leftmargin += 10;
        });

    });
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s