了解jQuery

JQuery是一个兼容多浏览器的 类库，核心理念是write less,do more(写得更少,做得更多)。是一个快速的简洁的 框架，可以简化查询DOM对象、处理事件、制作动画、处理Ajax交互过程。在2006年1月由美国人John Resig在纽约的barcamp发布。

jQuery版本

1.x.x
兼容低版本浏览器IE8-
代码过于庞杂，性能不高

2.x.x
已经不支持IE低版本浏览器IE8-

3.x.x
3.0 版本是从 2.0 版本分支出来的，但由于改动过大，因此更新了主版本号
不支持IE低版本浏览器
性能大幅度提高（推荐使用）
..* (主版本-次版本-补丁)

下载与文档

官网下载
http://jquery.com/download/
CDN下载
https://www.bootcdn.cn
帮助文档
http://jquery.cuishifeng.cn/
下面内容只是对jQuery的部分描述，想了解具体全面的请查看文档

插件

插件(Plugin)也称为jQuery的扩展。以jQuery核心代码为基础编写的符合一定规范的应用程序。通过js文件的方式引用。

常用插件：
jqueryUI 官方插件，功能多且全面，
官网：www.jqueryui.com
jquery.validation 表单验证插件
官网：https://jqueryvalidation.org/
jquery.easyUI 是一组基于jQuery的UI插件集合
Demo：http://www.jeasyui.net/
bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目
官网：http://v3.bootcss.com/

使用插件：

导入的插件都放在lib的文件夹中，基于jquery的插件在使用引入前要引入jquery
<  src=\"../lib/jquery-3.2.1.js\"></ >
<  src=\"../lib/bootstrap-3.3.7-dist/js/bootstrap.min.js\"></ >

jQ常用原型对象的方法

css(attr[,val])

获取/改变元素style属性内联样式
取值：css(attr),css([‘color’,’text-align’]) <=> getComputedStyle[attr]
赋值：css(attr,val),css({attr:val});

val(v)

获取/设置匹配表单元素的值（等同于原生js中的value属性）
取值：input.val()
赋值：input.val(v)
v:字符串
v:数组（一般用于单选/复选框的勾选）
v:函数function(idx,val){ return 值} 函数内部一定要返回值

html()

等同于原生js中的innerHTML
取值div.html()：取得第一个匹配元素的html内容
赋值div.html(‘katsuki’)：设置匹配元素的内容

text()

取得所有匹配元素的文本内容。与html()用法相同

Class

addClass()/removeClass()
添加/删除类,支持多个类同时添加或删除

toggleClass()
如果存在（不存在）就删除（添加）类。

hasClass(类名)
检查当前的元素是否含有某个特定的类，如果有，则返回true

each(function(idx,ele){})

用于遍历jquery对象
return true; 跳过当前循环，进入下一个循环（等效原生js中得continue）
return false; 退出整个each循环（等效原生js中得break）

jQuery大部分方法的共性

无参数时为取值，带参数时为赋值
取值：取得第一个匹配元素的值
赋值：设置所有匹配元素的值

jQuery基本使用

获取jquery对象

jQuery(选择器|dom节点,上下文对象)$(选择器|dom节点,上下文对象)
上下文对象可以是选择器、jquery对象、dom节点
jquery对象只能用jquery的方法

jquery对象得到的是类数组
length 若length为0，说明获取不到该jquery对象
jquery 得到版本号，用于判断是否为jquery对象
[索引] 获取dom节点

dom节点与jquery对象的转换

vjquery对象转成dom节点
jquery对象[索引]

dom节点转成jquery对象
jQuery(dom节点)

延迟代码执行 jQuery(function($){})

jQuery(function($){
	//使用原理
	new jQuery().init(\".katsuki\");
	//约定俗成：使用jQuery对象的变量前加 $
	//调用的简化
	var $kasami = jQuery(\"#kasami\");
	//最简调用，$katsuki是jquery对象
	var $katsuki = $(\".katsuki\");
	console.log($katsuki);
	/*	输出打印得到数组
		jQuery.fn.init(2)
		0: div.katsuki
		1: div.katsuki
		length: 2
	*/
	//$katsuki[0]是dom节点，不是jQuery对象，不能继续调用jQuery方法
	//除非用$($katsuki[0])将其再转换为jQuery对象
	console.log($katsuki[0]);
	var $katsuki2 = $(\".katsuki\",$kasami);
	//获取到kasami里面的katsuki，数组形式
	console.log($katsuki2);
	//输出 1
	console.log($katsuki2.length);
	//输出 版本号
	console.log($katsuki.jquery);
	//jQuery对象调用方法，赋值时对应的类数组全部改动
	//获取时只获取第一个的对应值 0: div.katsuki
	console.log($katsuki.css(\"color\",\"#ccc\"));
    console.log($katsuki.css({color:\"#58bc58\",backgroundColor:\"pink\"}));
})

<div id=\"kasami\">
	<div class=\"katsuki\">katsuki</div>
</div>
<div class=\"katsuki\">katsuki</div>

jquery选择器

基本选择器

与js大体相同

表单选择器

:text
:radio //匹配所有单选按钮
:checkbox //匹配所有复选按钮
:selected //获取已选择的option元素
:checked //匹配所有被选中的元素(复选框、单选框等,option选项)

可见性

:hidden //匹配所有不可见元素(display:none)，或者type为hidden的元素
:visible //匹配所有可见元素

jQuery(function(){
	//得到katsuki所在的option
	var $selection = $(\":selected\");
	//得到被选中的复选框，单选框，option选项
	var $checked = $(\":checked\");
	//得到不可见元素
	var $hidden = $(\"#katsuki :hidden\");
//is(expr|obj|ele|fn)
//根据选择器、DOM元素或 jQuery 对象来检测匹配元素集合，如果其中至少有一个元素符合这个给定的表达式就返回true
	var $katsuki = $(\"#katsuki\");
	//输出 true
	console.log($katsuki.is(\".kasami\"));
})

<style>
	#katsuki .Grisaia{display:none;}
</style>
<body>
	<div id=\"katsuki\" class=\"kasami\">
		<div class=\"Grisaia\"></div>
	</div>
	<select>
		<option value=\"katsuki\">katsuki</option>
		<option value=\"kasami\">kasami</option>
	</select>
	<input type=\"checkbox\" checked/>
	<input type=\"checkbox\" checked/>
	<input type=\"radio\" checked/>
</body>

常用筛选器及其方法

筛选选择器

:odd/:even；筛选奇偶数

gt(n)匹配所有大于给定索引值的元素 （索引支持负数）
:lt(n)匹配所有小于给定索引值的元素 （索引支持负数）

:contains(katsuki) 筛选出包含“katsuki”的元素

筛选方法

first()/last(): 获取集合中第一个/最后一个元素

eq(index|-index): 获取第n个元素,n支持负数（表示从后面查找）

filter(选择器|jq对象|dom节点) 缩小匹配范围，将被匹配到的jq对象进行过滤，得到过滤后的jq对象，也就是得到满足条件。

not(选择器|jq对象|dom节点) 缩小匹配范围，将被匹配到的jq对象进行过滤，除去过滤后的jq对象，也就是得到不满足条件。

has(选择器|dom节点) 将匹配到的jq对象进行过滤，匹配到有这个儿子（子元素）的jq对象

jQuery(function){
	//获取到数组下标值为奇数，1 3
	$(\"#katsuki li:odd\").css(\'background-color\',\'pink\');
	//获取到数组下标值为偶数，0 2
	$(\"#katsuki li:even\").css(\'backgroundColor\',\'#58bc58\');
	//获取到下标值大于2的
	$(\"#katsuki li:gt(2)\").css(\'backgroundColor\',\'#ccc\');
	//获取包含kasami内容元素
	$(\"#katsuki li a:contains(kasami)\").css(\'color\',\'red\');
	//获取$(\"#katsuki li\")对象中下标为0的元素
	$(\"#katsuki li\").eq(0).css(\'color\',\'pink\');
	//获取$(\"#katsuki li\")对象过滤出下标值为奇数的
	$(\"#katsuki li\").fliter(\":odd\").css(\'color\',\'purple\');
}

<ul id=\"katsuki\">
	<li>katsuki</li> //0
	<li>katsuki<a herf=\" :;\">kasami</a></li> //1
	<li>katsuki</li> //2
	<li>katsuki</li> //3
</ul>

元素关系方法

查找子元素

find(expr|obj|ele): 查找后代元素
children([expr]): 取得匹配元素的所有子元素。

查找父级元素

parent([expr]): 获取父元素
parents([expr]): 取得所有父级元素

closest(expr|obj|ele): 从元素本身开始，逐级向上级元素匹配，并返回最先匹配的元素

offsetParent(): 返回第一个有定位属性(absolute,relative,fixed)的父元素,如果没有定位父级，则返回html元素

查找兄弟元素

next([expr]): 返回下一个同辈元素 => nextElementSibling
prev([expr]): 获取前一个同辈元素 => previousElementSibling
nextAll([expr]): 获取当前元素之后所有的同辈元素
prevAll([expr]) 获取当前元素之前所有的同辈元素
siblings([expr]) 获取当前元素的所有兄弟元素（除自身以外的所有兄弟元素 = * prevAll + nextAll）

jQuery(function($){
	var $kasami = $(\".kasami\");
	//获取kasami元素的后代元素中kastuki类名元素
	var $katsuki = $kasami.find(\".katsuki\");
	//获取到kasami元素的子元素a
	var $children = $kasami.children(\"a\");
	//获取kasami元素的父级元素
	var $Grisaia = $kasami.parent();
	//获取kasami元素的所有父级元素,包含body、html
	var $allParents = $kasami.parents();
	//获取span在最结构上最靠近的div
	var $span = $(\"span\");
	console.log($span.closest(\"div\"));
	//39的a元素的下个同级元素
	console.log($children.next());
})

<div class=\"Grisaia\">
	<div class=\"kasami\">
		<div class=\"katsuki\"><a href=\"#\">666</a></div>
		<a href=\"#\">39</a>
		<div><span>77</span></div>
	</div>
</div>

jQ对象节点的操作

创建jq节点

$(\"<div/>\")

元素添加

往父元素内部追加

append(content|obj|ele|fn): 给父元素添加最后一个子元素
appendTo(父元素)
prepend(content|obj|ele|fn): 给父元素添加第一个子元素
prependTo(父元素)

外部插入内容（添加为兄弟元素）

after(): 在元素后面插入内容
before(): 在元素前面插入内容
insertAfter(兄弟元素)
insertBefore(兄弟元素)

元素删除

remove() 删除元素
empty() 清空内容

元素复制

clone([Event[,deepEvent]])
Event：（true 或 false）是否复制元素的行为，默认为false
deepEvent: （true 或 false）是否复制子元素的行为，默认为Event的值

jQuery(function(){
	//父元素添加子元素
	var $katsuki = $(\"<div>katsuki</div>\");
	var $(\"body\").append($katsuki);
	//上面等效于下面
	$(\"<div>katsuki</div>\").appendTo($(\"body\"));
	
	//当前元素添加兄弟元素
	var $h2 = $(\"<h2>katsuki</h2>\");
    $(\"p\").after($h2);
    //上面等效于下面
    $(\"<h2>katsuki</h2>\").insertAfter($(\"p\"));
    //元素复制
    var $p = $(\"p\");
    $p.on(\"click\",function(){
        console.log(\"katsuki\");
    })
    //clone(true)，会将元素行为也复制，也有点击效果
    $p.clone(true).insertAfter($p);
	//$(\"p\").empty();
})


<body>
	<p>kasami</p>
</body>

jQ对象属性操作

dom属性

js中是点进行设置和取值
jQ中
prop(key,val) 添加属性
prop(key) 获取属性值

$(\"input[type=\'checkbox\']\").prop(\"checked\", true);
$(\"input[type=\'checkbox\' checked]\").prop(\"checked\");//true

html属性

js中setAttribute() getAttribute()
jQ中
attr(key,val) 添加属性
attr(key) 获取属性值

$(\"img\").attr(\"src\",\"katsuki.jpg\");

事件

事件绑定 on(type,[选择器],fn)

selector(选择器): 把本来绑定给selector的事件委托给它的父级.(fn的this指向被执行的selector)
可以给同一元素绑定多个同一事件
事件命名空间（对事件加以细分）
格式：事件类型.自定名字

$(\"#kasami\").on(\"click.ka\",\".katsuki\",function(){
	//这里由于传入中间参数，改变this指向传入的元素
    console.log(this); //输出 katsuki标签
})

<div id=\"kasami\">
	<div class=\"katsuki\">katsuki</div>
</div>

支持自定义事件的绑定

$(ele).on(\'katsuki\',function(){})
触发事件：$(ele).trigger(\'katsuki\');存在事件冒泡

触发事件：triggerHandler(type)
不会执行浏览器默认行为，也不会产生事件冒泡

off(): 清除绑定事件

没有参数，清除当前元素所有事件
有事件类型参数 ，清除当前元素所有该类型的事件

$(\"#kasami\").on(\"click.ka\",\".katsuki\",function(){
    console.log(666); 
})
$(\"#kasami\").on(\"click.tsu\",\".katsuki\",function(){
    console.log(18); 
})
//$(\"#kasami\")绑定事件全部清除
$(\"#kasami\").off();
//清除click.ka事件绑定，click.tsu未改动
$(\"#kasami\").off(\"click.ka\");

jq动画

基本动画

show(duration)、hide(duration) 同时改变元素的宽高、透明度
slideDown(duration,fn)、slideUp(duration,fn)、slideToggle(duration,fn) 改变元素的高度
fadeIn(duration,fn)、fadeOut(duration,fn)、fadeToggle(duration,fn)、fadeTo(duration,opacity,fn) 改变元素的透明度

jQuery(function(){
	$(\"#btn\").on(\"click\",function(){
		$(\"img\").fadeToggle(400);
	})
})

<img src=\"../img/katsuki.jpg\" width=\"200\" height=\"200\">
<input type=\"button\" value=\"显示隐藏\" id=\"btn\" />

自定义动画

animate (params,[speed],[fn])
animated
获取正在执行动画的元素，一般与is()方法配合使用，用于判断元素是否处于动画状态

jQuery(function(){
	$(\"#btn\").on(\"click\",function(){
		$(\"img\").animate({width:0},1000,function(){
			//动画结束后的执行函数
			$(\"img\").css(\"width\",\"200px\");
		})
	})
})

<img src=\"../img/katsuki.jpg\" width=\"200\" height=\"200\">
<input type=\"button\" value=\"显示隐藏\" id=\"btn\" />

动画队列

一个元素上的动画：
当animate中存在多个属性时，动画同时发生
当同一个元素链式调用animate时，动画是按顺序发生(队列)

不同元素上的动画：
默认情况下，动画同时发生
回调函数内的动画等到当前动画执行完后才接着执行

stop([clearQueue],[jumpToEnd])
不加参数：停止当前元素所有正在运行的动画。

垂直手风琴案例

jQuery(function($){
	//鼠标移入标题 h2 ，紧跟的同级 div 进行下滑动画
	//鼠标移出标题 h2 ，紧跟的同级 div 进行上滑动画
	
	//若不添加stop()，鼠标不断移入移出会触发多次动画效果
	//每次都会执行完，直到对应移入移出次数的动画执行完毕
	$(\".katsuki\").on(\"mouseover\",\"h2\",function(){
		$(this).next().stop().slideDown(1000);
	}).on(\"mouseout\",\"h2\",function(){
		$(this).next().stop().slideUp(300);
	})
})

<style<

继续阅读与本文标签相同的文章

无标签
最新文章 最热文章
收藏 打印

特别推荐 2026年05月18日 星期一

精彩发现

热门标签

阻止表单提交 窗口 关闭浏览器 清除 CDATA css文件 光标位置 坐标 javascrpt !important 超链接 数字

相关文章