jquery的一些应用
JavaScript的一些复习：操作内容，操作属性，操作样式
<title>无标题文档</title>
<style>
#aa
{
width:200px;
height:200px;}
</style>
<script src="jquery-1.11.2.min.js"></script>
</head>
<body>
<div id="aa" style=""><span>hello</span></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">
//根据ID找元素,找到具体的DOM对象
var a = document.getElementById("aa");
var b = document.getElementsByClassName("bb");
//b[0].style.color="red";
var di= document.getElementsByTagName("div");
var input = document.getElementsByName("cc");
//操作内容
//1.非表单元素
//var d = document.getElementById("aa");
d.innerHTML;
d.innerText;
//2.表单元素 取value
d.value;
//操作属性
d.setAttribute("bs","aa");//设置属性（属性名，属性值）
d.getAttribute("bs");//获取属性（属性名）
d.removeAttribute("bs");//移除属性（属性名）
//操作样式
d.style.color = "red";
d.style.backgroundColor = "blue";
alert(d.style.width);//获取不到，因为获取只能获取到内联的不能在外面的
</script>
Jquery中也是分为操作内容，操作属性，操作样式
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
#aa
{
width:200px;
height:200px;}
</style>
<script src="jquery-1.11.2.min.js"></script>
</head>
<body>
<div id="aa" style=""><span>hello</span></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">
//jquery中的
$(document).ready(function(e) {
//根据ID找元素，找出的JQUERY对象，如果要取DOM对象，取索引0的元素
var jd = $("#aa");//根据ID
var ba = $(".bb");//根据Class
var ca = $("div");//根据标签名
var ip = $("input[name=cc]");//根据筛选属性
var ip1 = $("input[bs=dd]"); //根据筛选属性,不加空格
//alert(ip1.eq(0)[0]);
for(var i=0;i<b.length;i++)
{
ba.eq(i); //取数组里面的第几个JQUERY对象
}
//操作内容
//非表单元素
jd.text(); //jd.text("你好"); //（）里面没有是取值，有是赋值
jd.html(); //jd.html("好啊"); //同上
//2.表单元素
aa.val();
//操作属性
jd.attr("bs","aa");//设置属性（属性名，属性值）
jd.attr("bs");//获取属性（属性名）
jd.removeAttr("bs");//移除属性（属性名）
//操作样式
jd.css("background-color","red");//一个参数是获取，两个是添加
//alert(jd.css("width"));
//给一个元素加事件
/*$("#aa").click(function(){
alert("aa");
})*/
//给多个元素加事件
/*$(".bb").click(function(){
alert($(this).text());
})*/
//给多个元素设置相同样式(属性)
//$(".bb").css("color","pink");
});
</script>
</html>
关于jquery的一些练习题：实现全选功能，输出选中项，设置选中项
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery的例子</title>
<script src="jquery-1.11.2.min.js"></script>
</head>
<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" id="button" value="点击获取数据" />
<input type="text" id="tex" name="name" />
<input type="button" id="select" value="提交" />
</body>
</html>
<script type="text/javascript">
$(document).ready(function(e) {
//全选
$("#all").click(function(){
var ck = $(".t");
var xz = $(this)[0].checked;
ck.prop("checked",xz);
})
//输出取选中的值
$("#button").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());
}
}
ck.prop("checked",false);//清除选项
})
//设置某项选中
$("#select").click(function(){
var rr = $("#tex").val();
var ck = $(".t");
ck.prop("checked",false);//清除选项
for(var i=0;i<ck.length;i++)
{
if(ck.eq(i).val()==rr)
{
ck.eq(i).prop("checked",true);
}
}
})
});
</script>
时间： 2024-10-12 10:44:22