博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
jQuer基础
阅读量:6307 次
发布时间:2019-06-22

本文共 2434 字,大约阅读时间需要 8 分钟。

 

一、概述

 

  • jQuery是一个兼容多浏览器的javascript库,核心理念是write less,do more。如今,jQuery已经成为最流行的javascript库,在世界前10000个访问最多的网站中,有超过55%在使用jQuery。
  • jQuery,顾名思义,也就是JavaScript和查询(Query),即是辅助JavaScript开发的库。
  • Query的语法设计可以使开发者更加便捷,例如操作对象、选择元素、制作动画效果、事件处理、使用以及其他功能。

 

二、jQuery使用

  1、 导入js文件,可以通过从谷歌CDN库获取,<script type="text/javascript"src=""></script>

  百度CDN库 <script type="text/javascript"src=""></script>,还可以从新浪等CDN库获取,具体百度吧。个人倾向于

  从jQuery官网下载js文件,直接引用本地文件,这样在无网的情况下也是可以用的。

  官网下载地址 : http://jquery.com/download/

  2、在HTML引入

 ①

这里需要注意两点:

第一点,由于浏览器加载js的顺序是按照<script>出现顺序加载的,所以要注意引入的js文件的位置要位于编写js code 之前,就像上面的顺序一样,②必须位于①后,否则会调不到方法。

第二点,如果考虑到性能加载问题,可能引入的js文件、编写的js code 可以考虑写在body的最底部

三、选择器

 (这里暂时不展开,后续会详细解)

$("p") 选取全部 

元素。$("p.intro") 选取所有包含class为"intro"的

元素。$("#demo") 选取 id为"demo" 的元素。$("[href]") 选取所有带有 href 属性的元素。$("[href='#']") 选取所有带有 href 值等于 "#" 的元素。$("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。$("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。$("[href^='/imgaes/']") 选取所有 href 值以 /imgaes/" 开头的元素。

 

 四、事件处理

 (这里暂时不展开,后续会详细解)

.change() 表单元素的值发生变化.click() 鼠标单击.dblclick() 鼠标双击.focus() 表单元素获得焦点.hover() 同时为mouseenter和mouseleave事件指定处理函数.keydown() 按下键盘(长时间按键,只返回一个事件).keypress() 按下键盘(长时间按键,将返回多个事件).keyup() 松开键盘.load() 元素加载完毕.mousedown() 按下鼠标.mouseout() 鼠标离开(离开子元素也触发).mouseover() 鼠标进入(进入子元素也触发).mouseup() 松开鼠标.ready() DOM加载完成.select() 用户选中文本框中的内容.submit() 用户递交表单......

五、Ajax请求

AJAX = 异步 JavaScript 和 XML(Asynchronous JavaScript and XML)。

简短地说,在不重载整个网页的情况下,AJAX 通过后台加载数据,并在网页上进行显示。

jQuery 异步请求方法jQuery.ajax({                type:'post',                url:url,                data:{                        key:value,                        key:value,                    },                cache:false,                dataType:'json',                success:function(data,textStatus) {                     // todo                } })    参数说明 type :请求方式,常见有:get 、post URL : 请求地址 data : 请求参数,key-value 形式出现 cache : 设置为false 不会从浏览器缓存中加载请求信息 dataType : 返回数据类型格式,如果后台返回数据类型是json格式,可以在这里设为‘json’,这样前端直接拿到 data,就不需要再去转为json,如果没指定,得去转换。
success :请求成功后的回调函数,通常这里就是写异步请求成功后的逻辑代码了,比如请求成功后,往table追加tr内容 error :请求失败后的回调函数
 

 

提示:如果没有 jQuery,AJAX 编程还是有些难度的。

编写常规的 AJAX 代码并不容易,因为不同的浏览器对 AJAX 的实现并不相同。这意味着您必须编写额外的代码对浏览器进行测试。不过,jQuery 团队为我们解决了这个难题,我们只需要一行简单的代码,就可以实现 AJAX 功能。

jQuery的选择器、事件处理由于事件关系,先不展开,后续会完善。上面也是简单提下,也是我做到项目用到的知识,了解肤浅,毕竟不是专业做前端开发的。

参考在线文档 http://api.jquery.com/

推荐学习网站:

http://www.w3school.com.cn/jquery/

转载于:https://www.cnblogs.com/chenmo-xpw/p/4771385.html

你可能感兴趣的文章
zabbix之web性能监控
查看>>
more 命令详解
查看>>
【This is 广告】百度直达号——@ 加 关键字
查看>>
我的友情链接
查看>>
我的友情链接
查看>>
我的友情链接
查看>>
install Windows 7 or Windows Server 2008 R2 using a USB Key
查看>>
JAVA中方法的参数传递(转)
查看>>
Loudrunner编写WinSocket接口测试脚本
查看>>
一个小型数据库的核心组件
查看>>
常见消息队列介绍以及比较总结
查看>>
在U盘上安装Linux系统解决方案
查看>>
×××之GRE的典型配置案例
查看>>
HK 打造×××服务器
查看>>
最近做的一些事情
查看>>
CentOS6 /etc/profile ~/.bash_profile ~/.bashrc等文件的执行顺序
查看>>
SVN服务器端、客户端安装以及集成到eclipse的详细步骤(转)
查看>>
oracle备份 使用RMAN 工具
查看>>
JMeter-Java压力测试工具-02
查看>>
我的友情链接
查看>>