---恢复内容开始---
jQuery 快速入门
jQuery介绍
1、jQuery是一个轻量级的、兼容多浏览器的JavaScript 库。
2、jQuery使用户能够更方便的处理HTML Document、Events、实现动画效果, 方便的进行Ajax交互, 能够极大的简化JavaScript编程。
它的宗旨就是:write less. do more.
jQuery 的优势
1、一款轻量级的JS框架, jQuery 核心js文件才几十kb,不会影响页面加载速度。
2、丰富的DOM 选择器用起来很方便,比如要找到某个DOM对象的相邻元素, JS可能要写好几行代码, 而 jQuery一行代码就搞定了, 再比如要将一个表格的隔行变色, jQuery也是一行代码搞定。
3、链式表达式: jQuery的链式操作可以把多个操作卸载一行代码里,更加简洁。
4、事件,样式, 动画支持。 jQuery还简化了js 操作css的代码,并且代码的可读性也比Js要强。、
5、Ajax操作支持。 jQuery简化了AJAX操作,后端只需返回一个json 格式的字符串就能完成与前端的通信。
6、跨浏览器兼容。Jquery基本兼容了现在主流的浏览器, 不用在为浏览器的兼容问题而伤脑筋了。
7、插件扩展开发。jquery有着丰富的第三方插件, 例如树形菜单, 日期控件, 图片切换插件, 弹出窗口等等基本前端页面上的组件都有对应的插件。
并且用jQuery插件做出来的效果很炫,并且可以根据自己需要去改写和封装插件, 简单实用。
Jquery内容
1、选择器,
2、筛选器
3、样式操作
4、文本操作
5、属性操作
6、文档处理
7、事件
8、动画效果
9、插件
10、each,data,Ajax
jquery版本
- 1.x:兼容IE678,使用最为广泛的,官方只做BUG维护,功能不再新增。因此一般项目来说,使用1.x版本就可以了,最终版本:1.12.4 (2016年5月20日)
- 2.x:不兼容IE678,很少有人使用,官方只做BUG维护,功能不再新增。如果不考虑兼容低版本的浏览器可以使用2.x,最终版本:2.2.4 (2016年5月20日)
- 3.x:不兼容IE678,只支持最新的浏览器。需要注意的是很多老的jQuery插件不支持3.x版。目前该版本是官方主要更新维护的版本。
维护IE678是一件让人头疼的事情,一般我们都会额外加载一个CSS和JS单独处理。值得庆幸的是使用这些浏览器的人也逐步减少,PC端用户已经逐步被移动端用户所取代,如果没有特殊要求的话,一般都会选择放弃对678的支持。
jquery对象
jquery对象就是通过jquery包装DOM 对象后产生的对象。jquery对象是jquery独有的。如果一个对象是jquery对象,那么它就可以使用jquery里的方法:
例如$("#i1").html()。
$("#i1").html()的意思是:获取id值为i1的元素html 代码。其中html()是jquery里的方法。
相当于 document.getElenmentById("i1").innerHTML;
虽然jquery对象是包装DOM 对象后产生的,但是jquery对象 无法使用DOM 对象的任何方法, 同理DOM 对象也不能使用
Jquery里的方法。
一个约定。我们在声明一个jquery 对象变量的时候 在变量名前加上$:
VAR $variable = Jquery 对象 var variable =DOM对象 $variable//Jquery对象转化成DOM 对象
拿上面那个例子来举例,jquery对象和DOM 对象的使用:
$("#i1").html();//jquery对象可以使用jquery的方法 $("#i1")[0].innerHTML;//DOM对象使用的DOM 的方法
JQUERY基础语法
$(selector).action()
查找标签
选择器
id选择器 用(“#”)
$("#id")
标签选择器 (“标签名”)
$("tagName")
class选择器: (".类名”)
$(".classname")
配合使用:
$("div.c1") //找到又c1 class类的div 标签
所有元素选择器:(“*”)
$("*")
组合选择器:中间用“,”隔开。
$("#id, .classname, tagname")
层级选择器: x,y可以为任意选择器
$("X Y"),// x 的所有后代y(子子孙孙) $("X>Y");//X 的所有儿子y(只是儿子,没有孙子,子孙) $("x+y");// 找到所有的紧挨在x后面的y $("x~y");// x之后所有的兄弟y
基本选择器:
:first //第一个 用法: $("#ul>li:first") :last //最后一个 用法:$("#ul>li:last") :eq(index)//索引等于index的那个元素 用法:$("ul>li:eq(3)") :even//匹配所有索引值为偶数的元素 从0开始计算 用法:$("ul>li:even") // 找到ul 下 li 标签里索引值为偶数的元素 :odd//匹配所有索引值为奇数的元素, 从0开始计数 用法:$("ul>li:odd") //找到ul下li标签里索引值为奇数的元素 :gt(index)//匹配所有大于给定索引值的元素 用法:$("ul>li:gt(3)") //找到所有 ul 下li 标签里索引值大于3 的元素 :lt(index)//匹配所有小于给定索引值的元素 用法:$("ul>li:lt(3)") //找到所有的ul下li标签里前3个元素 :not(元素选择器)//移除所有满足not条件的标签 用法:$("li:not(.cl)") //找到所有不包含cl样式类的li标签 :has(元素选择器)//选取所有包含一个或多个标签在其内的标签(指的是从后代元素找) 用法:$("li:not(:has(a))") //找到所有后代中不含a标签的li标签
属性选择器:
[attributeName] [attributeName=value] //属性等于 [attribute!=value]//属性不等于
例子:
<input type = 'text'> <input type="password"> <input type="checkbox"> $("input [type='checkbox']"); //取到checkbox 类型的input 标签 $("input[type !='text']") //取到类型不是text的input标签
表单常用筛选:
:text #文本格式
:password 密码
:file 文件
:radio html中的单选按钮
:checkbox 检查框 复选框
:submit 提交
:reset 重置 清零
:button 按钮
例子:
$(":checkbox")//找到所有的checkbox
表单对象属性:
:enable 可用的 :disabled 暂时禁用输入框 :checked 选择器选取所有选中的复选框或单选按钮 :selected 找到所有被选中的
例子:
1: <form> <input name="email" disable="disabled"/> <input name="id"/> <form> $("input:enabled") //找到可用的input标签 2: <select id="s1"> <option value="beijing">北京市</option> <option value="shanghai">上海市</option> <option selected value="guangzhou">广州市</option> <option value="shenzhen">深圳市</option> </select>
$(":selected") //找到所有被选中的option
筛选器
下一个元素:
$("#id").next() 找出id里的下一个标签 $("#id").nextAll() 找出id里后面的所有的标签 $("#id").nextUntil("#i2") 找到id后面的标签知道i2 为止
上一个元素:
$("#id").prev() 找id上一个元素 $("#id").prevAll() 找id上所有的元素 $("#id").prevUntil("#i2") 找id上所有的元素 直到i2为止
父亲元素:
$("#id").parent() 找id的父元素 $("#id").parents() 找当前元素的所有父辈元素 $("#id").parensUntil() 找当前元素的所有的父辈元素直到遇到那个匹配的元素为止
儿子和兄弟元素:
$("#id").children() //儿子们 $("#id").siblings() //兄弟们
查找元素:
$("#id").find()//搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法
补充:
.first() //获取匹配的第一个元素 .last() // 获取匹配的最后一个元素 .not() // 从匹配元素的集合中删除与指定表达式匹配的元素 .has() //保留包含特定后代的元素, 去掉那些不含有指定后代的元素。
---恢复内容结束---