jQuery

最新推荐文章于 2023-04-07 21:22:51 发布

katsukichan

最新推荐文章于 2023-04-07 21:22:51 发布

阅读量314

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.csdn.net/nep_chan/article/details/85052910

了解jQuery

jQuery是一个兼容多浏览器的javascript类库，核心理念是write less,do more(写得更少,做得更多)。是一个快速的简洁的javascript框架，可以简化查询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
<script src="../lib/jquery-3.2.1.js"></script>
<script src="../lib/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>

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()

等同于原生js中的innerText，不能解析html标签
取得所有匹配元素的文本内容。与html()用法相同

Class

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

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

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

each(function(idx,ele){})

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

jQuery大部分方法的共性

无参数时为取值，带参数时为赋值
赋值：设置所有匹配元素的值，返回this，为当前实例对象，因此可以链式调用
取值：取得第一个匹配元素的值，返回获取到的值

jQuery基本使用

获取jquery对象

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

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

dom节点与jquery对象的转换

jquery对象转成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="javascript:;">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>
   .katsuki{width:500px;border:2px solid #58bc58;}
   .katsuki h2{margin:0;padding:5px 10px;background-color: #58bc58;margin:1px;}
   .katsuki .content{display: none;padding:50px 20px;text-align: center;font-size:36px;background-color: #efefef;}
</style>
<body>
	<div class="katsuki">
	    <h2>标题1</h2>
	    <div class="content">内容1</div>
	    <h2>标题2</h2>
	    <div class="content">内容2</div>
	</div>
</body>

jQ盒模型属性

.offset():获取匹配元素相对于根元素的偏移量
返回一个对象，包含当前元素的top,left值

position():获取匹配元素相对(有定位属性)父元素的偏移量，如果没有定位父级，则相对于根元素(html)，返回一个对象，包含当前元素的top,left值。

width(v) = width;
取值/赋值,当传入v时，相当于css(‘width’,v);
innerWidth() = width + padding;
outerWidth() = width + padding + border;
outerWidth(true) = width + padding + border + margin;

jQuery(function($){
	//javaScript
	var katsuki = document.getElementById("katsuki");
	//width+padding
	console.log(katsuki.clientWidth); 
	//width+padding+border
	console.log(katsuki.offsetWidth);
	//到最近的有定位的父级元素的距离 <=> position()
	console.log(katsuki.offsetLeft);
    
	//jQuery
	var $katsuki = $("#katsuki");
	//width 100
	console.log($katsuki.width()); 
	//width + padding 120
	console.log($katsuki.innerWidth());
	//width + padding + border 140
	console.log($katsuki.outerWidth());
	//width + padding + border + margin 160
	console.log($katsuki.outerWidth(true));
	//得到left和top值的对象 {top: 10, left: 18}
	console.log($katsuki.offset());
})

<style>
#katsuki{
	width: 100px;
	height: 100px;
	background: "#58bc58";
	padding:10px;
	border:10px solid pink;
	margin:10px;
}
</style>
<body>
	<div id="katsuki"></div>
</body>

jQ Ajxa

$.ajax(settings)
type:请求类型，默认GET
url:数据请求地址（API地址）
data:发送到服务器的数据对象，格式：{Key:value}。
success:请求成功时回调函数。
dataType:设定返回数据的格式，json, jsonp, text(默认), html, xml, script
async：是否为异步请求，默认true

$.ajax({
	type: "get",
	url: "http://wthrcdn.etouch.cn/weather_mini?city=广州",
	//res即为请求得到的responseText，返回的数据
	success : function(res){
	    console.log(res);
	}
})

$.get(url,[data],[fn],[dataType]) type:’get’

$.get("katsuki.php");

$.post(url,[data],[fn],[dataType]) type:’post’

$.post("katsuki.php");

jQ cookie

下载地址
http://plugins.jquery.com/cookie/
使用

//引入对应js文件
<script src="../lib/jquery-3.2.1.js"></script>
<script src="js/jquery.cookie.js"></script>

//设置cookie
$.cookie('katsuki', 18,{ expires: 18 ,path: '/'});
//获取cookie
$.cookie('katsuki');
//删除cookie，带上设置时的路径
$.cookie('katsuki', '', { expires: -1 ,path: '/'});
//可选参数
$.cookie('katsuki', 18,{
    expires: 666,  //保存天数
    path: '/',	//保存路径
    domain: 'katsuki.cn', //访问域名
    secure:true	//安全性
})