jQuery Validation介绍应用

jQuery Validation介绍应用
jQuery Validation介绍应用

jQuery Validation在项目中的应用validation是jquey下的一个验证插件,官方介绍:https://www.360docs.net/doc/7c5573771.html,/Plugins/Validation 1导入js库

在使用jquery及其验证框架之前,需要将jquery和验证框js库文件导入项目目录中,并应

2默认校验规则

(1)required:true 必输字段

(2)remote:"check.php" 使用ajax方法调用check.php验证输入值

(3)email:true 必须输入正确格式的电子邮件

(4)url:true 必须输入正确格式的网址

(5)date:true 必须输入正确格式的日期日期校验ie6出错,慎用

(6)dateISO:true 必须输入正确格式的日期(ISO),例如:2009-06-23,1998/01/22 只验证格式,不验证有效性

(7)number:true 必须输入合法的数字(负数,小数)

(8)digits:true 必须输入整数

(9)creditcard: 必须输入合法的信用卡号

(10)equalTo:"#field" 输入值必须和#field相同

(11)accept: 输入拥有合法后缀名的字符串(上传文件的后缀)

(12)maxlength:5 输入长度最多是5的字符串(汉字算一个字符)

(13)minlength:10 输入长度最小是10的字符串(汉字算一个字符)

(14)rangelength:[5,10] 输入长度必须介于5 和10 之间的字符串")(汉字算一个字符)

(15)range:[5,10] 输入值必须介于5 和10 之间

(16)max:5 输入值不能大于5

(17)min:10 输入值不能小于10

3默认的提示

messages: {

required: "This field is required.",

remote: "Please fix this field.",

email: "Please enter a valid email address.",

url: "Please enter a valid URL.",

date: "Please enter a valid date.",

dateISO: "Please enter a valid date (ISO).",

number: "Please enter a valid number.",

digits: "Please enter only digits",

creditcard: "Please enter a valid credit card number.",

equalTo: "Please enter the same value again.",

accept: "Please enter a value with a valid extension.",

maxlength: $.validator.format("Please enter no more than {0} characters."),

minlength: $.validator.format("Please enter at least {0} characters."),

rangelength: $.validator.format("Please enter a value between {0} and {1} characters long."), range: $.validator.format("Please enter a value between {0} and {1}."),

max: $.validator.format("Please enter a value less than or equal to {0}."),

min: $.validator.format("Please enter a value greater than or equal to {0}.")

},

如需要修改,可在js代码中加入:

jQuery.extend(jQuery.validator.messages, {

required: "必选字段",

remote: "请修正该字段",

email: "请输入正确格式的电子邮件",

url: "请输入合法的网址",

date: "请输入合法的日期",

dateISO: "请输入合法的日期(ISO).",

number: "请输入合法的数字",

digits: "只能输入整数",

creditcard: "请输入合法的信用卡号",

equalTo: "请再次输入相同的值",

accept: "请输入拥有合法后缀名的字符串",

maxlength: jQuery.validator.format("请输入一个长度最多是{0} 的字符串"),

minlength: jQuery.validator.format("请输入一个长度最少是{0} 的字符串"),

rangelength: jQuery.validator.format("请输入一个长度介于{0} 和{1} 之间的字符串"),

range: jQuery.validator.format("请输入一个介于{0} 和{1} 之间的值"),

max: jQuery.validator.format("请输入一个最大为{0} 的值"),

min: jQuery.validator.format("请输入一个最小为{0} 的值")

});

推荐做法,将此文件放入messages_cn.js中,在页面中引入

4使用方式

4.1将校验规则写到控件中

type="password" class="{required:true,minlength:5}" />

type="password"class="{required:true,minlength:5,equalTo:'#password'}" />

使用class="{}"的方式,必须引入包:jquery.metadata.js

可以使用如下的方法,修改提示内容:

class="{required:true,minlength:5,messages:{required:'请输入内容'}}"

在使用equalTo关键字时,后面的内容必须加上引号,如下代码:

class="{required:true,minlength:5,equalTo:'#password'}"

4.2将校验规则写到js代码中

校验规则里必须是待校验元素的name属性

$().ready(function() {

$("#signupForm").validate({

rules: {

firstname: "required",

email: {

required: true,

email: true

},

password: {

required: true,

minlength: 5

},

confirm_password: {

required: true,

minlength: 5,

equalTo: "#password"

}

},

messages: {

firstname: "请输入姓名",

email: {

required: "请输入Email地址",

email: "请输入正确的email地址"

},

password: {

required: "请输入密码",

minlength: jQuery.format("密码不能小于{0}个字符")

},

confirm_password: {

required: "请输入确认密码",

minlength: "确认密码不能小于5个字符",

equalTo: "两次输入密码不一致不一致"

}

}

});

});

//messages处,如果某个控件没有message,将调用默认的信息

Required规则:

required:true 必须有值

required:"#aa:checked"表达式的值为真,则需要验证

required:function(){}返回为真,表时需要验证

后边两种常用于,表单中需要同时填或不填的元素

5常用方法及注意问题

5.1用其他方式替代默认的SUBMIT

$().ready(function() {

$("#signupForm").validate({

submitHandler:function(form){

alert("submitted");

form.submit();

}

});

});

可以设置validate的默认值,写法如下:

$.validator.setDefaults({

submitHandler: function(form) {

alert("submitted!");

form.submit();

}

});

如果想提交表单, 需要使用form.submit()而不要使用$(form).submit()

Debug:只验证不提交表单

如果这个参数为true,那么表单不会提交,只进行检查,调试时十分方便

$().ready(function() {

$("#signupForm").validate({

debug:true

});

});

如果一个页面中有多个表单都想设置成为debug,用

$.validator.setDefaults({

debug: true

})

ignore:忽略某些元素不验证

ignore: ".ignore"

5.2更改错误信息显示的位置

errorPlacement:Callback Default: 把错误信息放在验证的元素后面

指明错误放置的位置,默认情况是:error.appendTo(element.parent());即把错误信息放在验证的元素后面

errorPlacement: function(error, element) {

error.appendTo(element.parent());

}

//示例:

 

errorPlacement: function(error, element) {

if ( element.is(":radio") )

error.appendTo( element.parent().next().next() );

else if ( element.is(":checkbox") )

error.appendTo ( element.next() );

else

error.appendTo( element.parent().next() );

}

代码的作用是:一般情况下把错误信息显示在中,如果是radio显示在中,如果是checkbox显示在内容的后面

errorClass:String Default: "error"

指定错误提示的css类名,可以自定义错误提示的样式

errorElement:String Default: "label"

用什么标签标记错误,默认的是label你可以改成em

errorContainer:Selector

显示或者隐藏验证信息,可以自动实现有错误信息出现时把容器属性变为显示,无错误时隐藏,用处不大errorContainer: "#messageBox1, #messageBox2"

errorLabelContainer:Selector

把错误信息统一放在一个容器里面。

wrapper:String

用什么标签再把上边的errorELement包起来

一般这三个属性同时使用,实现在一个容器内显示所有错误提示的功能,并且没有信息时自动隐藏errorContainer: "div.error",

errorLabelContainer: $("#signupForm div.error"),

wrapper: "li"

5.3更改错误信息显示的样式

设置错误提示的样式,可以增加图标显示,在该系统中已经建立了一个validation.css专门用于维护校验文件的样式

input.error { border: 1px solid red; }

label.error {

background:url("./demo/images/unchecked.gif") no-repeat 0px 0px;

padding-left: 16px;

padding-bottom: 2px;

font-weight: bold;

color: #EA5200;

}

label.checked {

background:url("./demo/images/checked.gif") no-repeat 0px 0px;

}

5.4每个字段验证通过执行函数

success:String,Callback

要验证的元素通过验证后的动作,如果跟一个字符串,会当做一个css类,也可跟一个函数success: function(label) {

// set   as text for IE

label.html(" ").addClass("checked");

//label.addClass("valid").text("Ok!")

}

添加"valid" 到验证元素, 在CSS中定义的样式

success: "valid"

5.5验证的触发方式修改

下面的虽然是boolean型的,但建议除非要改为false,否则别乱添加。

onsubmit:Boolean Default: true

提交时验证. 设置唯false就用其他方法去验证

onfocusout:Boolean Default: true

失去焦点是验证(不包括checkboxes/radio buttons)

onkeyup:Boolean Default: true

在keyup时验证.

onclick:Boolean Default: true

在checkboxes 和radio 点击时验证

focusInvalid:Boolean Default: true

提交表单后,未通过验证的表单(第一个或提交之前获得焦点的未通过验证的表单)会获得焦点focusCleanup:Boolean Default: false

如果是true那么当未通过验证的元素获得焦点时,移除错误提示。避免和focusInvalid 一起用// 重置表单

$().ready(function() {

var validator = $("#signupForm").validate({

submitHandler:function(form){

alert("submitted");

form.submit();

}

});

$("#reset").click(function() {

validator.resetForm();

});

});

5.6异步验证

remote:URL

使用ajax方式进行验证,默认会提交当前验证的值到远程地址,如果需要提交其他的值,可以使用data 选项

remote: "${pageContext.request.contextPath}/auth/user!ajaxChkIsUserExist.do"或

remote: {

url: "${pageContext.request.contextPath}/auth/user!ajaxChkIsUserExist.do", //后台处理程序type: "post", //数据发送方式

dataType: "json", //接受数据格式

data: { //要传递的数据

userTp : function() {

return $("#userTp").val();

} ,

userId : function() {

return $("#userId").val();

}

}

}

远程地址只能输出"true" 或"false",不能有其它输出。例如UpopMIM中UserAction的用户编号验证后台处理:

public String ajaxChkIsUserExist()

{

String ret = "true";

try {

TblMimUsrInfo user = getUserByKeyCd(userTp,userId);

if (user != null){

ret = "false";

}

} catch (BusinessException e) {

e.printStackTrace();

}

super.ajaxRspMsg = ret;

return AJAX_RSP_RESULT; //对应result类型为freemarker类型

}

5.7添加自定义校验

根据验证需要,可按如下方法添加自定义校验规则,并包含到页面中。其中addMehtod中的参数依次为:规则名称、校验函数、校验失败时的提示信息。

自定义验证方法addMethod:name, method, message

// 中文字两个字节

jQuery.validator.addMethod("byteRangeLength", function(value, element, param) { var length = value.length;

for(var i = 0; i < value.length; i++){

if(value.charCodeAt(i) > 127){

length++;

}

}

return this.optional(element) || ( length >= param[0] && length <= param[1] );

}, $.validator.format("请确保输入的值在{0}-{1}个字节之间(一个中文字算2个字节)"));

//占位符将由param值代入

// 邮政编码验证

jQuery.validator.addMethod("isZipCode", function(value, element) {

var tel = /^[0-9]{6}$/;

return this.optional(element) || (tel.test(value));

}, "请正确填写您的邮政编码");

5.8radio和checkbox、select的验证

1.radio的required表示必须选中一个

2.checkbox的required表示必须选中

id="agree" name="agree" class="{required:true}" />

checkbox的minlength表示必须选中的最小个数,maxlength表示最大的选中个数,rangelength:[2,3]表示选中个数区间

id="spam_email" value="email" name="spam[]" class="{required:true, minlength:2}" />

id="spam_phone" value="phone" name="spam[]" />

id="spam_mail" value="mail" name="spam[]" />

3.select的required表示选中的value不能为空

select的minlength表示选中的最小个数(可多选的select),maxlength表示最大的选中个数,rangelength:[2,3]表示选中个数区间

6校验配置选项说明

jQuery常用功能大全

jQuery常用功能大全 1、关于页面元素的引用 通过jquery的$()引用元素包括通过id、class、元素名以及元素的层级关系及dom或者xpath条件等方法,且返回的对象为jquery 对象(集合对象),不能直接调用dom定义的方法。 2、jQuery对象与dom对象的转换 只有jquery对象才能使用jquery定义的方法。注意dom对象和jquery对象是有区别的,调用方法时要注意操作的是dom对象还是jquery对象。 普通的dom对象一般可以通过$()转换成jquery对象。 如:$(document.getElementByIdx_x("msg"))则为jquery对象,可以使用jquery的方法。 由于jquery对象本身是一个集合。所以如果jquery对象要转换为dom对象则必须取出其中的某一项,一般可通过索引取出。 如:$("#msg")[0],$("div").eq(1)[0],$("div").get()[1],$("td")[5]这些都是dom对象,可以使用dom中的方法,但不能再使用Jquery的方法。 以下几种写法都是正确的: $("#msg").html(); $("#msg")[0].innerHTML; $("#msg").eq(0)[0].innerHTML; $("#msg").get(0).innerHTML; 3、如何获取jQuery集合的某一项 对于获取的元素集合,获取其中的某一项(通过索引指定)可以使用eq或get(n)方法或者索引号获取,要注意,eq返回的是jquery 对象,而get(n)和索引返回的是dom元素对象。对于jquery对象只能使用jquery的方法,而dom对象只能使用dom的方法,如要获取第三个

元素的内容。有如下两种方法: $("div").eq(2).html(); //调用jquery对象的方法$("div").get(2).innerHTML; //调用dom的方法属性

jquery选择器 之 获取父级元素、同级元素、子元素

jquery选择器之获取父级元素、同级元素、子元素 1、父级元素 1.1 parent() 方法返回被选元素的直接父元素。 如:$("span").parent(); 1.2 parents() 方法返回被选元素的所有祖先元素,它一路向上直到文档的根元素()。 如:$("span").parents();

也可以使用可选参数来过滤对祖先元素的搜索。 如:$("span").parents("ul"); 1.3 parentsUntil() 方法返回介于两个给定元素之间的所有祖先元素。 如:$("span").parentsUntil("div");

2、同胞 2.1 siblings() 方法返回被选元素的所有同胞元素。如:$("h2").siblings(); 返回属于

的同胞元素的所有元素: $("h2").siblings("p");

2.2 next() 方法返回被选元素的下一个同胞元素。 如:$("h2").next(); 2.3 nextAll() 方法返回被选元素的所有跟随的同胞元素。如:$("h2").nextAll();

2.4 nextUntil() 方法返回介于两个给定参数之间的所有跟随的同胞元素。 如:$("h2").nextUntil("h6");

2.5 prev(), prevAll() 以及prevUntil() 方法的工作方式与上面的方法类似,只不过方向相反而已:它们返回的是前面的同胞元素。 3、子元素 3.1 children() 方法返回被选元素的所有直接子元素。 如:$("div").children(); 返回类名为"1" 的所有元素,并且它们是

的直接子元素。$("div").children("p.1");

jQuery选择器

$的选择器部分: 凡是运用$,其返回值是一个object $选择器主要用于选择标签.基本用法是同css的选择器.但是,很让人兴奋的是,他支持常见的浏览器,而css中很多选择器是IE6所不支持的. 1.基本选择器(3种): $("标签名"),如$("p")是选取了所有的p标签节点 $("#id名"),如$("#test")是选取了id为test的标签节点 $(".class名"),如$(".test")是选取了所有class为test的标签节点 上面的$("标签名")和$(".class名")返回的都是所有满足的节点,至于进一步筛选可以添加一些函数,如eq,gt,lt 等等. 2.组选择器: 下面还是现做一个约定:把"标签名或#id名或.class名"记作mix,则mix表示一个标签名,或一个#id或一个.class. $("mix,mix,mix,..."),如:$("div,#test1,p,.test2,#test3") 3.后代选择器: $("mix mix"),当然可以是多个嵌套,但后代选择器可以是深层子代,所以$("mix mix mix ...")这种写法作用不大.例子:$("div .test"):在div标签内的所有具有test的class的后代元素(就是被div嵌套的class属性为test 的标签) 可以见DEMO。 4.子选择器: $("mix>mix"),这个放在后代选择器后面是为了和它做对比.子选择器只能选择第一代子代.不处理深层嵌套.例子: $("div>.test")

对这里的p段落标签有效.但对

对这里的p段落标签无效,这里要用 $("div .test) 5.临近选择器: $("mix+mix"),选取下一个兄弟节点.如:$("div +#test"),id为test的的节点必须是div的下一个兄弟节点.

在$("div + #test")中能取到p段落节点

则不能取到 6.属性选择器: 把属性选择器不放在css选择器里面是因为jQuery中写法是不一样的.至于css中写法可以参考我之前写的一篇css的选择器一文.jQuery中是和xPath类似的写法: $("mix[@attr]"):选取所有该mix且具有attr属性的节点 $("mix[@attr=a_value"]):选取所有该mix且具有attr属性并满足属性值为a_value的节点 $("mix[@attr^=a_value_head"]):attr属性的属性值是以a_value_head开头的 $("mix[@attr$=a_value_end"]):attr属性的属性值是以a_value_end结尾的 $("mix[@attr*=a_value"]):attr属性的属性值中包含a_value 7.进一步选择器:

jQuery选择器的工作原理和优化

jQuery选择器的工作原理和优化 至于有那些选择器,在帮助手册中都有,自己去看,这篇主要是分析他的工作原理,而优化我们写的选择器,尤其在页面内容很多的情况下,更应该需要优化。下边就言归正传。 每次申明一个jQuery对象的时候,返回的是 jQuery.prototype.init 对象,很多人就会不明白,init明明是jQuery.fn的方法啊,实际上这里不是方法,而是init的构造函数,因为js的prototype对象可以实现继承,加上js的对象只是引用不会是拷贝,new jQuery,new jQuery.fn和new jQuery.fn.init的子对象是一样的,只是有没有执行到init的不同,这里就不讲原因了,等下一篇再讲为什么会是这样。 当我们使用选择器的时候$(selector,content),就会执行 init(selectot,content),我们看看inti中是怎样执行的: if ( typeof selector == "string" ) { //正则匹配,看是不是HTML代码或者是#id var match = quickExpr.exec( selector );

//没有作为待查找的 DOM 元素集、文档或 jQuery 对象。 //selector是#id的形式 if ( match && (match[1] || !context) ) { // HANDLE: $(html) -> $(array) //HTML代码,调用clean补全HTML 代码 if ( match[1] ){ selector = jQuery.clean( [ match[1] ], context ); } // 是: $("#id") else {

JQuery基础、选择器

jQuery入门 什么是jQuery jQuery是一个JavaScript库,通过封装原生的JavaScript函数得到一整套定义好的方法。它是JohnResig于2006年创建的一个开源项目,随着越来越多开发者的加入,jQuery已经集成了JavaScript、CSS、DOM和Ajax于一体的强大功能。以最少的代码,完成更多复杂而困难的功能,从而得到了开发者的青睐。 主旨:以更少的代码、实现更多的功能(write less ,do more!) 官网:https://www.360docs.net/doc/7c5573771.html,/ jQuery的功能和优势 jQuery作为JavaScript封装的库,它的目的就是为了简化开发者使用JavaScript。主要功能有以下几点: 像CSS那样访问和操作DOM; 修改CSS控制页面外观; 简化JavaScript代码操作; 事件处理更加容易; 各种动画效果使用方便; 让Ajax技术更加完美; 基于jQuery大量插件; 自行扩展功能插件。 jQuery最大的优势,就是特别的方便。比如模仿CSS获取DOM,比原生的JavaScript

要方便太多。并且在多个CSS设置上的集中处理非常舒服,而最常用的CSS功能又封装到单独的方法。 最重要的是jQuery的代码兼容性非常好,你不需要总是头疼着考虑不同浏览器的兼容问题。 其他JavaScript库 目前除了jQuery,还有5个JS库较为流行,他们分别是YUI、Prototype、Mootools、Dojo和ExtJS。 YUI,是雅虎公司开发的一套完备的、扩展性良好的富交互网页工具集。 Prototype,是最早成型的JavaScript库之一,对JavaScript内置对象做了大量的扩展。 Dojo,Dojo强大之处在于提供了其他库没有的功能。离线存储、图标组件等等。 Mootools,轻量、简洁、模块化和面向对象的JavaScript框架。 ExtJS,简称Ext,原本是对YUI的一个扩展,主要创建前端用户界面。(付费的) jQuery代码的编写 配置jQuery环境 1、获取jQuery最新版本 从官网下载:https://www.360docs.net/doc/7c5573771.html,/ 3、jQuery环境配置 jQuery不需要安装,把下载的jQuery.js放到网站上的一个公共位置,想要在某个页面上使用jQuery时,只需在该HTML文档中引入该库文件即可。 4、在页面中引入jQuery 由于jQuery是JavaScript的一个库文件,也就是jQuery本质是一个.js文件,所以使用引入。 简单的jQuery示例

jquery常用的选择器整理

jquery: 基本的选择器: $('#id').css('color','blue');//根据id属性为id,设置css样式颜色设置成蓝色 $('h2').css('background-color','pink'); $('input').css('width','500px'); $('.apple').css('background-color','lightgreen');//class属性值查找 $('*').css('background-color','gray');//通配符 $('h2,#usertel,#userqq').css('color','lightblue');//联合选择器 层次选择器: $('div span');//在div内部获得span节点,不考虑层次,只获得div内第一个span节点,,注意不考虑层次 $('div > span')//在div内部获得子元素span节点 $('div+span')//在div后边获得紧紧挨着的第一个兄弟关系的span节点,获得的是span节点 $('div~span')//在div后边后边获得全部兄弟关系的span节点 并且选择器: $('li').css('color','red'); $('li:first');//:first第一个 :last 最后一个 $('li:eq(3)').css('color','red')//eq(下标索引号码) 获得节点的下标索引值与给定索引值相等 gt(索引号) great than 节点索引值,大于某个范围 lt(索引值) less than 节点索引值,小于某个范围 $('li:gt(5)').css('background-color','pink'); $('li:lt(5)').css('background-color','orange'); :even 匹配到下标索引值为偶数的节点 :odd 匹配到下标索引值为奇数的节点

jQuery选择器种类

jQuery选择器种类 由于经常使用jQuery,但是其中的很多选择器又不太能够熟练记牢使用,所以趁着上周有人分享,我再仔细的把jQuery的选择器过一遍,争取一次拿下,以后做到运用自如。jQuery选择器主要来分可以分为三种:(1)基本选择器(2)层次选择器(3)过滤选择器(4) 表单选择器 1、基本选择器 基本选择器主要就是比较常见和常用的集中,是必须要掌握的。 #ID id选择器返回一个对象$("#div") .class类选择器返回集合$(".content") Element 标签选择器返回集合$("input") * 匹配所有元素返回集合$("*") selector1,selector2,selector3,....合并每个选择器匹配的元素,返回集合$("#div,.class,input") 2、层次选择器(主要是选择层次下面的元素) $("E F") 选择E元素中的所有F后代元素(注意:是子孙元素) 返回集合 $("P>C") 选择P元素下的C子元素(注意:是子元素)返回集合 $("P+N") 选择P元素后的相邻元素(即下一个兄弟元素),和$("P").next("N")方法执行效果相同 $("P~S") 选择P元素之后的所有S兄弟元素,和$("P").nextAll("S")方法执行效果相同,另pre()方法和next()方法相对。preAll()和nextAll()相对。 注意siblings()方法和nextAll()方法的区别:siblings()是所有前后的兄弟元素,nextAll()是所有后面的兄弟元素 第三和第四个选择器常常用后面的写法代替

Jquery选择器分类应用(最全最新)

现在我们开始Jquery 的选择器之旅哈哈。 下面的选择器分类中, 带有“过滤器”的分类表示是“过滤”选择器, 否则就是“选择”功能的选择器。 jQuery 选择器分为如下几类: [说明] 1.点击“名称”会跳转到此方法的jQuery 官方说明文档。 2.可以在下节中的jQuery 选择器实验室测试各种选择器 1. 基础选择器 Basics 名称 说明 举例 #id 根据元素Id 选择 $("divId") 选择ID 为divId 的元素 element 根据元素的名称选择, $("a") 选择所有元素 .class 根据元素的css 类选择 $(".bgRed") 选择所用CSS 类为bgRed 的 元素 * 选择所有元素 $("*")选择页面所有元素 selector1, selector2, selectorN 可以将几个选择器用","分隔开然后再拼成一个选择器字符串.会同时选中这几 个选择器匹配的内容. $("#divId, a, .bgRed") [学习建议]: 大家暂时记住基础选择器即可, 可以直接跳到下一节“jQuery 选择器实验室”进行动手练习, 以后再回来慢慢学习全部的选择器, 或者用到的时候再回来查询。 2.层次选择器 Hierarchy

child必须包含在parent中并且父类是 parent元素.选择CSS类为myList元素中的直接子节点

  • 对 象. prev + next prev和next是两个同级别的元 素. 选中在prev元素后面的next元 素. $("#hibiscus+im g")选在id为hibiscus元素后面的img对象. prev ~ sibling s 选择prev后面的根据siblings 过滤的元素 注:siblings是过滤器 $("#someDiv~[ti tle]")选择id为someDiv 的对象后面所有带有title 属性的元素 3.基本过滤器Basic Filters 名称说明举例 :first匹配找到的第一个元素查找表格的第一 行:$("tr:first") :last匹配找到的最后一个元素查找表格的最后一 行:$("tr:last") :not(selector)去除所有与给定选择器匹配的元 素 查找所有未选中的 input 元素: $("input:not(:checked )") :even匹配所有索引值为偶数的元素,从 0 开始计数 查找表格的1、3、5...行:$("tr:even") :odd匹配所有索引值为奇数的元素,从 0 开始计数 查找表格的2、4、6行:$("tr:odd") :eq(index)匹配一个给定索引值的元素 注:index从0 开始计数 查找第二行:$("tr:eq(1)") :gt(index)匹配所有大于给定索引值的元素 注:index从0 开始计数 查找第二第三行,即索引值是1和2,也就是比0大:$("tr:gt(0)") :lt(index)选择结果集中索引小于N 的 elements 注:index从0 开始计数 查找第一第二行,即索引值是0和1,也就是比2小:$("tr:lt(2)") :header选择所有h1,h2,h3一类的 header标签. 给页面内所有标题 加上背景色: $(":header").css("bac kground", "#EEE"); :animated匹配所有正在执行动画效果的元只有对不在执行动

    完整版(JQuery语法)

    jQuery 语法 您可以选取(查询,query)HTML 元素,并对它们执行“操作”(actions)。 jQuery 语法实例 $(this).hide() 演示jQuery hide() 函数,隐藏当前的HTML 的元素。 $("#test").hide() 演示jQuery hide() 函数,隐藏id="test" 的元素。 $("p").hide() 演示jQuery hide() 函数,隐藏所有 元素。 $(".test").hide() 演示jQuery hide() 函数,隐藏所有class="test" 的元素。 jQuery 语法 jQuery 语法是为HTML 元素的选取编制,可以对元素执行某些操作。 基础语法是:$(selector).action() ?美元符号定义jQuery ?选择符(selector)“查询”和“查找” HTML 元素 ?jQuery action() 执行对元素的操作 实例 $(this).hide() - 隐藏当前元素 $("p").hide() - 隐藏所有段落 $("p.test").hide() - 隐藏所有class="test" 的段落 $("#test").hide() - 隐藏所有id="test" 的元素 提示:jQuery 使用的语法是XPath 与CSS 选择器语法的组合。在本教程接下来的章节,您将学习到更多有关选择器的语法。 文档就绪函数 您也许已经注意到在我们的实例中的所有jQuery 函数位于一个document ready 函数中:

    这是为了防止文档在完全加载(就绪)之前运行jQuery 代码。 jQuery 选择器 选择器允许您对元素组或单个元素进行操作。 jQuery 选择器 在前面的章节中,我们展示了一些有关如何选取HTML 元素的实例。 关键点是学习jQuery 选择器是如何准确地选取您希望应用效果的元素。 jQuery 元素选择器和属性选择器允许您通过标签名、属性名或内容对HTML 元素进行选择。选择器允许您对HTML 元素组或单个元素进行操作。 在HTML DOM 术语中: 选择器允许您对DOM 元素组或单个DOM 节点进行操作。 jQuery 元素选择器 jQuery 使用CSS 选择器来选取HTML 元素。 $("p") 选取 元素。 $("p.intro") 选取所有class="intro" 的 元素。 $("p#demo") 选取id="demo" 的第一个 元素。 jQuery 属性选择器 jQuery 使用XPath 表达式来选择带有给定属性的元素。 $("[href]") 选取所有带有href 属性的元素。 $("[href='#']") 选取所有带有href 值等于"#" 的元素。

    JQUERY选择器按照功能主要分为

    jQuery选择器按照功能主要分为"选择"和"过滤".并且是配合使用的.可以同时使用组合 成一个选择器字符串.主要的区别是"过滤"作用的选择器是指定条件从前面匹配的内容中 筛选,"过滤"选择器也可以单独使用,表示从全部"*"中筛选.比如: $(":[title]") 等同于: $("*:[title]") 而"选择"功能的选择器则不会有默认的范围,因为作用是"选择"而不是"过滤". 下面的选择器分类中,带有"过滤器"的分类表示是"过滤"选择器,否则就是"选择"功能的 选择器. jQuery选择器分为如下几类: [说明] 1.点击"名称"会跳转到此方法的jQuery官方说明文档. 2.可以在下节中的jQuery选择器实验室测试各种选择器 1.基础选择器Basics 名称说明举例 #id根据元素Id选择$("divId")选择ID为divId的元素element根据元素的名称选择,$("a")选择所有元素 .class根据元素的css类选择$(".bgRed")选择所用CSS类为 bgRed的元素 *选择所有元素$("*")选择页面所有元素 selector1, selector2, selectorN 可以将几个选择器用","分隔开然后再拼成一个 选择器字符串.会同时选中这几个选择器匹配的 内容. $("#divId,a,.bgRed") [学习建议]:大家暂时记住基础选择器即可,可以直接跳到下一节"jQuery选择器实验室"进行动手练习,以后再回来慢慢学习全部的选择器,或者用到的时候再回来查询. 2.层次选择器Hierarchy 名称说明举例 ancestor descendant 使用"form input"的形式选中form中的所 有input元素.即ancestor(祖先)为from, descendant(子孙)为input. $(".bgRed div")选择CSS类为 bgRed的元素中的所有

    元素.

    jquery获取对象大全

    jquery 获取对象大全 JQuery 的核心的一些方法 $("Element").length; ' 元素的个 数,是个属性 $("Element").size(); '也是元素的个数,不过带括号是个方 法 $("Element").get(); ' 某个元素在页面中的集合, 以数组的形式 存储 $("Element").get(index); '功能和上面的相同, index 表示第 几个元素,数组的下标 $("Element").get().reverse(); ' 把得到的数组方向 $("Element1").index($("Element2")); '元素 2 在元素 1 中的 索引值是。。。、基本对象获取 (注意这里获取的都是 Jquery 对象而不是 Dom 对象哦,但是 $(".abc")'获得样式class 的名字是.abc 的元素对象 常用 $("div") ' 标签选择器 选择所有的 div 元素 常用 $("#a,.b,span") '表示获得 ID 是 a 的元素和使用了类样式 b 的 元素以及所有的 span 元素 他俩是可以转换滴 ) $("*") '表示获取所有对象 $("#XXX") '获得 id=XXX id 或 CSS 样式 id ) 常用 $("input[name='username'] ") name='userName'的元素 但是我至今没这样用过 的元素对象( id 可以是标签的 获得 input 标签中 常用

    $("#a .b p") 'ID号是a的并且使用了b样式的所有的p元素、层级元素获取$("Element1 Element2 Element3 ") '前面父级后面是子集 $("div > p") ' 获取div 下面的所有的p 元素 $("div + p") 'div 元素后面的第一个p 元素 $("div?p") 'div后面的所有的p元素、简单对象获取$("Element:first") 'HTML 页面中某类元素的第一个元素$("Element:last") 'HTML 页面中某类元素的最后一个元素$("Element:not(selector)") ' 去除所有与给定选择器匹配的元素,如:$("input:not(:checked)") 表示选择所有没有选中的复选框 $("Element:even") ' 获得偶数行 $("Element:odd “) '获得奇数行 $("Element:eq(index)") '取得一个给定的索引值$("Element:gt(index)") '取得给定索引值的元素之后的所有元素 $("Element:lt(index)") '取得给定索引值的元素之前的所有元素、内容对象的获取和对象可见性 $("Element:contains(text)") ' 元素中是否包含text 文本内容$('Element:empty") ' 获得元素不包含子元素或文本的$("Element:partnt") ' 获得元素包含子元素或文本的$("Element:has(selector)") ' 是否包含某个元素,如:

    jQuery选择器大全(48个代码片段+21幅图演示)

    文档不收费,希望下载 一、基本选择器 1. id选择器(指定id元素) 将id="one"的元素背景色设置为黑色。(id选择器返单个元素) $(document).ready(function () { $('#one').css('background', '#000'); }); 2. class选择器(遍历css类元素) 将class="cube"的元素背景色设为黑色 $(document).ready(function () { $('.cube').css('background', '#000'); }); 3. element选择器(遍历html元素) 将p元素的文字大小设置为12px $(document).ready(function () { $('p').css('font-size', '12px'); }); 4. * 选择器(遍历所有元素) $(document).ready(function () { // 遍历form下的所有元素,将字体颜色设置为红色 $('form *').css('color', '#FF0000'); });

    5. 并列选择器 $(document).ready(function () { // 将p元素和div元素的margin设为0 $('p, div').css('margin', '0'); }); 二、层次选择器 1. parent > child(直系子元素) $(document).ready(function () { // 选取div下的第一代span元素,将字体颜色设为红色 $('div > span').css('color', '#FF0000'); }); 下面的代码,只有第一个span会变色,第二个span不属于div的一代子元素,颜色保持不变。

    123 456
    2. prev + next(下一个兄弟元素,等同于next()方法) $(document).ready(function () { // 选取class为item的下一个div兄弟元素 $('.item + div').css('color', '#FF0000'); // 等价代码 //$('.item').next('div').css('color', '#FF0000'); }); 下面的代码,只有123和789会变色

    123

    jQuery的所有方法

    https://www.360docs.net/doc/7c5573771.html,
    https://www.360docs.net/doc/7c5573771.html,
    jQuery 选择器 选择器 实例 选取 所有元素 id=lastname 的元素 所有 class="intro" 的元素 所有 元素 所有 class=intro 且 class=demo 的元素 第一个 元素 最后一个 元素 所有偶数 元素 所有奇数 元素 列表中的第四个元素(index 从 0 开始) 列出 index 大于 3 的元素 列出 index 小于 3 的元素 所有不为空的 input 元素 所有标题元素

    ... 所有动画元素 包含文本的所有元素 无子(元素)节点的所有元素 所有隐藏的 元素 所有可见的表格 所有带有匹配选择的元素 1 / 10
    *
    $("*")
    #id
    $("#lastname")
    .class
    $(".intro")
    element
    $("p")
    .class.class
    $(".intro.demo")
    :first
    $("p:first")
    :last
    $("p:last")
    :even
    $("tr:even")
    :odd
    $("tr:odd")
    :eq(index)
    $("ul li:eq(3)")
    :gt(no)
    $("ul li:gt(3)")
    :lt(no)
    $("ul li:lt(3)")
    :not(selector)
    $("input:not(:empty)")
    :header
    $(":header")
    :animated
    :contains(text)
    $(":contains('W3School')")
    :empty
    $(":empty")
    :hidden
    $("p:hidden")
    :visible
    $("table:visible")
    s1,s2,s3
    $("th,td,.intro")

  • 相关文档
    最新文档