jquery学习教程2

沙海
沙海
沙海
164
文章
2
评论
2019年1月13日17:33:55 评论 48 2475字阅读8分15秒

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

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

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

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

案例

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

jquery的遍历循环方法掌握

1普通遍历

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

2 jq对象方式遍历

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

3 全局方式遍历

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

4 jq3.0的新特性--遍历方式

$(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...}}
    }
)
继续阅读
  • 资源分享QQ群
  • weinxin
  • 官方微信公众号
  • weinxin
沙海
  • 版权声明:本站是一个IT技术分享社区,沙海技术团队的技术分享社区,我们会经常分享资源和教程。
  • 转载请注明:jquery学习教程2 - GYHQQ社区 ☜(ˆ▽ˆ)
美女讲师教你学C语言
C语言速查手册
Linux服务器网站环境安装
专业承接各类企业网站的开发和维护
收藏排行榜分页查询功能 JavaScript

收藏排行榜分页查询功能

收藏排行榜分页查询功能 需求分析 当用户需要查询当前网站那些旅游线路被收藏更多次或者更热门时,我们可以通过点击“收藏排行榜”导航栏超链接完成根据旅游线路表中收藏次数倒序查询数据,并将查询结果展示在fa...
JavaMail&定时器 Java

JavaMail&定时器

第1章 Filter拦截方式 1.1 include 当设置过滤器的拦截方式为include的时候,只有当使用include方式转发的请求才能被拦截 1.1.1 include拦截方式代码演示 1.创...
Linux搭建web环境手册 Redis

Linux搭建web环境手册

使用说明 说明:该笔记是在linux上安装jdk,mysql,tomcat,redis等软件,以便于建立一个linux系统下的web环境,具体安装过程的流程截图等可以参考我的另一篇图片教程:Linux...
Redis(缓存技术)教程 Java

Redis(缓存技术)教程

概述 Redis是用C语言开发的一个开源的高性能键值对(key-value)数据库 为什么要使用redis? 场景: 在企业级开发,需要完成导航条的数据,但是导航条的数据一般都是来源于数据库,只要每个...
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: