精选文章 【JQuery】初级学习(下)

【JQuery】初级学习(下)

作者:wlisonate 时间: 2019-09-26 11:16:24
wlisonate 2019-09-26 11:16:24

语言特点:

  • 快速获取文档元素

jQuery的选择机制构建于Css的选择器,它提供了快速查询DOM文档中元素的能力,而且大大强化了JavaScript中获取页面元素的方式。

  • 提供漂亮的页面动态效果

jQuery中内置了一系列的动画效果,可以开发出非常漂亮的网页,许多网站都使用jQuery的内置的效果,比如淡入淡出、元素移除等动态特效。

  • 创建AJAX无刷新网页

AJAX是异步的JavaScript和XML的简称,可以开发出非常灵敏无刷新的网页,特别是开发服务器端网页时,比如PHP网站,需要往返地与服务器通信,如果不使用AJAX,每次数据更新不得不重新刷新网页,而使用AJAX特效后,可以对页面进行局部刷新,提供动态的效果。

  • 提供对JavaScript语言的增强

jQuery提供了对基本JavaScript结构的增强,比如元素迭代和数组处理等操作。

  • 增强的事件处理

jQuery提供了各种页面事件,它可以避免程序员在HTML中添加太事件处理代码,最重要的是,它的事件处理器消除了各种浏览器兼容性问题。

  • 更改网页内容

jQuery可以修改网页中的内容,比如更改网页的文本、插入或者翻转网页图像,jQuery简化了原本使用JavaScript代码需要处理的方式。

1,增加淡入淡出效果

关键就是fade单词啦,意思就是褪色。fadeIn()淡出,fadeOut()淡入,fadeToggle()切换,fadeTo()指定淡入淡出程度。

$(function () {
    var div = $("#d");
    $("#b1").click(function () {
        div.fadeIn();
    });
    $("#b2").click(function () {
        div.fadeOut();
    });
    $("#b3").click(function () {
        div.fadeToggle();
    });
    $("#b4").click(function () {
        div.fadeIn(2000);
    });
    $("#b5").click(function () {
        div.fadeOut(2000);
    });
    $("#b6").click(function () {
        div.fadeToggle(2000);
    });
    $("#b7").click(function () {
        $("#d1").fadeTo("slow",0.2);
        $("#d2").fadeTo("slow",0.5);
        $("#d3").fadeTo("slow",0.8);
    });
});

测试代码:




    
    淡入淡出,指定淡入淡出程度
    














用于演示的div
用于演示fadeTo 20%
用于演示fadeTo 50%
用于演示fadeTo 80%

2,进行自定义动画演示

利用animate函数进行加载

$(function () {
    var div = $("#d");
    $("#b1").click(function () {
        div.animate({left:'100px'},2000);
        div.animate({left:'0px',top:'50px',height:'50px'},2000,function () {//加function()会有延迟效果
            alert("动画演示结束");
        });

    });
});

测试代码




    
    自定义动画
    






向右移动100px

向左下移动50px,同时高度减小

3,事件处理(加载和点击)

  • 页面记载有两种方式,
1.$(document).ready();
2. $();

第二种比较常用,也推荐使用。

  • 图片加载方式
$("#img").load()函数
$(document).ready(function () {
    $("#message1").html("页面加载内容");
});
$(function () {
    $("#img").load(function () {
       $("#message2").html("图片加载成功");
    });
});
  • 双击和单击事件
click() 表示单击
dblclick() 表示双击
 注: 空白键和回车键也可以造成click事件,但是只有双击鼠标才能造成dblclick事件
$(function () {
    $("#b").click(function () {
        $("#message").html("单击按钮");
    });
    $("#b").dblclick(function () {
        $("#message").html("双击按钮");
    });
});

测试代码




    
    事件:1.加载2.点击






【JQuery】初级学习(下)1

4,焦点展示

  • 两种焦点方式
focus() 获取焦点
blur() 失去焦点

$(function () {
    $("input").focus(function () {
        $(this).val("获取了焦点");
    });
    $("input").blur(function () {
        $(this).val("失去了焦点");
    });
});
  • 内容改变方式

利用change()改变内容

对于文本框,只有当该文本失去焦点的时候,才会触发change事件。跟前面结合来看
$(function () {
    $("#input1").change(function () {
        var text = $(this).val();
        $("#message").html("input的内容改变为:"+text);
    });
});

测试代码




    
    焦点展示









//只有当你在input1中不点击的时候触发

5,表单提交

使用form标签

$(function () {
    $("#form").submit(function () {
        alert("提交账号密码");
    });
});

测试代码




    
    提交from表单




账户:
密码:
action="http://how2j.cn/study/login.jsp已经在网上实现,可直接访问

6,绑定事件和触发事件

  • 通过on() 绑定事件来处理
$(function () {
    $("#b").on("click",function () {
       $("#message").html("单击按钮");
    });
    $("#b").on("dblclick",function () {
        $("#message").html("双击按钮");
    });
});
  • 触发事件,在本例中,文档加载好之后,就触发dblclick双击事件,而不是通过去手动双击
$(function () {
    $("#b1").on("click",function () {
        $("#message1").html("单击按钮");
    });
    $("#b1").on("dblclick",function () {
        $("#message1").html("双击按钮");
    });
    $("#b1").trigger("dblclick");
});

测试代码




    
    绑定事件和触发事件






7,提交AJAX请求

  • 普通的提交
$(function () {
    //keyup可以实时监听到移动端input框输入,用onchange和
    // onpropertychange都不行
    $("#name").keyup(function () {
        var page = "http://how2j.cn/study/checkName.jsp";
        var value = $(this).val();
        $.ajax({
            url: page,//表示访问的页面
            data:{"name":value},//表示提交的参数
            success: function (result) {//表示服务器成功返回后对应的响应函数
                $("#checkResult").html(result);
            }
        });
    });
});
  • get方式提交请求
使用get方式请求ajax
$.get(
            page,
            {"name":value},
            function(result){
              $("#checkResult").html(result);
            }
);
  • post方式提交请求
使用post请求提交ajax
$.post(
    page,
    {"name":value},
    function(result){
        $("#checkResult").html(result);
    }
);
  • 最简单的ajax提交请求
//最简单的ajax的方式
//load比起 $.get,$.post 就更简单了
// $("#id").load(page,[data]);
$(function () {
    $("#name1").keyup(function () {
        var value = $(this).val();
        var page = "http://how2j.cn/study/checkName.jsp?name="+value;
        $("#checkResult").load(page);

    });
});

8,格式化form下的输入数据

//serialize(): 格式化form下的输入数据
// 有的时候form下的输入内容比较多,一个一个的取比较麻烦,就可以使用serialize() 把输入数据格式化成字符串
$(function () {
    $("input").keyup(function () {
        var data = $("#form").serialize();
        var url ="http://how2j.cn/study/checkName.jsp";
        var link=url+"?"+data;
        $("a").html(link);
        $("a").attr("href",link);
    });
});

 测试代码




    
    Title




http://how2j.cn/study/checkName.jsp
输入账号:
输入年龄:
输入手机号码:

9,对数组进行操作

//遍历数组
//第一个参数是数组,第二个参数是回调函数i是下标,n是内容
var a = new Array(1,2,3);
 $.each(a,function (i,n) {
     document.write("元素["+i+"]"+n+"
"); }); document.write("
"); document.close(); //去掉重复的元素 //执行unique之前,要先调用sort对数组的内容进行排序。 var a1 = new Array(5,4,2,2,4,5,6,3,3,2); a1.sort(); $.unique(a1); $.each(a1,function (i,n) { document.write("元素["+i+"]"+n+"
"); }); document.write("
"); document.close(); //判断元素是否在数组中存在 var a2= new Array(1,2,3,4,5,6,7,8,9); document.write($.inArray(9,a)); document.close();

10,JQuery转DOM和DOM转JQuery

var s1 = "{\"name\":\"盖伦\"";
var s2 = ",\"hp\":616}";
var s3 = s1+s2;//固定格式,美滋滋
document.write("这是一个字符串:"+s3);
document.write("
"); var gareen = $.parseJSON(s3); document.write("这是一个JSON对象:"+gareen); //JQuery转DOM $(function () { $("#b1").click(function () { var div = $("#d"); var d=div[0]; var s="JQuery对象是"+div; s+="\n对应的DOM对象是 " + d; alert(s); }); }); //DOM转JQuery $(function () { $("#b2").click(function () { var div = document.getElementById("d2") var d=div[0]; var s="JQuery对象是"+div; s+="\n对应的DOM对象是 " + d; alert(s); }); });

测试代码




    
    字符串转化为JSON对象

    









Hello Jqurey
Hello JQuery

下载jquery.min.js.

余生很长,别秃头!!!!!!!

勿删,copyright占位
分享文章到微博
分享文章到朋友圈

上一篇:2019年Q3股票行情:依旧大喜大悲

下一篇:【多线程与并发】锁的种类以及锁的优化

您可能感兴趣

  • 深度学习到底有哪些经典成果?道翰天琼认知智能机器人API平台接口为您揭秘。

    深度学习到底有哪些经典成果?道翰天琼认知智能机器人API平台接口为您揭秘。 2006年,Hinton 发表了一篇论文《A Fast Learning Algorithm for Deep Belief Nets》,提出了降维和逐层预训练方法,该方法可成功运用于训练多层神经网络,使深度网络的实用化成为可能。该论文也被视作深度学习领域的经典之作。 从原理来看,深度学习与神经网络紧密相关:神经网络...

  • Java异常面试题(2020最新版)

    文章目录 Java异常架构与异常关键字 Java异常简介 Java异常架构 1. Throwable 2. Error(错误) 3. Exception(异常) 运行时异常 编译时异常 4. 受检异常与非受检异常 受检异常 非受检异常 Java异常关键字 Java异常处理 声明异常 抛出异常 捕获异常 如何选择异常类型 常见异常处理方式 直接抛出异常 封装异常再抛出 捕获异常 自定义异常 t...

  • 图森未来如何借助云缩短60%模型训练时间

    简介: 阿里云飞天AI加速器+Serverless容器,帮助图森未来提升资源利用率。 图森未来(TuSimple)成立于2015年,是一家专注于L4级无人驾驶卡车技术研发与应用的人工智能企业,已经实现卡车在干线物流场景和半封闭枢纽场景下的无人干预驾驶。图森未来品牌旗下产品——图森未来 L4 级别无人驾驶卡车能够实现环境感知、定位导航、决策控制等自动驾驶核心功能,可应用于高速公路货运和港内集装...

  • 大型架构及配置技术ansible(一)之ansible基础,ad-hoc,批量配置管理,ansible七种武器,JSON简介,YAML简介

    一、ansible基础 6台虚拟机(2cpu,1.5G以上内存,10G以上硬盘,1块网卡) 主机名 IP地址 角色 ansible40 192.168.4.40/24 管理主机 web41 192.168.4.41/24 托管主机 web42 192.168.4.42/24 托管主机 db43 192.168.4.43/24 托管主机 db44 192.168.4.44/24 托管主机 ca...

  • 【STM32F429开发板用户手册】第38章 STM32F429的FMC总线应用之是32路高速IO扩展

    最新教程下载:http://www.armbbs.cn/forum.php?mod=viewthread&tid=93255 第38章 STM32F429的FMC总线应用之是32路高速IO扩展 本章教程为大家讲解利用STM32429的FMC总线扩展出32路高速IO,且使用简单,实际项目中也比较有实用价值。 目录 第38章 STM32F429的FMC总线应用之是32路高速IO扩展 38.1 初...

  • 【计算机网络】第七章:网络安全

    【计算机网络】第七章:网络安全 目录 网络安全问题概述 1.1.计算机网络面临的安全性威胁 1.2.被动攻击和主动攻击 1.3.计算机网络通信安全的目标 1.4.恶意程序(rogue program) 1.5.计算机网络安全的内容 1.6.一般的数据加密模型 两类密码体制 一、对称密钥密码体制 1.1.对称密钥的缺点与优点 1.2.数据加密标准 DES 1.3.DES 的保密性 二、公钥密码...

  • 3dmax高级建模方法总结

    3Dmax有三种高级建模技术:多边形POLYGON建模、面片PATCH建模、NURBS(非均匀有理B样条曲线)建模。    01多边形建模    多边形建模是最为传统和经典的一种建模方式。3Dmax多边形建模方法比较容易理解,非常适合初学者学习,并且在建模的过程中用者有更多的想象空间和可修改余地。3Dmax中的多边形建模主要有两个命令:Editable Mesh(可编辑网格)和Editabl...

  • 五个从存储类内存中受益的应用程序

    存储类内存(SCM)正在迅速摆脱标准技术的炒作周期,进入现实世界。那么有什么好处吗?很简单:突破性的延迟性能。与最新的存储协议NVMe和NVMe-oF结合使用时,系统总响应时间可以缩短一半。 现在,多家供应商在其服务器和存储解决方案中提供了存储类内存(SCM),并且在整个供应商环境中都存在各种实现和支持的可用性模型。服务器通常将单端口存储类内存(SCM)驱动器集成到其系统中,一些存储供应商将...

华为云40多款云服务产品0元试用活动

免费套餐,马上领取!
CSDN

CSDN

中国开发者社区CSDN (Chinese Software Developer Network) 创立于1999年,致力为中国开发者提供知识传播、在线学习、职业发展等全生命周期服务。