管中窥豹——初识Jquery方法

发表于   |   分类于 ，   |  

##写在前面
关于JQ的常用方法(API)我感觉，其实如果JS学的还行，对于JQ的一些方法完全就是水到渠来的事。。。好了不多说，下面是我这段时间整理的一下常用发发，以便自己早上起来打炉石时候还能记些东西- -

个人总结的一些JQ基础

jquery的几种写法.

这里和原生JS的window.onload=function({code})类似,jq也有几种类似的写法 分别是

1
2
3
4
5
$(document).ready(function({code}))

$(function({code}))

$().ready(function({code}))

window.onload与$(document).ready()的区别

  • window.onload是页面绘制完成之后执行——即所有东西都加载完成后在执行.

  • $(document).ready()当html绘制完成之后就执行。差别还是很明显的。特别是对于如何要操作img图片之类的元素。就需要把代码放到onload后面

$node.text()与$node.html()的区别

这个区别还是很明显的.

1
2
3
4
5
6
7
8
9
$node.text()主要是针对于文本节点。
$node.html()则是所有的元素节点
例如
<div id="wrap">
    <span>Z-one
     </span>
</div>
$("#wrap").text()//Z-one
$("#wrap").html()//<span>Z-one</span>

$.extend 的作用

对于这个，我记得我之前写过一个JS的一个深拷贝，想着当初那么长的代码。。。。结果到JQ这个来 就一个接口的事- -。。。。。
$.extend主要作用就是两几个对象合并到第一个对象里面，如果不想改变其他对象的值，只要将第一个参数弄成空数组就行。
例如：

1
2
3
4
var a=[1,2,3,4,5]
var b=[4,4,4]
var c=$.extend({},a,b)
最后C=[4,4,4,4,5]

这个就是浅拷贝很好理解，我任务extend浅拷贝还是挺无聊的.只要后面有的 完全覆盖，不管前面数组的感受。。完全没道理啊，不信看下面这个代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
var a={
		name:"Z-one",
		age:"23",
		like:[
			"wow",
			"lushi",
			"javascript"
		],
		other:{
			where:"宜昌",
			width:"ssss"
		}
	}
	var b={
		name:"lirui",
		age:"22",
		like:["run","play"],
		other:{
			where:"武汉",
			xisw:"汉口"
		}
	}
	var c=$.extend({},a,b)
	console.log(c)

直接看图，打起来太费劲了。
示意图
可以看到如果是对于这种对象里面套着对象和数组，如果用之前那种暴力的浅拷贝就不行了，很明显这里我们需要使用到深拷贝了.方法也很简单，方法也很简单，只要用到这个参数就行。$.extend(true,{},a,b)
代码和上面类似

1
var c=$.extend(true,{},a,b)

示意图
这个可以看出来深拷贝 好处 就是我先看我这个你原来有没有，如果有，就仅替换和我相同的，还不是以前浅拷贝的那种.不管啥，我直接覆盖

关于jquery的链式调用

Jquery的链式调用好处我感觉就一点：

  • 好处：节省代码,也很好理解逻辑
  • 原理：因为可以理解jquery调用后返回的是this值，而不是原生JS的那种的undefined.
  • 感觉好强大，但是我并不是很想用，主要是强迫症，，代码看起来总是感觉少了点什么。。。

JQuery ajax 中缓存怎样控制?

jquery ajax 缓存的控制，没记错应该是cache,关于缓存这里一时半会也说不清楚。过几天我整理ajax的时候专门说下浏览器缓存的事.一般jquery设置是否缓存为：

1
2
3
$.ajax({
    cache:true//true为由缓存，false为无缓存。
})

Jquery中data的作用.

这里data 作用只要是存放一些变量。懒加载就是利用貌似就用到过这个

这次真的是jquery的一些常用方法

给元素 $node 添加 class active，给元素 $noed 删除 class active

1
2
$node.removeClass("active")//删除一个元素。
$node.addClass("active")//添加一个元素。

展示元素$node, 隐藏元素$node

这里展示有两种,一种是直接消失(盗贼6费的那个职业卡),一种就是单隐单现的那种消失。两种都举个例子

1
2
3
4
5
$node.hide()//这个是直接消失..利用的也就是display:none;
$node.show()//这个是出现，医用的是display:block

$node.fadeOut(1000)//这个是淡隐,我感觉是利用的opacity
$node.fadeInt(1000)//这个是淡现。

获取元素$node 的 属性: id、src、title， 修改以上属性

好了不多说，我们直接代码,关于Jquery读取属性有两个方法：

  • $node.prop 主要是偏向于于元素的固有属性，ID,src，title之类的
  • $node.attr 只要是偏向于于认为给元素添加的一个属性。。但是要操作固有属性也是可以的。
    1
    2
    3
    4
    5
    6
    7
    8
    <body>
    	<a href="http://liruihaod.github.io" id="box" title="测试下">aaa</a>
    </body>
    <script>
    	$("#box").attr("id"，"ceshi")
        $("#box").prop("title","Z-one")
        $("#box").attr("data-src","测试下")
    </script>

关于添加和插入元素

其实这个也和元素JS类似，而且jquer创建元素直接$(code)，简直是张手就来.那我就不废话啦.直接上代码

1
2
3
4
5
6
7
8
9
<body>
	<div id="wrap"></div>
</body>
<script>
        //把一个新建元素添加到目标元素末尾
		$("<div>Z-one</div>").appendTo("#wrap")
        //在目标元素开头添加一个新元素.
		$("#wrap").prepend($("<div>现代魔法</div>"))
</script>

关于jquery里面的删除

关于jqeury里面删除有两个方法，分别是：

  • $node.remove();

  • $node.empty();

两者的区别也很好理解，从单词就能看出来，remove是移动，包括选中元素和其子集，empty的意思就是空，很明显就只包括被选中元素的子集，被选中元素并不会被删除。

如何获取$node的宽度，高度.

其实这里获取高度，有几种。具体还是看代码吧

1
2
3
4
5
6
$node.height()//获取元素的内容高度
$node.innerHeight()//内容高度加padding
$node.outerHeight()//内容高度加padding+border
$node.outerHeight(true)//内容+padding+border+margin

获取宽度和上面的类似

如何获取获取窗口滚动条垂直滚动距离

额外提一点.滚动事件是scroll

1
2
3
4
5
$(window).scrollTop()//窗口滚动条的垂直距离
$(window).scrollLeft()//窗口滚动条的水平距离
$node.offset()//这个是获取元素的X,Y的距离
$node.offset().top//这个是获取垂直距离
$node.offset().left//这个是获取水平距离

如何修改$node的样式

这里需要用到jquery的一个css方法.
看个例子

1
2
3
4
$("#ct").css({
			"width":10,
			"background":"green"
		})

具体差不多就是这样的。这里面px可写可不写

jquery如何遍历

jquery遍历主要是用药each方法,说到了each，也说下jquery的事件代理。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<body>
		<div id="ct">
			<ul>
				<li>1</li>
				<li>2</li>
				<li>3</li>
				<li>4</li>
			</ul>
			<div>点我试试？？？</div>
		</div>
</body>
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.js"></script>
		<script>
		//事件代理
			$("#ct").on("click","li",function(){
				console.log($(this).text())
			})
			//遍历,分别给ul的每一个子元素添加一个类。
			$("#ct ul").each(function(){
				$(this).addClass('active')
			})
		</script>

如何在jquery中查找元素？

这里需要只用$node.find()方法

1
2
3
4
5
6
$node.find("#ct")//在目标node中寻找id为#ct的元素。
$node.children()//这个是获取元素的子元素.
$node.children().eq(1)//这个是获取具体的元素.
$node.first()//这个是直接获取第一个元素。
$node.parent()//这个是获取这个元素的父元素。
$node.parents()//获取这个元素的前辈元素。

如何获取选取元素的个数？

这里有两个方法：

  • $node.size()

  • $node.length

看了下jquery的源码发现

1
2
3
size: function() {
return this.length;
}

感觉在jquery中使用size()和length没有什么区别。如何要说区别可能就是：

  • size()值只对于jqeury，而length 是dom和javascript的一个属性.length在原生JS中也可以使用。

  • 另外size多了一个函数的调用，效率可能会稍微低一点点。

另外用$node.index()来判断这个元素在排第几位

另外贴下今天写一简单代码。也是用到了一些jqeury的方法

一个很简单的把小写转换为大写

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	#wrap{
		width:100px;
		height:100px;
		margin:40px auto;
	}
	#wrap .active{
		outline-color: red;
	}
	</style>
</head>
<body>	
		<div id="wrap">
		<input type="text" id="text"  placeholder="我会自动转换为大写的"> 
		</div>
</body>
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.js"></script>
		<script>
			$("#text").on("keyup",function(){
				$(this).val($(this).val().toUpperCase())
			})
			$("#text").focus(function(){
				$(this).addClass('active')
			})
			$("#text").on("blur",function(){
				$(this).removeClass('active')
			})
		</script>
</html>

[代码预览](http://1.liruihaod.applinzi.com/Jquery/input.html)