未加星标

JQuery的几种常用代码 JQuery

字体大小 | |
[前端(javascript) 所属分类 前端(javascript) | 发布者 店小二04 | 时间 2017 | 作者 红领巾 ] 0人收藏点击收藏
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){
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("Hello world");
$("#id").html("Hello world");
text设置后的内容是文本内容,所以会显示Hello world,但是html会将字符串插入元素中,浏览器并不会显示,最终显示的是Hello World。
4.全选与反选
在不使用jquery时,代码如下:
function selectAll(a,b){
var checkvideolist=document.getElementsByName(a);
if(document.getElementById(b).checked){
for(var i=0;i<checkvideolist.length;i++){ .checked="0;" j="0;j<checkvideolist.length;j++){" pre="" var="">
在使用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('账号不能为空');
e.preventDefault();
}
if(pwdJQ.val() == ""){
$("#pwderror").html('密码不能为空');
e.preventDefault();
}else if(pwdJQ.val() != repwdJQ.val()){
$("#repwderror").html('两次输入密码不一致');
e.preventDefault();
}
if(!sex1JQ.prop("checked") && !sex2JQ.prop("checked")){
$("#sexerror").html('请选择性别');
e.preventDefault();
}
if(!agreementJQ.prop("checked")){
$("#agreementerror").html('请阅读注册协议');
e.preventDefault();
}
}); 大概意思就是:
$("form").submit(function(e){
if (!isPassword($("input[name=pwd]").val())) {
e.preventDefault();
}
}); 直接获取到form的jquery对象调用submit函数执行函数体,e.preventDefault()是用来处理出现错误时不进行提交。
其中的$("input[name=pwd]").val()获取的是对象的值,对去表单中的文本框就可以这样获取,同样它的设置方法和上面的html以及text一样,都是 $("input[name=pwd]").val("Hello World")。
今天我也是体验到了万事开头难的道理,刚开始无从下手,经过耐心的步骤分析和查找,慢慢的发现其实内部原理很简单,而且jquery使用起来方便了很多。
.length;i++){>

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

主题: JavaScriptJava浏览器其实
分页:12
转载请注明
本文标题:JQuery的几种常用代码 JQuery
本站链接:http://www.codesec.net/view/533310.html
分享请点击:


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(65)