JQuery:常用知识点总结
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的选择器
1.基本选择器:
*所有 | # id | .class | 标签选择器(标签名)|a,b(多个选择器用‘,’隔开)|
2.层级选择器:
a b :选择a的b后代 | a > b:选择a的b孩子 | a+b:选择a的大弟弟b |
a~b:选择a的所有b弟弟|
3.属性选择器:
[属性名] 获取元素上带有该属性名的元素对象
[属性名='值'] 获取元素上带有该属性名且值为''的元素对象
属性选择器一般和标签选择器联合使用:div[属性名=‘值’]
4.基本过滤:
:first 第一个 | :last 最后一个 | :even 偶数 | :odd 奇数 |
:eq(index)索引= | :gt(index)索引> | :lt(index)索引< | :not(选择器)|
4.表单对象属性:
: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.常见的校验规则
- 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");
参数说明:
name:校验器的名称,唯一
function:校验规则
value:用户输入的值
element:要校验的dom对象
params:校验器的值
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)
关注微信公众号,随时随地学习
JQuery:常用知识点总结的更多相关文章
- JQuery常用知识点及示例
1.JQuery 名称解释 JQuery是封装了常用JS操作函数的一个库文件JQuery = Javascript + Query (查询)Jquery意思即指: 强大的DOM节点查询 2.官网:ht ...
- jQuery常用知识点大总结
目录 jQuery jQuery介绍 jQuery的优势 jQuery的引入方式有两种: jQuery对象和dom对象 jQuery选择器 基本选择器(同css) 基本筛选器(选择之后进行过滤): 属 ...
- 24、jQuery常用AJAX-API/Java调用MySQL / Oracle过程与函数
1)掌握jQuery常用AJAX-API 2)掌握Java调用MySQL / Oracle过程与函数 一)jQuery常用AJAX-API 目的:简化客户端与服务端进行局部刷新的异步通讯 (1)取 ...
- 23、jQuery九类选择器/jQuery常用Method-API/jQuery常用Event-API
1)掌握jQuery九类选择器及应用 2)掌握jQuery常用Method-API 3)掌握jQuery常用Event-API 一)jQuery九类选择器[参见jQueryAPI.chm手册] 目 ...
- JQuery常用实用的事件[较容易忽略的方法]
JQuery常用实用的事件 注:由于JQuery片段较多就没有用插入代码文本插入,请见谅!JQuery 事件处理ready(fn)代码: $(document).ready(function(){ ...
- DB2_SQL_常用知识点&实践
DB2_SQL_常用知识点&实践 一.删除表中的数据(delete或truncate) 1 truncate table T_USER immediate; 说明:Truncate是一个能够快 ...
- jquery常用代码集锦
1. 如何修改jquery默认编码(例如默认GB2312改成 UTF-8 ) 1 2 3 4 5 $.ajaxSetup({ ajaxSettings : { contentT ...
- jquery常用函数与方法汇总
1.delay(duration,[queueName]) 设置一个延时来推迟执行队列中之后的项目. jQuery1.4新增.用于将队列中的函数延时执行.他既可以推迟动画队列的执行,也可以用于自定义队 ...
- JQuery常用API 核心 效果 JQueryHTML 遍历 Event事件
JQuery 常用API 参考资料:JQuery 官网 jQuery API 中文文档 核心 jQuery 对象 jQuery() 返回匹配的元素集合,无论是通过在DOM的基础上传递的参数还是创建 ...
随机推荐
- ganglia371 on suse11sp3
参考https://my.oschina.net/duangr/blog/181585 1.确认依赖包是否已安装 确认命令:rpm -qa 如下为适合suse11sp3的依赖包版本 apr: lib ...
- 九度oj 题目1046:求最大值
题目1046:求最大值 时间限制:1 秒 内存限制:32 兆 特殊判题:否 提交:11782 解决:4789 题目描述: 输入10个数,要求输出其中的最大值. 输入: 测试数据有多组,每组10个数. ...
- hdu3303
分析:一个最暴力的想法是把加入到集合S的数据一个个按顺序保存起来,然后每次查询的时候由后向前计算余数,如果遇到余数为0的,就直接把时间输出,否则就一直比较到最后找余数最小时间最晚的,这样查询的时间复杂 ...
- Xdebug的安装、配置和使用
对于我这么一个渣渣php码农,平时总觉得echo.var_dump.print_r就能满足我的调试需求了,最近公司开始一个新项目,要大量阅读调试旧的源码,echo和var_dump开始不够用了,于是装 ...
- T1075 明明的随机数 codevs
http://codevs.cn/problem/1075/ 时间限制: 1 s 空间限制: 128000 KB 题目等级 : 白银 Silver 题目描述 Description 明明想在学校中 ...
- Ubuntu 16.04设置开机关机时显示命令详细信息不显示进度条Logo
1.编辑grub文件 sudo gedit /etc/default/grub 把 GRUB_CMDLINE_LINUX_DEFAULT="quiet splash" 改成 GRU ...
- Eclipse新建/导入Gradle项目
一.新建 1.[New]->[Project] 二.导入 1.[Import] 2. 参考: http://www.vogella.com/tutorials/EclipseGradle/art ...
- ubuntu 安装 swift
第一步 安装mysql和mysql的python支持 apt-get install python-mysqldb mysql-server 第二步 配置mysql vim /etc/mysql/my ...
- vector实现
typedef int size_type; /* vector维护的是一个连续线性空间,提供的迭代器是Random Access Iterators即普通指针 */ template <cla ...
- Apache 配置学习占位
http://www.cnblogs.com/yeer/archive/2011/01/18/1938024.html http://www.cnblogs.com/zgx/archive/2011/ ...