jQuery功能简述

jQuery: 它是一个开源的Ajax框架，也是学javaEE必须要掌握的框架。
因为它是目前企业中用到得最多的一个框架.

-- jQuery历史：2006年8月：第一个版本.2015年4月28日：V1.11.3.-- 它的官方网站： http://www.jquery.comV1.xxx.xx : 支持所有浏览器.V2.xxx.xx : 不支持msie6,7,8. msie9+: html5.V1.xxx.xx: 1.9.0之前版本：下载一个js文件.1.9.0之后版本: 下载两个js文件.下载哪些文件：jquery-1.11.3.js     (源码)jquery-1.11.3.min.js (源码压缩后的)jquery-migrate-1.2.1.js (源码) 迁移插件.jquery-migrate-1.2.1.min.js (源码压缩后的).学习时用：jquery-1.11.3.js jquery-migrate-1.2.1.js实际项目开发：jquery-1.11.3.min.jsjquery-migrate-1.2.1.min.js-- 这个项目的开发宗旨：write less, do more: 写更少，做更多.-- 学习Ajax框架的好处：1. 它可以帮我们解决js跨浏览器兼容问题.2. 简化dom编程.3. 简化异步请求.4. 它提供了一批好用工具的方法.-- 市面上用到得Ajax框架：1. 重量级(界面组件)：extjs、dojo.2. 轻量级(没有界面组件): jquery、prototype.jquery-easyui

一、jQuery入门：第一步：在html页面上引入jquery两个js文件.<script type="text/javascript" src="jquery-1.11.3.js"></script><script type="text/javascript" src="jquery-migrate-1.2.1.js"></script>第二步：监听文档是不是加载完 window.onload.$(window).ready(function(){alert("第一种方式");});$(this).ready(function(){alert("第二种方式");});$(document).ready(function(){alert("第三种方式");});$(function(){alert("第四种方式");});第三步：查询dom元素.$  === jQuerywindow.jQuery = window.$ = jQuery;第四步：对dom元素操作.二、核心部分：1. jQuery(selector, [context]) : 核心函数.核心函数调用返回得是jQuery对象,这个jQuery对象就封装了查询到得dom元素.对jQuery对象做操作，实际上就是对它查询到得dom元素做操作.-- selector : 选择器(是jQuery规定的查询字符串).-- context: 上下文(也是就是查询范围)。默认为document.(当前html文档).2. $("selector").length: 获取jQuery对象中查询到得dom元素的个数. 3. $("selector").size(): 获取jQuery对象中查询到得dom元素的个数. 4. $("selector").each() : 迭代jQuery对象中查询到得dom元素。$("selector").each(function(i, item){// i: 索引号// this === item : dom元素});5. $("selector").selector: 获取你调用jQuery核心函数传进去的第一个参数.6. $("selector").context: 获取你调用jQuery核心函数传进去的第二个参数.7. $("selector").get(i): 从jQuery对象中根据索引号取指定dom元素.$("selector").get(): 从jQuery对象中取指定dom元素,返回一个dom元素数组(Array).8. 从jQuery对象中取dom元素：a. 第一种方式：$("selector").get(i).b. 第二种方式：$("selector").get()[i].c. 第三种方式：$("selector")[i].d. 第四种方式：$("selector").toArray()[i]. 9. 把dom元素转换成jQuery对象.var obj = $(dom元素);三、选择器(查询字符串)1. $("#html元素的id属性值"): $("#div1").2. $("html元素的标签名"): $("div") $("input").3. $(".html元素的class属性值"): $(".myClass1").4. 选择器组合：$("#html元素的id属性值,html元素的标签名,.html元素的class属性值");5. $("selector1 selector2") : 查询父元素中所有的子元素(不是父子关系的查询).6. $("selector1 > selector2") : 查询父元素中的直接子元素(父子关系的查询).7. $("selector1 + selector2") : 查询相邻的后面的一个元素.8. $("selector1 ~ selector2") : 查询相邻的后面的所有的指定元素.9. $("selector:first") : 查询后取第一个.10. $("selector:last") : 查询后取最后一个.11. $("selector:eq(i)") : 查询后根据索引号取指定的.12. $("selector:not(selector)"): 查询后不包含指定的索引号对应的dom元素.13. 属性选择器:a. $("html元素的标签名[属性名]"). $("div[id]")b. $("html元素的标签名[属性名=属性值]"). $("div[id='div1']")c. $("html元素的标签名[属性名^=属性值]"). $("div[id^='di']")d. $("html元素的标签名[属性名$=属性值]"). $("div[id$='v1']")e. $("html元素的标签名[属性名*=属性值]"). $("div[id*='i']")f. $("html元素的标签名[属性名!=属性值]"). $("div[id!='div1']")属性选择器组合：$(html元素的标签名[属性名][属性名=属性值][属性名^=属性值]...")14. $("selector:checked"): 把选中的checkbox、radio查询出来.$("input[type='checkbox']:checked");$("input[type='radio']:checked");15. $("selector:selected"): 把选中的option查询出来.$("select > option:selected");四、操作属性：1. 添加属性值：$("selector").attr("属性名", "属性值") .attr("属性名", "属性值");$("selector").attr({"属性名":"属性值","属性名": "属性值"});$("selector").prop("属性名", "属性值").prop("属性名", "属性值");$("selector").prop({"属性名":"属性值","属性名": "属性值"});2. 获取属性值：$("selector").attr("属性名");$("selector").prop("属性名");3. 删除属性:$("selector").removeAttr("属性名");五、操作class： 1. 添加class:$("selector").addClass("class名称1 class名称2");2. 删除class:$("selector").removeClass("class名称1 class名称2"); // 删除指定class$("selector").removeClass(); // 删除全部class3. 获取class:$("selector").attr("class");4. class开关:$("selector").toggleClass("class名称1 class名称2");//对指定class做开关操作.六、操作文本： 1. 添加文本$("selector").html("html格式文本|普通文本");$("selector").text("普通文本");2. 获取文本$("selector").html();$("selector").text();3. 删除文本$("selector").html("");$("selector").text("");七、操作value： 1. 设置value$("selector").val("值");$("selector").attr("value","值");$("selector").prop("value","值");$("selector").get(0).value = "值";$("selector").get()[0].value = "值";$("selector")[0].value = "值";$("selector").toArray()[0].value = "值";2. 获取value$("selector").val();$("selector").attr("value");$("selector").prop("value");$("selector").get(0).value;$("selector").get()[0].value;$("selector")[0].value;$("selector").toArray()[0].value;3. 删除value$("selector").val("");$("selector").attr("value","");$("selector").prop("value","");$("selector").get(0).value = "";$("selector").get()[0].value = "";$("selector")[0].value = "";$("selector").toArray()[0].value = "";八、操作css(style属性):1. 设置css$("selector").css("样式名", "样式值");$("selector").css({"样式名": "样式值", "样式名": "样式值"});2. 获取css值$("selector").css("样式名");3. 删除css$("selector").css("样式名", ""); // 删除指定的$("selector").removeAttr("style"); // 删除全部4. 设置宽度、获取宽度.$("selector").width("值");$("selector").width();5. 设置高度、获取高度.$("selector").height("值");$("selector").height();九、文档处理：/** ############### 往目标元素里面添加子元素  ################# **/1. $("selector").append("html格式的字符串"); // 往目标元素里面最后面添加子元素.2. $("html格式的字符串").appendTo("selector"); // 把子元素追加到目标元素里面最后面.3. $("selector").prepend("html格式的字符串"); // 往目标元素里面最前面添加子元素.4. $("html格式的字符串").prependTo("selector"); // 把子元素追加到目标元素里面最前面./** ############### 往目标元素外面添加相邻的元素 ################# **/5. $("selector").after("html格式的字符串"); // 往目标元素外面最后面添加相邻元素.6. $("html格式的字符串").insertAfter("selector"); // 把元素追加到目标元素外面最后面.7. $("selector").before("html格式的字符串"); // 往目标元素外面最前面添加相邻元素.8. $("html格式的字符串").insertBefore("selector"); // 把元素追加到目标元素外面最前面.9. $("selector").empty(); // 清空所有的子元素.10. $("selector").remove(); // 删除所有的元素.十、筛选(查询后再一次过滤):-- 实际是把选择器改成了方法.1. $("selector").eq(i) : 查询后再根据索引取.2. $("selector").first() : 取第一个3. $("selector").last() : 取最后一个4. $("selector").filter("seletor"): 查询后把需要的过滤出来.5. $("selector").map() : 把查询到的jQuery对象转化成另外一个jQuery对象.该jQuery对象中封装的元素不再是dom元素，而是map方法中回调函数的返回值.var obj1 = obj.map(function(i, item){  // obj1封装得是map方法回调函数的返回值//alert(i + "==" + item);return item.name + "=" + item.value;});alert(obj1.get().join("&"));6. $("selector").not("selecotr") : 查询后不包含哪一个.7. $("selector").children() : 查询所有直接的子元素.8. $("selector").find("selector"): 查询指定的子元素.$("ul").find("div").css("color", "red");十一、动画效果:1. 显示与隐藏:a. $("selector").show(1000, function(){}); // 显示-- 第一个参数：执行动画毫秒数.-- 第二个参数：动画完成后需要回调的函数.b. $("selector").hide(1000, function(){}); // 隐藏-- 第一个参数：执行动画毫秒数.-- 第二个参数：动画完成后需要回调的函数.c. $("selector").toggle(1000, function(){}); // 显示隐藏开关-- 第一个参数：执行动画毫秒数.-- 第二个参数：动画完成后需要回调的函数.2. 滑上与滑下：a. $("selector").slideDown(1000, function(){}); // 显示(滑下)-- 第一个参数：执行动画毫秒数.-- 第二个参数：动画完成后需要回调的函数.b. $("selector").slideUp(1000, function(){}); // 隐藏(滑上)-- 第一个参数：执行动画毫秒数.-- 第二个参数：动画完成后需要回调的函数.c. $("selector").slideToggle(1000, function(){}); // 显示隐藏(滑下滑上)开关-- 第一个参数：执行动画毫秒数.-- 第二个参数：动画完成后需要回调的函数.3. 淡入与淡出：a. $("selector").fadeOut(1000, function(){}); // 显示(淡入)-- 第一个参数：执行动画毫秒数.-- 第二个参数：动画完成后需要回调的函数.b. $("selector").fadeIn(1000, function(){}); // 隐藏(淡出)-- 第一个参数：执行动画毫秒数.-- 第二个参数：动画完成后需要回调的函数.c. $("selector").fadeToggle(1000, function(){}); // 显示隐藏(淡入淡出)开关-- 第一个参数：执行动画毫秒数.-- 第二个参数：动画完成后需要回调的函数.4. 淡入到指定的透明度：$("selector").fadeTo(1000, [0-1], function(){});-- 第一个参数：执行动画毫秒数.-- 第二个参数：透明度(0-1).-- 第三个参数：动画完成后需要回调的函数.十二、事件绑定：1. 用on()方法绑定事件.$("selector").on("click mouseover", {name:'admin'}, function(event){// event.type : 获取事件类型.// event.data : 获取事件数据.});-- 第一个参数：事件名(事件名把前面的on去掉).-- 第二个参数：数据.-- 第三个参数：事件处理函数.$("selector").on({"click" : function(){},"mouseover" : function(){}});2. 用bind()方法绑定事件.$("selector").bind("click mouseover", {name:'admin'}, function(event){// event.type : 获取事件类型.// event.data : 获取事件数据.});-- 第一个参数：事件名(事件名把前面的on去掉).-- 第二个参数：数据.-- 第三个参数：事件处理函数.$("selector").bind({"click" : function(){},"mouseover" : function(){}});3. 主动触发事件.a. $("selector").trigger("click");b. $("selector").triggerHandler("click");4. hover集成了onmouseover与onmouseout.$("selector").hover(function(){},  // onmouseoverfunction(){}   // onmouseout);5. 按点击次数绑定事件：$("selector").toggle(function(){ // 点击第一次}, function(){ // 点击第二次}, function(){ // 点击第三次});6. 特殊方法绑定相应的事件：onclick  --> click();onblur   --> blur();onchange --> change();onxxx    --> xxx();十三、事件对象：-- event.type : 获取事件类型.-- event.data : 获取事件数据.十四、工具方法：1. $.each() : 数组迭代方法$.each([], function(i, item){// i : 索引号// this === item : 数组元素});2. $.extend({},{}) : 两个json对象进行合并,把后面的json对象合并到前面的json对象中.3. $.grep() : 数组过滤返回一个新数组.var newArr = $.grep([], function(item, i){// i : 索引号// item : 数组元素return true: 保留  false: 不保留});4. $.map(): 把一个数组转化成一个新的数组.var newArr = $.map([], function(item, i){// i : 索引号// item : 数组元素return "值"; // 返回值存入新的数组});5. $.merge([],[]): 两个数组合并，返回一个新数组.6. $.parseJSON(): 把json字符串解析成json对象.var str = '{"name" : "李刚", "age" : 50}';-- key : 必须用双引号-- value: 如果是字符串也必须用双引号.7. $.trim() : 去掉字符串前后的空格.8. $.param() : 把json对象转化成get请求的字符串key=value&key=value9 . $("#form的id属性值").serialize() : 把表单中的input元素序列成get请求的字符串.<input type="text" name="userId" value="admin"/><input type="text" name="pwd" value="111111"/>name属性值=value属性值&name属性值=value属性值userId=admin&pwd=11111十五、异步请求(ajax)：1. $.ajax(url, settings) : 核心方法.-- 第一个参数：请求URL.-- 第二个参数：settings发送异步请求需要设置的参数.{}json对象.$.ajax({url : "请求URL",type : "get|post|put|delete", // 请求方式data : "key=value&key=value|{key:value,key:value}|[{key:value,key:value},..]", // 请求参数dataType : "text|html|xml|json|script|jsonp", // 指定服务器响应回来的数据类型.async : true|false, // 异步｜同步success : function(data){ // 请求成功// data : 响应数据},error : function(){ // 请求失败}});2. $.get() : 只发送get请求  $.get(url, data, function(data, status){// status(状态码): success 、error// data : 响应数据}, dataType);-- 第一个参数：请求URL-- 第二个参数：请求参数-- 第三个参数：回调函数-- 第四个参数：服务器端响应回来的数据类型3. $.post() : 只发送post请求$.post(url, data, function(data, status){// status(状态码): success 、error// data : 响应数据}, dataType);-- 第一个参数：请求URL-- 第二个参数：请求参数-- 第三个参数：回调函数-- 第四个参数：服务器端响应回来的数据类型4. $.getJSON(): 发送get请求响应数据为json.$.getJSON(url, data, function(data, status){// status(状态码): success 、error// data : 响应数据});-- 第一个参数：请求URL-- 第二个参数：请求参数-- 第三个参数：回调函数5.  $.getScript() : 发送get请求响应数据为script.$.getScript(url, function(data, status){// status(状态码): success 、error// data : 响应数据});-- 第一个参数：请求URL-- 第二个参数：回调函数6. $("selector").load()发送get请求响应数据为html.(加载公共的页面)$("selector").load(url, function(data, status){// status(状态码): success 、error// data : 响应数据});-- 第一个参数：请求URL-- 第二个参数：回调函数// 发送异步请 求开始$("#loading").ajaxStart(function(){$(this).show();});// 发送异步请 求结束$("#loading").ajaxStop(function(){$(this).hide();});异步请求示例：1. 省份城市联级下拉列表(异步请求,响应数据为xml) $.ajax()
2. 省份城市联级下拉列表(异步请求,响应数据为json) $.ajax()
3. $.get()发送请求4. $.post()发送请求
5. $.getScript()
6. $.getJSON()
7. $("selector").load()

jQuery功能简述相关推荐

简述机器指令与微指令之间的关系_SAP Marketing Cloud功能简述(四) 线索和客户管理...
这个系列的前三篇文章Grace Dong已经给大家带来了下面的内容: SAP Marketing Cloud功能简述(一) : Contacts和Profiles SAP Marketing Clou ...
SAP Marketing Cloud功能简述(五) : 销售计划管理
Grace前四篇介绍SAP Marketing Cloud的文章: SAP Marketing Cloud功能简述(一) : Contacts和Profiles SAP Marketing Cloud ...
SAP Marketing Cloud功能简述(四) : 线索和客户管理
这个系列的前三篇文章Grace Dong已经给大家带来了下面的内容: SAP Marketing Cloud功能简述(一) : Contacts和Profiles SAP Marketing Clou ...
SAP Marketing Cloud功能简述(三) 营销活动内容设计和产品推荐
Grace的前两篇文章: SAP Marketing Cloud功能简述(一) : Contacts和Profiles SAP Marketing Cloud功能简述(二) : Target Grou ...
SAP Marketing Cloud功能简述(二) Target Group
这个系列的第一篇文章 SAP Marketing Cloud功能简述(一) : Contacts和Profiles,我向大家介绍了SAP Marketing Cloud里的Contacts和Profi ...
FEC生鲜配送软件8大功能简述_功能列表
筷云信息专为生鲜配送行业的企业提供独立部署的生鲜配送解决方案,筷云信息的生鲜配送系统覆盖企业上游的从采购到入库,下游的下单.分拣.配送到结算等整个环节.全流程数字化帮助生鲜配送企业互联网转型,有效提高 ...
MathNet.Numerics主要类功能简述
MathNet.Numerics主要类功能简述 MathNet.Numerics是一个.NET的开源数学库,包含了.NET平台上的面向对象数字计算的基础类.类似 NMath ,但 NMath 是收费的 ...
一、功能简述正是微博如火如荼的时节，其中各个微博的分享功能是网站推广产品的好东东啊，此时如何方便快捷的使用微博的分享功能就显得比较重要了。我的站点每篇文章的底部有一些分享的链接：不过我觉得这些分享
一.功能简述正是微博如火如荼的时节,其中各个微博的分享功能是网站推广产品的好东东啊,此时如何方便快捷的使用微博的分享功能就显得比较重要了.我的站点每篇文章的底部有一些分享的链接: 不过我觉得这些分享 ...
微信PC端各个数据库文件结构与功能简述 - Multi文件夹
异想之旅:本人原创博客完全手敲,绝对非搬运,全网不可能有重复:本人无团队,仅为技术爱好者进行分享,所有内容不牵扯广告.本人所有文章仅在CSDN.掘金和个人博客(一定是异想之旅域名)发布,除此之外全部是 ...

jQuery功能简述

jQuery功能简述相关推荐

最新文章

热门文章