当前位置: 代码迷 >> Web前端 >> jQuery 即学即用 获取统制属性
  详细解决方案

jQuery 即学即用 获取统制属性

热度:118   发布时间:2012-10-09 10:21:45.0
jQuery 即学即用 获取控制属性
<html>
<head>
<title></title>
<script src="jquery-1.6.2.js" type="text/javascript"></script>
<script type="text/javascript">
    function f()
    {
        $("#emptyTest").empty();
    }
    function f2()
    {
        $("p[class=emptyTest]").remove();
    }
</script>
</head>
<body>
    <p id="emptyTest">empty</p>
    <p class="emptyTest">准备删除</p>
    <p class="emptyTest">准备删除</p>
    <input type="button" value="go" onclick="f()">
    <input type="button" value="go" onclick="f2()">
</body>
</html>

?

?

$("p#one,p#two").click(function() {
	$(this).toggleClass("redbox");   //如果指定的类名存在,则删除,否则追加
});
		   
var cnt=1;
$("p#three").click(function(){
	$(this).toggleClass("redbox",cnt++%3==0);	//条件表达式为真,追加,为假,则删除
});

?

???

<html>
<head>
<title></title>
<script src="jquery-1.6.2.js" type="text/javascript"></script>
<script type="text/javascript">
    function f()
    {
       $(document).ready(function(){
            //改变所有p标签属性
            $("p").attr({style:'border:1px solid #f00;',alt:'设置style属性'});
            var oneTg=$("p#one").attr("title"); //获取第一个标签的title属性
            $("p#one").html(oneTg+"的title属性取得,并显示");
            /**/
            $("p#two").attr("title","修改two的title属性");
            $("p#three").attr("title",function(){
                var title =this.id;
                return title;
            })
            .each(function(){
                $(this).html("title属性与下一个id属性取一样的值"+this.title);
            });
       });
    }
</script>
</head>
<body>
    <p id="one" title="第一个">第一个</p>
    <p id="two" title="第二个">改变第二个</p>
    <p id="three" title="第三个">第三个</p>
    
    <input type="button" value="go" onclick="f()">
</body>
</html>

?

??

<html>
<head>
<title></title>
<script src="jquery-1.6.2.js" type="text/javascript"></script>
<script type="text/javascript">
    function f()
    {
       $(document).ready(function(){
            var one1=$("p#one").html();
            $("p#two").html(one1);
       });
    }
</script>
</head>
<body>
    <p id="one">第一个</p>
    <p id="two">变成第一个</p>      
    <input type="button" value="go" onclick="f()">
</body>
</html>

??

??

<html>
<head>
<title></title>
<script src="jquery-1.6.2.js" type="text/javascript"></script>
<script type="text/javascript">
    function f()
    {
       $(document).ready(function(){
            var one1=$(":text#one").val();
            $(":text#two").val(one1);
       });
    }
</script>
</head>
<body>
    <input type="text" id="one" value="one"/>
    <input type="text" id="two" value="two"/>         
    <input type="button" value="go" onclick="f()">
</body>
</html>

?

??

<html>
<head>
<title></title>
<script src="jquery-1.6.2.js" type="text/javascript"></script>
<script type="text/javascript">
    function f()
    {
       $('p').hide();
       $('button#one').bind('click',function(){
            $('p#two').toggle();
       });
    }
</script>
</head>
<body>
    <p id="two">显示/隐藏</p>
    <button id="one">提交</button>           
    <input type="button" value="go" onclick="f()">
</body>
</html>

?

?

?

?

  相关解决方案