web前端基础笔记5JQuery(下)

属性的操作：val、text、html

方法名描述

val()获得表单元素value属性的值。

val("设置的值")给表单元素的value属性设置值。

html()获得元素的html代码，如果有标签，一并获得。

html("设置的值")设置元素的html代码，如果有标签，将进行解析。

text()获得元素的文本，如果有标签，忽略。

text("设置的值")设置文本，如果含有标签，不进行解析。原样输出。

 

遍历函数：each

 

原始方式遍历

跟普通JS循环一样，使用普通的for循环，因为每个JQ对象都有一个length属性或者size()方法。

语法结构：

for (var i = 0; i < $ele.length或者size(); i++) {

使用获取的标签[索引]操作标签的时候，这里获取的标签[索引]属于原生dom,

还不能直接使用jQuery中的方法，要想使用，必须使用$()包起来。

}

JQ对象的方法 （重点）

此方式是jquery特有的遍历方式，使用JQ对象调用each方法即可遍历。

语法结构：

$ele.each(function(index,element) {

this

});

each方法接收一个回调函数

回调函数参数：

index  :  遍历的索引（下标）

element:  遍历的当前的对象

文档的处理：内部插入

方法名例子             

A.append(B)<A>

A.prepend(B)....

用法:<B></B>

A里面最后面放B</A>

A.prepend(B)<A>                                                                     

B.prependTo(A) <B></B>                                                                                   

用法:....             

A里面最前面放B</A>

 

文档的处理：外部插入

方法名例子

A.after(B)<A></A>

A.insertBefore(B)<B></B>

用法:

A后面放B

A.before(B)<B></B>

A.insertAfter(B)<A></A>

用法:

B后面放A

 

jQuery其它的方法

元素的创建

语法结构：

$('完整的标签');

例如: $('<li>…</li>');

样式的操作：css

语法结构：

$ele.css(样式名);          获取指定标签的指定样式 

$ele.css(样式名，样式值);   给指定标签设置一个样式 

$ele.css({样式名1：值1，样式名2：值2}); 给指定标签设置多个样式 

元素的删除、清空： remove、empty

语法结构：

$ele.remove()； 删除指定的元素

$ele.empty();   清空指定元素的内容，标签保留

常见的事件

语法格式：

$ele.事件名(function() {

});

注意：事件名需要把原生JS的事件的“on”去掉

例如：oDiv.onclick = function() {…};  ->  $div.click(function(){…});

事件的绑定与解绑定

原生JS里面的方法绑定与解绑定：

oBtn.onclick = function() {

console.log('绑定了方法');

};

// 将按钮的点击事件解除

oBtn.onclick = null;

</script>

</body>

jQuery里面另一种的方式的事件的绑定与解绑定：

事件的绑定

语法结构：

jQuery对象.bind(事件类型，响应函数);

例如：

绑定一个事件：

$("btn").bind("click", function(){ … });

绑定多个事件：

$("btn").bind({

click:function(){ … },

mouseover:function(){ … }, 

mouseout:function(){ … } 

});

说明：绑定多个事件使用json格式进行绑定。

事件的解绑定

语法结构：

jQuery对象.unbind([事件类型]);中括号表示可写可不写。不写表示解绑所有的事件。书写就是解除某个事件。

例如：

解绑所有事件：

$("btn").unbind();

解绑指定事件：

$("btn").unbind(“click”);或者   $("btn").unbind(“click mouseout”);

解除多个绑定事件格式：jq对象.unbind("事件1 事件2 ....");

 

校验插件

语法格式：

$("form表单的选择器").validate({

rules : {

   表单项name值：{

校验规则

例如：

"username":{

required:true

  }

}，

   表单项name值：{

校验规则

}，

... ...

},

messages : {

   表单项name值：{

错误提示信息

例如：

"username":{

required:"用户名不能是空"

  }

 

}，

   表单项name值：{

错误提示信息

}，

... ...

}

});

 

说明：

jQuery Validate需要手动的声明对哪个表单进行校验，即需要手动调用validate()方法。

rules： 配置验证规则（JSON结构）

里面是具体的验证规则（JSON结构），key是被验证表单元素的name属性的值，value是验证规则 (也是json格式)

messages： 配置通过验证规则不通过要显示的提示信息（JSON结构）

里面是具体的错误信息（JSON结构），key是被验证表单元素的name属性的值，value是提示信息 (也是json格式)             

 

高级：自定义校验

如果预定义的校验规则尚不能满足需求的话可以进行自定义校验规则，使用jQuery Validate 提供的方法$.validator.addMethod来完成自定义校验规则。

语法结构：

$.validator.addMethod(“name” , method , [message]);

参数1：name，  校验规则的名称。例如：required，pwdFormat等

参数2：method，执行校验时使用的处理函数。该函数返回true表示校验通过，返回false表示校验未通过。

function(value , element , params ){} ,处理函数被调用时，可以获得3个参数。

参数value：   表单项的value值。例如：<input value="aaa">

参数element：被校验的表单项对象。

参数params： 使用当前校验规则传递的值。例如：rules : { username : {required : true} },这里params接收的就是true这个值。

参数3：message，校验未通过时的提示的信息。注意：参数可以不用写，不写可以在messages里面配置！[]表示可写可不写