jQuer基础
一、概述
- jQuery是一个兼容多浏览器的javascript库,核心理念是write less,do more。如今,jQuery已经成为最流行的javascript库,在世界前10000个访问最多的网站中,有超过55%在使用jQuery。
- jQuery,顾名思义,也就是JavaScript和查询(Query),即是辅助JavaScript开发的库。
- Query的语法设计可以使开发者更加便捷,例如操作文档对象、选择DOM元素、制作动画效果、事件处理、使用Ajax以及其他功能。
二、jQuery使用
1、 导入js文件,可以通过从谷歌CDN库获取,<script type=
"text/javascript"
src=
"http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"
></script>
百度CDN库 <script type=
"text/javascript"
src=
"http://libs.baidu.com/jquery/2.0.3/jquery.min.js"
></script>,还可以从新浪等CDN库获取,具体百度吧。个人倾向于
从jQuery官网下载js文件,直接引用本地文件,这样在无网的情况下也是可以用的。
官网下载地址 : http://jquery.com/download/
2、在HTML引入
- <!--引进js资源-->
- <html>
- <head>
- ①<script type="text/javascript" src="js本地路径"></script>
- ②<script>
- $(document).ready(function(){
- // todo
- });
- </script>
- </head>
- <body>
- </body>
- </html>
这里需要注意两点:
第一点,由于浏览器加载js的顺序是按照<script>出现顺序加载的,所以要注意引入的js文件的位置要位于编写js code 之前,就像上面的顺序一样,②必须位于①后,否则会调不到方法。
第二点,如果考虑到性能加载问题,可能引入的js文件、编写的js code 可以考虑写在body的最底部
三、选择器
(这里暂时不展开,后续会详细解)
- $("p") 选取全部 <p> 元素。
- $("p.intro") 选取所有包含class为"intro"的 <p> 元素。
- $("#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/
jQuer基础的更多相关文章
- jquer 基础篇 dom操作
DOM操作: 1.新增元素:创建元素:$("HTML")返回的创建成功的新元素新增子元素:元素.append(obj) 在匹配元素的里面新增一个子元素 追加方式 新元素作为最后一个 ...
- jquer基础篇二
jquery中的过滤选择器: 1.通过标签的内容来进行过滤 :contains(’内容关键字‘) 例: $("input").click(function () { $(" ...
- 前端基础------jquer y学习
一. jquery是什么 快速,简洁,轻量级的JavaScript库(JavaScript框架)使用户可以快速的操作HTML document,实现动画效果,并方便的地为网站提供AJAX交互.文档全面 ...
- 第四篇 前端学习之JQuery基础
一 jQuery是什么? jQuery就是一个JavaScript的库. <1> jQuery由美国人John Resig创建,至今已吸引了来自世界各地的众多 javascript高手加入 ...
- Web前端JQuery基础
JQuery知识汇总 一.关于Jquery简介 jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaS ...
- 第五模块:WEB开发基础 第3章·BootStrap&JQuery开发
01-JQuery介绍 02-jQuery文件引入和加载的区别 03-jQuery的基础选择器 04-jQuery的层级选择器 05-jQuery的基本过滤选择器 06-jQuery的属性选择器 07 ...
- zepto 基础知识(3)
41.height height() 类型:number height(value) 类型:self height(function(index,oldHeight){...}) 类型:self 获取 ...
- Android+Jquery Mobile学习系列(2)-HTML5/Jquery Mobile基础
本章介绍两个关键字[HTML5]和[Jquery Mobile],简单说这两者的关系是:HTML5作为主体,Jquery Mobile在HTML5的基础上对其进行了优化.装饰. HTML5 HTML5 ...
- java基础集合经典训练题
第一题:要求产生10个随机的字符串,每一个字符串互相不重复,每一个字符串中组成的字符(a-zA-Z0-9)也不相同,每个字符串长度为10; 分析:*1.看到这个题目,或许你脑海中会想到很多方法,比如判 ...
随机推荐
- 被FBI点名的中国黑客-Lion
网名:Lion(狮子) 真实姓名:林勇 QQ:21509 简介:红客联盟创始人(该组织在2001年5月的黑客大战中一举成名,会员人数最多时达到6万,很有影响力),现在安氏因特网安全系统(中国) ...
- Java 单链表逆序
代码: package com.wangzhu.linkedlist; public class LinkedListDemo { /** * @param args */ public static ...
- JAVA 字符串编码总结
java 为了解决跨平台,字符串编码的有点特殊 String newStr = new String(oldStr.getBytes(), "UTF-8");java中的Strin ...
- Android开发UI之ViewPager及PagerAdapter
ViewPager,官网链接--http://developer.android.com/reference/android/support/v4/view/ViewPager.html ViewPa ...
- Oracle MySQL Server 安全漏洞
漏洞名称: Oracle MySQL Server 安全漏洞 CNNVD编号: CNNVD-201401-317 发布时间: 2014-01-22 更新时间: 2014-01-22 危害等级: 中危 ...
- Log4net创建日志及简单扩展
转:http://blog.csdn.net/CHENFEIYANG2009/article/details/5397342 1.概述 log4net是.Net下一个非常优秀的开源日志记录组件.log ...
- .net文件压缩和解压及中文文件夹名称乱码问题
/**************************注释区域内为引用http://www.cnblogs.com/zhaozhan/archive/2012/05/28/2520701.html的博 ...
- POJ --- 2918 求解数独
Tudoku Description Tom is a master in several mathematical-theoretical disciplines. He recently fo ...
- Growling Gears
http://acm.hunnu.edu.cn/online/?action=problem&type=show&id=11587 G Growling GearsThe Best A ...
- Javascript检测浏览器对CSS属性的支持 /* supports */
//检测浏览器对CSS属性的支持 supports = (function() { var div = document.createElement('div'), vendors = 'Khtml ...