jquery学习教程2

jquery的效果方法--显示和隐藏标签掌握

show()---显示
hide()---隐藏
toggle()---切换显示/隐藏

slideDown()---滑动显示
slideUp()---滑动隐藏
slideToggle()---切换显示/隐藏

fadeIn()---淡入显示
fadeOut()---淡出隐藏
fadeToggle()---切换显示/隐藏

案例

广告窗的定时显示和隐藏
技术：
1 定时器  SetTimeOut(...)
2 显示和隐藏标签方法

jquery的遍历循环方法掌握

1普通遍历文章源自JAVA秀-https://www.javaxiu.com/752.html

$(function () {
   var arr=$("元素");
   for(var i=0;i<arr.length;i++)
   {
      alert($(arr[i]).text());
   }
})

2 jq对象方式遍历文章源自JAVA秀-https://www.javaxiu.com/752.html

$(function () {
// a：元素的角标   b:元素角标对应的元素
$("元素").each(function(a,b){
    alert(a+":"+$(b).text());
  })
})

3 全局方式遍历文章源自JAVA秀-https://www.javaxiu.com/752.html

$(function () {
var arr=$("元素");
$.each(arr,function (a,b) {
    alert(a+":"+$(b).text());
 })
})

4 jq3.0的新特性--遍历方式文章源自JAVA秀-https://www.javaxiu.com/752.html

$(function () {
var arr=$("元素");
for(aaa of arr){
   alert($(aaa).text())
}})

jq的解绑事件方式以及第二种事件绑定方式

On()  jquery的事件绑定方法
$("按钮元素").on("click",function () {
    alert("abcd");
})
​
off() jquery的事件解绑方法
$("按钮元素").click(function () {
    //指定解绑
    $("#bt1").off("事件名");
    //全部解绑
    $("#bt1").off();
})

jq的事件切换

1 普通方式
2 事件切换hover()方式--鼠标移入和移出
3 链式方式

案例：抽奖案例
需求：当用户点击开始按钮时，小像框中的像片快速切换。当用户点击停止按钮时，小像框中的像片停止切换，大像框中也会显示与小像框相同的像片

JQuery插件机制

jquery对外提供了插件机制，可以用来扩展jQuery的功能
如果对jquery的方法不满意，可以使用该提供的机制进行该方法的二次封装或自己扩展方法
二次封装或扩展对象的方法： $("元素").方法()
$.fn.extend()
二次封装或扩展全局的方法： $.each()
$.extend()

jquery的方法整理

1 jQuery操作标签的文本和value值方法
html([值])  获取的标签体		         <div><a href=#>文本</a></div>
text([值])  获取的标签文本内容		 <div>文本</div>
val([值])   获取的是标签的value值      <input type="text" value="abcd/1234" /> abcd/1234

2 jquery操作标签样式
css(name,[value]) 获取/设置指定的CSS样式
addClass(value)   给指定的标签添加样式
removeClass(value)  删除指定的样式	 
toggleClass(value) 切换样式，如果没有样式，则添加，如果有样式，则删除

3 juqery操作标签的各种属性
attr(属性名,[值])方法或prop(属性名,[值])方法
ps：建议1.6以前可以用attr来操作属性 1.6以后可以用prop来操作属性

4 jquery指定插入标签的方法
append(element) 添加成最后一个子元素，两者之间是父子关系
prepend(element) 添加成第一个子元素，两者之间是父子关系
before(element) 添加到当前元素的前面，两者之间是兄弟关系
after(element) 添加到当前元素的后面，两者之间是兄弟关系
remove() 删除元素
empty() 清空元素的所有子元素

5 jquery操作标签的显示和隐藏方法
show() --显示
hide() --隐藏
toggle()  --切换
slideDown()---滑动显示
slideUp()---滑动隐藏
slideToggle()---切换显示/隐藏
fadeIn()---淡入显示
fadeOut()---淡出隐藏
fadeToggle()---切换显示/隐藏

6 jquery的循环遍历方法（4种）
1 for(var i=0;i<数组.length;i++){}
2 $("数组").each(function(a,b){})  a:代表循环的索引号  b:索引号的内容
3 $.each(数组,function(a,b){})	a:代表循环的索引号  b:索引号的内容  $.方法--全局方法  
4 jquery3.x以上版本的循环新功能：for(变量 of 数组){}

7 jquery绑定事件的方式
1 $(元素).事件名(function(){})
2 $(元素).on("事件名",function(){})  $(元素).bind("事件名",function(){})  

8 jquery的事件解绑
$(元素).off("事件名") --指定解绑指定的事件
$(元素).off() --全部解绑事件

9 jquery的事件切换方式
1 普通方式

案例：使用JQuery的提供插件validate完成表单校验

需求：
在学习JavaScript时，我们手动的完成过表单数据的校验，
而表单数据的校验在开发中非常常见，属于通用功能范畴，
实际在开发中我们一般使用都是第三方工具。
在这里我们将使用jQuery的扩展的一个validate插件进行表单的校验。

validate插件的操作步骤：
1 导入jquery.js文件 (js库)
2 导入validate.js文件
3 获取整个表单  $("#ID名")
4 对表单做校验  $("#ID名").validate()
$("#ID名").validate
(
    {
        rules:{name的属性名:{校验器1:值1...}},
        messages:{name的属性名:{校验器1:提示信息1...}}
    }
)