Jquery基本教程(背还是要背的)
Jquery入门学习
一.简介
1.Jquery是基于JavaScript的一种框架,兼容主流浏览器,提供了dom,animate(JQ+CSS),ajax;
2.Jquery2.0后版本不支持IE6/7/8浏览器
特点
--- write less, do more
二.引入对象获取
1.引入
<script src="jquery-1.11.0" type=""text/javascript>
</script>
2. 对象获取
//获取文本框内容
<input type="text" name="username" id="username" value="java" />
//获取文本框对象
var ot = $("#username");
或者
var ot = JQuery("#usernmme");
3. Jquery对象操作
获取Jquery对象的两种方式:
- JQuery("选择器");
- $("选择器");
- 当然是各种各样的选择器啊
演示:获取对象中的value属性值
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>JQuery测试啊</title>
</head>
<body>
<input type="text" id="username" value="觥筹啊觥筹" class="usr">
</body>
</html>
<script src="js/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
var ol = $("#username");
console.log(ol.val()); //觥筹啊觥筹
var ol1 = document.getElementById("username");
console.log(ol1.value); //觥筹啊觥筹
</script>
三.JQuery对象和Dom对象的关系
1. Dom对象封装在Jquery对象中,他们可以相互转换,但是无法直接使用Jqyery对象调用dom的方法
2. 转换语法
- Dom->JQ:<font color="red">$(dom对象)</font>
- JQ->DOM:<font color="red">JQ[0] 或 JQ.get()</font>
觥筹啊觥筹Jquery_ol
index.html:18 觥筹啊觥筹Dom_ol1
ol.get(0).value
"觥筹啊觥筹"
ol1.value
"觥筹啊觥筹"
3. 基本语法
- 页面加载函数
- 最后执行,最根本的: window.onload=function(){};
- 在其他非加载完毕代码执行后执行,最先执行: $(document).ready();
- 回调当前函数对象,所有执行顺序仅比window.onload高一点: $(document).ready(fnuction(){});
<script type="text/javascript">
$(document).ready(function(){console.log("Jq2_页面加载完成")});//No.2
window.onload=function (){
console.log("Dom_页面加载完成");
}//No.3
$(document).ready(console.log("Jq1_页面加载完成"));//No.1
</script>
四.Jquery选择器
用来获取元素对象的
1. 基本选择器
| 名称 | 说明 | 语法 |
|---|---|---|
| id选择器 | 根据id来选择元素 | $("#config") |
| 元素选择器 | 根据标签来选择元素 | $("div") |
| 类选择器 | 更具类名来获取元素 | $(".username") |
备注:
2. 层级选择器
| 名称 | 说明 | 语法 |
|---|---|---|
| 后代选择器 | A B ,表示获取A元素内部的所有B元素 | $("#ul li") |
| 父子选择器 | A>B ,获取A元素内部子级标签中所有的B元素,不包括孙子 | $("#ul > li") |
| 下级选择器 | A+B ,获取和A元素平级的下一个B元素 | $("#ul+li") |
| 下下级选择器 | A~B ,获取和A元素平级的下面所有B元素 | $("#ul~li") |
备注:
3. 基本过滤器
| 名称 | 说明 | 语法 |
|---|---|---|
| :first | 获得当前元素中的第一个元素 | $("#spnMove:animated") |
| :last | 获得当前元素中的最后一个元素 | $("#spnMove:animated") |
| :even | 获得当前元素中索引号为偶数的元素,索引从0开始 | |
| :odd | 获得当前元素中索引号为奇数的元素,索引从0开始 | |
| :eq(inedx) | 获取指定索引的元素,索引从0开始 | |
| :gt(index) | 获取大于给定索引的元素,索引从0开始 | |
| :lt(index) | 获取小于给定索引的元素,索引从0开始 | |
| :header | 获取标题类型的元素 | |
| :animated | 获取正在执行的d动画效果元素 |
备注:
4. 属性选择器(不需要":")
| 名称 | 说明 | 语法 |
|---|---|---|
| [属性名] | 获得有该属性名的元素 | $("#abs[type]"),获得由type属性的元素 |
| [属性名=值] | 获得属性名等于值的元素 | |
| [属性名!=值] | 获取属性名不等于值的元素 | |
| [属性名^=值] | 获取属性名以值开头的元素 | |
| [属性名$=值] | 获取属性名以值结尾的元素 | |
| [属性名*=值] | 获取属性名含有值的元素 | |
| [以上选择器][xx][xx] | 复合属性选择器,多个属性同时过滤返回满足所有的结果 |
备注:
5. 表单对象选择器
| 名称 | 说明 | 语法 |
|---|---|---|
| :enable | 匹配所有元素 | |
| :disable | 匹配所有不可用元素 | |
| :checked | 选取匹配所有被选中的元素(单选框,多选框等) | $('input[type=checkbox]:checked') |
| :selected | 选取所有被选中项元素(下拉框) |
备注:
五. Jquery对象的属性和方法
1. attr和prop,设置对象属性
| 名称 | 说明 | 语法 |
|---|---|---|
| attr(属性名) | 用来获取一个属性的值 | |
| attr(属性名,属性值) | 用来设置一个属性对应的值 | |
| attr({属性名1:属性值1,xx}) | 设置多个属性,json格式 | |
| removeAttr(属性名) | 删除某个格式 | |
| prop格式同上! |
- 一个标签中的checked属性有返回值并且返回boolean类型
- 只要checked里面有值,那么它就返回为true
- prop可以设置属性的返回值(只要checked属性纯在,就返回true,设置成false就相当强删除该元素),也可以设置属性的value值;
备注:**prop用来操作dom对象所包含的属性**,
**attr用来操作自定义的属性**
2.常用的方法
| 名称 | 说明 | 语法 |
|---|---|---|
| val() | 通常用来操作标准的表单对象 | 用来获取value和设置value的值 |
| val | 打印一个构造,没有意义 | 没意义哦 |
| text() | 获取或改变指定元素的文本 | $("xx").text() |
| html() | 获取或改变指定元素的html元素 | $("xx").html |
3.Jquery的绑定事件和解绑时间
3.1.1 one 绑定一次
语法格式:one(eventTypes,[data],fn)
String,Object,Function
enecTypes:事件类型,可一可多;
data:要传递的数据,可省略;
fn:事件触发时执行的参数;
3.1.2 delegate 方式(个孩子绑定)
语法格式:delegate( selector, eventTypes, fn )
selector:子选择器
evenTypes:事件类型,可一可多;
fn:事件触发时执行的参数;
3.1.3 on 方式(1.7后,就只有这种方式了)
语法格式:on(eventTypes,[selector],[data],fn)
evenTypes:事件类型,可一可多;
selecotr:子选择器,可以省略;
data:要传递的数据,可以省略;
fn:时间触发时要执行的函数;
3.1.4 bind方式
bind(evenTypes,[data],fn);
evenType:事件类型,可一可多
data:要传递的数据参数,可省略
fn:触发事件时要执行的参数
Jq对象.bind(事件名,回调函数)
jq对象.bind({事件名:回调函数,事件名:回调函数});
3.2.1 unbind 解绑 bind事件
unbind(); -- 解除绑定所有事件
ubbind(eventType) -- 解除绑定所有事件
Jq对象.unbind("" "" ""); 中间以空格隔开
3.2.2 undelegate 解绑 delegate事件
undelegate(); -- 解绑所有的delegate事件
undelegate(evenType); -- 解绑指定的事件
3.2.3 off 解绑 on 事件,1.7之后就只有这个了
off(); -- 解绑所有事件
off(evenTypes,count); -- 解绑所有指定事件,count代表数量,但是不是Number类型的参数,"**"代表全部
六.Jqyery动画
太多,未完待续吧....
七.遍历
1. JQuery.each(data,fn)
//遍历函数
//index表示索引名,element表示元素名
$("ul li").each(function(index,element){
//this表示当前的
// console.log($(this).html())
});
2. 链式方法
| 函数 | 描述 |
|---|---|
| .add() | 将元素添加到匹配元素的集合中。 |
| .andSelf() | 把堆栈中之前的元素集添加到当前集合中。 |
| .children() | 获得匹配元素集合中每个元素的所有子元素。 |
| .closest() | 从元素本身开始，逐级向上级元素匹配，并返回最先匹配的祖先元素。 |
| .contents() | 获得匹配元素集合中每个元素的子元素，包括文本和注释节点。 |
| .each() | 对 jQuery 对象进行迭代，为每个匹配元素执行函数。 |
| .end() | 结束当前链中最近的一次筛选操作，并将匹配元素集合返回到前一次的状态。 |
| .eq() | 将匹配元素集合缩减为位于指定索引的新元素。 |
| .filter() | 将匹配元素集合缩减为匹配选择器或匹配函数返回值的新元素。 |
| .find() | 获得当前匹配元素集合中每个元素的后代，由选择器进行筛选。 |
| .first() | 将匹配元素集合缩减为集合中的第一个元素。 |
| .has() | 将匹配元素集合缩减为包含特定元素的后代的集合。 |
| .is() | 根据选择器检查当前匹配元素集合，如果存在至少一个匹配元素，则返回 true。 |
| .last() | 将匹配元素集合缩减为集合中的最后一个元素。 |
| .map() | 把当前匹配集合中的每个元素传递给函数，产生包含返回值的新 jQuery 对象。 |
| .next() | 获得匹配元素集合中每个元素紧邻的同辈元素。 |
| .nextAll() | 获得匹配元素集合中每个元素之后的所有同辈元素，由选择器进行筛选（可选）。 |
| .nextUntil() | 获得每个元素之后所有的同辈元素，直到遇到匹配选择器的元素为止。 |
| .not() | 从匹配元素集合中删除元素。 |
| .offsetParent() | 获得用于定位的第一个父元素。 |
| .parent() | 获得当前匹配元素集合中每个元素的父元素，由选择器筛选（可选）。 |
| .parents() | 获得当前匹配元素集合中每个元素的祖先元素，由选择器筛选（可选）。 |
| .parentsUntil() | 获得当前匹配元素集合中每个元素的祖先元素，直到遇到匹配选择器的元素为止。 |
| .prev() | 获得匹配元素集合中每个元素紧邻的前一个同辈元素，由选择器筛选（可选）。 |
| .prevAll() | 获得匹配元素集合中每个元素之前的所有同辈元素，由选择器进行筛选（可选）。 |
| .prevUntil() | 获得每个元素之前所有的同辈元素，直到遇到匹配选择器的元素为止。 |
| .siblings() | 获得匹配元素集合中所有元素的同辈元素，由选择器筛选（可选）。 |
| .slice() | 将匹配元素集合缩减为指定范围的子集。 |
八.表单校验
1. 格式
$("#form1").validate({
rules:{
},
messages:{
}
});
2. 自定义校验
$.validator.addMethod("自定义校验规则名字",function(value,element,params){
value 校验输入框的值
element 校验框
params 表示校验规则时传递的实际值
},错误信息);
/*
自定义校验规则，用来验证密码。长度6-12字符或数字,不能包含中文字符
addMethod()方法具有三个参数：
name:表示校验规则的名字，例如这里是 pwdFormat
method:表示处理自定义校验规则代码，这里需要给回调函数
function(value,element,params){
回调函数三个参数：
value:输入框输入的值，即要验证的值
element:表示要验证的输入框标签对象
params:使用校验规则时传递的实际参数 。 [6,12] 如果使用时传递的是多个值，
那么params就是数组，如果是单个值params就是变量
}
关于回调函数补充：如果满足校验规则，返回true，可以提交表单。不满足返回false，不可以提交表单
message:提示的错误信息，可以不书写，如果书写，那么在使用错误信息的时候就可以不书写了
*/
$.validator.addMethod("pwdFormat",function (value,element,params) {
//定义正则
// var reg=/^[0-9a-zA-Z]{6,12}$/;
var reg=new RegExp("^[0-9a-zA-Z]{"+params[0]+","+params[1]+"}$");
//判断
if(reg.test(value))
{
//说明合法
return true;//可以提交表单
}else
{
//说明不合法
return false;//不能提交表单
}
},"长度{0}-{1}字符或数字,不能包含中文字符");
九.元素操作
1. 元素追加
1.1 append()
- 追加到元素内部的最后面位置
1.2 prepend()
- 追加到元素内部最前面位置
1.3 appenTo() , prependTo()
-和上面两种相反
// 需求：创建一个li标签并且使用append追加到ul的最后面
/*
在jq中创建标签：$("创建的标签");
$("<li>222</li>") 创建li标签
*/
$("ul").append($("<li>222</li>"));
// 需求：创建一个li标签并且使用prepend添加到ul的最前面
$("ul").prepend($("<li>000</li>"));
// 需求： 创建一个li 并且使用appendTo添加到ul的最后面
$("<li>333</li>").appendTo($("ul"));
// 需求： 创建一个li 并且使用prependTo添加到ul的最前面
$("<li>-1-1-1</li>").prependTo($("ul"));
// 需求一：创建一个li使用after插入到bbb的后面 <li>bbb</li>
// $("#bbb").after($("<li>ccc</li>"));
// // 需求二：创建一个li使用before插入到bbb的前面
// $("#bbb").before($("<li>aaa</li>"));
// 需求三：创建一个li使用insertAfter插入到bbb的后面
$("<li>ccc</li>").insertAfter($("#bbb"));
// 需求四：创建一个li使用insertBefore插入到bbb的前面
$("<li>aaa</li>").insertBefore($("#bbb"));
2. 元素清空和删除案例
2.1 remove()
- 删除该元素
2.2 empty()
- 清空元素内部
//需求1：删除div
$("div").remove();
//需求2：清空ul
$("ul").empty();
Jquery基本教程(背还是要背的)的更多相关文章
- 值得 Web 开发人员学习的20个 jQuery 实例教程
这篇文章挑选了20个优秀的 jQuery 实例教程,这些 jQuery 教程将帮助你把你的网站提升到一个更高的水平.其中,既有网站中常用功能的的解决方案,也有极具吸引力的亮点功能的实现方法,相信通过对 ...
- JQuery强化教程 —— jQuery Easing
从jQuery API 文档中可以知道,jQuery自定义动画的函数.animate( properties [, duration] [, easing] [, complete] )有四个参数: ...
- jquery 基础教程[温故而知新二]
子曰:“温故而知新,可以为师矣.”孔子说:“温习旧知识从而得知新的理解与体会,凭借这一点就可以成为老师了.“ 尤其是咱们搞程序的人,不管是不是全栈工程师,都是集十八般武艺于一身.不过有时候有些知识如果 ...
- jQuery插件开发教程
jQuery插件开发教程 ——让你的jQuery水平提升一个台阶 要说jQuery 最成功的地方,我认为是它的可扩展性吸引了众多开发者为其开发插件,从而建立起了一个生态系统.这好比大公司们争相做平台 ...
- Jquery easyui 教程
Jquery easyui教程 目 录 1基本拖放... 4 2构建购物车型拖放... 5 3创建课程表... 8 4菜单和按钮Menu and Bu ...
- jQuery 实验教程
jQuery 实验教程 jQuery 简介.语法及事件处理 jQuery 以其特有的简练的代码风格,极大得改变了 JavaScript 代码编写的方式.本教程以实例代码为基础,讲解 jQuery 的使 ...
- jquery基础教程读书总结
最近静下心来看书才深刻的体会到:看书真的很重要,只有看书才能让你有心思静下心来思考. 重温<jquery基础教程> 一.事件 主要掌握常见的事件以及理解jquery的事件处理机制. 需要注 ...
- jQuery插件教程
http://www.cnblogs.com/Wayou/p/jquery_plugin_tutorial.html 非常不错的jQuery插件教程
- 大量Javascript/JQuery学习教程电子书合集
［推荐分享］大量Javascript/JQuery学习教程电子书合集,送给有需要的人 不收藏是你的错^_^. 经证实,均可免费下载. 资源名称 资源大小 15天学会jQuery(完整版).pd ...
- ［推荐分享］大量Javascript/JQuery学习教程电子书合集，送给有需要的人
不收藏是你的错^_^. 经证实,均可免费下载. 资源名称 资源大小 15天学会jQuery(完整版).pdf 274.79 KB 21天学通JavaScript(第2版)-顾宁燕扫描版.pdf ...
随机推荐
- 项目log4j日志管理详解
项目log4j日志管理详解 log4j日志系统在项目中重要性在这里就不再累述,我们在平时使用时如果没有特定要求,只需在log4j.properties文件中顶入输出级别就行了.如果要自定义输出文件,对 ...
- nodejs中的子进程，深入解析child_process模块和cluster模块
Node.js的进程管理 node遵循的是单线程单进程的模式,node的单线程是指js的引擎只有一个实例,且在nodejs的主线程中执行,同时node以事件驱动的方式处理IO等异步操作.node的 ...
- BZOJ 1492 货币兑换 Cash CDQ分治
这题n2算法就是一个维护上凸包的过程. 也可以用CDQ分治做. 我的CDQ分治做法和网上的不太一样,用左边的点建立一个凸包,右边的点在上面二分. 好处是思路清晰,避免了凸包的插入删除,坏处是多了一个l ...
- HDU3336 Count the string —— KMP next数组
题目链接:https://vjudge.net/problem/HDU-3336 Count the string Time Limit: 2000/1000 MS (Java/Others) ...
- 英特尔® Software Guard Extensions 教程系列：第一部分，英特尔® SGX 基础
英特尔® Software Guard Extensions 教程系列:第一部分,英特尔® SGX 基础 from:https://software.intel.com/zh-cn/articles/ ...
- python下setuptools安装
python下的setuptools带有一个easy_install的工具,在安装python的每三方模块.工具时很有用,也很方便.安装setuptools前先安装pip,请参见<pytho ...
- COGS 2581 无聊的会议V2
传送 题目大意 给定一个长为\(n\)的序列,定义\(y\)在三元对\((x,y,z)\)中成为中心轴当且仅当同时满足:\(a_x = a_y = a_z,y-x=z-y,x<y<z\)对 ...
- 【Lintcode】029.Interleaving String
题目: Given three strings: s1, s2, s3, determine whether s3 is formed by the interleaving of s1 and s2 ...
- 【LeetCode】062. Unique Paths
题目: A robot is located at the top-left corner of a m x n grid (marked 'Start' in the diagram below). ...
- TTS API 使用
#define SPCAT_VOICES L"HKEY_LOCAL_MACHINE\\SOFTWARE\\Microsoft\\Speech\\Voices" ...