第十九节(Juery属性)

先从jquery.com上下载包jquery-1.11.2.min.js   再进行下面操作--------

1
:获取id属性跟移除 <body> <div id="box" opid="123"><span></span></div> <script type="text/javascript"> $(function(){ //属性 ==属性值 var field = document.getElementById("box").getAttribute("id"); //alert("javascript获取属性值:"+field);//box document.getElementById("box").setAttribute("coursename","这双一本好书"); var jqueryAttr = $("#box").attr("id"); var opid = $("#box").attr("opid");///123 //alert("jquery获取属性值:"+jqueryAttr);//box $("#box").attr("coursename","你吧我修改了。"); var coursename = $("#box").attr("coursename"); alert(coursename); //删除属性值:removeAttr("key") attr $("#box").removeAttr("coursename"); }); </script> </body>
2:高效用juery实现全选跟反选 
 <body>
  
    <label><input type="radio" name="female" value="1">男</label>
    <label><input type="radio" name="female" value="2" checked="checked">女</label>
    <br><br>
    <label><input type="checkbox" id="allSelect"><span>全选</span></label>
    <label><input type="checkbox" id="objectSelect"><span>反选</span></label>
    <br><br>
    <label><input type="checkbox" name="female1" value="1">小生</label>
    <label><input type="checkbox" name="female1" value="2">KID</label>
    <label><input type="checkbox" name="female1" value="3">小明</label>

    <script type="text/javascript">
        $(function(){
            //var prop = $("input[type='radio'][value='2']").prop("checked");
            //var attr = $("input[type='radio'][value='2']").attr("checked");
            //$("input[type='radio'][value='2']").removeProp("checked");
            //$("input[type='radio'][value='2']").removeAttr("checked");
            //alert(prop);//true/false
            //alert(attr);
            
            /*
                //$("input[type='checkbox'][name='female1']").attr("checked",true);
                //$("input[type='checkbox'][name='female1']").prop("checked","checked");
                //$("input[type='checkbox'][name='female1']").attr("checked","checked");
            */


            $("#allSelect").on("click",function(){
                if($(this).prop("checked")){//true/false
                //if($(this).attr("checked")=='checked')
                    $("input[type='checkbox'][name='female1']").prop("checked",true);//全选        
                    $(this).parent().find("span").text("取消全选");
                }else{
                    $("input[type='checkbox'][name='female1']").removeProp("checked");    
                    $(this).parent().find("span").text("全选");
                }
            });


            $("#objectSelect").on("click",function(){
                $("input[type='checkbox'][name='female1']").each(function(){
                    if($(this).prop("checked")){
                        $(this).removeProp("checked");
                    }else{
                        $(this).prop("checked",true);
                    }
                });
            });

        });
    </script>
 </body>
3:熟悉innerHTML innerText outerHTML outerText的用法

 <style>
    .tmui-box,#box2{border:1px solid green;width:300px;height:300px;}
    .red{background:red}
    .green{background:green}
  </style>


 <body>
    
    <div id="box" class="tmui-box" opid="123"><span>我是一个萌萌的小孩子</span></div>
    <div id="data"><b>啊第三方士大夫士大夫士大夫士大夫士大夫士大夫 </b></div>
    
    <script type="text/javascript">
        //html text val
        //javascript ---innerHTML innerText outerHTML outerText
        var innerHTML = document.getElementById("box").innerHTML ;
        var innerText = document.getElementById("box").innerText;
        var outerHTML = document.getElementById("box").outerHTML;
        var outerText = document.getElementById("box").outerText;
        //alert("innerHTML:"+innerHTML+"\n===>\n innerText:"+innerText);
        //alert("outerHTML:"+outerHTML+"\n===>\n outerText:"+outerText);

        var $innerHTML =  $("#box").html();
        var $innerText =  $("#box").text();
        //alert("javascript版本:innerHTML:"+innerHTML+"\n===>\n innerText:"+innerText);
        //alert("Jquery版本:$innerHTML:"+$innerHTML+"\n===>\n $innerText:"+$innerText);
        $("#box").html($("#data"));
    </script>
 </body>
4:熟悉addClass removeClass  toggleClass用法

<style>
    .tmui-box,#box2{border:1px solid green;width:300px;height:300px;}
    .red{background:red}
    .green{background:green}
  </style>


 <body>
  
    <div id="box" class="tmui-box" opid="123"><span></span></div>
    <input type="button" onclick="addClass()" value="添加背景颜色addClass">
    <input type="button" onclick="removeClass()" value="删除背景颜色removeClass">
    <input type="button" onclick="toggleClass()" value="toggleClass()"><!--添加背景颜色 即没背景就添加-->


    <div id="box2"></div>
    <script type="text/javascript">
        //addClass removeClass
        $(function(){
            //$("#box").removeClass("tmui-box");
        })

        function addClass(){
            $("#box").addClass("red green");
        }

        function removeClass(){
            $("#box").removeClass("red green");
        }

        function toggleClass(){
            $("#box2").toggleClass("green");
        }
    </script>
 </body>
5:javascript跟jquery比较获取值

<body>
    <input type="text" id="username" value="小荒">
    <br><br>
    <input type="password" id="password" value="123456">
    <br><br>
        <label><input type="radio" name="male"  value="1">男</label>
        <label><input type="radio" name="male"  checked="checked" value="0">女</label>
    <br><br>

    <label><input type="checkbox" name="chk" checked="checked"  value="旅游">旅游</label>
    <label><input type="checkbox" name="chk" checked="checked" value="看书">看书</label>
    <label><input type="checkbox" name="chk"  value="睡觉">睡觉</label>
    <br><br>

    <select id="select">
        <option value="">--请选择--</option>
        <option value="11">小明</option>
        <option selected="selected" value="22">晨曦</option>
        <option value="33">小山羊</option>
    </select>
    <br><br>
    <textarea id="textarea" style="width:640px;height:240px;overflow:auto;resize:none;">虽然也可以使用text()获取值,当时textarea值获取也是用val()哦,
    但是建议大家都统一使用val()</textarea>


    <script type="text/javascript">
        $(function(){
            //val() html() text()
            //var $val = $("#box").text();
            var username = document.getElementById("username").value;
            var $username = $("#username").val();
            var $password = $("#password").val();
            //alert(username+"===>"+$username);
            //alert($password);
            var $raidoVal = $("input[type='radio'][name='male']:checked").val();
            //alert("获取选中radio的值是:"+$raidoVal);

            var $checkArr = $("input[type='checkbox'][name='chk']:checked");
            var arr = [];
            $checkArr.each(function(){
                arr.push($(this).val());
            });
            //alert("您当前选中的值是:"+arr.toString());

            //var index = document.getElementById("select").selectedIndex;
            //var value = document.getElementById("select").options[index].value;
            //var text = document.getElementById("select").options[index].innerText;
            //var value2 = document.getElementById("select").value;
            //alert("javascript版本:"+value2);
            //var $value = $("#select").val();
            //var $text = $("#select").find("option[selected='selected']").text();
            //var $text = $("#select > option:selected").text();
            //alert($value+"--->"+$text);


            //var textarea = document.getElementById("textarea").value;
            //var textarea = document.getElementById("textarea").innerText;
            //var textarea = document.getElementById("textarea").innerHTML;
            //alert(textarea);
            var $textarea = $("#textarea").val();
            var $textarea = $("#textarea").text();
            var $textarea = $("#textarea").html();
            alert($textarea);

        });
    </script>
 </body>

 

6:清空

<body>

  <div id="text">111111111111111</div>
  <input type="text" id="username" value="陌然">
  <input type="button" onclick="tm_empty()" value="清空divt=text"/>
  <select id="select">
    <option>--请选择--</option>
  </select>
  <textarea id="textarea">xxxxxx</textarea>
  <script type="text/javascript">
      //清空div     
      function tm_empty(){
         //javascript清空元素值
         //document.getElementById("text").innerHTML = "";
         //jquery清空第一种方式
         //$("#text").html("");
         //$("#text").empty();

         //document.getElementById("username").value = "";//js写法
         //document.getElementById("username").focus();//juery写法
         //$("#username").val("");
         $("#textarea").empty();
      }
  </script>
 </body>

 

posted @ 2015-02-03 10:36  哥的笑百度不到  阅读(257)  评论(0编辑  收藏  举报