JQUERY与JS的区别
<style type="text/css">
#aa
{
width:200px;
height:200px;
}
</style>
<script src="jquery-1.11.2.min.js"></script>
</head>
<body>
<div id="aa" style="">hello</div>
<div class="bb">22</div>
<div class="bb">33</div>
<div class="bb">44</div>
<input type="text" name="cc" bs="dd" />
</body>
<script type="text/javascript">
JS：
//根据ID找元素,找到具体的DOM对象
var d = document.getElementById("aa");
var c = document.getElementsByClassName("bb");
var div = document.getElementsByTagName("div");
var input = document.getElementsByName("cc");
//操作内容
//1.非表单元素
d.innerHTML; d.innerTEXT;
//2.表单元素
d.value;
//操作属性
d.setAttribute("bs","pp"); //添加属性
d.getAttribute("bs");//获取属性
d.removeAttribute("bs");//移除属性
//操作样式
//d.style.color = "red";
//d.style.backgroundColor = "yellow";
//alert(d.style.width);
JQUERY：
$(document).ready(function(e) {
//根据ID找元素，找出的JQUERY对象，如果要取DOM对象，取索引0的元素
var jd = $("#aa"); //根据ID
var jc = $(".bb"); //根据Class
var di = $("div"); //根据标签名
var ip = $("input[bs=dd]");//根据属性筛选
for(var i=0;i<jc.length;i++)
{
jc.eq(i); //取数组里面的第几个JQUERY对象
}
//操作内容
//1.非表单元素
jd.text(); jd.text("aa");
jd.html(); jd.html("vv");
//2.表单元素
jd.val();
//属性操作
jd.attr("bs","aa");//设置属性
jd.attr("bs"); //获取属性
jd.removeAttr("bs");//移除属性
//操作样式
jd.css("background-color","green");
//alert(jd.css("width"));
//给一个元素加事件
/*$("#aa").click(function(){
alert("aa");
})*/
//给多个元素加事件
/*$(".bb").click(function(){
alert($(this).text());
})*/
//给多个元素设置相同样式(属性)
//$(".bb").css("color","pink");
});
</script>
例：
<body> <input type="checkbox" id="all" /> 全选<br /> <input class="t" type="checkbox" value="aa" /> aa <input class="t" type="checkbox" value="bb" /> bb <input class="t" type="checkbox" value="cc" /> cc <input class="t" type="checkbox" value="dd" /> dd <input class="t" type="checkbox" value="ee" /> ee <input type="button" value="测试" id="btn" /> <input type="text" id="txt" /> <input type="button" value="设置选中" id="sel" /> </body>
<script src="jquery-1.11.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(e) {
//全选
$("#all").click(function(){
var ck = $(".t");
var xz = $(this)[0].checked;
ck.prop("checked",xz);
})
//取选中项的值
$("#btn").click(function(){
var ck = $(".t");
for(var i=0; i<ck.length;i++)
{
if(ck.eq(i).prop("checked"))//ck.eq(i)[0].checked
{
alert(ck.eq(i).val());
}
}
})
//设置某项选中
$("#sel").click(function(){
var v = $("#txt").val();
var ck = $(".t");
ck.prop("checked",false);
for(var i=0;i<ck.length;i++)
{
if(ck.eq(i).val()==v)
{
ck.eq(i).prop("checked",true);
}
}
})
});
</script>
时间： 2024-12-06 00:29:45