标签：
先从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>
标签：
原文地址：http://www.cnblogs.com/Deng1185246160/p/4269371.html
