首页 > 代码库 > 第十九节（Juery属性）
第十九节（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=http://www.mamicode.com/"1">男</label> <label><input type="radio" name="female" value=http://www.mamicode.com/"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=http://www.mamicode.com/"1">小生</label> <label><input type="checkbox" name="female1" value=http://www.mamicode.com/"2">KID</label> <label><input type="checkbox" name="female1" value=http://www.mamicode.com/"3">小明</label> <script type="text/javascript"> $(function(){ //var prop = $("input[type=‘radio‘][value=http://www.mamicode.com/‘2‘]").prop("checked"); //var attr = $("input[type=‘radio‘][value=http://www.mamicode.com/‘2‘]").attr("checked"); //$("input[type=‘radio‘][value=http://www.mamicode.com/‘2‘]").removeProp("checked"); //$("input[type=‘radio‘][value=http://www.mamicode.com/‘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=http://www.mamicode.com/"添加背景颜色addClass"> <input type="button" onclick="removeClass()" value=http://www.mamicode.com/"删除背景颜色removeClass"> <input type="button" onclick="toggleClass()" value=http://www.mamicode.com/"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=http://www.mamicode.com/"小荒"> <br><br> <input type="password" id="password" value=http://www.mamicode.com/"123456"> <br><br> <label><input type="radio" name="male" value=http://www.mamicode.com/"1">男</label> <label><input type="radio" name="male" checked="checked" value=http://www.mamicode.com/"0">女</label> <br><br> <label><input type="checkbox" name="chk" checked="checked" value=http://www.mamicode.com/"旅游">旅游</label> <label><input type="checkbox" name="chk" checked="checked" value=http://www.mamicode.com/"看书">看书</label> <label><input type="checkbox" name="chk" value=http://www.mamicode.com/"睡觉">睡觉</label> <br><br> <select id="select"> <option value=http://www.mamicode.com/"">--请选择--</option> <option value=http://www.mamicode.com/"11">小明</option> <option selected="selected" value=http://www.mamicode.com/"22">晨曦</option> <option value=http://www.mamicode.com/"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 = http://www.mamicode.com/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 = http://www.mamicode.com/$("#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=http://www.mamicode.com/"陌然"> <input type="button" onclick="tm_empty()" value=http://www.mamicode.com/"清空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").valuehttp://www.mamicode.com/= "";//js写法 //document.getElementById("username").focus();//juery写法 //$("#username").val(""); $("#textarea").empty(); } </script> </body>
第十九节（Juery属性）
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。