先从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>
时间： 2024-08-29 16:04:37