jQuery进阶前言

前言:

在《jQuery入门》一文中,记录了jQuery选择器、属性与样式和DOM操作等内容,本文将对jQuery的事件以及Ajax相关知识点进行讲解。接下来就一起来学习一下。

一、鼠标事件:

1、点击事件click()和dbclick(): 点击事件,就是当用户点击鼠标时该响应的动作,click是单击,dbclick是双击。下面看看它们的用法:

<div id="test">点击触发<div>
$("#test").click(function() {
    alert("div被点击了");
});

当点击了id为test的div时,就会弹出alert的内容,这就是点击事件,dbclick用法类似。

2、mousedown()和mouseup(): 顾名思义,这两个方法是鼠标按下和鼠标弹起时触发的事件。

<div id="test">点击触发<div>
$("#test").mousedown(function() {
   alert("鼠标按下去了");
});
$("#test").mouseup(function() {
   alert("鼠标弹起来了");
});

当鼠标在“点击触发”上按下去的时候,会弹出mousedown的内容,松手的时候会弹出mouseup的内容。

3、mousemove()事件: 这个方法是监听鼠标移动的。用法如下:

<div id="test">滑动触发<div>
$("#test").mousemove(function() {
    alert("鼠标移动了"); 
});

只要鼠标移动了,就会弹出“鼠标移动了”这几个字。类似的方法还有mouseover()、mouseenter()和mouseout()、mouseleave(),前两个是鼠标移入,后两个是鼠标离开,用法类似。

4、hover()事件: 这个方法可以同时绑定鼠标一如和离开事件,比如:

<p>触发hover事件</p>
// hover()方法是同时绑定 mouseenter和 mouseleave事件。
// 我们可以用它来简单地应用在 鼠标在元素上行为
$("p").hover(
   function() {
       $(this).css("background", 'red');
   },
   function() {
       $(this).css("background", 'blue');
   }
);

当鼠标移入p标签区域时,该区域背景颜色变为红色,鼠标离开时该区域背景颜色变为蓝色。

5、focusin()和focusout()事件: focusin()是获取焦点事件。比如有一个输入框,要在该输入框输入文字,我们首先得用鼠标点一下该输入框,这就叫获取焦点。用法如下:

点击聚焦:<input type="text" />
$("input:first").focusin(function() {
     $(this).css('border','2px solid red')
})

点击了输入框后,输入框的边框就会变为红色。focusout()相反,就是失去焦点,用法和focusin()类似。

二、表单事件:

1、blur()和focus(): 这两个就是处理表单焦点的事件,blur()是失去焦点,focus是聚焦。与focusin()和focusout()的区别就是这两个不支持冒泡处理。

2、change()事件: <input>元素,<textarea>和<select>元素的值都是可以发生改变的,我们就可以通过change事件去监听这些改变的动作。当这些元素的值发生变化后,就会触发change()事件。

输出结果:
<div id="result"></div>
<div class="aaron">input:
    <input class="target1" type="text" value="监听input的改变" />
</div>
$('.target1').change(function(e) {
    $("#result").html(e.target.value)
});

当输入框中的内容改变后,就会触发change()事件,输入框中改变后的内容就会输出到“输出结果”这个div种中。

3、select()事件: 当 textarea 或文本类型的 input 元素中的文本被选择时,会发生 select 事件。

<input id="test" value="嘻嘻"></input>
$("#test").select(function(e) { //响应文字选中回调
    alert("e.target.value");
});

选中“嘻嘻”后,就会弹出选中的内容。

4、submit()事件: 这个是表单提交事件,提交表单时触发。

三、键盘事件:

1、keydown()、keyup()和keypress(): keydown类似于mousedown,按下键盘时的事件;keyup就类似于mouseup,按下键盘再松开的那个时候触发的事件;keypress事件只能捕获单个字符,不能捕获组合键,无法响应系统功能键(如delete,backspace),不区分小键盘和主键盘的数字字符。

四、其他:

1、事件的绑定和解绑: 绑定事件用on()方法,解绑用off()。

<div id="test"></div>
//多事件绑定二
$("#test").on({
    mousedown: function(e) {
       $(this).text('触发事件:' + e.type)
    },
    mouseup: function(e) {
       $(this).text('触发事件:' + e.type)
    }
})

当鼠标在div区域按下去,就触发了mousedown事件,松开时就触发了mouseup事件。

 $("button:first").click(function() {
        $(".aaron:first").off('mousedown')
 })

这就是销毁mousedown事件。

2、envent.target: vent.target代表当前触发事件的元素。看案例:

<div class="left">
     <div class="aaron">
         <ul>
             <li>刘亦菲</li>
             <li>林青霞</li>
             <li>张韶涵</li>
             <li>范玮琪</li>
         </ul>
     </div>
</div>
<script type="text/javascript">
     //多事件绑定
     $("ul").on('click',function(e){
        alert('触发的元素是内容是: ' + e.target.textContent)
     })
</script>

这里的e.target表示的就是你所点击的li,当点击“范玮琪”时,就会弹出“范玮琪”。类似的event.currentTarget : 在事件冒泡过程中的当前DOM元素,等同于this。

五、Ajax的应用:

Ajax是一种无需重新加载整个网页的情况下,能够更新部分网页的技术,也就是异步更新。比如一般的网站登录的时候要输验证码,当你输完验证码,就会立即提示验证码正确还是错误,而不需要点击“登录”按钮后再去判断,这就用到了Ajax。接下来就看看如何使用。 1、load()异步请求: 语法:$("#id").load(url,data,function(){...}) 注意,$就是jQuery的简写。url表示要异步请求的url;data是连同请求一起发送到服务器的数据,可选;function就是当请求完执行的函数,可选。案例:

<div class="title">
     <span class="fl">我最爱吃的水果</span> 
     <span class="fr">
         <input id="btnShow" type="button" value="加载" />
     </span>
</div>
<ul></ul><!--用于接收fruit页面的数据-->
<script>
 $("#btnShow").click(function () {
    $("ul").load("static/page/fruit.html" ,function(){
    });
 })
</script>

这段代码就表示当点击了加载按钮后,就会异步请求fruit.html这个页面,然后会把fruit这个页面的内容填充到本页的<ul>中。

2、$.getJSON()异步请求: 语法:$.getJSON(url,data,function(){...}) 三个参数还是和上面的load一样,不过url必须是为请求加载json格式文件的服务器地址,也就是说,请求的url必须返回json格式的数据。

<script type="text/javascript">
    $("#btnShow").click(function () {
       $.getJSON("static/json/sport.json",function(data){
          $.each(data, function (index, sport) {
            $("ul").append("<li>" + sport["name"] + "</li>");
          });
       });
    })
</script>

比如sport.json中保存的是json格式数据,那么上面的代码就会请求获取到这些数据,然后填充到本页的<ul>中。

3、$.getScript(): 用法和$.getJSON()基本一样,区别在于url不是返回json格式数据的url,而是指向一个js文件,比如statis/js/sport.js,还有就是没有data这个参数。

4、$.get(): 使用get()方法时,采用GET方式向服务器请求数据,并通过方法中回调函数的参数返回请求的数据,它的调用格式如下: $.get(url,function(data){...})

5、$.post(): 与get()方法相比,post()方法多用于以POST方式向服务器发送数据,服务器接收到数据之后,进行处理,并将处理结果返回页面,调用格式如下: $.post(url,data,function(){...}) 和get的不同之处就是post方式可以像服务器传参,这个data可以是一个参数,也可以是多个参数,多个参数的时候用大括号包起来,例如:$.post(url,{data1,data2},function(data){...})

6、$.ajax(): 使用ajax()方法是最底层、功能最强大的请求服务器数据的方法,它不仅可以获取服务器返回的数据,还能向服务器发送请求并传递数值,也是最常用的。它的调用格式如下: $.ajax([settings]) 其中参数settings为发送ajax请求时的配置对象,在该对象中,url表示服务器请求的路径,data为请求时传递的数据,dataType为服务器返回的数据类型,success为请求成功的执行的回调函数,type为发送数据请求的方式,默认为get。 常用的格式如下:

$.ajax({
     url: "http://www.baidu.com",
     data: { num: $("#text").val() },
     dataType: "text",
     success: function (data) {

              }
});

总结:

以上就是本文的全部内容,介绍了事件以及Ajax,这都是项目中用得较多的。更多其他用法,请在实践中感受。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Google Dart

AngularDart Material Design 步进器 顶

(adsbygoogle = window.adsbygoogle || []).push({}); fun...

18320
来自专栏DeveWork

为 WordPress 后台管理菜单自定义排序

在对WordPress 进行二次开发时候,可能需要对 WordPress 后台管理菜单自定义排序,后台管理菜单默认的顺序是文章-多媒体-页面-评论-外观……;还...

28690
来自专栏十月梦想

js定时器叠加处理方案

setInterval(function(),1000);设置一个定时器给定时器一个变量名字,如: var timer=setInterval(function...

24130
来自专栏每日一篇技术文章

weex-08-单击事件

18120
来自专栏Java成神之路

博客园_01_为博客园添加目录的方法总结

本文转自:作者:妙音天女    地址:http://www.cnblogs.com/xuehaoyue/p/6650533.html

15220
来自专栏前端真相

css(1)

1 z-index就是网页的z轴,用相对定位绝对定位把两个层重叠在一起,z-index的值越大,就越靠上,注意,z-index没有单位,z-index:99;这...

29290
来自专栏HTML5学堂

CSS3 user-select 禁选文本

HTML5学堂:当我们在访问一个文章网站的时候,常常因为拖拽的时候误选文字,给我们的一种不好的用户体验,而我们可以用CSS3的user-select属性禁选文本...

41860
来自专栏谈补锅

html表单提交

1、只能为input、textarea、select三类类型的标签。只有这些标签用户才可能修改值,<label>、<p>、<font>等标签仅供显示用,没有提交...

28830
来自专栏小文博客

wordpress指针样式自定义——美化你的blog

20740
来自专栏小程序之家

如何使用小程序视图容器组件

在上一篇文章中,我们介绍了小程序入门开发的基础步骤,并通过几个Hello Word例子,让大家体验了下小程序的组件及API使用,接下来的教程中,我们将教大家详细...

6.6K30

扫码关注云+社区

领取腾讯云代金券