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 ...
随机推荐
- CentOs7 配置nfs 系统
一.介绍 NFS 是Network File System的缩写,即网络文件系统.一种使用于分散式文件系统的协定,功能是让客户端通过网络访问不同主机上磁盘里的数据,主要用在类Unix系统上实现文件共享 ...
- 算法（Algorithms）第4版 练习 链表类 1.3.19~1.3.29
package com.qiusongde.linkedlist; import java.util.Iterator; import java.util.NoSuchElementException ...
- 我的.emacs文件，用于C/C++及shell编程。
1. [代码]我的.emacs文件,用于C/C++及shell编程.;;我的配置;;1.基本配置;;外观配置***************;;禁用启动画面(setq inhibit-startup-m ...
- Mybatis异常_02_Result Maps collection already contains value for
一.异常 1.异常信息 2.异常原因 XXXMapper.xml文件中存在重名对象,保持名称不要一样即可正常启动. 我的原因是namespace与其他mapper 一样. 3.可能的原因 (1)nam ...
- 每天一个Linux命令：目录
版权声明 更新:2017-04-19博主:LuckyAlan联系:liuwenvip163@163.com声明:吃水不忘挖井人,转载请注明出处! 1 文章介绍 在使用Linux的过程中总是发现有一些L ...
- bzoj 3771: Triple 快速傅里叶变换 FFT
题目大意: 给出\(n\)个互不相同的物品,每个物品有价值\(x_i(x_i \leq 40000)\)如果可以从中取一个或两个或三个物品.问能够组合出来的所有价值和对应的方案数,全部输出.取值时,\ ...
- p1020导弹拦截
传送门 P1020导弹拦截 题目描述 某国为了防御敌国的导弹袭击,发展出一种导弹拦截系统.但是这种导弹拦截系统有一个缺陷:虽然它的第一发炮弹能够到达任意的高度,但是以后每一发炮弹都不能高于前一发的高度 ...
- Restore Points 制定回退方案
Restore Points 制定回退方案 背景:Flashback Database 和 restore points 都可以提供一个基于时间点的回滚. 理论:1) Normal Restore P ...
- CF 1042A Benches——二分答案（水题）
题目:http://codeforces.com/problemset/problem/1042/A #include<iostream> #include<cstdio> # ...
- NOI.AC 31 MST——整数划分相关的图论(生成树、哈希)
题目:http://noi.ac/problem/31 模拟 kruscal 的建最小生成树的过程,我们应该把树边一条一条加进去:在加下一条之前先把权值在这一条到下一条的之间的那些边都连上.连的时候要 ...