wangflood

精心维护一个技术blog,为了工作,也是爱好。

  BlogJava :: 首页 :: 联系 :: 聚合  :: 管理
  14 Posts :: 19 Stories :: 8 Comments :: 0 Trackbacks
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
<script type="text/javascript" src="lib/jquery-1.5.2.js"></script>
<style type="text/css">
.red 
{
    background-color
: red;
}

.green 
{
    background
: green;
}
</style>
<script type="text/javascript">
    $(
function() {
        
//以元素在html文档中出现的顺序来排序。而不是简单的添加。
        //$("p").add("span").addClass("green");
        //动态生成一个元素添加至匹配的元素中。
        /*
        $("p").add("<span>second</span>").text(function(index, html) {
            alert(html);//打印Hello,second
        });
         
*/

        $(
"div>p").add(document.getElementById("a")).html(function(index,html){
        alert(html);
        });
    });
</script>
</head>
<body>
    
<p>Hello</p>
    
<span>Hello Again</span>
    
<div>
        
<p>Hello</p>
        
<p>
            
<span id="a">Hello Again</span>
        
</p>
    
</div>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
<script type="text/javascript" src="lib/jquery-1.5.2.js"></script>
<style type="text/css">
.red 
{
    background-color
: red;
}

.green 
{
    background
: green;
}
</style>
<script type="text/javascript">
    $(
function() {
        
//取得一个包含元素集合中的每一个元素的的所有子元素的元素集合。
        $(".one").children().hover(function() {
            $(
this).addClass("green");
        });

        
/*
        $("div").children(".selected").html(function() {
        alert($(this).text());
        });
         
*/
        
/*
         $(document).bind("click", function(e) {
         $(e.target).closest("li").toggleClass("green");
         });
         
*/

    });
</script>
</head>
<body>
    
<p>Hello</p>
    
<div class="one">
        
<span><font>Hello Again</font> </span>
        
<p>I love</p>
        
<div class="two">two</div>
        
<div class="three">three</div>
    
</div>
    
<p>And Again</p>

    
<div>
        
<span>Hello</span>
        
<class="selected">Hello Again</p>
        
<p>And Again</p>
    
</div>
    
<ul>
        
<li><b>Click me!</b></li>
        
<li>You can also <b>Click me!</b></li>
    
</ul>

</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
<script type="text/javascript" src="lib/jquery-1.5.2.js"></script>
<style type="text/css">
.red 
{
    background-color
: red;
}

.green 
{
    background
: green;
}
</style>
<script type="text/javascript">
    $(
function() {
        
//查找匹配元素内部所有子节点,如果不iframe,则查找文档内容。
        //find()搜索与指定表达式匹配的元素。一般用来找出正在处理元素的 后代元素。
        //$("p").contents().not("[nodeType=1]").wrap("<b/>");
        $("iframe").contents().find("body").append("I'm in an iframe!");
    });
</script>
</head>
<body>
    
<p>
        Hello 
<href="http://ejohn.org/">John</a>, how are you doing?
    
</p>
    
<iframe src="/demo.html" width="300" height="100"></iframe>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
<script type="text/javascript" src="lib/jquery-1.5.2.js"></script>
<style type="text/css">
.red 
{
    background-color
: red;
}

.green 
{
    background
: green;
}
</style>
<script type="text/javascript">
    $(
function() {
        
//查找当前元素之后 的所有元素,直到遇到匹配的那个元素为止。
        //$("#term-2").nextUntil("dt").addClass("green");
        //$("#term-2").parent();//所有匹配元素的唯 一父元素的元素集合。
        //$("#term-2").parents();//所有匹配元素的祖 先元素的元素集合(不含根元素。)
        //匹配所有元素的同级的前一个元素的集合。
        $("p").prev();
        
//包含匹配元素集合中每个元素的所有唯一同辈元素的元素集合。
        $("p").siblings();

    });
</script>
</head>
<body>
    
<dl>
        
<dt>term 1</dt>
        
<dd>definition 1-a</dd>
        
<dd>definition 1-b</dd>
        
<dd>definition 1-c</dd>
        
<dd>definition 1-d</dd>


        
<dt id="term-2">term 2</dt>
        
<dd>definition 2-a</dd>
        
<dd>definition 2-b</dd>
        
<dd>definition 2-c</dd>


        
<dt>term 3</dt>
        
<dd>definition 3-a</dd>
        
<dd>definition 3-b</dd>
    
</dl>

    
<p>Hello</p>
    
<div>
        
<span>Hello Again</span>
    
</div>
    
<p>And Again</p>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
<script type="text/javascript" src="lib/jquery-1.5.2.js"></script>
<style type="text/css">
.red 
{
    background-color
: red;
}

.green 
{
    background
: green;
}
</style>

<script type="text/javascript">
    $(
function() {
        
//even双数的意思
        //匹配父元素下第N个子或奇偶元素nth-child()从1开始。
        //$("ul li:nth-child(2)").addClass("green");
        //$("ul li:nth-child(even)").addClass("green");
        //$("ul li:nth-child(odd)").addClass("green");
        //$("ul li:nth-child(3n+1)").addClass("green");

        
//匹配第一个子元素。如果父元素是集合的话,那么将为每一个父元素匹配第一个子元素。
        //$("ul li:first-child").addClass("green");
        //$("ul li:last-child").addClass("green");
        $("ul li:only-child").addClass("green");
    });
</script>
</head>
<body>
    
<ul>
        
<li>John</li>
        
<li>Karl</li>
        
<li>Brandon</li>
    
</ul>
    
<ul>
        
<li>Glen</li>
        
<li>Tane</li>
        
<li>Ralph</li>
    
</ul>
    
<ul>
        
<li>Glen</li>
    
</ul>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
<script type="text/javascript" src="lib/jquery-1.5.2.js"></script>
<style type="text/css">
.red 
{
    background-color
: red;
}

.green 
{
    background
: green;
}
</style>

<script type="text/javascript">
    $(
function() {
        
//匹配所有input textarea,select button元素。
        //$(":input").addClass("green");
        //匹配所有<input type="text"/>
        //$(":text").addClass("green");
        //<input type="password" />
        //$(":password").addClass("green");
        //<input type="radio" />
        //$(":radio").addClass("green");
        //<input type="checkbox" />
        //$(":checkbox").addClass("green");
        //<input type="submit" />
        //$(":submit").addClass("green");
        //<input type="image" /> 
        //$(":image").addClass("green");
        //<input type="reset" />
        //$(":reset").addClass("green");
        //<input type="button" />  <button></button>
        //$(":button").addClass("green");
        //<input type="file" />
        //$(":file").addClass("green");
        //不知道怎么测试
        //$("input:hidden")

    });
</script>
</head>
<body>
    
<form>
        
<input type="text" /> <input type="checkbox" /> <input type="radio" />
        
<input type="image" /> <input type="file" /> <input type="submit" />
        
<input type="reset" /> <input type="password" /> <input
            
type="button" /> <select><option />
        
</select>
        
<textarea></textarea>
        
<button></button>
        
<input type="text" name="email" /> <input type="hidden" name="id" />

    
</form>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
<script type="text/javascript" src="lib/jquery-1.5.2.js"></script>
<style type="text/css">
.red 
{
    background-color
: red;
}

.green 
{
    background
: green;
}
</style>

<script type="text/javascript">
    $(
function() {
        
//[ <input name="id" /> ] 
        //$("input:enabled").addClass("green");
        //<input name="email" disabled="disabled" /> 
        //$("input:disabled").addClass("green");
        //$("input:checked").addClass("green");
        /*
        $(":checkbox").click(function() {
            $("input:checked").addClass("green");
            $("input:not(:checked)").removeClass("green");
        });
         
*/
        $(
"select option:selected").addClass("green");
    });
</script>
</head>
<body>
    
<form>
        
<input name="email" disabled="disabled" /> <input name="id" /> <input
            
type="checkbox" name="newsletter" checked="checked" value="Daily" />
        
<input type="checkbox" name="newsletter" value="Weekly" /> <input
            
type="checkbox" name="newsletter" checked="checked" value="Monthly" />
        
<select>
            
<option value="1">Flowers</option>
            
<option value="2" selected="selected">Gardens</option>
            
<option value="3">Trees</option>
        
</select>
    
</form>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
<script type="text/javascript" src="lib/jquery-1.5.2.js"></script>
<style type="text/css">
.red 
{
    background-color
: red;
}

.green 
{
    background
: green;
}
</style>
<script type="text/javascript">
    $(
function() {
        
//选取所有div,以及内部的p
        $("div").find("p").andSelf().addClass("green");
        $(
"div").find("p").end();//回到$("div");
    });
</script>
</head>
<body>
    
<div>
        
<p>First Paragraph</p>
        
<p>Second Paragraph</p>
    
</div>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
<script type="text/javascript" src="lib/jquery-1.5.2.js"></script>
<script type="text/javascript">
    $(
function() {
        
//取得第一个匹配元素的属性值。如果没有相应的属性值,返回#ff0000
        //alert($("img").attr("src"));

        
//img alt表示图像不无法显示时的替代文本。
        //将一个k-v形式的对象设置为所有匹配元素的属性。
        /*
        $("img").attr({
            src : "test.jpg",
            alt : "Test Image"
        });
         
*/
        
//为所有匹配元素设置 一个属性
        //$("img").attr("src", "test.jpg");
        //为所有匹配的元素设置一个计算的属性值 。
        /*
        $("img").attr("alt", function() {
            return this.src;
        });
         
*/
        $(
"img").removeAttr("src");
    });
</script>
</head>
<body>

    
<img src="test.jpg" />
    
<br />
    
<img />
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
<script type="text/javascript" src="lib/jquery-1.5.2.js"></script>
<style type="text/css">
.red 
{
    background-color
: red;
}

.green 
{
    background
: green;
}
</style>
<script type="text/javascript">
    $(
function() {
        
//为每个匹配元素加上class
        //$("p").addClass("green");

        
//function接受两个参数index和class
        /*
         $("ul li").addClass(function(index, cls) {
         alert(cls);
         alert(index);
         return ;
         });
         
*/
        
//removeClass(function())
        /*
         $("ul li").removeClass(function(index, cls) {
         $(this).removeClass(cls);
         alert(index);
         });
         
*/
        
//如果有就删除,如果没有就添加
        //$("ul li").toggleClass("green");
        //swtich(Boolean),用于决定元素是否包含class的bool
        /*
        var count = 0;
        $("ul li").click(function() {
            $(this).toggleClass("green", count++ % 3 == 0);
        });
         
*/
        
//toggleClass(function(),switch);
        var count = 0;
        $(
"ul li").toggleClass(function(index, cls) {
            alert(index);
        }, 
false);

    });
</script>
</head>
<body>
    
<p>Hello</p>
    
<ul>
        
<li class="green">Hello</li>
        
<li>Hello</li>
        
<li>Hello</li>
    
</ul>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
<script type="text/javascript" src="lib/jquery-1.5.2.js"></script>
<style type="text/css">
.red 
{
    background-color
: red;
}

.green 
{
    background
: green;
}
</style>
<script type="text/javascript">
    $(
function() {
        
//从0开始。获取第N个元素。
        //$("p").eq(1).addClass("green");
        //hasClass检查当前元素是否含有特定的类。
        /*
        $("div").click(function() {
            if ($(this).hasClass("green"))
                $(this).animate({
                    left : -10
                }, "slow");
        });
         
*/
        
//筛选出与指定表达式匹配的元素集合,多个条件用","
        //$("p").filter(".selected,:first").addClass("green");
        //筛选出与指定函数返回值匹配的元素集合
        //$("ol",this)构造了一个jquery对象。
        /*
        $("div p").filter(function(index) {
            return $("ol", this).length == 0;
        }).addClass("red");
         
*/
        
//检查当前元素集合,至少有一个元素符合则返回true
        var b = $("div[id='test2'] input[type='checkbox']").parent().is("form");
        alert(b);
    });
</script>
</head>
<body>
    
<p>This is just a test.</p>
    
<p>So is this</p>
    
<div class="green">a div</div>
    
<div></div>

    
<p>Hello</p>
    
<p>Hello Again</p>
    
<class="selected">And Again</p>
    
<div>
        
<p>
        
<ol>
            
<li>Hello</li>
        
</ol>
        
</p>
        
<p>How are you?</p>
    
</div>
    
<div id="test2">
        
<form>
            
<input type="checkbox" />
        
</form>
    
</div>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
<script type="text/javascript" src="lib/jquery-1.5.2.js"></script>
<style type="text/css">
.red 
{
    background-color
: red;
}

.green 
{
    background
: green;
}
</style>
<script type="text/javascript">
    $(
function() {
        
//将一组元素转换成其他数组。
        /*
        $("p").append($("input").map(function() {
            return $(this).val();
        }).get().join(", "));
         
*/

        
//$("li").has("ul").addClass("green");
        //    $("p").not($("#selected")[0]).css("background-color", "yellow");
        //slice选择一个匹配的子集。
        //如果本身$("div")有子元素x,再加入x的话,不会增长?是的。
        $("div p").slice(01).wrapInner("<b></b>").appendTo($("div"));
    });
</script>
</head>
<body>
    
<p>
        
<b>Values: </b>
    
</p>
    
<form>
        
<input type="text" name="name" value="John" /> <input type="text"
            name
="password" value="password" /> <input type="text" name="url"
            value
="http://ejohn.org/" />
    
</form>

    
<ul>
        
<li>list item 1</li>
        
<li>list item 2
            
<ul>
                
<li id="not1">list item 2-a</li>
                
<li>list item 2-b</li>
            
</ul></li>
        
<li>list item 3</li>
        
<li>list item 4</li>
    
</ul>

    
<p>Hello</p>
    
<id="selected">Hello Again</p>
    
<div>
        
<p>Hello</p>
        
<p>cruel</p>
        
<p>World</p>
    
</div>
</body>
</html>

posted on 2011-04-14 12:55 wangflood 阅读(1990) 评论(1)  编辑  收藏

Feedback

# re: jquey复习(三)[未登录] 2011-04-14 13:02 haha
你名字打错了,少了个 r  回复  更多评论
  


只有注册用户登录后才能发表评论。


网站导航: