JQuery的⼏种常⽤代码
版权声明：本⽂为博主原创⽂章，未经博主允许不得转载。 blog.csdn/zhou_shaowei/article/details/55006599
JQuery是⼀个快速、简洁的JavaScript框架，是继Prototype之后⼜⼀个优秀的JavaScript代码库（或JavaScript框架）。这是⽹上给出的介绍。JQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。经过今天的学习，我深刻体验到了JQuery的这种宗旨的含义。今天将之前的登录注册的页⾯⾥脚本全部⽤JQuery实现了⼀遍，发现代码少了好多，使⽤起来也是⾮常⽅便的。
1.三种基本选择器：
id选择器：$("#id")
元素选择器：$("元素")
类选择器：$(".class")
2.焦点和焦点离开事物
在不使⽤jquery时，会在Html代码中需要执⾏触发事件的地⽅加上onclick或者onblur来分别监测⿏标的操作来执⾏相应操作，例如： <input type="text" name="username" id="username" onfocus="reminder1(this)" onblur="reminder(this)" value="请输⼊账号">
function reminder(inputObj){
if(inputObj.value==""){
inputObj.value="请输⼊账号";
}
}
function reminder1(inputObj){onblur和blur的区别
if(inputObj.value=="请输⼊账号"){
inputObj.value="";
}
}
在使⽤jquery时，我们不需要在Html中加⼊监测代码，只需要在脚本中为需要执⾏操作的代码绑定事务即可，具体实现如下：
$("#username").blur(function(){
//alert($("input[name=username]").val());
if($("input[name=username]").val()==""){
$("input[name=username]").val("请输⼊账号");
}
});
$("#username").click(function(){
//alert($("input[name=username]").val());
if($("input[name=username]").val()=="请输⼊账号"){
$("input[name=username]").val("");
}
});
其中。click和blur⽅法就是分别执⾏点击和焦点离开的函数。其实jquery可以和java类⽐，基本的语法是很相似的，
3.$("#id").html()和 $("#id").text()的区别
$("#id").html()和$("#id").text()都是取id为某个值时的相关内容，但是它们是不⼀样的。
$("#id").text()是返回元素的⽂本内容。
$("#id").html()是返回元素的内容，并没有标签。
它们也可以对内容进⾏设置。
$("#id").text("<font>Hello world</font>");
$("#id").html("<font>Hello world</font>");
text设置后的内容是⽂本内容，所以会显⽰<font>Hello world</font>，但是html会将字符串插⼊元素中，浏览器并不会显⽰<font>，最终显⽰的是Hello World。
4.全选与反选
在不使⽤jquery时，代码如下：
function selectAll(a,b){
var ElementsByName(a);
ElementById(b).checked){
for(var i=0;i<checkvideolist.length;i++){
checkvideolist[i].checked=1;
}
}else{
for(var j=0;j<checkvideolist.length;j++){
checkvideolist[j].checked=0;
}
}
}
在使⽤jquery时，代码如下:
$("#selectall").click(function(){
//alert($("#selectall").prop("checked"));
$("input[name=video]").each(function(){
//alert($(this).prop("checked"));
$(this).prop("checked",$("#selectall").prop("checked"));
});
});
$("#selectall1").click(function(){
//alert($("#selectall").prop("checked"));
$("input[name=sport]").each(function(){
//alert($(this).prop("checked"));
$(this).prop("checked",$("#selectall1").prop("checked"));
});
});
其中$("input[name=sport]")取的是标签input中name=sport的jquery对象;
$("#selectall").prop("checked")获得的是checkbox或者radio的选中状态，返回值类型为true或者false;
prop还可以设置选中状态：$("#selectall").prop("checked",true)
each是对获得的所有对象进⾏相应函数操作，可以替代for循环使⽤。
5.表单的提交⽅式
在不使⽤jquery时，表单提交按钮上也会有⼀个onclick监测来提交表单。但是⽤jquery完全可以像下⾯代码这样写：
$("form").submit(function(e){
var usernameJQ = $("#username");
var pwdJQ = $("#pwd");
var repwdJQ = $("#repwd");
var sex1JQ = $("#sex1");
var sex2JQ = $("#sex2");
var agreementJQ = $("#agreement");
if (!isPassword($("input[name=pwd]").val())) {
e.preventDefault();
}
flush();
if(usernameJQ.val() == ""|| usernameJQ.val()=="请输⼊账号" ){
$("#usererror").html('<font ><b> 账号不能为空</b></font>');
e.preventDefault();
}
if(pwdJQ.val() == ""){
$("#pwderror").html('<font ><b> 密码不能为空</b></font>');
e.preventDefault();
}else if(pwdJQ.val() != repwdJQ.val()){
$("#repwderror").html('<font ><b> 两次输⼊密码不⼀致</b></font>');
e.preventDefault();
}
if(!sex1JQ.prop("checked") && !sex2JQ.prop("checked")){
$("#sexerror").html('<font ><b>  请选择性别</b></font>');
e.preventDefault();
}
if(!agreementJQ.prop("checked")){
$("#agreementerror").html('<font ><b> 请阅读注册协议</b></font>');
e.preventDefault();
}
});
⼤概意思就是:
$("form").submit(function(e){
if (!isPassword($("input[name=pwd]").val())) {
e.preventDefault();
}
});

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。