jQuery 即学即用获取元素 -

vowtree

浏览: 34608 次
性别:
来自: 厦门

最近访客更多访客>>

limilie

scotttom020

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

jQuery 即学即用获取元素

博客分类：

jQuery

<html>
<head>
<title></title>
<script src="jquery-1.6.2.js" type="text/javascript"></script>
<script type="text/javascript">
    function inJavascript()
    {
        var divs=document.getElementsByTagName("div");
        for(var i=0;i<divs.length;i++)
        {
            if(divs[i].getAttribute("className")=="testClass"||divs[i].getAttribute("class")=="testClass")
            {
                divs[i].style.color="red";                
            }                
        }
    }
    function inJquery()
    {
        $('div.testClass').css("color","red");
    }

</script>
</head>

<body>
    <div class="testClass">类名为testClass</div>
    <div class="testClass">类名为testClass</div>
    <div class="testClass">类名为testClass</div>
    <div>母div
        <div class="testClass">类名为testClass</div>
    </div>
    <div class="notTestClass">类名为noTestClass</div>
    <p class="testClass">类名为testClass的P标签</p>
    <input type="button" onclick="inJavascript()" value="颜色"/>
    <input type="button" onclick="inJquery()" value="颜色"/>
</body>
</html>

<html>
<head>
<title></title>
<script src="jquery-1.6.2.js" type="text/javascript"></script>
<script type="text/javascript">
    function btn_click()
    {
        $("#test")
            .fadeIn(2000)
            .fadeOut(2000)        
    }    
</script>
<style type="text/css">
    #test
    {
        width : 100px;
        height : 100px ;
        background : yellow ;
        display : none ;
    }
</style>
</head>
<body>
    <div id="test">你好</div>
    <input type="button" value="渐入" onclick="btn_click()"/>
</body>
</html>

改变页面div内容

<html>
<head>
<title></title>
<script src="jquery-1.6.2.js" type="text/javascript"></script>
<script type="text/javascript">
   $(document).ready(function(){
        $("#testClick").click(function(){
            $("#test").html("您好！");
        });        
   });  
</script>
</head>
<body>
    <div id="testClick">单击此处</div>
    <div id="test">显示新内容</div>    
</body>
</html>

动画效果

<html>
<head>
<title></title>
<script src="jquery-1.6.2.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $("#btn").click(function(){
            $("#test")
                .empty()                    //清空元素
                .animate({width:30})        //宽度增加30px
                .animate({height:30},1000)  //在一秒内将高度增加30px
                .animate({left:300})        //向右移动300px
                .animate({top:200})         //向下移动200px
                .animate({left:"-=300"})    //向左移动
                .animate({top:"-=200"})     //向上移动
                .animate({opacity:0.5})     //不透明度变为0.5
                .animate({width:300},2000)  //在2秒内将宽度增加300px
                .fadeOut()                  //渐出
                .slideDown()                //幻灯片点灭效果
                .slideUp()                  //幻灯片点亮效果
                .fadeIn("slow")             //渐入
                .animate({height:30},function(){//高度增加300px  
                    $(this).html("动画结束");   //动画结束显示文字
                })                    
        });
    });
</script>
<style type="text/css">
    #test
    {
        width : 100px;
        height : 100px ;
        background : yellow ;        
    }
</style>
</head>
<body>
    <div id="test"></div>
    <input id="btn" type="button" value="GO"/>
</body>
</html>

1. 操作 span 标签 $("span")

通过id获取元素 $("#id")

通过类名获取元素 $('.类名') 获取拥有同一类名的多个元素类名就是class=""定义的

指定层次关系

<html>
<head>
<title></title>
<script src="jquery-1.6.2.js" type="text/javascript"></script>
<script type="text/javascript">
       function f1()
       {
            $("form input").css("background","red");
       }
       function f2()
       {
            $("form > label").css("background","red");
       }
       function f3()
       {
            $("label + input").css("background","red");
       }
       function f4()
       {
            $("form ~ label").css("background","red");
       }
       function f5()
       {
            $("*").css("background","white");
       }
</script>
</head>
<body>
    <form>
        <label>子节点</label>
        <input type="text" value="背景变成红色">
        <fieldset>
            <label>孙节点</label>
            <input type="text" value="背景变成红色">
        </fieldset>
    </form>
    <label>form外</label>
    <input type="text" value="背景不变色">
    <fieldset>
            <label>form外</label>
            <input type="text" value="背景不变色">
    </fieldset>
    <input type="button" value="祖先,子孙" onclick="f1()">
    <input type="button" value="父 > 子" onclick="f2()">
    <input type="button" value="前+后" onclick="f3()">
    <input type="button" value="兄~弟" onclick="f4()">
    <input type="button" value="还原" onclick="f5()">
</body>
</html>

根据属性值获取元素

<html>
<head>
<title></title>
<script src="jquery-1.6.2.js" type="text/javascript"></script>
<script type="text/javascript">
       function f1()
       {
            $("p[id]").css("color","red");
       }
       function f2()
       {
            $("div[id=div_test]").css("color","red");   
       }
       function f3()
       {
            $("p[id!=p_test2]").css("color","red");  
       }
       function f4()
       {
           $("p[id^=p]").css("color","red");
       }
       function f5()
       {
           $("p[id$=test2]").css("color","red");
       }
       function f6()
       {
           $("p[id*=test]").css("color","red");
       }
       function f7()
       {
            $("*").css("color","black");             
       }
</script>
</head>
<body>
    <div>div标签</div>
    <div id="div_test" class="class1">div标签</div>
    <p id="p_test1" class="class1">p标签</p>
    <p id="p_test2" class="class2">p标签</p>
    <p id="test3" class="class3">p标签</p>
    
    <input type="button" value="有指定属性" onclick="f1()">
    <input type="button" value="有指定属性值" onclick="f2()">
    <input type="button" value="不具有指定属性值" onclick="f3()">
    <input type="button" value="属性值开始一致" onclick="f4()">
    <input type="button" value="属性值结尾一致" onclick="f5()">
    <input type="button" value="属性值包含" onclick="f6()">
    <input type="button" value="还原" onclick="f7()">
</body>
</html>

<html>
<head>
<title></title>
<script src="jquery-1.6.2.js" type="text/javascript"></script>
<script type="text/javascript">
       $(document).ready(function(){
            $("input:text:enabled").val("能输入");
            $("input:text:disabled").val("不能输入");
            (function checkboxclick(){
                $(":checkbox").unbind("click",checkboxclick);
                var va1='';
                $(":checkbox:checked").each(function(){
                    va1+=$(this).val()+',';
                });
                $("#category").html("选择的数据:"+va1);
                $(":checkbox").click(checkboxclick);
            })();   
            $("select").change(function(){
                var txt='';
                $("select option:selected").each(function(){
                    txt+=$(this).text()+',';
                });
                $("#option").html("选择的选项:"+txt);
            });
        
       });       
</script>
</head>
<body>
    <form>
        <ul>
            <li>
                <label>订单号码</label>
                <input type="text" name="" disabled="disabled"/>
            </li>   
            <li>
                <label>订单所有者</label>
                <input type="text"/>
            </li>
            <li>
                <input type="checkbox" name="category" value="红"/><label>红</label>
                <input type="checkbox" name="category" value="黄"/><label>黄</label>
                <input type="checkbox" name="category" value="蓝"/><label>蓝</label>
                <input type="checkbox" name="category" value="紫"/><label>紫</label>
                <input type="checkbox" name="category" value="白"/><label>白</label>
            </li>
            <li>
                <select multiple="multiple">
                    <option>选项1</option>
                    <option>选项2</option>
                    <option>选项3</option>
                    <option>选项4</option>
                </select>
            </li>
        </ul>
    </form>
    <div id="msg">
        <p id="category"></p>
        <p id="option"></p>
    </div>
</body>
</html>

<html>
<head>
<title></title>
<script src="jquery-1.6.2.js" type="text/javascript"></script>
<script type="text/javascript">
       $(document).ready(function(){
            $("p").slice(1,3).css("color","blue");
       });       
</script>
</head>
<body>
    <form>
        <p>p</p>    
        <p class="center">p</p>
        <p class="center">p</p>
        <p class="center">p</p>
        <p class="center">p</p>
        <p>p</p>
    </form>
    
</body>
</html>

分享到：

jQuery 即学即用获取控制属性 | Spring in Action AOP

2011-07-21 16:05
浏览 776
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

jQuery 即学即用获取元素

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

jQuery 即学即用 获取元素

评论

发表评论

相关推荐

jQuery基础--- 常用

jQuery基础--- jQuery 选择器

jQuery 即学即用 获取控制属性

最近访客更多访客>>

jQuery 即学即用获取元素

jQuery 即学即用获取控制属性