jquery 学习

一、Demo2 

 

<!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=gb2312"/>
    <title>demo2</title>
    <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript" ></script>
    <script type ="text/javascript" >
        $(document).ready(function () {                  //  $(a) 代表选择所有id=“a” 标签的对象; $("a") 代表选择所有a 标签的对象
            $(a).click(function () {
                alert("Hello Word!");
            });
            $("a").click(function () {
                alert("H  Hello word!");
            });

        });
    </script>
</head>
<body>
<a href ="#">A</a><br />
<a href ="#">A</a><br />
<span id="a">id=A</span><br />
<span id="a">id=A</span>
</body>
</html>

 

三、DEMO

 

 

<!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;chartset=gb2312" />
    <title>demo3</title>
    <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
    <script type ="text/javascript" >
        $(document).ready(function () {
            $("#orderedlist").find("li").each(function (i) { 
                $(this).html($(this).html() + " Addhtml" + i);                   //更改html
            });
        });
    </script>
</head>
<body>
 <ol id="orderedlist">
  <li>First element</li>
  <li>Second element</li>
  <li>Third element</li>
 </ol>
</body>
</html>

 

四、demo

 

 

<!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;chartset=gb2312" />
    <title>demo4</title>
    <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
    <script type ="text/javascript" >
        $(document).ready(function (){
            $("a[name]").css("background-color", "red");  //$("a[name]")是指 带有name属性的a标签
            $("a[href *=
http://localhost]").click(function () {
                alert(" 链接地址包含
http://localhost的超链接被选中")
            }
            );
        }); 
    </script>
</head>
<body>
<a name="a1" href="#">带有name的a标签</a> <br/><br/><br/>
<a href="
http://localhost">不带name的a标签</a>
</body>
</html>

五、demo

<!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;chartset=gb2312" />
    <title>demo5</title>
    <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
    <script type ="text/javascript" >
        $(document).ready(function () {
            $('#faq').find('dd').show().end().find('dt').click(function () {
                var answer = $(this).next();
                if (answer.is(':visible'))
                {
                    answer.slideUp();
                } else
                {
                    answer.slideDown();
                }
            });
        });
    </script>
</head>
<body>
<dl id="faq">
  <dt>Question:What shouldn't I do to the bird?</dt>
  <dd>Answer:Never use oils or lotions which contain oils on your bird.</dd>

  <dt>Question:My bird is healthy. I don't need to go to a vet, do I?</dt>
  <dd>Answer:Schedule a "well-bird" checkup. Prevention is the best medicine.</dd>
 
  <dt>Question:My bird's leg is being rubbed raw by the leg band. Can I take it off?</dt>
  <dd>Answer:No.</dd>
 
  <dt>Question:How do I pull a broken blood feather?</dt>
  <dd>Answer:This is probably the most common mishap.</dd>
 </dl>
</body>
</html>

 

 

你可能感兴趣的:(jquery 学习)