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() {
        
//pre元素下的所有子孙元素。
        //$("form input")选 中[ <input name="name" />, <input name="newsletter" /> ] 
        /*
         $("form input").hover(function() {
         $(this).addClass("green");
         }, function() {
         $(this).removeClass("green");
         });
         
*/
        
//pre元素下的子元素。
        //[ <input name="name" /> ] 
        /*
        $("form>input").hover(function() {
            $(this).addClass("green");
        }, function() {
            $(this).removeClass("green");
        });
         
*/

        
//pre元素后的next元素。pre 与next平级
        //[ <input name="name" />, <input name="newsletter" /> ] 
        /*$("label+input").hover(function() {
                $(this).addClass("green");
            }, function() {
                $(this).removeClass("green");
            });
         
*/

        
//[ <input name="none" /> ] 
        //prev元素之后所有sibings元素
        //siblings和next不同,siblings返回的是,所有同辈元素的集合。next,仅是一个。
        /*
        $("form ~ input").hover(function() {
            $(this).addClass("green");
        }, function() {
            $(this).removeClass("green");
        });
         
*/

        
//这就是next方式,选 中的只有一个。
        $("form +input").hover(function() {
            $(
this).addClass("green");
        }, 
function() {
            $(
this).removeClass("green");
        });

    });
</script>
</head>
<body>
    
<form>
        
<label>Name:</label> <input name="name" />
        
<fieldset>
            
<label>Newsletter:</label> <input name="newsletter" />
        
</fieldset>
    
</form>
    
<input name="none" />
    
<input name="second" />
</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() {

        
//匹配找到的第一个元素
        //[ <tr><td>Header 1</td></tr> ] 
        /*
        $("tr:first").hover(function() {
            $(this).addClass("green");
        }, function() {
            $(this).removeClass("green");
        });
         
*/
        
//匹配找到的最后一个元素
        //[ <tr><td>Value 2</td></tr> ] 
        /*
        $("tr:last").hover(function() {
            $(this).addClass("green");
        }, function() {
            $(this).removeClass("green");
        });
         
*/
        
//能够 checked的input才有:checked
        /*
        $("input:not(:checked)").hover(function() {
            $(this).addClass("green");
        }, function() {
            $(this).removeClass("green");
        });
         
*/
        
//偶数元素,从0开始计数
        /*
        $("tr:even").hover(function() {
            $(this).addClass("green");
        }, function() {
            $(this).removeClass("green");
        });
*/
        
//奇数元素,从0开始计数。
        /*
        $("tr:odd").hover(function() {
            $(this).addClass("green");
        }, function() {
            $(this).removeClass("green");
        });
         
*/
        
//匹配给定的索引的元素。
        /*
        $("tr:eq(1)").hover(function() {
            $(this).addClass("green");
        }, function() {
            $(this).removeClass("green");
        });
*/

        
//大于给定索引的元素。
        /*
        $("tr:gt(1)").hover(function() {
            $(this).addClass("green");
        }, function() {
            $(this).removeClass("green");
        });
         
*/

        
//小于给定索引元素的。此时只匹配index=0
        /*
        $("tr:lt(1)").hover(function() {
            $(this).addClass("green");
        }, function() {
            $(this).removeClass("green");
        });
         
*/
        
//匹配H1,H2,H3之类的标题元素。
        // $(":header").css("background"."#EEE");
        //:animated 所有正在执行动画的元素
        $("#run").click(function() {
            $(
"div:not(:animated)").animate({
                height : 'toggle',
                opacity : 'toggle'
            }, 
"slow");
        });

    });
</script>
</head>
<body>
    
<table>
        
<tr>
            
<td>Header 1</td>
        
</tr>
        
<tr>
            
<td>Value 1</td>
        
</tr>
        
<tr>
            
<td>Value 2</td>
        
</tr>
    
</table>


    
<input type="checkbox" name="apple" />
    
<input type="checkbox" name="flower" checked="checked" />

    
<h1>Header 1</h1>
    
<p>Contents 1</p>
    
<h2>Header 2</h2>
    
<p>Contents 2</p>

    
<button id="run">Run</button>
    
<div>love you</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>jquery Content</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:contains('John')").hover(function() {
            $(this).addClass("red");
        }, function() {
            $(this).removeClass("red");
        });
         
*/
        
//不包含子元素或文本的元素。
        /*
        $("td:empty").hover(function() {
            $(this).text("afaf");
        }, function() {
            $(this).addClass("red");
        });
         
*/
        
//has(selector)
        //匹配含有选择器的元素的元素。
        /*
        $("div:has(p)").hover(function() {
            $(this).addClass("red");
        }, function() {
            $(this).removeClass("red");
        });
         
*/
        
//跟empty正好相反,含有子元素或文本的。
        $("td:parent").hover(function() {
            $(
this).addClass("red");
        }, 
function() {
            $(
this).removeClass("red");
        });
    });
</script>
</head>
<body>
    
<div id="one">
        
<p></p>
        John Resig
    
</div>
    
<div>George Martin</div>
    
<div>Malcom John Sinclair</div>
    
<div>
        J. Ohn

        
<table>
            
<tr>
                
<td>Value 1</td>
                
<td></td>
            
</tr>
            
<tr>
                
<td>Value 2</td>
                
<td></td>
            
</tr>
        
</table>
</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() {
        $(
"tr:visible").hover(function() {
            $(
this).css("display""none");
            $(
"tr:hidden").show();
        });

    });
</script>
</head>
<body>
    
<table>
        
<tr style="display: none">
            
<td>Value 1</td>
        
</tr>
        
<tr>
            
<td>Value 2</td>
        
</tr>
    
</table>
</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[id]").hover(function() {
            $(this).addClass("green");
        }, function() {
            $(this).removeClass("green");
        });
         
*/
        
//指定属性=value的元素。
        //$("input[name='newsletter']").attr("checked", true);
        //指定属性!=value的元素。
        //$("input[name!='newsletter']").attr("checked", true);
        //指定元素属性以xx开始的
        //$("input[name^='accept']").attr("checked", true);
        //指定元素属性以xx结束的
        //$("input[name$='r']").attr("checked", true);
        //指定元素属性以包含xx
        //$("input[name*='let']").attr("checked", true);
        //复合选择器
        $("input[id][name='newsletter']").attr("checked"true);
    });
</script>
</head>
<body>
    
<div>
        
<p>Hello!</p>
    
</div>
    
<div id="test2">has a id property</div>

    
<input id="test3" type="checkbox" name="newsletter" value="Hot Fuzz" />
    
<input type="checkbox" name="newsletter" value="Cold Fusion" />
    
<input type="checkbox" name="accept" value="Evil Plans" />
    
<input type="checkbox" name="acceptor" value="Sam Wang" />

</body>
</html>
posted on 2011-04-12 12:23 wangflood 阅读(293) 评论(0)  编辑  收藏

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


网站导航: