jQuery讲解
在讲解jQuery时，要和JavaScript进行对比的讲解，易于理解
JavaScript部分
<title>jquery讲解使用</title>
<script src="jquery-2.0.0.min.js"></script>
</head>
<body>
<div id="aa">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">
//根据id找元素,找到具体的DOM对象
var d=document.getElementById("aa");
var c=document.getElementsByClassName("bb");
c[0].style.Color="red"; //加索引是因为class数量多，以数组形势找
var div=document.getElementsByTagNameNS("div"); //根据标签名
var input=document.getElementsByName("cc"); //根据name找
//操作内容
//1.非表单元素：
d.innerHTML; d.innerTEXT; //获取内容； //添加内容，在后面加 ="";
//2.表单元素
d.value; //获取内容； //添加内容，在后面加="";
//操作属性
d.setAttribute("ps","pp"); //设置属性
d.getAttribute("ps"); //获取属性
d.removeAttribute("ps"); //移除属性
//操作样式
d.style.color="red"; //设置样式
d.style.backgroundColor="green";
alert(d.style.width); //获取样式
jQuery部分
//jQuery部分
$(document).ready(function(e) {
//根据id找元素，找到JQUERY对象,数组形势；若果要去DOM对象，取索引0的元素
var jd=$("#aa"); //根据id
alert(jd[0]);
var jc=$(".bb"); //根据class
var div=$("div"); //根据标签名
var ip=$("input[bs=dd]"); //根据属性筛选
alert(ip.ep(0)[0]); //第一个0代表数组索引，ep代表取第几个，第二个0代表取DOM对象
for(var i=0;i<jc.length;i++)
{
jc.eq(i);//取数组里的第几个JQUERY对象
}
//操作内容
//1.非表单元素
jd.text();//获取内容
jd.text("hello"); //添加内容
jc.html(); //获取内容
jc.html("world"); //添加内容
//2.表单元素
jc.val(); //获取内容
jc.val("hello,world"); //添加内容
//操作属性
ip.attr("ps","bb"); //设置属性， 属性名，属性值
ip.attr("ps"); //获取属性
ip.removeAttr("ps"); //移除属性
jd.prop("color","red");//用法和attr()函数一样，
jd.prop("color");
//操作样式
jc.css("background-color","red");
//给一个元素添加事件
$("#aa").click(function(){
alert("正确！");
})
//给多个元素添加事件
$(".bb").click(function(){
alert($(this).text());
})
//给多个元素设置相同的样式
$(".bb").css("color","red");
});
练习：使用jQuery实现“全选”等形式
前端页面显示
<title>JQ全选</title>
<script src="jquery-2.0.0.min.js"></script>
</head>
<body>
<input type="checkbox" id="all"/>全选<br />
<input type="checkbox" class="m" value="aa"/>aa
<input type="checkbox" class="m" value="bb"/>bb
<input type="checkbox" class="m" value="cc"/>cc
<input type="checkbox" class="m" value="dd"/>dd
<br />
<div>
取选中的值：<input type="button" id="btn" value="点击测试"/>
</div>
<div>
填写内容进行选中：<input type="text" id="tet"/>
<input type="button" id="tb" value="查找选中"/>
</div>
</body>
一.全选功能jQuery代码
//全选
$("#all").click(function(){
var jc=$(".m");
var jd=$(this)[0].checked;
jc.prop("checked",jd); //设置属性：prop("属性名","属性值")函数， //获取属性prop("属性名");
})
});
二、取选中的值功能jQuery代码
//取选中的值
$("#btn").click(function(){
var jc=$(".m");
for(var i=0;i<jc.length;i++)
{
if(jc.eq(i).prop("checked")) //标签中都是固有属性，用prop()函数；含有自定义属性时用attr()函数
{
alert(jc.eq(i).val());
}
}
})
三、根据填写的内容进行选中
//填写内容进行选中
$("#tb").click(function(){
var v=$("#tet").val();
var jc=$(".m");
jc.prop("checked",false);
for(var i=0;i<jc.length;i++)
{
if(jc.eq(i).val()==v)
{
jc.eq(i).prop("checked",true);
}
}
})
在注册表单时，经常会看到
前端代码
<input type="checkbox" id="cr" />同意并接受注册协议 <input type="button" value="提交" id="btn" disabled="disabled"/>
jq代码:
/*同意之后，按钮可用*/
$("#cr").click(function(){
var cr=$(this)[0]; //DOM方式
if(cr.checked){
$("#btn").removeAttr("disabled");
}
else{
$("#btn").attr("disabled","disabled");
}
})
/*同意之后，按钮可用*/
$("#cr").click(function(){
var cr=$(this); //jQuery方式
if(cr.is(":checked")){
$("#btn").removeAttr("disabled");
}
else{
$("#btn").attr("disabled","disabled");
}
});
