jQuery
js类库
把常用对象或者方法封装起来 让我们写代码效率更高
1.jQuery
DO MORE,WRITE LESS
2.extjs
jQuery:
jquery的引入:
通过script标签的src属性引入
入门
获取jquery对象
$(选择器) ==jQuery(选择器)
获取值
jquery.val();
jquery对象和dom对象的转换
dom转jquery对象
var jquery对象=$(dom);
jquery对象转dom对象
方式一
var dom=jquery对象[index]
方式二
var dom=jquery对象.get(index)
页面加载成功事件
js原生
onload=function(){
}
jquery:
方式一
$(document).ready(function(){});
方式二
$(function(){
js代码
})
事件总结
掌握
submit
click
focus
blur
事件绑定
js原生
方式一
通过标签的事件属性绑定
方式二
派发机制
元素.事件名=function(){}
jquery:
jquery对象.事件(function(){});
jquery对象.click(function(){})
效果:
基础 ☆
show([毫秒值]);显示
hide([毫秒值]);隐藏
toggle([毫秒值]);切换
了解:
滑入滑出
slideUp([毫秒值]);滑出
slideDown([毫秒值]):滑入
slideToggle([毫秒值]):切换
淡入淡出
fadeIn([毫秒值]);淡入
fadeOut([毫秒值]):淡出
fadeTo([毫秒值]):
fadeToggle([毫秒值]);切换
jquery的选择器
基础选择器:必须掌握
id选择器: #id
类选择器: .class
元素选择器 :xxx
所有选择器 : *
分组选择器: 选择1,选择器2
层次选择器:必须掌握
a b:a的b后代
a>b:a的b孩子
a+b:a的b的大弟弟
a~b:a的b的所有弟弟
过滤选择器:
特点:
前面都跟上了:
:first 第一个元素
:last 最后一个
:eq(index) 你指定的索引的元素
:lt(index) 小于
:gt(index) 大于
:even 偶数
:odd 奇数
内容过滤选择器
has(选择器):
可见性过滤选择器:
:hidden 针对隐藏域 display=none
:visible 可见的
属性选择
[zz='z']:选中指定的属性为指定的值
[zz]:选中只要含有zz属性
表单选择器:
:input
选中form的所有子元素
input select textarea button
input
css操作和属性操作
css
获取或设置元素样式
css("属性名","值"):设置css样式
css("属性名");获取指定属性名的值
css({
"属性名1":"值1",
"属性名2":"值2"
}); json 设置多个样式
位置
offset
left:
top
宽度
高度
属性操作:
<xx 属性名="属性值"/>
获取设置属性操作
attr("属性名","值");设置属性
attr("属性名");//获取
attr({
"属性名1":"值1",
"属性名2":"值2"
})//设置多个属性
removeAttr("属性");删除
添加一个样式class属性
attr("class","class名字1");
attr("class","class名字2");
addClass("class名字");//添加
removeClass("class名字");//删除
遍历:
js原生:
for(var i=0;i<?;i++){
}
jquery:
方式一:
想要遍历的jquery对象.each(function(index,dom){
});
方式二:
$.each(想要遍历的jquery对象,function(index,dom){
});
操作元素的值或者标签体
xxx():获取操作
xxx("值"):设置
获取 或设置值
val();
获取或设置标签体
html()
获取或设置标签体
text()
插入操作:
内部插入:
append() a.append(b) 把b添加的a的内部的后面
prepend() :a.prepend(b) 把b添加到a的内容的前面
appendTo() a.appendTo(b) 把a添加到b的内部的后面
prependTo() :a.prependTo(b) 把a添加到b的内部的前面
外部插入:
after(): a.after(c) 在a的后面添加c
before():a.before(c) 在a的前面添加c
insertAfter();a.insertAfter(c) 把a添加到c的后面
insertBefore():a.insertBefore(c) 把a添加到c的前面
清除操作:
empty():清除
remove();移除 自杀
select下拉选择框
属性:
multiple:值multiple 规定可以多选
size:控制显示的项目的数目
表单对象属性过滤选择器
:enabled:可用的
:disabled:不可用
:checked:(针对的是radio checkbox)
:selected:下拉选择框
validator插件
基于jquery编写
使用:
1.首先必须引入jquery库
2.引入validator的库
3.在页面加载成功之后指定你想要验证的表单
$(function(){
$("选择器").validate();
})
4.validate方法的使用
$("选择器").validate({
rules:{},
messages:{}
});
5.常见的规则
required:必须填写 true|false
number:必须填写数值类型 true|false
min:最小值 5
max:最大值
range: 区间 [min,max]
maxlength:|minlength:rangelength
equalTo:"选择器"
digits:整数
email:email
6.规则的书写格式:
$("选择器").validate({
rules:{
//书写格式
},
messages:{}
});
书写格式:
方式一:
想要校验的字段的name属性名:"规则名"
方式二:
想要校验的字段的name属性名:{
"规则1":值,
"规则2":值
}
7.自定义错误提示信息
书写格式:
方式一:
想要校验的字段的name属性名:"提示信息"
方式二:
想要校验的字段的name属性名:{
"规则1":"提示信息1",
"规则2":"提示信息2"
}
8.validate的自定义规则
$.validator.addMethod(name,fn,message);
name:规则名
fn:
function(value,element,params){
value:用户输入的值
element:元素本身
params:参数
}
//必须有返回值 boolean
message:默认的提示信息