jQuery

欢迎大家访问: http://www.dintalk.cn

jQuery本质上就是一个外部的js文件(jQuery.js)，该文件中封装了很多js代码,实现了很多功能。并且jQuery有非常丰富的插件，大多数功能都有相应的插件解决方案。jQuery的宗旨是write less, do more。 (写的更少,做的更多)。

一、语法简介

$("选择器") 或 jQuery("选择器")
var 元素对象 = $("选择器");
eg: var 元素对象 = $("#id值");
元素对象.val(); // 获取当前对象上value属性的值

jQuery和javaScript的区别

1.注意事项：

使用jQuery的方式获取的对象称为jQuery对象;

jQuery对象本质上是js对象数组;

使用dom的方式获取的对象称为dom(js)对象;

两者的方法和属性不能混用;

使用jQuery的方法和属性时,必须保证对象是jquery对象;

2.js对象和jquery对象之间的转换:

• js对象 → jquery对象
  • $(js对象);
  • jQuery(js对象);
• jquery对象 → js对象 (jQuery对象本质上是js对象数组.)
  • 方式1:jQuery对象[index]
  • 方式2:jQuery对象.get(index)

3.在3.0版本后jQuery的页面加载成功事件无顺序,是随机的

jQuery2.0前(不含2.0)如1.11版本用的多,页面加载成功事件有执行顺序,从上到下,js的最后执行,不管将其写到哪个位置。

二、jQuery事件

在js的事件中，事件前加on，可以通过绑定事件和派发事件两种方式。而在jQuery的事件中没有on，直接写名称即可.

1.页面加载成功事件

格式1： $(document).ready(function(){});

格式2： $(function(){});

注意：同一个页面内，jQuery的页面加载成功事件可以出现多次！

2.重点事件

click(fun()) | change(fun()) | submit(fun()) | focus(fun()) | blur(fun()) |

dbclick | keydown | keyup | keypress | mouseup | mousemove | mouseout | mouseover |

3.jQuery事件和事件源的绑定

派发事件: jq对象.事件名称(function(){});

要将jq代码写在head标签中，那么要保页面加载成功后才能使用jq的事件： jQuery对象.事件名称（fun(){}）,完成绑定！

jQuery的事件绑定与解绑:

on 绑定事件: jQuery对象.on("事件名称",function(){})

off 解绑事件: jQuery对象.off("事件名称") |如果不给名称,解绑所有的事件

事件切换: hover: 相当于给一个元素添加了mouseover 和mouseout两个事件!

jq元素对象.hover(function(){// 第一个函数相当于 mouseover

}, function(){ // 第二个函数相当于mouseout

});

三、jQuery的选择器

基本选择器:

*所有 | # id | .class | 标签选择器（标签名）|a,b(多个选择器用‘，’隔开)|

层级选择器：

a b :选择a的b后代 | a > b:选择a的b孩子 | a+b:选择a的大弟弟b |

a~b:选择a的所有b弟弟|

属性选择器：

[属性名] 获取元素上带有该属性名的元素对象

[属性名='值'] 获取元素上带有该属性名且值为''的元素对象

属性选择器一般和标签选择器联合使用：div[属性名=‘值’]

基本过滤：

：first 第一个 | ：last 最后一个 | ：even 偶数 | ：odd 奇数 |

：eq(index)索引= | ：gt(index)索引> | ：lt(index)索引< | :not（选择器）|

表单对象属性：

：enabled 可用的 | ：disabled 不可用的 | ：checked 选中的 | : selected 选中的 |

四：jQuery的DOM操作

1.操作HTML代码/文本/值：

val() :对value属性的操作。jq对象.val() 获取 | jq对象.val("值") 设置

html(): 对标签体的操作。jq对象.html() 获取 | jq对象.html("值") 设置

text(): 对标签体的操作（文本）。jq对象.text() 获取 | jq对象.text("值") 设置

2.文档处理：

内部插入（作为子标签）：

a.append(c) 将c插入到a的内部的后面；

a.prepend(c) 将c插入到a的内部的前面；

外部插入（作为兄弟标签）：

a.after(c) 将c插入到a的后面 | a.before(c) 将c插入到a的前面

删除： empty():清空所有的子标签 | remove()：移除（自杀，连根）

属性：attr():设置或者获取元素的属性

单个属性：jq对象.attr() jq对象.removeAttr("属性名")

多个属性：jq对象.attr( { “属性”：”值“，”属性“ ： ”值“});

prop():使用方式和attr()一样，checked和selected使用prop才能获取到！

class操作：

元素.addClass("属性值")：添加class属性

元素.removeClass("属性值")：移除指定的class

元素.toggleClass(“属性值”)：有class属性就是删除，没有就是添加

css样式：

设置css样式：jq对象.css("属性"，"值")； | jq对象.css({"属性"：“值”，“属性1”：“值1”})

获取元素的宽和高：jq对象.width() | jq对象.height()

3.jQuery效果:

1.基本:宽和高都变化 | hide([毫秒值]) | show([毫秒值]) | toggle([毫秒值]) |

2.滑入滑出:高变化 | slideUp([毫秒值]) | slideDown([毫秒值]) | slideToggle([毫秒值]) |

3.淡入淡出: fadeIn([毫秒值]) | fadeOut([毫秒值]) | fadeToggle([毫秒值]) |

以上效果都可以添加一个回调函数! 如:

fadeToggle(毫秒值,function(){});

4.jQuery遍历:

1.jQuery对象的方法: 格式: [ele0,ele1,ele2] $("tr")

jq对象.each(function([index],[dom对象]){

}); // index:被遍历到的对象索引 ele: 被遍历到的js对象

2.全局函数 :

$.each(要遍历的对象, function([index],[dom对象]){

}); // index:被遍历到的对象索引 ele: 被遍历到的js对象

3.新特性: 格式: for of

for(var 变量 of 被遍历的对象) {}

五:jQuery中的this

  $(document).ready(function () {//全选和全不选
  $("#selectAll").click(function () {
      // $(this):等同与$("#selectAll")
      // this代表的是js对象
    $(".itemSelect").prop("checked",this.checked);
       });
  });
  // 在四中的前两种遍历方法当中,this指遍历到的当前js对象!
  // 在六中的插件语法中,this指的是jq对象!

六:jQuery插件

1.jQuery插件机制概述

jQuery插件的机制很简单，就是利用jQuery提供的jQuery.fn.extend()和jQuery.extend()方法，扩展jQuery的功能.

2.jQuery插件机制语法

jQuery.fn.extend(object) 对jQuery对象进行方法扩展:

  jQuery.fn.extend({
    "check":function(){
      return this.each(function (index,ele) {
        ele.checked = true;// 这里也可不遍历,可用jq的方法: this.prop("checked",true);搞定
      });  // 如果在这里使用 this ,this代表的是jq对象哪个jq对象调用指哪个
    },
    "自定义方法名称":function () {
      // 处理对象的逻辑
      return this.each(function (index,ele) {
        ele.checked = false;
      });
    }
  });

jQuery.extend(object) 对jQuery全局进行方法扩展

  jQuery.extend({
    "min":function (i,j) {
      return i>j?j:i;
    },
    "max":function (i,j) {
      return i>j?i:j;
    }
  });

3.validate插件

使用方式:

• 1.导入jquery.jsvalidate是基于jquery写的,所以要先导入jquery的js文件
• 2.再导入validate.js想要使用别人的插件就必须的导入人家已经写好的js文件(插件)
• 3.在页面加载成功后,要确定对页面上的哪个表单进行校验$(function(){表单对象.validate();});
• 4.validate使用格式:表单对象.validate({rules:{}, //校验规则messages:{} //提示信息});
• 5.常见的校验规则 校验器名称值描述requiredtrue|false必须填写numbertrue|false只能输入数字min数字最小值max数字最大值range[min,max]取值范围minlength数字最小长度maxlength数字最大长度rangelength[minlength,maxlength]长度范围equalTo通过jQuery选择器选中指定元素对象和谁相等(重复密码)email"email"校验邮箱datetrue校验日期dateISOtrue校验日期格式xxxx-xx-xx xxxx/xx/xx
• 6.rules校验器语法:

$(function(){
//1.需要校验的表单进行注册
$("#empForm").validate({
rules:{//规则
"realname":{//表单name属性值
required:true,
ranglength:[1, 8]
},
"username":...
},
messages:{//错误提示信息
"realname":{
required:"* 真实姓名为必填项"
ranglength:"* 长度为{0}~{1}"
},
"username":...
}
});
});

• 自定义校验器
  • $.validator.addMethod(name,function(value,element,params){},"message");
  • 参数说明:
  • value:用户输入的值
  • element:要校验的dom对象
  • params:校验器的值
  • name:校验器的名称,唯一
  • function:校验规则
  • message:当不满足校验规则时的提示信息
  • 格式:

  // 自定义校验器
  // 格式:
  $.validator.addMethod(name,function(val,ele,param){},"message");
  name: 自定义校验器的名称
          function: 完成校验的逻辑,满足返回true,不满足返回false(默认)
  val: 输入框中的值
              ele: 被校验的输入框对象(js对象)
  param: 校验器的值
  message: 提示信息

七:jQuery中表单提交不了

发生此种情况,若既没有报错也无跳转,多半是由于在表单中添加了诸如: name="submit"这样的属性, 在jQuery中包括使用js也一样,由于submit字眼比较特殊,使得js代码无所适从.将name换个名字就好啦!

八:Ajax&jQuery Ajax

1.原生ajax(javaScript):

1.创建ajax引擎(已被浏览器内置) 2.编写onreadystatechange函数

3.确定请求方式和路径 4.发送请求 5. 处理返回结果

  原生ajax使用方式:
  1.创建核心引擎对象(XMLHttpRequest)
      // 复制
      var xmlhttp;
  if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }else{// code for IE6, IE5
   xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
  2.编写回调函数(监听ajax引擎对象的状态变化)
   xmlhttp.onreadystatechange=function(){
    if(xmlhttp.readyState==4 && xmlhttp.status == 200){
  // 获取响应结果信息,并处理信息
      xmlhttp.responseText;
  }
  }
  3.设置请求方式和请求路径
  // get请求携带参数拼接在请求路径后面 ?参数=值&参数=值
  xmlhttp.open(method,url,[async]);
  xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
  4.发送请求
  // 参数格式: 参数=值&参数=值
  // post请求携带的参数要想提交给服务器需要设置请求参数的mime类型
  xmlhttp.send([post请求携带的参数]);

readyState存有 XMLHttpRequest 的状态:

0: 请求未初始化 1: 服务器连接已建立 2: 请求已接收 3: 请求处理中

4: 请求已完成，且响应已就绪

2.jQuery中使用ajax:

1.$.post(url,[params],fn,[type]) |发送post异步请求

• url:请求的路径
• params:请求的参数
  • 格式1:字符串 key1=value1&key2=value2
  • 格式2:json格式{"key1":value1,"key2":value2}
• fn:回调函数 (ajax请求执行完成后调用的函数)function(data){//data:响应回来的数据 （xmlHttp.responseText）}
• type:返回内容的格式 text xml json 默认返回text类型的数据一般不需要自己设置,如果需要设置一般设置为 "json"

2.$.get(url,[params],fn,[type]) |发送get异步请求

3.$.ajax({url,[settings]}) |

url:请求路径 | type:请求方式 | data:请求参数 | success:请求成功后的回调函数

error:请求失败时调用此函数 | dataType:服务器返回的数据类型

一般不需要自己设置,如果需要设置一般设置为 "json"

async:设置是否异步提交 默认值为true(异步提交)

例如: $.ajax({ url:url, data:params, type:"post", success:f, error:function(){alert("失败了")}, async:true}); | 注意事项: 默认get方式提交 !

4.新增签名方式:(3.版本新增)

$.get({[settings]});

url:请求路径 | data:请求参数 | success:请求成功后的回调函数

error:请求失败时调用此函数 | dataType:服务器返回的数据类型

一般不需要自己设置,如果需要设置一般设置为 "json"

async:设置是否异步提交 默认值为true(异步提交)

$.post([settings]);

url:请求路径 | data:请求参数 | success:请求成功后的回调函数

error:请求失败时调用此函数 | dataType:服务器返回的数据类型

一般不需要自己设置,如果需要设置一般设置为 "json"

async:设置是否异步提交 默认值为true(异步提交)

3.json:

格式:

• 格式1:json对象
  • { "key":"value" , "key":value } key: String | value可以为任意类型的数据
• 格式2:json数组
  • ["aa","bb",123,true]
• 格式3:混合json
  • [{"name":"张三","age":18},{"name":"张三","age":18}]
  • {"sudent":["张三","李四","王五"]};

java对象转json串:

jsonlib -| 1.导入jar包 2.使用api

• JSONArray.fromObject(数组或者list)
• JSONObject.fromObject(对象或者map)

fastjson(阿里巴巴) -|

• JSON.toJSONString(str) 可以转一切对象

gson(google) -| 1.Gson g = new Gson(); 2.g.toJson(对象);

Jackson

开源免费的json转换工具，springmvc转换默认使用jackson

1.导入json相关jar包 | 2.创建核心解析对象

• ObjectMapper om = new ObjectMapper();
• om.writeValueAsString(obj)