web开发学习总结之jQuery

最新推荐文章于 2022-12-07 09:45:54 发布

原创最新推荐文章于 2022-12-07 09:45:54 发布 · 200 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#web #jQuery

web 专栏收录该内容

18 篇文章

订阅专栏

有啥问题直接查jQuery手册！

1 $()函数

jQuery是DOM编程领域的霸主，极大的简化了原生JavaScript的DOM编程。
其最核心的函数便是$()函数，能够根据CSS选择元素。
注意，$()函数选择出来的是jQuery对象，不是原生js的Dom对象。（jQuery对象和元素Dom对象可以互换，这里不写了）

1.1 支持的选择器

支持所有CSS2.1的选择器：

$("p")
$(".box")   
$("#box")   
$("#box ul li")   
$("li.special")   
$("ol , ul")
$("*")

支持部分的CSS3选择器。 TODO

1.2 筛选器

关于序号的。

$("p") 			所有的p
$("p:first")  	第一个p
$("p:last")	最后一个p
$("p:eq(3)")	下标为3的p
$("p:lt(3)")	下标小于3的p
$("p:gt(3)")	下标大于3的p
$("p:odd")		下标是奇数的p
$("p:even")	下标是偶数的p

特别的，eq可以单独提炼为方法，可以连续打点：

$("p").eq(3).animate({"width":400},1000);

2 CSS函数

读取样式。

/* 两种写法都ok */
$("p:first").css("background-color");
$("p:first").css("backgroundColor");

设置样式，分两种情况，只设某一个属性(k, v)时，和设置多个属性(写json)时。

/* 单个属性 */
$("p:odd").css("backgroundColor", "blue");

/* 多个属性写json */
$("p:lt(4)").css({
	"width" : 20,
	"height" : 20,
	"backgroundColor" : "red"
})

3 动画相关方法

3.1 animate动画

$("p").animate({"left":1000},2000,function(){
	$(this).css("background-color","red");
});

$("选择器").animate(终点JSON,动画时间,回调函数);

3.2 show()、hide()、toggle()

show()显示、hide()隐藏、toggle()切换

// []表示参数是可选的
$("div").show([时间],[回调函数]);		//让一个本身是display:none;元素显示
$("div").hide([时间],[回调函数]); 		//隐藏元素display:none;
$("div").toggle([时间],[回调函数]);		//切换显示状态。
						          		//自行带有判断，如果可见，就隐藏；否则显示。

3.3 slideDown()、slideUp()、slideToggle()

slideDown : 下滑展开
slideUp：上滑收回
slideToggle : 滑动切换

3.4 fadeIn()、fadeOut()、fadeTo()、fadeToggle()

fadeIn()淡入
fadeOut()淡出
fadeTo() 淡到那个数
fadeToggle() 淡出入切换

3.5 stop()

stop(是否清除队列,是否瞬间完成当前动画)

stop可以用来防止动画的积累：

//连续打点语法，先清除所有的动画队列，然后执行新的动画
$("div").stop(true).animate({"left":100},1000);

3.6 finish()

finish()瞬间完成所有动画队列！

$("div").finish();

3.7 delay()

delay延迟，可以使用连续打点，必须放在运动语句之前。

$("div").delay(1000).animate({"left":500},1000);
$("div").delay(1000).slideUp();
$("div").delay(1000).hide(1);   //必须写1，写1了就是运动

3.8 is()

is()方法表示身份探测，返回true、false。
is()方法表示身份探测，返回true、false。
is表示“是不是”，而不是“是”
比如，判断点击的这个p是不是有t这个类：

$("p").click(function(){
	alert(   $(this).is(".t")    );
});

is里面可以写筛选器：
判断点击的这个p是不是序号是奇数：

$(this).is("p:odd")

判断点击的这个p是不是序号小于3：

$(this).is("p:lt(3)")

还可以用来判断这个元素是否在运动中。

is(":animated")

4 jQuery节点相关方法

4.1 jQuery中的节点关系相关方法

4.1.1 children()

获取所有亲儿子节点。就是儿子，孙子不在children()里面。

$("#box").children().css("background-color","red");

4.1.2 find()

获取所有后代元素，返回的是自己的后代所有元素的列表。

$("#box").find("p").css("background-color","red");

4.1.3 parent()

获取亲爸爸。任何元素都只有一个亲爸爸。

$("p").parent().css("background-color","red");

4.1.4 parents()

获取这个元素的所有的祖先节点。

4.1.5 siblings()

获取该节点的亲兄弟，方法参数可以加选择器、筛选器

$(".xiaoming").siblings(":odd").css("background-color","red");

4.1.6 其它

// prev()       前一个兄弟
// next()		后一个兄弟
// prevAll()	前面所有兄弟
// nextAll()	后面所有兄弟

4.2 jQuery中的节点操作相关方法

4.2.1 append()

往最后添加。
父亲.append(儿子)

$("#box").append("<p>么么哒</p>");

或者

var $obj = $("<p></p>");
$obj.css("background-color","red");   //jQuery对象就可以直接调用css方法
$("#box").append($obj);

4.2.2 appendTo()

往后面添加。
儿子.appendTo(父亲)

$("<p>么么哒</p>").appendTo($("#box"));

4.2.3 prepend()

prepend 插入为第一个儿子。

 $("p").prepend("<b>Hello world!</b>");

4.2.4 after、before

每一个选中的元素都插入兄弟，after在后、before在前。
比如HTML结构：

<div id="box">
	<p>哈哈</p>
	<p>嘻嘻</p>
</div>

执行代码：

$("p").after("<h3>我是h3</h3>");

HTML将变为：

<div id="box">
	<p>哈哈</p>
	<h3>我是h3</h3>
	<p>嘻嘻</p>
	<h3>我是h3</h3>
</div>

4.2.5 insertBefore、insertAfter

比如HTML结构：

<div id="box">
	<p>000</p>
	<p>111</p>
	<p>222</p>
	<p>333</p>
	<p>444</p>
	<p>555</p>
</div>

代码：

$("<p>么么哒</p>").insertBefore($("p")[2]);

HTML结构将变为：

<div id="box">
	<p>000</p>
	<p>111</p>
	<p>么么哒</p>
	<p>222</p>
	<p>333</p>
	<p>444</p>
	<p>555</p>
</div>

4.2.6 wrap、warpAll

在外面包裹。

$("a").wrap("<span></span>");     //每个a都用span包裹起来
$("a").wrapAll("<span></span>");  //所有a都用span包裹起来

4.2.7 empty()

$("p").empty();

等价于

$("p").html(“”);

4.2.8 remove()

删除页面上所有p标签：

$("p").remove();

4.2.9 clone()

克隆节点。
如克隆ul li里面的第1个，然后ul追加：

$(“ul”).append($(“ul li”).eq(0).clone());

反过来：

$(“ul li”).eq(0).clone().appendTo($(“ul”));

5 查找、定位方法

5.1 eq()

$()函数将返回一个对象队列，用eq来精确选择这个序列中的某个元素。具体是第几个要看选择器怎么选。

<div class="box1">
	<p></p>
	<p class="teshu"></p>
	<p class="teshu"></p>
	<p></p>
</dv>
<div class="box2">
	<p class="teshu"></p>
	<p class="teshu">这是只螃蟹，他想红！</p>
	<p></p>
	<p></p>
</div>

$(".box2 p").eq(1)
$("p").eq(5)
$(".teshu").eq(3)
$(".box2 .teshu").eq(1)

5.2 index()

返回这个元素在亲兄弟中的排名，无视选择器怎么选。

$(".teshu").click(function(){
	alert($(this).index());
})

5.3 each(callback)

遍历选择的节点，然后执行回调中的操作。

$("p").each(function(i){
	$(this).animate({"width":50 * i},1000);
});

5.4 size()和length属性

jQuery 对象中元素的个数。
前面$()的元素页面上一共有几个，length、size()返回的都是同一个数值，就是个数。

$("p").length
$("p").size()

5.5 get()

get()方法和eq()方法基本一致，都仰赖$()的序列。
eq()返回的是jQuery对象，而get()返回的是原生JS对象。jQuery对象后面要跟着jQuery方法，原生对象后面要跟着原生属性、方法：

$("p").get(2).innerHTML = "哈哈哈哈哈哈";

等价于

$("p").eq(2).html("哈哈哈哈哈哈");

也等价于

$("p").eq(2)[0].innerHTML = "哈哈哈哈哈哈";

6 事件监听

点击事件。

$(".box1").click(function(){
	//点击box1之后做的事情
});

事件监听不多说，具体查jQuery文档。

7 Ajax实现

Ajax的原理看这里。

7.1 get()方法

$.get("a.json"  ,   {"id":1,"name":"汤姆猫儿"}  ,  function(text){
	alert(typeof text);
});

或

$.get("a.json?id=1&name=杰瑞鼠"  , function(text){
		alert(typeof text);
});

7.2 post()方法

$.post("a.json",{"id":1,"name":"穷查理宝典"},function(data){
	alert(typeof data);
	alert(data.content[2].id);
});

7.3 $.ajax()方法

$.ajax("b.json",{
	//请求类型
	"type"	:   "get",
	//传到服务器上的数据
	"data"	: 	{
		"name":"xiaoming",
		"age" :10
	},
	//成功做的事情
	"success" : function(data){
		alert(typeof data);
	},
	//错误做的事情
	"error"	:   function(XMLHttpRequest, textStatus, errorThrown){
		alert(errorThrown);
	}
});